web-dev-qa-db-ja.com

混乱を避けるためのドロップダウンとラジオボタンの使用

参考までに、これはビデオプロジェクトであることを指摘しておきます。

ユーザーがSD(標準解像度)の4つのフォーマットの1つとHD(高解像度)の2つのオプションを選択できるメニューを設計しています。

enter image description here
次の理由により、この解決策を提案しています。

SDモードには4つのオプションがあります。たとえば、オプション1、オプション2、オプション1a、オプション2aとしましょう。ラベルは非常によく似ており(要件)、混乱を避けるために、表示を控えめにしたいと思いました。

HDモードでは、2つのオプションしかありません。 HDフォーマットの採用に向かっています。ドロップダウンには2つのオプションでは不十分であり、最終的にこれら2つのオプションのみが提供されるオプションです。

それは意味がありますか?

11
Ana

1つのSDオプションを選択せず​​に(フィールドを空白のままにする)続行できない場合は、ラジオボタンを使用することをお勧めします。

  • 同様のタスクに同じ入力メカニズムを使用している場合、レイアウトは一貫性を保ちます。ユーザーが迅速に進めることが容易になります。

  • ラジオボタンは、ドロップダウンメニューを使用するよりも速い多くの場合も簡単です)。選択プロセスは、ドロップダウンメニューの2クリックと比較したシングルクリックです。

  • 表示されるすべてのオプションがあることは悪いことではありません。オプション1とオプション1aが似ていても、ドロップダウンメニューでは似ています。ラジオボタンでは、少なくともクリックする必要がなく、ちらりと見るだけでエラーのチェックが簡単になります。

15
rk.

このレイアウトはどうですか?

mockup

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

ユーザーはSDまたはHDのどちらを使用するかを決定する必要があるので、これが主なオプションになるはずです。次に、彼らはあなたが提供する他のオプションを選択できます。

このソリューションでは、ユーザーのデフォルトを設定することもできます。 2番目のオプションのラジオボタンを操作することもできます。これは、オプションが2つしかない場合(クリック数が少なく、すべてのオプションが明白)にわずかに推奨されますが、オプションが4つある場合は、少し見えすぎます。ただし、プライマリオプションが選択されているセカンダリオプションのみを表示すると、よりクリーンになります。

8
greenforest

あなたが述べたように、ユーザーはSDとHDの両方のフォーマットを選択することはできません。 「形式タイプ」と注釈が付けられた単一のグループにまとめてみませんか。その後、すべてのオプションをラジオボタンとしてグループ内にリストできます。これはうまくいくかもしれませんが、少し多くのスペースをとります。

mockup

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

3
Varun