「新しいアイテムの追加」オプションを配置する場所
ユーザーがリストからアイテムを見つけられない場合は、「新しいアイテムの追加」オプションを使用してアイテムを追加する必要があります。
「新しいアイテムの追加」オプションをどこに置くかを示すパターン、ガイド、またはベストプラクティスはありますか？
最初のデザインは、アイコンがあいまいでユーザーにとって最悪の場合であり、ユーザーには見えない可能性もあります。ユーザーはドロップダウンメニューに集中する（つまり、読む）ことになり、同時にアイコンを処理することはできません。物理的に不可能です。アイコンを偶然または経験に基づいた推測で見つけることをユーザーに期待しています。
2番目のデザインは、同じ制限がありますが、[追加]オプションの方が目立つため、少し使いやすくなっています。ドロップダウンの幅と、[追加]オプションの目立ち具合によって異なります。
3番目のデザインは、ユーザーが少なくとも既存のリストをスキャンすることが保証されるため、おそらく3つのうち最も安全なデザインです。きれいではありませんが、最も直感的です。
4番目のオプションは、ドロップダウンメニューの下にテキストリンクを配置することです。この場合、ユーザーは両方を表示する可能性が非常に高くなります。テキストリンクを無効にして、ユーザーがドロップダウンメニューをアクティブにしたら有効にすることができます。
@ tim-huynhからの回答と@monkeyzeusからのスマートなコメントに基づいて、ここに私の2セントがあります。
- デザイン1があいまいです。ユーザーは、ツールチップを起動する前に、アイコンが「このグループを何かに追加する」ことを意味すると考えることができます。
- デザイン2の方が優れていますが、教育を受けていないユーザーは、「新しいグループ」オプションが彼女の後ろにあると推測できないことに同意します 注目の軌跡 、@ティム・ハイン州。
- デザイン3は素晴らしいスタートです：
- 「新しいグループ」オプションはユーザーの近くにあります 注目の軌跡 、
- 新しいグループを作成できるようにする前に、ユーザーに既存のグループ/タグ/オプションの概要を提供することは常に良いことです。
- それでも、このデザインは長いリストで失敗します。これは、[新しいグループ]ボタンがリストのはるか下に配置されるためです（一部では画面の高さを超える可能性があります）。ケース）。
私が提案する解決策は、Gmailの賢い人たちが下のiタグボタンに対して行ったように、高度な選択ウィジェットを実装することです（イタリア語で申し訳ありません...「Etichetta」は「タグ」を意味します）。
このウィジェットでは、
- タグリストはスクロール可能で、高さが固定されているため、「新しいタグ」（画像内の「Crea nuova」、「+」が有効になりますアイコンはここではいいでしょう）ボタンを常に表示する、
- リストが長すぎる場合、ユーザーは検索バーを使用して、探しているものをすばやく見つけることができます（私のガールフレンドには70以上のタグがあり、 tスクロールも考慮してください）。
最初のオプションと3番目のオプションは、使用方法によっては両方とも可能性があると思います。
ユーザーが頻繁にアイテムを追加する必要がある場合、「新規追加」にアクセスするために毎回リストを確認するのは面倒なので、これら2つのうち+ボタンが間違いなく望ましいです。アイテムのリストが非常に長い場合は、「新規追加」オプションにアクセスする煩わしさも増します。
見つからない場合にユーザーがリストに新しいアイテムを追加できることを明確に視覚的に示すため、最初のオプションを使用するをお勧めします。これはあなたがそれを行う方法の例です
番目のオプションの課題は、ユーザーが新しいアイテムを追加するオプションを見つける前に、リストの一番下までスクロールすることを期待していることです。リスト内のアイテムがアルファベット順に整理されていて、ユーザーがアルファベット順にスキャンしている場合、特定のアルファベットが終わった後、ユーザーはさらにスキャンする可能性があります
2番目のオプションも機能しますですが、リンクの概念は強力な行動を促すものではないため、ドロップダウンに関しては見落とされている可能性があります。
2番目のオプションを使用します。これは、アクションを明確に示しており、あいまいさがほとんどまたはまったくないためです。ドロップダウンから既存のグループの1つを選択するか、独自のグループを作成します。ユーザーエクスペリエンスはそれよりも簡単になることはありません。
最初のオプションも機能する可能性がありますが、ユーザーに代わって何らかのアクションが必要です。ツールチップはマウスポインターを置いたときにのみ表示されるので、その単純さの2番目のオプションよりも優先されません。
ただし、このアプローチは、デザインと美観の観点からすっきりしている可能性があります。小さなシンプルな（+）ボタンは、テキストリンクよりも見栄えが良くなります（そして、アプリの国際化の場合、UIテキスト文字列がどのくらい長くなるのか、どこで改行して混乱するのかわからない）。
したがって、それを機能させるために、最初にツールチップを表示することができますが、ユーザーが新しいグループを1回または2回作成すると、完全に非表示になります。したがって、このボタンの機能を知っています。
言うまでもなく、これにはユーザー設定/データストレージ機能が必要です（おそらく、すべての最新のブラウザでアクセス可能なlocalStorage http://caniuse.com/#feat=namevalue-storage 、またはより多くのユーザーが単一のデバイス/ PCからアプリを使用し、それをバックエンドに保存することが期待されます。）
3番目のオプションは明らかにそれらすべての中で最悪です。ユーザーは、機能の重要な部分を不必要に発見する必要があります。グループのリストが大きく、スクロールが必要な場合、これは非常に難しい場合があります。
これが大量のページである場合は、分析ツールで調査して確実に調べる価値があります。
理想的には、Webアナリティクスを使用してユーザーを調査し、ユーザーベースの期待に対する最良の回答を決定できます。たとえば、clicky.comを使用すると、アイテムグループの上のフォーム要素をクリックしてから、アイテムグループフィールドの後にあるフォーム要素をクリックするまでの時間を計測できます。次に、分析タイミング図を見て、ユーザーが「アイテムグループ」フィールドに費やす時間のヒストグラムを作成します。
タイミング解析を選択してビルドし、後で設計の欠陥の重大度をチェックする場合は、A/Bセットアップでこのタイミング分析を実行する必要はありません。後で、「新しいカテゴリの追加」オプションを選択した人だけのヒストグラムを見て、順不同の使用をチェックします（最初は表示されず、後でそのフォーム要素に戻る必要がありました）。サンプルサイズが十分に大きい場合は、タイミングヒストグラムに異なるピークが表示され、各ピークが機能を認識するための異なるユーザーモデル時間を表しています。楽しい練習として、タイミングヒストグラムのピークを調べ、各ピークを異なるユーザーメンタルモデルに割り当てることで、ユーザーベースの個別のグループをプロファイリングできます。調査や、通常はセグメント化に使用される他の迷惑なフィードバックメカニズムは必要ありません。聴衆。
追加したいと思います3番目のオプションはリストのサイズによって異なります。ドロップダウンが非常に長い場合は、予測検索を検討し、見つからない場合はその用語を使用して「新しいグループを追加」することができます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
3番目のオプションは私の意見では最良ですが、その項目が選択されたときに特別なアクションを実行するには特別なチェックが必要になるため、実装は困難です。さらに、リストが長くなると、この代替案はユーザーにとって使い勝手が悪くなります。
私は2番目のオプションを選びますが、「新しいグループを追加する」オプションは、コンボボックス自体よりも重要度を低くしてください。これは、新しいグループを追加する前に、まずドロップダウンでグループを検索する必要があることをユーザーに伝えるためです。ドロップダウンと「新しいグループの追加」を同じ行に配置すると、同じ重要性が生じるため、一部のユーザーは「新しいグループの追加」をクリックしてドロップダウンで選択できるようにする必要があると考えるかもしれません。 （似たようなものがすでに存在していても）
