幅の広いドロップダウンがクリック可能であることをどのように示しますか？
次のような選択タグがあります。
ページコンテンツの上部に沿って広がり、画面幅の約90％です。したがって、この質問では明確ではありませんが、キャレットはテキストから約400px離れています。
ユーザーがドロップダウンからアイテムを選択すると、下にある各種のチャートとテーブルのグループ化が変更されます。
それがドロップダウンであることをユーザーに明らかにする必要があります。現在、ユーザーはカラットを表示していないため混乱しています。これが実際にドロップ可能なクリック可能なアイテムであることをどのように強調しますか？
それがドロップダウンであることをユーザーに明らかにする必要があります。
ドロップダウンのように見せることで。
あまり広くしないでください。 「クリック可能」に見えない理由は、ドロップダウンのように見えないためです理由画面の幅全体に拡大されます。
多分あなたは「Group by」ラベルからドロップダウンを分離し、それらを利用可能なスペースの両側に揃え、そして-他の人がすでに示唆したように-ドロップダウンをドロップダウンのように見せることができます：
このように、認識可能なドロップダウンがある間は、コンテンツの幅に広がります（ヘッダーとして機能できます）。
そしてそれが当てはまる場合、複数の「グループ化」オプションを非常に簡単に導入できます。
（もちろん、「新規追加」ボタンと「削除」ボタンがいくつか必要になりますが、それは別の話です。）
あるいは、ヘッダーとして使用する場合は、意味のあるデータヘッダーを導入することもできます。
ドロップ矢印をテキストの右側に置きます。
人の目はテキストをスキャンしますが、周辺ビューに矢印が表示されない場合があります。したがって、テキストの横に矢印があると、それができます。
並べ替えオプションが多くない場合は、スペースが広いため、ドロップダウンをラジオボタンに置き換えることを検討してください。
ドロップダウンが参照している領域の幅全体にまたがるので、ドロップダウン関数のヘッダーとして機能します。ドロップダウンでの選択は領域全体に適用されることを強調しています。
一部のユーザーは、右端の矢印に気付かないと、ドロップダウンを認識できない場合があるのはなぜですか。これに対する直接的な解決策は3つあります。
- 矢印は通常のドロップダウンの外観をエミュレートしますが、そのようなドロップダウンは通常、左または右に配置されます-片側にテキストがあり、反対側に矢印があります。とにかく中央揃えのレイアウトを使用しているので、テキストのすぐ下にある1つの矢印（奇妙に見えるかもしれません）、または両側に1つずつある2つの矢印が必要です。これにより、ドロップダウン全体の対称的な外観が維持され、矢印が見えやすくなります。
- 要素の横に矢印を配置せず、テキストのすぐ隣に配置します。このように、バー全体がドロップダウンメニューを持つクリック可能なヘッダーになります。
- 「コンボボックス」ではなく、ヘッダーと（個別の）ドロップダウンボタンを使用します。ボタンが境界線が見える別の要素である場合、ボタンが現在の矢印と同じ場所にある場合でも、ユーザーの注意を引くのは簡単です。
最後の項目に関連して、それは別の問題を指している可能性があります。そのままの状態で、矢印はヘッダーバーとテキストの全体のサイズに比べて非常に小さく、確かに少し目立ちません。私の質問では画像が縮小されたサイズで（つまり、フルサイズではありません）、それが矢印であることをほとんど認識できません。少し円形の場合もあります。ドット。したがって、矢印を大きくして（テキストとほぼ同じ高さにしてみてください）、矢印とコントロールの境界線の間隔をわずかに大きくすることをお勧めします。
特に下線が引かれている場合、人々は青いテキストをクリックするのに慣れています。
この場合、「カテゴリ」を青（および下線）にすることができます。
グループ化： category
そうすれば、矢印に気付かない人でもクリックするのが直感的にわかるかもしれません。
または、前述のように、ドロップダウンを小さくします。画面の両側に影響を与える場合は、中央に配置してください。