Webユーザビリティについて

Webユーザビリティとは?

Web標準が声高に叫ばれるようになり、それに伴ってWebユーザビリティの必要性も見直されてきています。ユーザビリティとは、簡単に言えば「使いやすさ」のことですが、厳密に言えば「特定の目的を果たすための効率性」のことです。

このページでは「アイビーネットにホームページ制作を頼むと、どんなユーザビリティを施術してくれるのか」ということを、ある例を出して具体的に説明していきたいと思います。

ユーザビリティが低いとなぜダメなのか

ユーザビリティが低いということは、どういうことなのでしょうか?下記例は非常にユーザビリティが低い「特定の目的を果たすための効率性が悪い」例です。

ユーザビリティが低い「特定の目的を果たすための効率性が悪い」例

Aさんはあるホームページに載っていたサービスに対して質問をしたいと思い、連絡先が書いてあるページを探しました。いくつかのページをぐるぐると見ていくうちに、トップページの右下に「困ったときは」という文字リンクを発見しました。クリックしてみると、連絡先が載っていました。

早速電話で質問しようと思いましたが、電話番号が載っておらず質問用のフォームがあるだけでした。そこでフォームから質問をすることにしました。

フォームには、「必須項目」を意味する「※」マークが下記入力項目に付いていました。最後にアンケート項目が載っていましたが、「※」マークは付いていません。

  1. お名前
  2. eメールアドレス
  3. 電話番号
  4. 郵便番号
  5. 住所
  6. お問い合わせ内容

ユーザビリティが低いフォームの参考例

Aさんは「※」マークが付いている項目を全部記入し、一番下に付いていた「送信する」というボタンを押しました。すると画面に「エラー、内容を確認してください。」と大きく赤文字で表示されてしまいました。どこかに間違いがあったようです。

ユーザビリティが低いフォームの参考例

そこで、郵便番号を「4620828」と記入したところを「462-0828」と修正してみたり、住所の番地を全角数字で記入していたところを半角数字に変えてみたりと、どこに問題があったのか色々試してみました。しかし相変わらず「エラー、内容を確認してください。」となってしまいます。

入力内容には問題がなさそうだと思ったAさんは、ためしに最後のアンケート項目を記入し「送信する」を押してみました。すると「送信完了いたしました」という画面が表示されました。どうやらアンケート項目も「必須項目」だったようです。

ユーザビリティが低いフォームの参考例

質問をしてから1日が経ちました。返事はまだ来ません。本当にフォームから送れたのか心配になったAさんは、もう一度同内容を送信してみました。すると程なく返事が来ました。

連絡は付きましたが、1日前に送った内容が届いていたのか疑問だったので、そのことを担当者に質問してみました。すると「届いていましたが、質問内容の確認に時間がかかってしまい、お返事が遅れてしまいました」とのことでした。

質問内容には丁寧に答えてもらい、問題は解決することができました。(終わり)

どこがユーザビリティ的に問題なのか

最初に申し上げたとおり、この例は非常にユーザビリティが低いです。Aさんは、ホームページに対するスキルが高かったこともあり、運良く質問することができました。しかし平均的なユーザーの方ですと、100人質問したい方がいたとしても、このホームページから正常に質問できるユーザーは、10人に満たないでしょう。

このホームページの問題点

このホームページの問題点を挙げてみます。

  1. トップページからしか連絡先を見つけることができない。
  2. 「困ったときは」という言葉からは、連絡先を連想することがしにくい。
  3. 連絡方法が1種類しかない。
  4. フォームに不必要な項目が多すぎる。
  5. エラーメッセージの内容が分かりにくい。
  6. 送信後に表示されるメッセージが不十分。

ユーザビリティを改善するとどう変わるのか

先ほど申し上げたとおり、このホームページでは100人質問したい方がいたとしても、正常に質問できるユーザーは、10人に満たないでしょう。これは非常に問題です。

それでは、まず上記で出された1〜6の問題点をふまえて、ユーザビリティを改善した例を挙げてみます。

ユーザビリティを改善した例

Aさんはあるホームページに載っていたサービスに対して質問をしたいと思い、連絡先が書いてあるページを探しました。現在のページ右上に「お問い合わせ」という文字リンクを発見しました。クリックしてみると、連絡先が載っていました。

連絡方法には、電話、eメール、FAX、フォームがありましたので、フォームから質問することにしました。

フォームには、「必須」というマークが下記入力項目に付いていました。

  1. お名前
  2. eメールアドレス
  3. お問い合わせ内容

ユーザビリティを改善したフォームの参考例

Aさんは「必須」というマークが付いている項目を全部記入し、一番下に付いていた「内容確認画面へ」というボタンを押しました。

すると画面に「恐れ入りますが、訂正をお願いします。eメールアドレスは半角英数で入力してください。」と赤文字で表示されてしまいました。そこでeメールアドレスを半角英数で入力しなおし「内容確認画面へ」を再び押しました。

ユーザビリティを改善したフォームの参考例

内容確認画面で送信する内容を確認し、問題がなかったので一番下に付いていた「送信する」というボタンを押しました。

ユーザビリティを改善したフォームの参考例

すると「送信完了いたしました。近日中に担当者からお返事いたしますが、質問内容によってはお返事に時間がかかる場合がございます。ご了承ください。」という画面が表示されました。

ユーザビリティを改善したフォームの参考例

同時にAさん宛に、入力した同内容のメールが送られてきました。

質問をしてから1日後、返事が来ました。質問内容には丁寧に答えてもらい、問題は解決することができました。(終わり)

ユーザビリティを改善したフォームの参考例

具体的なユーザビリティ改善方法

どうでしょうか。改善をした後のホームページでしたら、100人質問したい方がいたとしたら70人は正常に質問できると思われます。
では、実際にどんなことを念頭に改善したかを具体的に説明していきます。

問題点1:トップページからしか連絡先を見つけることができない。

ホームページのゴールの一つに「お問い合わせを受ける」というものがあります。それほど重要なことなのに、トップページからしか連絡先を見つけることができないというのは問題です。連絡先のページにはどのページからもリンクされているのが良いです。

問題点2:「困ったときは」という言葉からは、連絡先を連想することがしにくい。

「困ったときは」という言葉から「連絡先」という言葉を連想するのは難しいです。もっと分かりやすく「お問い合わせ」や「連絡先」といった連想しやすい言葉にするのが良いです。

問題点3:連絡方法が1種類しかない。

時と場合によるところはありますが、連絡方法は1種類ではなく複数用意した方が良いです。最低でも電話番号とeメールは用意しましょう。

問題点4:フォームに不必要な項目が多すぎる。

項目が多すぎるフォームをユーザーは好みません。特にこの場合は、質問に関係ない「郵便番号」や「アンケート」などといった項目が目立ちます。

それに、項目が多いとミスをする確率もその分増加します。フォームの項目は極力少ない方が良いです。

  • ユーザビリティを改善したフォームの参考例
  • ユーザビリティが低いフォームの参考例

問題点5:エラーメッセージの内容が分かりにくい。

「エラー。内容を確認してください。」では、何をすればエラーを解決できるのか分かりません。それに「エラー」という言葉は「やり直せ」と横柄に命令されている印象を与えかねます。

これは「恐れ入りますが、訂正をお願いします。○○の入力をお願いします。」と丁寧に分かりやすく指示をするのが良いです。

  • ユーザビリティを改善したフォームの参考例
  • ユーザビリティが低いフォームの参考例

問題点6:送信後に表示されるメッセージが不十分。

送信後に表示されたメッセージが「送信完了いたしました。」だけではなく「近日中に担当者からお返事いたしますが、質問内容によってはお返事に時間がかかる場合がございます。ご了承ください。」と一言添えた方が良いです。

  • ユーザビリティを改善したフォームの参考例
  • ユーザビリティが低いフォームの参考例

それに加えて、ユーザーがフォームから送った同内容のメールを、ユーザーのメールアドレス先にも送った方が安心されます。そのメールには「下記内容で質問をお受けいたしました。近日中に担当者からお返事いたしますが、質問内容によってはお返事に時間がかかる場合がございます。ご了承ください。」と添えるとベストです。これだけでも印象がかなり違います。

ユーザビリティを改善したフォームの参考例

更なるユーザビリティ改善点と方法

しかし、これら以外にもまだ改善点はあります。一つは「なぜeメールアドレスを全角で入力してしまったのか」という部分です。これも解決方法はあります。例えば、テキストフィールドにカーソルが来た時に「JavaScriptで文字入力モードを半角入力に切り替える」といった方法などです。

ユーザビリティを向上させるとは

今回はお問い合わせフォームを例にしましたが、ユーザビリティを向上させる方法というのは、上記にあげた以外にも無数にあります。例えば、あるページをブックマークしたときに表示される文字というのはHTMLのtitle要素が表示されています。

仮に「猫の病気」について書かれているホームページのtitle要素に「途中下車」と付けたとすると、後からブックマークを見てもどれが「猫の病気」について書かれていたかホームページか分からなくなってしまいます。ユーザビリティを考えれば、title要素には「猫の病気 - ノミアレルギー性皮膚炎」など直感できる言葉を入れるのがベストです。

ユーザビリティ、すなわち「使いやすさ」というのは、色々な要素が複雑に絡んだ上で「向上」していくものです。SEO対策もその一つです。そして使いやすさというのは日々変化していきます。

アイビーネットでは、その時ベストだと思われるユーザビリティを施術したホームページ制作をいたします。

アクセシビリティアワード受賞実績

2006年10月に行われた、アクセシビリティ(ユーザビリティを含みます)を評価対象としたアワード「アックゼロヨン・アワード外部サイトへ」にて、弊社が作成プロジェクトに参画しましたホームページが上位20サイトの中に選ばれました。

このことからも、弊社のユーザビリティに関する思いを感じていただけると思います。ご参考ください。

お問い合わせ・お見積もり等はお電話でもお気軽に 052-991-2388 月曜〜金曜 8時30分〜17時30分

ホームページ制作実績

「Webユーザビリティについて」の先頭へ戻る、アクセスキー0