セグメントが2つしかないセグメント化されたコントロールで、選択された状態のあいまいさを解決するにはどうすればよいですか？
ページに2つの類似したデータグリッドがあるWebアプリケーションに取り組んでいます。ユーザーは、同じページ内でこれら2つのデータグリッドを切り替えることができる必要があります。
これらの2つのグリッド間を移動するために、セグメント化されたボタンを使用しました。しかし、このコンポーネントは視覚的にトグルになり、トグルの現在の状態があいまいになっているように感じます。
現時点では、選択された状態を表示するために色/色相のみに依存していますが、どの状態が選択されているかは、はっきりしていません。
この問題を解決するためのより良いアプローチはありますか？
赤い丸で囲まれたセグメント化されたボタン
2つの問題があるようです：どのセグメントが選択されているか、ユーザーが何を検索できるか、特にユーザーがすぐに検索するつもりである場合。
あなたのモックには2つの異なるデータセットがありますが、データの右側にコントロールの配置方法を使用しているので、選択されたものを一目で確認するには、目が正しく見える必要があります。
左側の検索フィールドはグリッドを検索するのに適していますが、この場合、実際には2つの異なる検索フィールドがあります。
トレードオフ：明確にするための縦のスペース、説明のためのタブ。
セグメント化されたコントロールは、2つの異なるデータセットを区別するためではなく、テーブルの上でフィルターとしてよく使用されます。 1つのオプションはタブを使用することです。
どちらのコントロールでも、左にシフトできるので、ページを垂直方向にスキャンした場合に見やすくなり、選択した状態がわかりやすくなります。
検索を真下に配置することにより、選択されたデータセットと検索機能についてより直接的なコミュニケーションをとることができます。
セグメント化されたコントロールを使い続ける場合でも、配置を検討することで、右端まで見ていなくても簡単に見つけることができます。
ボタンの背景色を削除して、非アクティブ状態を示すことができます。両方の州に色を付けることは、どちらも等しく目立つため、混乱を招きます。さらに改善するには、アクティブ状態に太字の書体を使用します。
これはトグルボタンの問題です。プロジェクトの1つでそれらを使用する必要があり、背景を原色に変更してアクティブ状態を示すだけで十分だと想定しました。
しかし、ユーザーインタビューの結果、私たちは間違っていることがわかりました。 3つのトグルボタンのコレクションがあるときはいつでも、ユーザーは混乱しているようには見えませんでした。 2つのオプションだけになると、ユーザーはどちらがアクティブなのか疑問に思っていました。
アクティブな状態が何であるかを強調するために、いくつかの視覚的な合図を追加することにより、コンポーネントを改善しました。
- フォントの太さを太字に変更しました
- 対照的な境界線を追加
- 非アクティブボタンの境界線の色を明るい色に変更しました
- 非アクティブなボタンのラベルの色を明るい色に変更しました
