フォームフィールドは上から下へ、または左から右へ/右から左へ流れる必要がありますか？

Question

私は現在、ユーザーがアプリ内でエクスペリエンスを作成するための小さなフォームを設計しています。

姓のフィールドを名の右側に表示するのは理にかなっているのでしょうかOR名フィールドの下にあります。

Answer 1

個人的には、フィールドが垂直になるようにフォームを構成するのが好きです。これにより、検証メッセージやヘルプアイコンなどを配置するためのクリーンな領域が右側に残ります。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

---

とはいえ、どちらの方法でもかまいません。他の方法よりもbetterに勝るものはありません。 "An Extensive Guide to Web Form Usability" の記事で定義されているように、Webフォームの6つのコンポーネントがある限り、ユーザーはフォームに何の問題もないはずです。

Webフォームの6つのコンポーネント

Webフォームは必需品であり、設計者とユーザーの両方にとってしばしば問題点です。時間の経過とともに、ユーザーはフォームがどのように見え、どのように動作するかについての期待を形成しました。彼らは通常、Webフォームに次の6つのコンポーネントがあることを期待しています。

1. ラベル
   これらは、対応する入力フィールドの意味をユーザーに伝えます。

2. 入力フィールド
   入力フィールドにより、ユーザーはフィードバックを提供できます。テキストフィールド、パスワードフィールド、チェックボックス、ラジオボタン、スライダーなどが含まれます。

3. アクション
   これらは、ユーザーが押すとフォームの送信などのアクションを実行するリンクまたはボタンです。

4. ヘルプ
   これは、フォームへの記入方法に関する支援を提供します。

5. メッセージ
   メッセージは、ユーザーの入力に基づいてユーザーにフィードバックを提供します。正の値（フォームが正常に送信されたことを示すなど）または負の値（「選択したユーザー名は既に使用されています」）になります。

6. 検証
   これらの措置により、ユーザーが送信したデータが許容可能なパラメーターに適合していることが保証されます。

---

もう1つ考えられるのは、Googleのようにフィールドを1つの領域にグループ化することです。

Answer 2

「ゲシュタルトのグループ化の法則により、「互いに近接する要素は一緒に属していると見なされます」とあります。参照： http://en.wikipedia.org/wiki/Principles_of_grouping#Proximity 。

私は遠くまで行って、そもそもあなたがこの質問をするようになったのはこの認識だったと思います... ;-)

したがって、この例では、「名」と「ユーザー名」、および「姓」と「メール」がグループ化されています。したがって、これを尊重するために順序を切り替えることをお勧めします。 「名」と「姓」は、「ユーザー名」と「メール」と同様にうまく調和します。

^{download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム}

それがあなたの意図に反する場合は、水平要素をより近くにグループ化する方法を見つけるか、他のゲシュタルトの法則のいずれかに従うようにしてください。