ユーザーに最大10の選択肢を提供するボタンが1つあります。ボタンのラベルには「適用」と表示され、ドロップダウンにはすべての可能な選択肢がリストされます。これを設計する方法には複数の選択肢があります。
ホバーとして、ホバー時にドロップダウンが開きます。クリック時にドロップダウンが開くonClickとして。
ホバーが最も一般的に使用されるので、ホバーに行くと思いますが、その場合、「適用」もクリック可能にする必要がありますか?ユーザーが最初に選択を定義する必要があるため、ユーザーが行くべき場所はどこにもありません。実際にはクリック可能ではなく、ドロップダウンのプレースホルダーとしてのみ機能するボタンがあるのは間違っています。
あなたの意見/アドバイスは何ですか?
私は最近、ホバードロップダウンでいくつかのユーザーテストを行っており、ユーザーからは、トップレベルもクリック可能でなければならないという一般的な期待がありました。
素材については、セグメント化されたドロップダウンボタン
セグメント化されたドロップダウンには、現在の状態とドロップダウン矢印アイコンの2つのセクションがあります。 現在の状態を押すと、画面内でその状態のアクションが実行されます。ドロップダウン矢印を押すと、すべての状態オプションが表示されます。いずれかを選択すると表示状態が変わります
[〜#〜]編集[〜#〜]
モックから見ると、これはデータテーブルの上によくあるバッチアクションドロップダウンボタンに似ています。ボタンのラベルをクリックすると、アクションを開始するための選択肢のリストを含むドロップダウンが表示されます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
この場合、追加の送信または適用ボタンは必要ないため、クリック数は3ではなく2クリックです。
ドロップダウンのあるボタンには常にクリックアクションが必要ですか?
絶対に!「ホバー状態」がないモバイル/タブレットのサポートを気にしない限り。
私は物事をシンプルに保ち、ホイールを再発明しないことを強く支持しています。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
ホバーが開始するドロップダウンを維持する場合は、ここで説明されているタイミングガイドラインを必ずお読みください: https://www.nngroup.com/articles/timing-exposing-content/
状況次第ではないでしょうか。問題は、間違ったオプションを誤って選択したことです。
たとえば、ドロップダウンで何かを選択すると、データの更新がトリガーされ、なんらかの更新や送信を実行しないパフォーマンスオーバーヘッドがないか、ほとんどありません。その後、ユーザーは別のオプションを簡単に選択でき、速度が低下することはありません。
ただし、例を使用すると、ユーザーが誤って生徒ではなく教師を選択した場合、教師用に設計されたフォームのあるページに移動する可能性があります。今、彼らは戻って別の選択をする必要があります。このような場合、フォームが送信されるか、ページが更新される場合、通常は送信ボタンを配置するのが最善です。
はい
しかし、ホバー機能を削除し、メニューにonclickしか表示されず、少し意味がなさそうなサイトを見てきました。
編集:あなたのケースでは、間違ったオブジェクトを使用しています。ボタンではなく、ドロップダウンメニューにする必要があります。ボタンはonsubmitアクション用です