UXを高めるための効果的な入力フォームとは？テキスト入力フォームに最適なデザインを考える

UX movement

UX Movement is a user experience blog that publishes articles showing how good and bad design practices affect user behavior.

本記事は、The Best Way to Display Text Fieldsを
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

1,759 views

読了時間 : 約3分22秒

ユーザーから情報を得るためには、主に文字の入力フォームが使われています。大きさや形、スタイルも様々なものが存在します。その作成方法もたくさんありますが、使いやすさの点ではどんな見た目のフォームが最適なのでしょうか？

見た目の強いインパクト

一番良いのは、入力フォームの機能とその使い方を表示しておくことです。言い換えれば、見た目のインパクトが強ければ操作方法が簡単に分かるということです。

そもそも入力フォームとは、インターフェースに文字を入れるためのものです。なので、フォームを見つけたらすぐに入力出来るように、クリックしやすい空欄になっている必要があります。見た目のインパクトが弱いと、ユーザーはフォームを見逃してしまいます。

またそれは、単に入力しにくくなるというだけではありません。特に高齢の方が操作をする場合は、入力に余計に時間がかかってしまいます。ユーザー調査の結果によれば、見た目のインパクトが強ければ強いほど、その分入力スピードもアップするということが明らかになっています。

視認性＋空欄スペース

ユーザビリティに欠けている入力フォームをいくつかご紹介します。一つ目は、塗りつぶされている入力フォームです。視認性には優れていますが、空欄スペースとしては分かりづらいです。グレー色のせいで、空欄スペースというよりもボタンのように見えてしまいます。

空白と聞いて人々が思い浮かべるのは、やはり白色です。内側を白色にすれば、入力するスペースがあるということがすぐに分かります。ユーザーの注意を引きつける要素はウェブページにたくさん散らばっているので、文字の入力フォームを目立たせることはとても重要です。

もう一つは、入力フォームの縁取りをすることです。内側の白いスペースは強調されますが、クリックのしやすさは大して変わりません。ほんの1ピクセルのアウトラインがあるだけで、背景色が白でもはっきりと目立たせることが出来ます。

また、入力フォームがアンダーラインになっているのは良くありません。視認性としても空白スペースの見せ方としても、効果が弱いです。水平線は見逃されやすいだけでなく、コンテンツとの境界線だと思われてしまうからです。この二つのビジュアル要素が欠けていると、操作にますます時間がかかります。ほんの数秒の違いですが、各項目でその数秒が毎回ロスになるということです。

一番良いのは、暗めの背景の手前に白色の入力フォームを配置することです。一番分かりやすい表示の仕方です。機能の目的が一目で分かり、はっきり区切ってあることでユーザーもスムーズに文字を入力することが出来ます。

角を丸くする

入力フォームの見た目が決まったら、次は角を丸くします。見た目のインパクトは変わりませんが、ユーザーの反応には影響があります。

ある調査によると、シャープな輪郭のものというのは、その攻撃的な雰囲気からネガティブな印象を引き起こすそうです。他の調査でも、曲線の輪郭の方がシャープな輪郭のものよりも文化問わず好まれているとのことです。つまり角を丸くすれば、もっとフレンドリーな印象をユーザーに与えることが出来るということです。しかし問題は、どの程度角を丸くするかです。

ここで忘れてはいけないのは、仮にユーザーがフレンドリーだとしても、ユーザビリティが最適かどうかは分からないということです。最初の印象でその入力フォームが使いやすいかどうかが決まるので、いくら角の丸いフォームを使用していても、トラブルなどがあれば、その入力フォームはユーザーにとって使いづらいと判断されてしまいます。

角をどのくらい丸くするかは、半径を調節して変更出来ます。半径の数値は高ければいいというわけではなく、もはや美的センスの問題です。シャープな輪郭を丸くするために、半径をつけてあげるだけで十分です。