web-dev-qa-db-ja.com

ラジオ付きの多肢選択フォーム:選択肢を水平、垂直、または正方形に配置する必要がありますか?

私の仕事は、大学生が取るクイズのインターフェースを設計することです。クイズ用に設計する場合、ユーザーにとって最も読みやすい配置は、水平、「正方形」、または垂直ですか。個人的には縦に並べるのが好きなので、簡単に答えを流すことができますが、それは私だけです。

enter image description here

質問の例(会計): enter image description here

17
Daryll Santos

あなたの仮定は正しいです。水平方向のリストではなく、垂直方向のリストで並べられたアイテムや、グリッドとして並べられたアイテムは、目には非常に簡単にスキャンできます。

その理由は非常に単純です。水平リストはより広い領域にまたがる必要があるため、ユーザーは焦点をより遠くに移動する必要があり、目が疲れます。グリッドについても同じことが言えます。ユーザーは、Zパターンを適用してリストをスキャンし、通常の垂直リストよりもはるかに大きな動きで左から右、左から左に移動する必要があります。

編集:垂直方向のリストを使用すると、可能な順序(番号が付けられた例など)に並列処理がある場合や、単語や句の追加/変更がある場合に、(単一の質問の)回答を比較しやすくなります。

19
AndroidHustle

個人的には、これは各回答の相互の関係、使用されている画面ナビゲーションの方向、質問間の回答の類似性に大きく影響されていると思います。それをもう少し説明すると:

各回答の相互関係

たとえば0..10の範囲の値を処理している場合は、低、中、高。 $ 0 .. $ 10000水平として受け入れられるスライダータイプのレイアウトは、回答のレイアウトに適しています。それぞれの答えが非常に異なる場合は、垂直方向のレイアウトの方が良いかもしれません。あなたが複数の選択肢を扱っているとあなたが言うとすれば、私は範囲がおそらくそうではないと想定しているので、これは本当に適切ではありません。

使用されている画面ナビゲーションの方向

  • トップダウン

    各質問が上下に表示されている場合、このアイフローに対して垂直に回答を表示すると、ユーザーは通常のアイスイープで回答を表示するのに負担がかかります。

  • 左から右、右から左

    各質問をアニメーション化し、フローの方向の印象を与えることからページに遷移する、またはスクロールするか、カルーセル効果を使用しているとしましょう。この場合、スクロール/カルーセル/トランジションのフローに従っている場合、回答は許容されます。

質問間の回答の類似性

すべての回答が同じである場合、ユーザーはそれらを読み直す必要なしにそれらを一掃するだけなので、フローの中断(つまり、質問のフローが垂直のときに水平に移動する)の影響は少なくなります。

1
Stephen James

長い質問については、「垂直」の配置に間違いありません。この例では、ラジオをインデントして、ドキュメントをスキャンしやすくし、依存関係を強調しています。

OT:しかし、短い「質問」(実際にはラベル)の場合は、4番目の配置を使用します。例のようなラベルと、列のオプション(3番目の例のように)を右にシフトして、フォームが2つの列、1つはラベル用、もう1つはオプション用です。

これは、従来の1列と2列のフォームレイアウトです。 2列のレイアウトでは、「回答」が「質問」(ラベル)のスキャンの邪魔になりません。
このようなもの:

Preferred color   O green
                  O blue
                  O white
Car brand   O Ford
            O Toyota
            O Ferrari
            O Citroën

オプション列が整列していないことに注意してください。長い形式では、非常に規則的なパターンは、紙から画面を見て自分の場所を見つけなければならないユーザーにとって役立たないため、これは意図的なものです。
コンテンツの長さに関係なくall入力が同じサイズであり、現在の作業場所に戻ることが困難でエラーが発生しやすいフォームに似ています。

0
Juan Lanus

まだコメントできませんが、答えとして追加します。ホイールを再発明しないでください。クイズ/テストを具体的に設計しているため、垂直方向の配置(SAT、GRE、ACTなど)を使用したすべての主要なテストで、物事を変更してユーザーを混乱させることはありません。テストがオンラインになるずっと前から機能し、現在も機能しています。

編集:AndroidHustleの答えが常にこれを行う一般的な方法であった理由を正確に説明していることを追加するのを忘れていました.

0
sn3ll