メインカテゴリとサブカテゴリを選択できるいくつかの複雑なドロップダウンがあるアプリケーションに取り組んでいます。一部のドロップダウンリストには最大40のオプションが含まれる可能性があります。これは、アプリの新しいユーザーにとって非常に不安です。ユーザーは最上位のカテゴリを選択する必要がありますが、選択する場合は、サブを選択して詳細を表示することもできます。
私の質問は、どのドロップダウン形式が最も使いやすいと思いますか?パワーユーザーと比較して新しいユーザーを考慮する必要があり、よりユーザーフレンドリーで効率的です。
予測検索とドロップダウン-ユーザーは、リストをそれらの文字で始まるアイテムのみに変更するメインまたはサブカテゴリの開始を入力できます。
ダブルドロップダウン-ユーザーは、2番目のドロップダウンをアクティブ化または変更する最初のドロップダウンからメインカテゴリを選択します。
マルチレベルのドロップダウン-ユーザーはドロップダウンを1つだけ表示し、各アイテムをクリック(またはホバー)してサブカテゴリを表示できます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
オプション2は、使用可能に保つために実装するのが最も簡単です。設定方法によっては、新規ユーザーとパワーユーザーの両方で機能します。
これは、パワーユーザー(フォームから選択するオプションを正確に知っているユーザー)と新しいユーザーに対応する必要があるため、両方のドロップダウン(カテゴリとサブカテゴリ)を表示する必要があります。最初は[カテゴリ]フィールドで何も選択されていないため、サブカテゴリには最初にall可能なサブカテゴリが入力されます。
両方のフィールドを最初から見えるようにしておくと、フォームに入力するのにかかる時間をユーザーに示すのに役立ちます。以前のフィールドで選択したオプションに応じて新しいフィールドが引き続き表示される場合、ユーザーが実際に入力する必要があるフィールドの数についてはほとんど謎です。つまり、ユーザーを誤解させないでください。
highlyは、オプション3のようなホバーコントロールの形式を回避することをお勧めします。ホバリングは特に厄介ですが、特定のアイテムを選択する必要がある場合はホバーメニューが表示される前のドロップダウンコントロール。また、キーボードだけで使用するのは非常に難しくなります。 (マウスポインターのユーザーのみに焦点を合わせないでください)
私の個人的な見解では、ドロップダウンは古く、率直に言って、操作するのがかなり面倒です。
彼らです
ユーザーが検索するカテゴリについてかなり良い考えを持っている場合、Googleのような予測検索を「ちょうど」持つことができます。
それ以外の場合、(コンテキストがわからないという制限があります)別の組織とウィジェットをすべて一緒に提案します:Miller列と組み合わせたメガメニューに似たもの列の項目は、意味のある方法(たとえば、アルファベット順)で並べ替えることができます。
これは概要を示し、面倒な相互作用を防ぎます。もちろん、私はあなたが厳しい画面の不動産制約を持っている、これは行く方法ではないかもしれません。
ここにモックアップがあります:
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ドロップダウン内のスライドサブナビゲーションはどうですか?
1つの見出しをクリックすると、サブカテゴリがスライドインします。おそらくアニメーションも必要ありません。