3. 何をすればいいのかわかりやすいエラーメッセージにする

error.jpg

アクセシビリティの高いフォームをデザインする時に気を付けておきたいことは山ほどあります。しかし、コンテンツ制作者やユーザーにとって最も大切なことがあります。それが*「エラーメッセージ」*です。

例えば、フォームを入力した時に、*「有効」や「無効」という言葉が出てくると、ユーザーにとっては抽象的でわかりにくいかもしれません。「このパスワードは無効です」と言われても、どういう条件を満たしたら有効になるのかを探さなければいけなくなります。挙句の果てに、「『性別』が無効です」「『氏名』が無効です」*と返ってきた時には、ユーザーは困り果ててしまいます。

ホームページにおけるアクセシビリティのガイドラインを掲載しているWebAIMによれば、エラーメッセージに関してこのように指摘しています。

「エラーメッセージでは、現在エラーが発生していて、解決するためにどのような行動を取るべきかを明確に伝える必要があります。例えば、『講座番号の入力方法が誤っています』よりも『講座番号は3ケタの半角数字で入力しなければなりません』のほうがユーザーにとっても親切でわかりやすいメッセージです」

エラーメッセージを表示する際には、単に問題が起きたことを伝えるのではなく、どうすれば解決するのかも伝えるようにしましょう。たいていの場合は、エラーについてだらだらと指摘しなくても、端的に解決方法を書いてあげれば大丈夫です。

4. 印象的で簡潔なヘッダーメッセージにする

ホームページを見る時には、ユーザーはコンテンツをじっくりと読む前に見出しをスキャニングして、自分の興味のありそうな情報を見つけます。では、本文の中身やリンクを見ずに、見出しだけでホームページの情報を伝えることはできるのでしょうか。半分くらいの人は「たまにかな？」くらいに答えるでしょう。

見出しだけで情報を伝えるための例として最適なのが、決済システム「SQUARE(スクエア)」のホームページです。

sqframe.jpg

例えば、下記のSQUAREの機能紹介のページを見てみましょう。

  • 「SQUAREの機能紹介」：とても明快です。ページをスキャニングしてSQUAREの機能を知りたいユーザーは、このセクションを時間をとって読むでしょう。
  • 「数分で設定終了、決済手数料以外の隠れた費用は一切なし」：やや長いですが、2つの特徴をシンプルにまとめています。
  • 「主要クレジットカードを受付可能」：対応しているクレジットカードが多いことはわかります。「主要クレジットカードって何？」という人はその下の本文を読むことで解決します。
  • 「オフラインでもカード決済」：非常に明快です。インターネットに接続していなくても決済ができることが見出しだけでわかります。

ちょっとしたエクササイズとして、ぜひご自身のホームページの見出し以外の部分を消してみても理解できるかどうか試してみてください。Photoshopで加工しても、pタグを背景色と同じにしてみてもいいでしょう。

見出しのhタグだけを見ても、明確にわかりますか？もしそうでなければ、書き直してみましょう。

ただし、見出しをもっと明確にするとなると、どうしても語数が多くなりがちです。語数が多くなり過ぎると、シンプルさに欠けてしまうことがあります。難しいところでもありますが、ユーザーが必要な情報を手に入れながら、短く分かりやすく伝えられるコピーはどんなコピーだろうか、常に自問自答してみてください。