web-dev-qa-db-ja.com

長所短所? -シングルドロップダウンVSダブルドロップダウンVSマルチレベルドロップダウン

メインカテゴリとサブカテゴリを選択できるいくつかの複雑なドロップダウンがあるアプリケーションに取り組んでいます。一部のドロップダウンリストには最大40のオプションが含まれる可能性があります。これは、アプリの新しいユーザーにとって非常に不安です。ユーザーは最上位のカテゴリを選択する必要がありますが、選択する場合は、サブを選択して詳細を表示することもできます。

私の質問は、どのドロップダウン形式が最も使いやすいと思いますか?パワーユーザーと比較して新しいユーザーを考慮する必要があり、よりユーザーフレンドリーで効率的です。

  1. 予測検索とドロップダウン-ユーザーは、リストをそれらの文字で始まるアイテムのみに変更するメインまたはサブカテゴリの開始を入力できます。

  2. ダブルドロップダウン-ユーザーは、2番目のドロップダウンをアクティブ化または変更する最初のドロップダウンからメインカテゴリを選択します。

  3. マルチレベルのドロップダウン-ユーザーはドロップダウンを1つだけ表示し、各アイテムをクリック(またはホバー)してサブカテゴリを表示できます。

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

10
JustinRob

オプション2は、使用可能に保つために実装するのが最も簡単です。設定方法によっては、新規ユーザーとパワーユーザーの両方で機能します。

これは、パワーユーザー(フォームから選択するオプションを正確に知っているユーザー)と新しいユーザーに対応する必要があるため、両方のドロップダウン(カテゴリとサブカテゴリ)を表示する必要があります。最初は[カテゴリ]フィールドで何も選択されていないため、サブカテゴリには最初にall可能なサブカテゴリが入力されます。

  • パワーユーザーはサブカテゴリフィールドに直接ジャンプでき、-コンボボックスまたは同様のコントロールを提供して、入力/オートコンプリート/位置へのジャンプを可能にします-必要としないサブカテゴリの名前の入力を開始します最初に最初のカテゴリーを選ぶ必要性。 (これは、サブカテゴリアイテムが一意であることを前提としています)。
  • 新規ユーザーは、Categoryフィールドで開始でき、サブカテゴリのオプションのリストを絞り込みます。

両方のフィールドを最初から見えるようにしておくと、フォームに入力するのにかかる時間をユーザーに示すのに役立ちます。以前のフィールドで選択したオプションに応じて新しいフィールドが引き続き表示される場合、ユーザーが実際に入力する必要があるフィールドの数についてはほとんど謎です。つまり、ユーザーを誤解させないでください。

highlyは、オプション3のようなホバーコントロールの形式を回避することをお勧めします。ホバリングは特に厄介ですが、特定のアイテムを選択する必要がある場合はホバーメニューが表示される前のドロップダウンコントロール。また、キーボードだけで使用するのは非常に難しくなります。 (マウスポインターのユーザーのみに焦点を合わせないでください)

4
JonW

私の個人的な見解では、ドロップダウンは古く、率直に言って、操作するのがかなり面倒です。

彼らです

  • 開閉時に手間がかかる
  • ほとんどの場合、それらはアイテムをスキャンするときに多くの助けを提供しません、
  • 組み合わせると、レベルを戻すのが面倒です(たとえば、[主見出し]ドロップダウンを再度開く必要があります)。
  • 多くのアイテムを保持している場合、多くの前後スクロールが必要です。

ユーザーが検索するカテゴリについてかなり良い考えを持っている場合、Googleのような予測検索を「ちょうど」持つことができます。

それ以外の場合、(コンテキストがわからないという制限があります)別の組織とウィジェットをすべて一緒に提案します:Miller列と組み合わせたメガメニューに似たもの列の項目は、意味のある方法(たとえば、アルファベット順)で並べ替えることができます。

これは概要を示し、面倒な相互作用を防ぎます。もちろん、私はあなたが厳しい画面の不動産制約を持っている、これは行く方法ではないかもしれません。

ここにモックアップがあります:

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

9
agib

ドロップダウン内のスライドサブナビゲーションはどうですか?
1つの見出しをクリックすると、サブカテゴリがスライドインします。おそらくアニメーションも必要ありません。

Sliding in submenu

3
Kyle