問題タブ [user-experience]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - JQuery JEditable - 目に見える編集ボタンを追加する方法は?
私はこのプラグインを気に入っていますが、現実には、ほとんどの人はテキストをクリックして編集できることに最初は気づきません。
理想的には、テキストの横にボタンを追加するか、ユーザーにははっきりと見えるが ajax 経由で送信されることのない単純な [編集] リンクを追加するとよいでしょう。
何か案は?
user-interface - ユーザビリティ/UIデザイン/UXなど-プロジェクトのドキュメント化
私はソフトウェア開発者であり、ASP.NET(3.5 / 2008、Webクライアントソフトウェアファクトリーを使用)を使用してWebサイトを実装するプロジェクトに取り組んでいます。私はプロジェクトのUI/UXデザインドキュメントの作成を任されていますが、どこから始めればよいのかよくわかりません。
私は3年間、レイアウトとスタイルのガイドライン/ルールを含む正式なUIデザインドキュメントがあった1つのプロジェクトに参加しました(たとえば、アプリケーションにはヘッダー、ナビゲーションなどがあり、リンクはカラーAである必要があり、ポジティブアクションのボタンである必要があります)右側にある必要がありますなど)。後から考えると非常に役に立ちました。ドキュメントでCSSクラスを定義することさえ、誰かがそれだけの努力を払ったことを感謝します。ただし、ドキュメントは既存のアプリケーションに基づいており、ビジネスの全体的なコーポレートアイデンティティに準拠しています。
現在のプロジェクトは新しいプロジェクトであり、現時点では明確に定義された要件がありません(はい、私は知っています...要件があまりないときにどのように設計しますか...私は逸脱します)。どの機能が正確に必要になるかを知るのは難しいです。2つの異なるユーザータイプ/ペルソナがありますが、このドキュメントでは正式な調査は行われません。また、企業のアイデンティティについてはよくわかりませんが、ロゴの使用に関してビジネスにいくつかのルールがあります。これについては、数日以内にさらに詳しく説明します。
だから私は少し暗闇の中にいて、最後にきれいな写真が撮れることを期待して、キャンバスに絵の具を投げています(私がジャクソン・ポロックだった場合のみ)。
このドキュメントには何を含めますか?これは、開発者だけでなく、ビジネス(クライアント)も対象としています。私は以下だけを考えることができます:
- レイアウト-ヘッダー、フッター、コンテンツ、ナビゲーション
- スタイル-予想されるさまざまなコンポーネントのカラーパレットとスタイル
- ユーザーインタラクション-ユーザーがアクションを実行し、モーダルダイアログによって通知されるのを待つ必要がある場合、検証はAJAXを使用して行われ、ナビゲーションはコンテキストに依存する必要があり、タスクは最小限のクリック/ナビゲーションなどで実行される必要があります。
誰かがそのようなドキュメントを作成した経験、またはUIデザインのための既知の、試行され、テストされたプロセスを持っていますか?
ありがとう、
ジェームズ
html - HTML で XFN を使用する必要があるのはなぜですか?
XFN (XHTML Friends Network)を使用する利点は何ですか? これは複数のブログやソーシャル ネットワーキング サイトで見たことがありますが、なぜ役立つのかよくわかりません。CSS3 でこれらの要素のスタイルを設定し、JavaScript で選択できる以外に、どのような利点がありますか? XFN を実際に利用してユーザー エクスペリエンスを強化しているサイトをご存知ですか? また、XFN に類似した代替手段はありますか?
user-interface - ユーザーエクスペリエンスを向上させるグリッドスクロール
いくつかの検索基準に基づいてレポートを表示するイントラネット Web ページがあります。検索基準のコントロールはページの上部にあり、レポート グリッドはページ上の唯一のコンテンツです。通常、グリッドには 50 ~ 100 行以上が表示され、スクロールが必要になります。UX の観点から、どのページ デザインがより適切か:
垂直スクロールバーと固定ヘッダーを備えた固定サイズのグリッド。
- このアプローチの利点は、ユーザーがグリッドを垂直方向にスクロールしても、ヘッダーが所定の位置にとどまり、常に表示されるため、レポートの内容を理解しやすくなることです。フィルター基準も常に表示され、ページの上部にスクロールしなくても変更できます。
- 欠点は、グリッドのサイズを固定する必要があり、ブラウザー ウィンドウのサイズによっては、2 つの垂直スクロール バーと 2 つの水平スクロール バー (標準のブラウザー スクロールバーとグリッド スクロールバー) が表示される可能性があることです。ユーザーの画面サイズがわかっているため、ブラウザー ウィンドウを最大化してページを最適化できるため、この問題は多少緩和される可能性があります。
レコード数に基づいてグリッドのサイズを調整します。
- 利点は、標準のブラウザ スクロールバーのみが表示されることです。
- 欠点は、ユーザーが下にスクロールすると、ヘッダーとフィルター基準が見えなくなることです。
ページングを使用する必要があるほどレコード数が多くないため、ページングを使用したくないことに注意してください。ユーザーは通常、結果をスキャンするのが難しくなるため、ページングを好みません。
これはやや主観的な質問かもしれませんが、非常に一般的であり、アプローチ方法に関する明確な UX ガイドラインが必要だと思います。
user-experience - 推奨される最小のボタンサイズ
通常の状態で推奨される最小のボタンサイズはありますか?
「推奨」とは、次のような文書で規定されていることを意味します。
- AppleHCIガイドライン
- WindowsUXガイドライン
- またはいくつかのISO規格。
「通常の」状態とは、次のことを意味します。
- デスクトップ/オフィスでの使用
- 標準の96dpiモニター解像度
- ポインティング用のマウス/タッチパッド(タッチスクリーンなし)
- 障害のない、または視覚障害のあるユーザー
- 標準の「テーマ」(大きなフォント/アイコンなし)
html - アクティベーションコードを入力するためのUI要素
いくつかの入力を評価するユーザビリティの問題が少しあります。
私のサイトの最初のページには、ユーザーがログインするためのコントロールと、新しいユーザーがアクティブ化するためのコントロールの2つのグループが含まれています。
問題は後者にあります。ユーザーがサービスにサインアップすると、XXXX-XXXX-XXXX-XXXXの形式のアクティベーションコードを受け取ります。現時点では、これを4つの別々のテキストフィールドに入力する必要があります。これにJavaScriptを追加して、テキストフィールド間を単一のコントロールであるかのように自動的に前後に移動します(これは非常にうまく機能します)が、問題は、ユーザーがデータをそこに貼り付ける方法がないことです。これは少し苦痛です。
これは大きな問題ではありませんが、私のサイトを初めて体験する人は少しイライラするものであり、アクティベーションコードを含む電子メールと私のページの間を行ったり来たりする必要があることを意味する可能性があります。それは明らかに最適ではありません。
この時点で、明らかに明白な答えは、アクティベーションコードを1つのテキストフィールドに入力することだと考えているでしょう。そして、あなたは正しいでしょうが、これを行うと、1つの非常に重要なことが失われます。1つのフォームと他のフォームの間の主要な視覚的差別化要因を失います。何かを分析します。現時点では、事実上、ページには2つの異なる形状の穴があり、ユーザーデータは明らかにそのうちの1つにしか適合しないため、ある程度、どちらの形式がそれらに関連するかは簡単です。
それで、誰かがこれに対する良い解決策を持っていますか?唯一の制限は、すべてのコントロールを1つのページに保持する必要があるということです。
助けてくれてありがとう。
編集:
これまでのすべての入力に感謝します。そのすべてのビットが貴重でした。私は現在、最善の解決策は単一のものではなく、実際には全体をより使いやすくするためのさまざまなアプローチの融合であると考えています。
その上で、あなたのすべての提案に基づいて、これが私がやろうとしていることです:
- 購入メールで、クエリ文字列にアクティベーションコードが含まれるように、最初のページへのリンクを設定します。これを確認するために最初のページを設定し、それらをまっすぐに転送します。これはおそらく、大多数のユーザーが最初のページを見ることさえできないことを意味しますが、それでも人々が他の手段でコードを受け取り、直接入力しなければならない場合があります
- インラインラベルとして「XXXX-XXXX-XXXX-XXXX」を使用して、4つのテキストフィールドを1つのテキストフィールドに変換します。
- エラー画面にダンプするだけでなく、誤ってアクティベーションコードをここに入力したユーザーを転送するように、ログインコントロールを設定します。
そもそもなぜそれを含めなかったのかはわかりませんが、現在の実装を確認したい人のためのURLは次のとおりです(イタリア語であるという事実を許さなければなりませんが、何が何であるかはかなり簡単なはずです)。
私が使用しようとしているもののほとんどを含むブライアンに答えを与えました。私が必要な評判を持っていれば、彼らがすべて助けてくれたので、私はあなたのすべての答えに投票するでしょう。再度、感謝します。
iphone - 2つの値を入力して3番目を計算するためのiPhone UX?
ユーザーに 3 つの値のうち 2 つを要求し、それらを使用して 3 番目の値を計算するビューを iPhone に表示しようとしています。使い勝手に少々苦戦中。
1 つのオプションは、それぞれラベル、テキストフィールド、およびボタンを含む 3 つの行を持つことです。タップされたボタンがオンになっている行が計算される値です。私はこのアプローチがあまり好きではありません。ビューが 2 つの多くのボタンでごちゃごちゃになっているからです。
ユーザーが2つの値しか入力しなかった場合に実行できる1つのボタンを使用できるようにしたいと思います。空の値を計算できました。
もう 1 つのシナリオは、3 番目のテキスト フィールドを自動的にクリアして、常に空にすることです。(たとえば、値 1 を入力し、値 2 を入力し、値 3 をクリアし、ボタンをタップすると値 3 が計算されます) このようにテキスト フィールドがクリアされると、ユーザーは苦労すると思います。
ユーザビリティの専門家は、より優れたソリューションを提供できますか?
user-interface - 試用ユーザーの初回体験を向上させる方法
試用ユーザーが製品を初めて使用するときのユーザー エクスペリエンスを向上させるためのアイデアを探しています。この製品は特定のドメインを対象としており、さまざまな機能/ワークフローを備えています。製品の経験豊富なユーザーは、機能を組み合わせて目的の結果を得る興味深い方法を自然に見つけます (プログラマーの観点から IDE を使用するようなものです)。試用ユーザーは、製品のすべての機能を限られた方法で使用できます (例:は検索機能であり、試用ユーザーは上位 20 件の結果のみを表示するか、100 回のみ検索を許可される場合があります)。私の質問は次のとおりです: 試用期間中、特にユーザーが製品をあきらめる前の最初の 20 ~ 60 分で、試用ユーザーが製品の可能性を探求/理解するのを助ける最善の方法は何ですか?
編集 1: 製品はデスクトップ アプリ (JNLP 経由で提供されるため、インストールは不要) であり、コメントで指摘されているように、この場合は期待が異なる場合があります。とはいえ、多くの Web アプリケーションは仮想デスクトップ形式をとっているため、すべての提案を歓迎します。
jquery - IE がユーザーに Active X の警告を表示させずに jQuery 機能を実装するにはどうすればよいでしょうか?
本質的に、構築中のサイトに jQuery 機能を実装したいのですが、Internet Explorer ユーザーが [ブロックされたコンテンツを許可する] をクリックする必要はありません。この機能は、Safari、Chrome、および Firefox で正常に動作します。ユーザーに Active X の警告を表示するのは IE だけです。
次の jQuery サイクル プラグインを使用しています: http://malsup.com/jquery/cycle/
ユーザーがサイトを使用するときに Active X メッセージをクリックしなければならないという事実を受け入れなければならないのではないかと考えましたが、Zendesk (www.zendesk.com) は同じ実装を使用しており、そのサイトではプロンプトが表示されません。警告とともに。
私が間違っていることについてのアイデアをいただければ幸いです。
user-interface - 言語リストの表示: どの言語を使用すればよいですか?
ときどき、利用可能な言語のリストを表示することに直面します。そのたびに、自分自身に次のように問いかけます。
言語を表示する方が良いですか:
- 現在選択されている言語
- 英語
- ボタン/リスト項目に応じた言語で
例:
- 英語
- ドイツ人
- フランス語
また
- 英語
- ドイツ語
- フランス語
どちらを使用すべきか、より礼儀正しく、または他の方法で優れている慣習はありますか? 他のオプションはありますか?