ユーザビリティの高いフォームレイアウトの提案

どこかでみて「なるほど」と思ったんだけど、URLを忘れてしまったのでまとめておきます。

Before

よく、こういうフォームがありますね。

まぁよくある普通のフォームです。
別にこれが悪いっていうわけではないのですが、ユーザーの視線の動きを考えると、下記のようにジグザグになってしまいます。

これは書類の申込書などにもよくあるかたちなので、特にユーザーは迷わないかもしれません。
ただ紙とは違ってウェブは可読性が落ちるので、もう少し改善してみましょう。

After

どうでしょうか。
視線はまっすぐになり、かなり可読性があがったのではないでしょうか。
ユーザーの視線の動きは下記のようになるはずです。

また、項目名の横が空いたことによって、その部分に「※必須項目」や簡易説明文などが入る余地がでてきました。
Beforeと比べると若干高さが出てしまいますが、Afterのほうはホワイトスペースを大きくとることができているので、とても落ち着いた雰囲気になります。
入力項目がたくさんある場合にはあまり適さないレイアウトかもしれませんが、そうでない場合には是非おすすめしたいレイアウトですね。