離脱されない入力フィールド(入力欄)のデザイン方法。6つの要素を徹底解説
- UI/UXデザイン
- 入力フィールド
入力フィールドとは、Webサイト上でユーザーが情報を入力するための入力欄のことを指します。
入力フィールドは、ユーザーに情報を要求する最も一般的なインターフェイスの要素であり、多様なサイズや形状、スタイルがあります。
基本的には1行の入力欄を意味します。たとえばユーザーがサイト上で会員登録をする画面では、名前や住所、電話番号などを入力する欄が入力欄に当たります。
入力フィールドには様々な形状やスタイルがありますが、ユーザーに気付いてもらいやすい入力フィールドを作成するためには工夫が必要です。
ユーザーに気付いてもらいやすい理想の入力フィールドを作るためのポイントは以下の通りです。
■視覚的なインパクト
入力フィールドには、ユーザーが何をすべきか示す視覚的な手がかりがあることが望ましいです。
ユーザーが視認したらすぐにインターフェイスにテキストを入力してもらえるように、入力フィールドは空っぽでクリックできるような見た目にしなければなりません。
このような視覚的な手がかりが弱いと、ユーザーが見落としてしまいます。
■選択状態を示す
ユーザーが入力している場所を認識できるように、選択状態によってアクティブな入力フィールドを示します。また周囲の入力フィールドと混同するのを避けるため、有効な入力フィールドを示してユーザーが入力中のフィールドに集中できるようにしましょう。
■入力例を示す
メールアドレスを入力するための入力フィールドであればメールアドレスのような文字列を入れておくなど、ユーザーが何を入力すべきかを示しておくとスムーズに入力してもらえます。
・IxD/インタラクションデザイン
・UI/UX
・Webデザイン
・アプリデザイン
・マイクロインタラクション