web-dev-qa-db-ja.com

ベストプラクティスUX-いくつかのアイテムからアイテムを選択する

私はウェブサイトに取り組んでいます。私のフォームの1つで、フォームtypeを選択する必要があります(フォームのタイプに応じて、残りのフィールドは、無効ステータスなどの動作を変更しますおよびそれらのプレースホルダー)。

使用可能なタイプは「タイプA」と「タイプB」の2つだけです。

この場合のベストプラクティス/経験則は何ですか。

私はこれらのオプションを考えることができます(私が考えていない追加のオプションがあると確信していますが):

1.ドロップダウンリスト(html <select> 鬼ごっこ)

将来、タイプを追加できるので、これは良いオプションです。しかし、見た目はそれほど素敵ではありません。

A drop-down list with two items: "Type A" and "Type B"

2.ラジオボタン(html <input type="radio"> 鬼ごっこ)

このオプションを使用すると、将来、タイプを追加することもできますが、(フォームの)複数の行が必要になるため、フォームの残りのフィールドはすべて1行になります。

Two radio buttons, labelled "Type A" and "Type B"

3.スライダーを切り替えます(html <input type="checkbox">スライダーのようなスタイルのタグ)

このオプションはチェックボックスです(舞台裏)。したがって、2つのオプションのみを切り替えることができます。ただし、UIに関しては見栄えが良いです。

A toggle slider

PS私は私のサイトでマテリアルデザインを使用しているので、マテリアルコンポーネントは有効なソリューションになることができます(ただし、質問はそれに直接関係していません)。

7
Gil Epshtain

ドロップダウンには、ラジオボタンやスライダートグルに比べて欠点があります。ユーザーはそれをクリックして、可能なオプションを表示する必要があります。モバイルの場合(これが当てはまる場合)のドロップダウンは簡単に使用できません。

トグルについてOwen Hughesに同意します。

この場合、ラジオボタンを使用します。ただし、別の方法があります。セグメント化されたコントロールを使用できます。ただし、オプションが2つしかない場合、セグメント化されたコントロールは混乱する可能性があります。選択されたセグメントが明確でない場合があるためです。したがって、設計には注意してください。また、必要に応じて項目を追加するのも簡単です。

セグメント化されたコントロールのセグメントはボタンのように感じるので、ユーザーはアクションが実行されることを期待できます。このように、フォームの変更は、ドロップダウンまたはラジオボタンを使用する場合のように、予期しないものではありません。 enter image description here

17
BrunoH

ユーザーが範囲の1つのオプションを選択するようにしたい場合、これは慣習であるため、ラジオボタンを使用する傾向があります。これは私の行きます。

ただし、その下のフォームに変更がある場合、ドロップダウン項目が変更された結果としてインタラクションが変更を示しているため、ドロップダウンは悪い考えではありません。

トグルについては、トグルほとんどの場合がオン/オフタイプの相互作用を示しているので、何かがアクティブになると、フォームが動作を変更するので、これが正しいとは思わない/非活性。

ラジオボタンとドロップダウンは見栄えがよくないかもしれませんが、フォームの一般的な標準である要素を使用してユーザーに実行したいインタラクションに合わせて適切なフォーム要素を選択しています。

5
UIO

コメントで質問に答えながら更新:

ラジオボタンと選択タグの両方について考えると、どちらもまったく同じことを意味しますが、方法は異なります。どちらもxオプションから1つの項目を選択できます。

私の経験則では、4つ以上のオプションが必要な場合は、ドロップダウンを使用してフォームをきれいに保ちます。4つ未満の場合は、ラジオボタンを使用して、ユーザーがすべてのオプションを一度に表示し、選択できるようにします。シングルクリック。

3
Alin

あなたが提供した3つのオプションのうち、ラジオボタンはあなたが説明した場合には2つのオプションだけで私にとって最も理にかなっています。ドロップダウンよりも優れている点は、すべての値がすぐに表示されることです。この場合、2行を使用する必要がないように見えます。水平に配置するだけです。

説明されているスライダー切り替えオプションIMOは、最も適切ではありません。このタイプのコントロールはスイッチとも呼ばれ、より正確な名前のように思われます。OwenHughesが述べたように、これらは通常、ウェイとして機能するのではなく、UIで何か(つまり、オン/オフ)をアクティブ/非アクティブにします。 2つの任意の値から選択します。物理的なライトスイッチについて考えてみましょう。ライトの色を赤と青の間で交互に切り替えるのではなく、ライトをオン/オフにします。

1
Warren Payne

オプションの長いリストについては、選択ボックスを使用するか、ラジオボタンを使用してください。トグル/スイッチはこれには適していません。性別を尋ねる場合のように、ラジオボタンはそのままにします。しかし、Cityに質問する場合は、選択ボックスを使用する必要があります。

0
UXPAPA