web-dev-qa-db-ja.com

ユーザーに2つ以上のオプションを意味するボタン構成はありますか?

私のデータグリッドは、ネットワーク上で追跡されている貨車と機関車の両方を表示します。これらのタイプの1つをフィルタリングしてもう一方のみを表示することがよくあるので、ワンクリックでこれを実行するワゴンと機関車のボタンを提供したいのですが、両方のタイプを表示する可能性を維持したいと思います。同時に。

これらのオプション(貨車、機関車、またはその両方)をユーザーに示唆するボタン構成はありますか?

8
Michael Sandler

この種類のフィルターには、ボタングループを使用することをお勧めします。

enter image description here

ボタンの方が選択しやすく、ボタンをグループ化して一緒に機能することを示すと、ユーザーにとってさらにわかりやすくなります。

逆に、オプションが非表示になっているため、ドロップダウンは効率的ではありません。

30
Renaud

一対のトグルボタン、または単にチェックボックスを使用できます。

mockup

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

どちらの場合でも、ユーザーは両方のコントロールをアクティブにするか(ボタンが「ダウン」、チェックボックスが「チェック」)、または1つだけを選択することで、両方のデータセットを表示できます。

これは、クワッドステートではなく、トライステートである必要があることに注意してください。ユーザーがターンして唯一の選択を削除した場合は、他の選択肢をアクティブ化して応答します。

例:ユーザーがこのフィルターを選択している場合:

mockup

bmmlソースをダウンロード

次に、「ワゴンを表示」をクリックすると、「ワゴンを表示」がオフになり、「機関車を表示」がオンになり、フィルタが次の状態になります。

mockup

bmmlソースをダウンロード

または、トグルボタンのアナログ。私はこのアプローチが採用されているのを見て、ユーザーはそれをすぐに理解しました。最後の1つについての詳細は、Bruce Tognazziniによる インターフェイス上のTog を参照してください。

3
Bevan

@Renaudの受け入れられた答えが好きで正解ですが、アイコンでどのように表示されるかを確認したい場合は、次のようにすることができます。

button group image

3
Code Maverick

私があなたの場所にいた場合、これらのオプションのいずれかに行くでしょう:

オプション1:
Option 1

オプション2:

Option 2

ボタン領域に十分なスペースがあり、データテーブルのボタンが多すぎない場合にのみ、2つ目の方法を検討します。また、最初のオプションを非常に簡単に拡張して、より多くのフィルターを含めることができます。

2
nishant.ghadge

どのプラットフォームにいますか?例えば。 Mac OSでは、違いを示す明確な強調表示があります。

TextEdit on Mac style selection vs. alignment selection

スタイル(太字、斜体、下線)は、グリフを青色に着色することによって強調表示され、相互に排他的な配置の選択は、背景を暗くすることによって強調表示されます。お使いのプラットフォームのテキストエディターの機能を見て、それを模倣します。

とはいえ、スタイルの結合された「カルトゥーシュ」ルックは、実際には存在しないスタイル間の接続を示しているため(そして、グループ内のどれもアクティブでない場合、唯一のインジケーターは何も選択されていないことです)、私は少し微妙すぎると思う)ので、私はおそらく互いに近接して配置されているが、配置セレクターよりも独立していることを示唆する1つの単位ではない長方形のボタンを使用するでしょう。

あなたのケースでは、小さなSteamエンジンのアイコンと、クリックすると青と黒の間で切り替わる小さなワゴンのアイコンがあるかもしれません。遅くともユーザーが初めて切り替えようとしたときに、古い選択が非アクティブ化されていないことに気づき、もう一度クリックします。

2
uliwitness