では、コンボボックス、複数選択、リストボックス、ドロップダウンの違いは何でしょうか?これらの UI コンポーネントはすべて似ているように見えますが、目的は異なります。多くの場合、選択は利用可能なオプションの数とその可視性によって決まります。 それらがどのように異なり、どのような目的を果たし、途中で誤解や間違った期待を避けるために正しいものを選択する方法を見てみましょう。
すべてのリストのパターンが同じではない 上記で強調表示したすべての UI コンポーネントには、ユーザーのリストとの対話をサポートするという共通点があります。ただし、その方法は少し異なります。 それぞれを 1 つずつ見てみましょう。
ドロップダウン → リストはトリガーされるまで非表示になります。 コンボボックス → フィルタを入力 + 1 つのオプションを選択します。 複数選択 → フィルターに入力 + 多くのオプションを選択します。 リストボックス → デフォルトで表示されるすべてのリスト オプション (+ スクロール)。 デュアル リストボックス → 2 つのリストボックス間で項目を移動します。
つまり、コンボボックスはテキスト入力フィールドとドロップダウン リストを組み合わせたもので、ユーザーは入力してフィルタリングし、単一のオプションを選択できます。複数選択を使用すると、ユーザーは多くのオプション (錠剤またはチップとして表示されることがよくあります) を選択できます。 リストボックスには、デフォルトで表示されるすべてのリスト オプションが表示され、多くの場合はスクロールされます。ユーザーが利用可能なすべての選択肢をすぐに確認する必要がある場合に役立ちます。デュアル リストボックス (転送リストとも呼ばれる) は、ユーザーが 2 つのリストボックス (左 ↔ 右) 間で項目を移動できるようにするリストボックスのバリエーションで、通常は一括選択を目的としています。 頻繁に使用するオプションを決して非表示にしない 上で述べたように、適切な UI コンポーネントの選択は、使用可能なリスト オプションの数と、これらすべてのオプションをデフォルトで表示する必要があるかどうかという 2 つの要素によって決まります。すべてのリストには、ツリー構造、ネスト、およびグループ選択も含めることができます。
私が UI コンポーネントに関して何年も守ってきた原則が 1 つあります。それは、頻繁に使用されるオプションを決して隠さないことです。ユーザーが特定の選択項目に頻繁に依存する場合、それを非表示にしてもあまり意味がありません。 事前に選択しておくことも、(頻繁に使用されるオプションが 2 ～ 3 つしかない場合) それらをチップまたはボタンとして表示し、インタラクション時にリストの残りの部分を表示することもできます。一般に、たとえ UI が煩雑になるとしても、人気のあるオプションを常に表示することをお勧めします。 どちらを選択するか? すべてのリストに複雑な選択方法が必要なわけではありません。項目が 5 つ未満のリストの場合は、通常、単純なラジオ ボタンまたはチェックボックスが最適に機能します。ただし、ユーザーがオプションの大きなリスト (200 以上の項目など) から選択する必要がある場合は、フィルタリング (国の選択など) が高速なため、コンボボックス + 複数選択が役立ちます。
リストボックスは、一度に多くのオプションにアクセスする必要がある場合、特にリストから多くのオプションを選択する必要がある場合に役立ちます。これらは頻繁に使用されるフィルターに役立つ可能性があります。
デュアル リストボックスは見落とされ、無視されることがよくあります。ただし、一括選択や役割、タスク、責任の割り当てなど、複雑なタスクには非常に役立ちます。これは、ユーザーがコミットする前に完全な選択リストをソース リストと並べて確認できる唯一の UI コンポーネントです (「転送リスト」とも呼ばれます)。 実際、デュアル リストボックスは多くの場合、ドラッグ アンド ドロップよりも高速で正確で、アクセスしやすいです。 ユーザビリティに関する考慮事項 覚えておくべき重要な注意点の 1 つは、アクセシビリティのために、すべてのリスト タイプがキーボード ナビゲーション (例: ↑/↓ 矢印キー) をサポートする必要があるということです。入力を開始すると、ほとんどの場合、オプションを選択するためにキーボードに依存する人もいます。
それを超えて:
7 つ以上のオプションがあるリストの場合は、ユーザー操作を効率化するために「すべて選択」および「すべてクリア」機能を追加することを検討してください。 コンボボックスを含む長いリストの場合は、クリック/タップですべてのオプションをユーザーに公開します。そうしないと表示されない可能性があります。 最も重要なのは、混乱を避けるために非インタラクティブな要素をボタンとして表示しないこと、またインタラクティブな要素を静的なラベルとして表示しないことです。
まとめ: すべてがドロップダウンであるわけではありません 名前は重要です。オプションの縦方向のリストは通常「ドロップダウン」として説明されますが、一般的すぎて意味が分からないことがよくあります。 「ドロップダウン」は、リストがデフォルトで非表示になっていることを示します。 「複数選択」とは、リスト内の複数の選択 (チェックボックス) を意味します。 「コンボボックス」はテキスト入力を意味します。 「リストボックス」は、常に表示される選択可能な項目のリストです。 目的は、目的のために上記の定義と一致させることではありません。しかし、意図を調整するためではなく、これらの UI コンポーネントを決定、設計、構築し、使用するときに同じ言語を話します。 効果があるはずです静的なラベルがインタラクティブなボタンのように見えず、ラジオ ボタンがチェックボックスのように機能しない限り、デザイナー、エンジニア、エンド ユーザーなど、誰でも利用できます。 「AI インターフェイスのデザイン パターン」に対応する 実際の製品の実践例を含む Vitaly の新しいビデオ コース、AI インターフェイスのデザイン パターンをご紹介します。ライブ UX トレーニングも間もなく開催されます。無料のプレビューにジャンプします。 AI インターフェイスのデザイン パターン、インターフェイス デザインと UX に関する Vitaly のビデオ コースをご覧ください。
ビデオ + UX トレーニングビデオのみビデオ + UX トレーニング$ 450.00 $ 799.00
ビデオ + UX トレーニングを入手 30 ビデオ レッスン (10 時間) + ライブ UX トレーニング。100 日間の返金保証。ビデオのみ$ 275.00$ 395.00
ビデオ コース 30 ビデオ レッスン (10 時間) を入手してください。毎年更新されます。3 つのビデオ コースを含む UX バンドルとしても利用できます。
役立つリソース
オートコンプリート: UX ガイドライン、Vitaly Friedman 著 コンボボックス、eBay 👍 コンボボックス、Elastic 製 コンボボックス、Elisa 著 MongoDB によるコンボボックス 👍 Visa のコンボボックス 👍 コンボボックス、Watson (Docplanner) による コンボボックス、ウィキメディア著 コンボボックス、Zendesk 製 複数選択 (MongoDB コンボボックス設計ドキュメント)、MongoDB による 👍 複数選択検索、Wikimedia 著 複数選択コンボ ボックス (Vaadin 著) 複数選択、ビザによる 転送 (リストボックスの例)、Ant Design による リストボックス、ホッパー作 リスト ボックス、Vaadin 著 リストボックス、ビザ別 Red Hat によるデュアル リスト セレクター (PatternFly) Salesforce によるデュアル リストボックス (Lightning Design System) 転送リスト、マンタイン著 デュアル リストボックス、Dashlite 著 バッジ vs. 錠剤 vs. チップ vs. タグ、ヴィタリー・フリードマン著 リストボックスとドロップダウン リスト、Anna Kaley 著 (NN/g)
