web-dev-qa-db-ja.com

フォームに過剰な数のラジオボタンを配置する代わりの方法は?

ユーザーの選択肢をラジオボタンとして動的に作成するフォームがあります。機能的には機能しますが、見栄えがよくありません。

特にラジオボタンの数が増えると、見栄えが悪くなります。したがって、5〜10個のオプションがある場合は問題ありません。しかし、私が何百人も持っている場合はそうではありません。

何百ものラジオボタンに代わるものは何ですか?

14
chack

それはどのような「何百ものオプション」ですか?

フィールドが「国」のようなものである場合、ユーザーはすべてのオプションを読まなくても自分の答えがわかるはずなので、ドロップダウンリストが理想的です :使い方は簡単で、ページ領域もほとんど必要なく、ほとんどのデバイスで表示や選択が簡単です。

フィールドが「空港」のようなものである場合、ユーザーはほとんどのオプションを読む必要はないが、正確に何が欲しいかわからない場合がある、次にオートコンプリートテキストフィールドは適切です:設定するのは少し手間がかかり、少し壊れやすいかもしれません(たとえば、古いソフトウェア上、またはネットワーク接続が悪い場合)。一般的に使いやすい。

しかしユーザーがオプションの範囲を読む必要がある場合決定を下すために数百のオプションは多すぎる。何らかの方法でそれらを分割できます—おそらく階層的に、ドリルダウンアプローチで、おそらく他の方法で。

25
PLL

意味的に同等のコントロールはドロップダウンリストになります。

10
Robert Koritnik

私は、ドロップダウンリストとそれらが選択肢を非表示にする方法が好きではなく、ユーザーが特定の時点で表示できるオプションの数を制限することだけを許可しています。ドロップダウンリストは、住所の[州]フィールドなどのオプションを表示するための受け入れられている手段であり、現在、これがその使用に最適なオプションであることに同意しますが、数百または数千の可能な選択肢については、より良い方法があると思います。

  1. オートコンプリートテキストボックス を使用すると、ユーザーは多数の中から1つの選択肢を見つけることができます。
  2. 検索を使用してオプションをフィルタリングします。
  3. 選択肢を小さいチャンクに分割して、ユーザーが小さいセットにドリルダウンして選択できるようにする

おそらく、最良の選択は、上記のアイデアとドロップダウンリストおよび/またはラジオボタンのグループの組み合わせです。

3
Dave Nelson

なぜそれほど多くの選択肢があるのですか?

別の言い方をすると、アプリには何が必要か、そのような多数の選択肢が可能であるということですか?大きな画面(24インチ)でも、5つ以上の選択肢を理解するのは困難です。20を超えると、気が遠くなる可能性があります。100の選択肢に対してACTを見て、読んで理解し、ACTを実行するように依頼することは慎重ではありません。単純明快このようなUIはユーザーを助けるものではありませんが、ユーザーのために新しくて難しい、刺激のない認知作業を作成します。

解決する問題はUIの問題ではありません。選択肢の表示方法です。解決する問題はUXの問題です。一度に5つ以上の選択肢を提示する必要がないユーザーの目標へのアプローチを作成する方法です。

ユーザーが全体的に達成しようとしていることについて考えます。アプリのタスクフローをマッピングします。ユーザーのワークフローをマッピングし、メンタルモデルを明確にします。次に、「ドローイングボード」に戻り、UXを再設計して、一度に多くの選択肢を提示する必要のないアプリを作成します。

2
Four

オプションがいくつかあるとすぐに、私はドロップダウンリストを使用する傾向があります。 (HTMLでは<select>)。追加の利点は、ラジオボタンの束よりもiPhone/iPadで使用する方がはるかに優れていることです。

1
Tommy Carlier

私たちドロップダウンリスト

Microsoft UXガイドライン で述べたように

オプションの数は2〜7ですか?使用される画面スペースはオプションの数に比例するため、グループ内のオプションの数は2〜7にしてください。 8つ以上のオプションの場合は、ドロップダウンリストまたは単一選択リストを使用します。

1
Matt Rockwell

優れたJavaScriptプラグイン Chosen があり、ドロップダウンメニューに検索機能を追加します。このようなシナリオに最適です。

1
user4662

非常に多くの可能なオプションで、リスト(ドロップダウンリストではない)を使用し、少なくとも5つ以上の項目を表示します(SELECTタグ、size = 5、multiple = false、HTML)。スペースに問題がある場合のみ、ドロップダウンリストを使用してください。ドロップダウンリストは、通常のリストを操作するのに少し面倒です。

0
Thorsal

アイテムをフォーム上で論理的にグループ化して、人々がそれらのグループを表示および非表示できるようにすることはできますか?これらのグループをタブまたはアコーディオンに配置すると、成長の余地がありながら認知的に対処しやすくなります。

0
Todd Sieling

エントリの数が可変であり、10を超える可能性がある場合、ラジオボタンはお勧めできません。主な理由は、視覚的には、多くのラジオボタンを取り込むのが難しいことです。ドロップダウンボックスは、特に検索ボックスの場合、明らかな代替手段です(つまり、ユーザーがエントリを入力してこれを選択できるようにします) )。

しかし、他の人が尋ねた質問はまだ適切です-なぜそれほど多くのオプションがあるのですか?ユーザーはこれらを実際にどのように選択できますか?ユーザーの期待が何であるかを正確に再検討することから始め、これを中心にインターフェースを設計する必要があると思います。

0