web-dev-qa-db-ja.com

はい/いいえラジオボタン:垂直方向または水平方向の配置

現在、ラジオボタンとして表示される「はい/いいえ」オプションの多い長いフォームを調べています。ラジオボタンを縦または横に並べて表示することが望ましいことを示唆する証拠はありますか?

22
Peter

次の4つの大きな理由から、私はラジオボタンの水平レイアウトのファンではありません。

  1. 3つ以上の選択肢があると、lotのパディングを使用しない限り、どのラベルがどの無線に属しているかを確認するのが難しくなります。これは問題を引き起こす可能性があります。
  2. 水平無線設計はnotで行が折り返された場合に機能します。 2つの質問のように見えます。つまり、ラジオには限られた数のオプションしか追加できず、アプリを長いUIテキストを持つ可能性のある言語に翻訳することはできません。また、アプリのすべてのラジオボタンに同じパターンを使用する必要があるため、これは大きな制約です。大規模なプロジェクトでは、制約はクリプトナイトのようなものです。
  3. ユーザーは行に埋め込まれたアイテムを解決するのに問題があるため、ユーザーが特定のオプションまたは提供する回答を探してフォームに入力する場合、水平方向のデザインは適切ではありません(構成フォームで一般的)
  4. 幅が必要ですが、ウェブでは制限があります。簡単に垂直方向に拡張できますが、ユーザーに水平方向のスクロールを強制したくありません。
27

利用可能な研究については知りませんが、いくつかの考えがあります。

水平表示は、一方に「はい」、もう一方に「いいえ」があるため、すべての回答を視覚的にスキャンする方が簡単なようです。また、ユーザーがすべての回答を同じ方法で簡単に確認できるようになると思います。カーソルを下に移動するだけです(チェック、チェック、チェック)。だから私は水平配置に傾いています。

enter image description here

37
Anna Rouben

アンナ・ルーベンの答えに同意します。ただし、レイアウトが少し異なります... enter image description here

ここでの目標は、読みやすさとスキャン可能性を最大化することです。これは、過去に何百もの質問に使用したレイアウトです。

いくつかの注意事項...

  1. オプションが短く簡潔であり、折り返さずに行に収まることが保証されている場合は、水平ラジオボタンが推奨されます。
  2. 質問を対応するはい/いいえの応答に簡単に関連付けることができるように、表のセルの各質問を右揃えにしています。
  3. [はい]/[いいえ]オプションは、テーブルセル内で垂直方向の中央に配置されるため、質問が数行を占める場合でも、質問とうまく整列します。
14
Steve Wortham

垂直方向に配置する必要があります。 Windowsユーザーエクスペリエンスインタラクションガイドラインからの引用:

ラジオボタンを水平ではなく垂直に配置することをお勧めします。水平方向の配置は、読み取りやローカライズが困難です。

ソース: http://msdn.Microsoft.com/en-us/library/windows/desktop/aa511488.aspx

5
Bart Gijssens

将来、「はい/いいえ」は「いいね」に置き換えられると、fbの創設者は述べた(単なる冗談)

この場合の質問:「毎日コーヒーを飲みますか?」好き/嫌い

2
Ivan

すべての回答をありがとう。私の考えは今だと思います:

  • はい/いいえのみの場合、並べて表示すると、行が折り返されない場合、特にこのフォームに多数の回答がある場合に、回答を簡単に確認できます。このチェックは、箇条書きの周りに影付きのボックスを配置して応答を強調表示することで強化できます。私はスティーブに同意します。「肯定的な」答えを右側に配置することは、サイトの他の場所で使用されているスタイルと一致することになります(「キャンセル」の右側にある「OK」ボタン、右側の「次へ」など)
  • より多くの回答、または言語が変わったときに長くなると予想される回答については、縦に並べることが望ましい

モバイルの使用がこの問題にどのように影響するかはわかりませんが、幅が通常は割高になるため、垂直に傾く傾向があります。

2
Peter

これがモバイルデバイスで使用される場合、2つの理由により、水平方向の配置が適切に機能します。

1つは、ユーザーが誤って間違ったボタンを選択することがないように、各ラジオボタンの周囲に十分なスペースを確保する必要があることです。ラジオボタン間に十分なスペースがある水平レイアウトは、行間に十分なスペースがある垂直レイアウトよりも洗練されていると思います。同様に、人々は、縦のペアよりも間隔が広い横のラジオボタンのペアをゲシュタルトグループ化する可能性が高くなります。あなたはそれらの周りまたは後ろにある種の箱を置くことによって、どちらかの方法でそれらの間の接続を強化することができます。

2つ目は、ラジオボタンを別々の行に配置すると、フォームの縦方向のスペースが大きくなることです。そのため、ユーザーが携帯電話でスクロールするにはforeverがかかるように見える場合があります。

2
Kimberly A.

はい/いいえタイプの質問が複数ある場合は、水平レイアウトを使用します。

ラジオの横にある実際のテキストに集中することなく、ユーザーがパターンにすばやく気づき、右または左の選択肢をクリックすると、プロセスがスピードアップします

1
Jimmy Carroll

@AnnaRoubenと同様に、水平に配置すると、選択肢がおそらくより明確になり、スキャンしやすくなることに同意します。ただし、ユーザーが常に「無回答」を選択できるようにする必要があることを付け加えておきます。そうしないと、データの一部が無意味になります。

Do you drink coffee every day?
(o) No answer    ( ) Yes      ( ) No

人々が誤ってクリックしたり、質問を理解できない場合、またはどちらにも選択が当てはまらない場合は、誤った回答を無回答に戻す機能が必要です。

1
Myrddin Emrys

「はい」と「いいえ」の間に視覚的な違いがあるため、水平はスキャンしやすくなります。また、無線が離れているため、選択をより正確にする必要があります。しかし、垂直方向は塗りつぶしが簡単です。マウスでジグザグにする必要がないため、直線で下に移動するだけです。

速度を上げるには、縦に積み重ねます。正確さのために、それらを水平に配置します。

1

マイクロソフトの面白い人がたくさんいます...記事を書くときは縦のプレゼンテーションが望ましいです。記事の最後に質問の横のプレゼンテーションを置いて、トピックが質問に答えるかどうかを確認します...見てください http:/ /msdn.Microsoft.com/en-us/library/windows/desktop/aa511488.aspx

つまり、私にとっては、特に「はい」と「いいえ」のラジオボタンは水平の方が適しています。そしてそれが書かれているので、すぐにチェックできるように、はいまたはいいえのリストのためにそれらを揃えてみてください

1
pierre lebailly

はい/いいえの場合は、従来のラジオボタンである必要がありますか?

私の答えはノーです。

Does it have to be a traditional radio button if it is only a yes/no?

1
RobbyReindeer

縦に行く。

たぶん、垂直よりも水平の方が読みやすいでしょう。ただし、画面のサイズを大きく変更したり、携帯電話で開いたりすると、違いが生じます。

コントロールが非常に小さくなると、横のradioButtonListに対して縦のradioButtonList(オプションは2つしかありません)を使用して選択し、オプションを設定する方が簡単です。

0
fjrr

厳密に「はい」/「いいえ」の場合は、チェックボックスを使用する必要があります。コントロールは理由のために存在し、単一のアイテムにtrueとfalseの両方が含まれています。現在、垂直方向/水平方向の論争はありません。

0
VoronoiPotato