ユーザーが見落とすことがない入力フィールドを作るには

入力フィールドは、ユーザーに情報を要求するもっとも一般的なインターフェイスの要素です。入力フィールドにはさまざまなサイズや形状、スタイルがあります。そのような選択肢がある中で、最適なユーザビリティを提供するには、どのように表示すればいいでしょうか？

強い視覚的な手がかり

最適な表示方法は、入力フィールドの機能と、ユーザーがどのように操作するのかによって決まります。つまり、入力フィールドには、ユーザーが何をすべきか示す強い視覚的な手がかりが必要です。

入力フィールドは、インターフェイスにテキストを入力するために存在します。したがって、ユーザーが視認したらすぐに行動を起こせるように、入力フィールドは空っぽでクリックできるような見た目にしなければなりません。入力フィールドがこのように表示されていないと、視覚的な手がかりが弱いため、ユーザーが見落としてしまいます。

視覚的な手がかりが弱いからといって、ユーザーが入力フィールドを操作しないわけではありません。行動までに時間がかかるということであり、 特に高齢のユーザーでは顕著です。あるユーザーリサーチによれば、視覚的な手がかりが強くなるほど、タスクのパフォーマンスが早まります。

クリックのしやすさと空白

ある程度優れたユーザビリティを持つ入力フィールドはいくつかあります。以下の１つ目は、クリックのしやすさという手がかりは強力である一方で、空白という手がかりは弱い入力フィールドです。 灰色で塗りつぶされているため、クリック可能な入力フィールドではなく、実行ボタンのように見えます。

ユーザーは白いスペースを空白と見なします。ユーザーが入力可能なスペースであると認識するために、入力フィールドの内側を白色にしましょう。ページ内のほかの要素によってユーザーの注意が分散するので、入力フィールドが目立つよう、このような形式にすることが重要です。

別のよくある形式は、枠線で囲まれた入力フィールドです。 枠に囲まれた白いスペースによって空白という要素は強調されていますが、クリックのしやすさは弱まります。クリック可能なスペースかどうかが１ピクセルの境界線だけで示されているため、白い背景に配置されているとユーザーは簡単に見落としてしまうでしょう。

下線で示される入力フィールドはさらに悪い例です。 クリックの可能性は低くなり、ただの空白のスペースでしかありません。１ピクセルの横線は見逃しやすいだけでなく、コンテンツを分ける区切りの線と間違える可能性があります。 どちらの視覚的な手がかりも不明確だと、ユーザーが入力フィールドを操作するまでにかかる時間が増えてしまいます。たった数秒増えるだけかもしれませんが、入力作業では１秒の差が大切です。

入力フィールドを表示する最善の方法は、暗い背景に白いスペースを配置することです。これによって、クリックのしやすさと空白の両方が強調され、入力フィールドであることがとてもわかりやすくなります。ユーザーがこのフィールドを見たとき、コンポーネントの機能と目的が明確に理解できます。視覚的にわかりやすいので、ユーザーはすぐに入力フィールドを操作することができるでしょう。

角を丸くする

入力フィールドに強い視覚的な手がかりを加えたら、角の丸みについて考えてみましょう。角を丸くすることは視覚刺激としては機能しませんが、オブジェクトに対するユーザーの態度に影響を与えます。

ある調査結果では、オブジェクトの輪郭が鋭利だと、ユーザーに脅威を感じさせ、否定的なバイアスを与えることがわかっています。別の調査によれば、鋭利な輪郭よりも曲線の輪郭のほうが文化を超えて好まれるそうです。つまり、入力フィールドの角が丸くなっていることで、ユーザーはよりユーザーフレンドリーなフォームだと認識します。ただ、程度についてははっきりしていません。

ここで忘れてはいけないのは、ユーザーがフォームをユーザーフレンドリーだと判断しても、それが最適なユーザービリティを意味するわけではないことです。この効果は、入力フォームに対するユーザーの第一印象にしか影響しません。入力フィールドの角が丸くなっていたとしても、フォームへの入力方法に問題があれば、ユーザーフレンドリーとは言えないでしょう。

半径を調整することで、角の丸みを好きに調整できます。半径を大きくすることはユーザビリティに影響せず、美的感覚の好みでしかありません。必要なのは、鋭い角を丸くするのに十分な半径を追加することです。

選択状態

入力フィールドが選択されているときには、ユーザーに追加の視覚的手がかりが必要です。ユーザーが入力している場所を認識できるように、選択状態によってアクティブな入力フィールドを示しましょう。周囲の入力フィールドと混同するのを避けられるよう、視覚的な手がかりによって有効な入力フィールドにユーザーが集中できるようにしてください。

選択状態を表す視覚的な手掛かりは、境界線の色を変化させるだけでは足りません。色を変えるだけでは、視覚障害や色覚異常を持つユーザーが選択状態を区別できないでしょう。

視覚的な手がかりに関する調査では、色変化に依存した場合、色覚異常を持つユーザーへのリスクがあると示されています。色と形状の両方を駆使して区別することで、ユーザーがその手がかりに気づき、作業をより早く達成する可能性が高まります。

枠線の色を変更すると同時に、線の太さを１ピクセルから２ピクセルに変更してください。これによって入力フィールドの色と形状が明らかに変化するため、すべてのユーザーが明確に状態を認識できるでしょう。

使用例

ECプラットフォームのShopifyは、入力フィールドを明確に表示しています。暗い背景に丸い角がある白い入力フィールドがあり、選択状態では２ピクセルの境界線が配置されています。選択状況を表す色はブランドカラーと一致しており、ユーザーを惹きつけます。

形式はつねに機能に従う

わかりやすい視覚的手がかりによって、最適なユーザビリティを持つ入力フィールドを作成することができます。デザイナーが明確な入力フィールドだと確信しても、すべてのユーザーが同じ見方をするとは限りません。視覚障害のある人を含むすべてのユーザーにとって、入力フィールドが明確であることを確認しましょう。

すべてのユーザーにとって明確な手がかりにするために、一次的な手がかりと二次的な手がかりを用意する必要があります。入力フィールドの視覚的な手がかりは、クリックのしやすさと空白から成ります。ただ、別のインターフェイスの要素では、視覚的な手がかりが異なることがあるでしょう。

インターフェイスの要素の機能によって、どのような視覚的手がかりを使うべきなのかが決まります。その機能に応じて、インターフェイスの要素がどのように見えるか判断しましょう。有名な建築家Louis Sullivan氏が20世紀に残した名言によれば、「形式は機能に従う」のです。