6月22日 アクセシビリティを高めて離脱率を低くするための5つのポイント ②/2

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

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

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

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

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

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

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

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

半分くらいの人は「たまにかな?」くらいに答えるでしょう。

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

5.入力フォームを最適化する

フォームをプロダクトデザインの究極的な形として捉える人もいます。
正しく設計すればするほど、あらゆるユーザーの利便性、そしてもちろんアクセシビリティも高めることができるからです。それゆえに、フォームの設計は、Webデザイナーの考え方が直接現れます。

それでは、どんなフォームを設計すればいいのでしょうか。

プレイスホルダーを設定しているだけのテキストボックスほど利便性の悪いものはありません。プレイスホルダーは、テキストボックスをクリックした途端に消えてしまうからです。Googleのページでよく使われていますが、プレイスホルダーを設定しておいて、クリックしたらラベルがテキストボックスの上に表示される、といった方法は改善方法のひとつです。

また、すべてのフィールドのうち、どれが必須でどれがオプションなのかを明確にしましょう。また、送信ボタンの文字を単に「送信」とデフォルトのままにするのではなく、「入力した項目を確認する」などより具体的な言葉で書くようにしましょう。

入力する際にユーザーに役立つ情報も添えておくとよいでしょう。
 例えば、パスワードを9文字以上にしなければならない場合、大文字や特殊記号を使った例を添えておけば、たいていはユーザーも大文字や特殊文字を使ったパスワードを入力します。このような情報をツールチップなどで隠さないようにしましょう。

入力するフィールドはできるだけシンプルなほうがいいですが、もし多くなる場合には関連性のあるフィールドをグループ化しましょう。
 
 
ブログ一覧へ