アイトラッキングから検証した、使いやすいフォームの10のポイント

サイト構築 -ユーザビリティ

Post on:2009年6月3日

1. Vertical, not horizontal

水平ではなく、垂直に

フォームのレイアウトは、水平方向の配置やそれが混在したものではなく、単純に垂直方向に配置したものが効果的です。
可能であれば、各ラベルも垂直方向に揃えて配置してください。

2. Left-aligned labels are clearer (anecdotally)

ラベルは左寄せにすると、より明確

フィールドと水平に配置したラベルや、右寄せのラベルはユーザーの視線の動きが複雑になります。
そのため、ラベルはフィールドに垂直に揃えて配置します。もし垂直が不可能なら、ラベルは左寄せにしてください。

3. When breaking the ‘one column' rule

1カラムのルールを破る場合

氏名や日付など複数のフィールドを一行に配置する際は、慎重に設計してください。
同じラベルで複数のフィールドがある場合は、関連性を持たせるために、それぞれをより近くに配置します。

4. Use coloured or shaded grouping headers ONLY if they are important

重要なポイントには、色を使って目立たせる

関連しているフィールドをまとめるためにグルーピングを使用する際、それぞれにヘッダを配置することがあります。
グルーピングのヘッダはユーザーの目にはなかなか止まりまらず、フィールドの方に注意が向けられる傾向にあります。
これらグルーピングしたヘッダをユーザーに、他と異なる色や濃淡を使用してヘッダを強調するとユーザーの目にとまるようになります。

5. Don't use asterisks, make clear optional fields

オプションのフィールドに、アスタリスク（*）を使用しない

必須や任意の項目に、アスタリスク（*）だけを使用しないでください。これは、このサインがどちらを示しているのかか、人によって認識が異なる上、サイン自体を見逃すこともあります。
必須には「必須」、任意には「任意」と明確に記述します。

6. Use single field for numbers or postcode

電話や郵便番号は、1つのフィールドで

電話や郵便番号の入力は、ユーザーを悩ませます。
これらは、数字の区切りや記号の使用などユーザーによってフォーマットが異なる場合もあります。
こういった項目は1つのフィールドだけにして、あらゆるフォーマットの入力を受け付けるように設定してください。また、もしそうでないなら、明確なエラーメッセージをユーザーに提供するようにします。

7. Avoid multiple tasks. If needed, ensure the important message stands out enough

ユーザーのタスクは、少なく

ユーザーに多くのタスクを与え、気をちらすようなことは避けてください。
必ずユーザーに目にしてほしいものがあるなら、注意を引き付けるように十分に目立つようにし、余計なものは配置しないでください。

8. Be wary about introducing real time feedback

入力チェックをリアルタイムに行う際は、用心深く

AJAXなどでフィールドに入力されたデータをリアルタイムにチェックを行う際は、仕様を十分に検討してください。
数秒のアニメーションでテキストを表示するものは、ユーザーの入力の気を散らせることがあり、またそのメッセージを見逃してしまうこともあります。
リアルタイムにチェックを行う際は、慎重に適切な方法を検討してください。