Webデザインにおけるフォームデザインテクニックのまとめ

「脳が多数の領域間の関係を処理できるように、入力は論理的なグループに分割する必要があります。」 – HTML の決定版ガイド

Web アプリケーションでは、データの入力と構成を処理するために常にフォームが利用されていますが、すべてのフォームが同じように作成されているわけではありません。入力領域の配置、そのラベル、操作方法、周囲の視覚要素は、ユーザーの行動に多かれ少なかれ影響を与えます。

フォームレイアウト

ユーザーがフォームを完了するのにかかる時間はできる限り短くする必要があり、収集されるデータはユーザーにとって馴染み深いもの (名前、住所、支払い情報など) であることを考慮すると、垂直に揃えられたラベルと入力フィールドがおそらく最適です。各ラベルと入力ボックスのペアを垂直に配置することで近接感が生まれ、一貫して左に配置することで目の動きが減り、処理時間が短縮されます。ユーザーは下方向へ移動するだけです。

このレイアウトでは、太字のラベルを使用することをお勧めします。これにより、ラベルの視覚的な重みが増し、目立つようになります。太字のテキストがなければ、ユーザーの観点からはラベルと入力ボックス内のテキストはほぼ同じになります。

フォーム上のデータがわかりにくい場合や論理的にグループ化するのが難しい場合 (住所の複数のコンポーネントなど)、左揃えのラベルを使用すると、フォームの情報を簡単にスキャンできます。ユーザーは、入力ボックスに邪魔されることなく、左の列のラベルを上下に見るだけで済みます。ただし、この場合、ラベルとそれに対応する入力ボックス間の距離は通常、ラベルが長くなることによって長くなり、フォームへの入力時間に影響する可能性があります。ユーザーは、対応する 2 つのラベルと入力ボックスを見つけるために、目を前後に動かす必要があります。

そこで、ラベルと入力ボックスの接続がより近くなるようにラベルを右揃えにする代替ソリューションが作成されました。しかし、その結果、左側のギザギザの空白とラベルにより、ユーザーがフォームのコンテンツをすばやく取得することが難しくなります。西洋諸国では、人々は左から右に書くことに慣れているため、この右揃えのレイアウトはユーザーにとって読みにくくなります。

視覚的な要素

「左揃えのラベル レイアウト」には、検索が容易で垂直の高さが低減されるという利点があるため、その主な欠点 (ラベルと入力フィールドの分離) を修正したくなるものです。

解決策の 1 つは、背景色と区切り線を追加することです。異なる背景色により、垂直ラベルの列と垂直入力ボックスの列が作成されます。ラベルと入力ボックスの各グループは、明確な水平線で区切られます。これは良いように聞こえますが、まだ問題が残っています。

以前の形式（ユーザーの主観的な視覚的区別）と比較すると、中心線、背景色のセル、水平線など 15 個の視覚要素が追加されます。これらの要素はユーザーの注意をそらし、ラベルや入力ボックスなどの重要な要素に集中することを困難にします。 エドワード・タフテは、「情報の差別化は必然的に異なる認識を生み出す」と指摘しています。言い換えれば、レイアウトに貢献しない視覚要素は常にレイアウトを乱すことになります。左側のタブをスキャンしようとすると、目が絶えず中断され、水平線、セル、背景色について考えるために立ち止まってしまいます。

もちろん、これは背景色や線を放棄することを意味するものではありません。関連するエリア情報を分割するのに、依然として非常に効果的です。たとえば、細い水平線や明るい背景色を使用すると、関連するデータを視覚的にグループ化できます。背景色と線は、フォームの主要なアクション ボタンを区別するのに特に効果的です。

一次および二次操作

フォームの主なアクション (通常は「送信」または「保存」) には、強力な視覚的重み (上記の例では、明るい色、太字のフォント、背景色など) が必要です。これは、ユーザーにフォームの記入が完了したか、もうすぐ完了するというヒントを与えることと同じです。

フォームに「続行」や「戻る」などの複数のアクションがある場合は、セカンダリアクションの視覚的な重みを減らすことが理にかなっています。これにより、ユーザーによる潜在的な操作エラーのリスクが最小限に抑えられます。

上記の内容はフォームをより適切に設計するのに役立ちますが、レイアウト、視覚要素、コンテンツの組み合わせは、ユーザーによるテストとデータ分析 (完了評価、エラー報告など) が必要です。