読者です 読者をやめる 読者になる 読者になる

パンプキンスパイスラテ

IT系のことが多めの日記帳です

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

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

Before

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

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

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

After


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

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



Webユーザビリティ・デザイン  Web制作者が身につけておくべき新・100の法則。

Webユーザビリティ・デザイン Web制作者が身につけておくべき新・100の法則。

IA100 ?ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計

IA100 ?ユーザーエクスペリエンスデザインのための情報アーキテクチャ設計