既存のフォームをユーザーに使いやすくする10のポイント

Post on:2011年1月31日

1. 必須入力欄は強調する

ユーザーはフォームに入力した後に入力ミス・エラー表示があると、不安を感じたりイライラを募らせるでしょう。まずは、入力欄に「必須」「任意」などを記載して、入力欄が必須なのか任意なのかを明示的にユーザーに伝えるのは安全な方法となります。

2. エラーメッセージは分かりやすく

フォームのエラーメッセージは、「あなたが下に必要とさせるフィールドに全てを書き込まなくてはなりません」などのように分かりにくいテキストではなく、「あなたのメールアドレスを入力してください」のように具体的に分かりやすく表記します。入力項目ごとにメッセージを用意するのが一番です。

また、ユーザーが入力している時に、リアルタイムでエラーメッセージを表示するのも良い解決方法です。これは、ユーザーにどこがエラーなのか的確に伝えることができます。
例えば、メールアドレスの入力欄では、それが正しいフォーマットであるかリアルタイムに調べ、正しくなければユーザーにすぐにエラーメッセージを表示します。

3. クライアントサイドのバリデーション

JavaScriptを使用して、クライアントサイドでフォームに入力されたデータの妥当性をチェックすることで、ユーザーにミスしたことをすぐに知らせることができます。これはメールアドレスが正しいフォーマットであるか、電話番号が数字のみであるかなど、データベースをチェックする必要のない入力フォームに良いことです。

4. 入力している欄を明示

ユーザーが現在入力している入力欄を外見上明白にすることは、ユーザーが入力する際の助けになります。これはCSSの「:focus」を使って、簡単に実装することができます。
ユーザーが入力している欄のエリアの背景を、微妙に異なるカラーにするなど、最小限の変化を与えます。また、Chromeでは入力時にボーダーのカラーを変更しますが、こういったブラウザの機能があなたのウェブサイトのデザインに適しているか確認を忘れないでください。

[ad#ad-2]

5. 進捗を明示

もし、あなたのフォームが複数のページで構成されたものであれば、そのフォームが完了するまでの全部のステップと現在のステップをユーザーに提供するようにします。これはオンラインストアでは、いたって普通のことです。
もし進捗の明示がなければ、ユーザーはフォームがいつ終わるか分からないまま、「次へ」のボタンをクリックし続けることになります。これは途中で脱落してしまう原因の一つになります。

6. データの保存やキャッシュ

フォームは、数多くのページやステップがあるほど、ユーザーエラーに陥りやすいものです。その際、ユーザーが入力したデータの喪失を避けるために、クッキーを使用してユーザーの入力したデータを保存するのは良い方法です。
これはアクシデントで入力を中断してしまったユーザーが再度一から入力しなくてはいけないところを救うものになるでしょう。

7. 送信ボタンの文言

フォームの送信（submit）ボタンの文言を「送信する（submit）」ではなく、「サインアップする」などのように、フォームに入力することで得られるアドバンテージを文言にしてください。これはボタンをクリックすることで具体的に何ができるのか、ということをユーザーに伝えます。

8. キャンセルボタン

例えば洋服屋に行って、あなたがシャツを見ている時に店員は「あなたは本当にシャツを欲しいと思っていますか？」と聞くでしょうか？　おそらくそんなことはないでしょう。
フォームも同じです。ユーザーが入力したデータに対して「キャンセルボタン」があることは、ユーザーに二度も何について入力しているかを考えさせることになるかもしれません。

9. 入力例の記載

ユーザーの入力に電話番号やクレジットカード番号のような一定のフォーマットを求めている場合は、どのように入力するのか入力例を記載するようにします。また、パスワードのように特定の特徴を持っているのであれば、それを必要条件として明記してください。
入力例を記載することで、曖昧性を減らし、フォームの入力をより短時間にできます。