長いリストのどのアイテムが選択されているかを明確にする
ユーザーがアイテムにタグを付けて、タグまたはタグのセットですべてのアイテムを表示できるようにするWebインターフェイスの一部を設計しようとしています-Gmailで複数のタグを簡単に選択してすべてのメッセージをすべて表示できる場合それらのタグの。現在表示しているタグのセットをユーザーに示す最良の方法は何ですか？
単純な強調表示は1つのタグに対して機能しますが、タグのリストが画面よりも長い場合、一度にすべてを表示することはできず、ユーザーが選択したタグが明確になりません。この問題に加えて、使用するスペースが少しあります。タグとアイテムのインターフェース全体が約300x500ピクセルであるため、選択したタグを長い水平リストに表示することはできません。
選択したタグを使用してタグリストの上にセカンダリリストを作成することを考えていました（これらのような 米国およびその他の国が強調されたドロップダウンリスト ）。しかし、より良い代替案があります。
ファセットナビゲーションパターン を使用します。 Amazon.comはそれで素晴らしい仕事をします：
（これらのスクリーンショット ニンテンドーDSの検索結果 -垂直方向の制約がある場合は短くすることができます）
注意点：
- 各ファセットで現在選択されているアイテムが何であるかについての非常に明確なコミュニケーション（この場合、黒の太字対リンクの青）
- すべてのアイテムがハイパーリンクであっても、各アイテムをハイパーリンクにしないことで読みやすさを向上-この場合、ハイパーリンクの下線パターンよりも読みやすさを優先する方が便利です。
- 各ファセットには、クリックした場合に利用可能な結果の数が表示されます。検索バックエンドによっては、実装が複雑になる場合があります。
- 扱うファセットの種類、適切なコピーライティング、適切な表現に応じた適切なコントロール（この場合は特定の日付を気にしないため、日付の場合は「過去30日間」など）
- 各ファセットで1レベル上に移動する機能。基本的には、そのファセットでの選択を「取り消す」ことができます。他の多くのサイトのように赤いクロス
<とは対照的に、(x)の使用に注意してください。 - これをパンくずナビゲーションパターンと組み合わせると、人々が上から下をスキャンして左/右の列を見ない場合に、Amazonがさらに便利にできるようになります。
多数のアイテムが選択されている場合、選択されたすべてのアイテムが表示されないことについてあまり心配する必要はありません。これは、一般的な多面的なナビゲーションの落とし穴です。ユーザーは、多くの選択を行った場合（Amazonの例では各ファセットの1つを選択することを想像してください）、ページのさらに下に選択されたオプションがあることを理解します。 @onnodbが示唆するように、少しオフセットするために、選択したファセットを上部にグループ化できますが、（selectコントロールのように）クリックの背後にそれらを非表示にすることはしません。
次のように、選択したタグのこの「セカンダリリスト」をリストの上部に作成することは完全に理にかなっていると思います：（素晴らしいアイデア、ところで）
Selected tag 1 (X)
Selected tag 2 (X)
Selected tag 3 (X)
-------------------
Tag 4
Tag 5
Tag 6
選択したタグに異なる背景色を付け、「（X）」ボタンを追加してそれらを削除します。これには非常に使いやすいUIがあると思います。
処理できる不動産が限られているため、以下を実装できます。タグリストをドロップダウンに配置し、タグのドロップダウンを持つ別の行を追加するプラスボタンがあります。この方法で表示される唯一のタグは、ユーザーが選択したタグです。
私はそれがかなり古い質問であることを知っていますが、私の意見では、今日のアプリケーションにはまだ有効です。
答えは、Visual Studioの垂直スクロールバーからインスピレーションを得ました。
- スライダーの高さは、コンテンツの全長と比較した画面上の領域のサイズに対応します
- 細い青い水平線は、カーソルが現在置かれている場所を示します
- 濃い黄色のバーは、検索語句が見つかった行を示します
OPの質問について-画面の容量を超えるアイテムのリストがある場合は、スライダーを使用する必要があります。スライダーを使用して、選択したアイテムがリストのどこにあるかを示すことができます。
頭のてっぺんから...
オプション1： 'title'属性を変更して、選択したアイテムをホバーに表示します。オプション2：jqueryを使用して、要素をトラバースし、選択されたアイテムをリストするリストのホバーイベントを追加します。
これにはいくつかの方法があります。
1）既に述べたように、リスト内の順序を維持したまま、選択されているタグを強調表示できます。選択したタグがページに表示されていないことをユーザーが認識していないという問題を解決するには、ページのタグセクションの下部にある矢印を点滅させて何かがあることを知らせるなど、何かをアピールできます。下にスクロールする場合に重要
=Tag1= Tag2 Tag3 vvvv -----------------------Screen End Tag4 =Tag5=
==マークされたタグをマークし、vvは点滅する矢印です
2）また、上部に追加リストを作成することもできますが、元のタグを削除して、タグセクションの高さが常に一定になるようにします。
3）検索結果の見出しの下に、選択したタグを縦のリストとして表示することができます。
Tag Section | Search Results: | xTags1 xTag2 xTag3 | | [Search Results Go Here]
各タグ名の横にある小さなxsに注意してください。これにより、ユーザーはタグをすばやく削除でき、結果はそれに応じて変化します。
オプション2または3を選択します。3ユーザーがタグを選択し続けると、タグのリストの順序が変更されることに少し驚かれる可能性があるため、より良いかもしれません。