ウェブサイトでやってしまいがちなユーザビリティのミス

ウェブサイトでやってしまいがちなユーザビリティの9つのミスをSmashing Magazineから紹介します。

9 Common Usability Mistakes In Web Design

9 Common Usability Mistakes In Web Design

下記は、その意訳です。

1. クリックできるエリアが小さい

リンクのクリックできるエリアが小さいと、ユーザーはクリックするのが非常に困難です。

サンプルのキャプチャ

解決方法

リンク箇所にpaddingなどを設けて、クリックできるエリアを大きくします。

2. 間違った目的のためのページネーション

ページネーションは、内容を複数のページに分ける時に使用します。

サンプルのキャプチャ

しかし、最近ページビューを増やす目的でページネーションを設置しているサイトがあります。これには問題点が2つあります。

一つ目は、1つのコンテンツを読むのにページをロードしなくてはならないこと。二つ目は、SEOと関係があります。ページのインデックス付けを行う際、ページの内容が分かれている場合は内容が薄いものとして扱われます。

3. ページのtitleは簡潔で適切に

ウェブサイトにおいて、ページのtitleは重要です。titleはHTMLファイルのhead内にあり、ブラウザの上部や検索エンジンの検索結果画面などに表示され、ユーザーに多くの情報を伝えます。

サンプルのキャプチャ

意図した正しいページを見ているのか、検索結果から適切な内容のページであるか、ユーザーが判断できるように簡潔で適切な内容のtitleを記述するようにします。

4. ざっと見ても、理解しにくいページ

ユーザーがウェブサイトの端から端まで、全てに目を通すことを想定しないでください。

サンプルのキャプチャ

ユーザーは上のキャプチャのように、飛ばし読みをする傾向があります。

解決方法

  • ユーザーの視線を惹きつけるポイントを数ヵ所設置してください。このポイントは、より高いコントラストやより大きいフォントなどを使用します。リストなどのテキストにはアイコンなどの画像を使用することも効果的です。
  • 視線を惹きつけたいポイントには、魅力的な見出しも効果的です。見出し以外を読まないユーザーにもその内容について理解できるように記述します。
    ユーザーは情報を素早く欲したいので、簡潔に情報を提供します。
  • ポイントが不明瞭で、無駄に長いパラグラフは、ユーザーがうんざりするだけです。ポイントを明確にし、簡潔なコピーを使用します。

5. コンタクトの手段が無い

ユーザーとのコミュニケーションの成功を望むなら、ユーザーとのエンゲージメントは重要です。

サンプルのキャプチャ

上のキャプチャはコカコーラコンタクトページです。ユーザーがコンタクトをクリックした際、メールや電話の記載はなく、FAQのページに誘導されています。
これは、ユーザーとコンタクトを取ることを望んでいるようには見えません。

解決方法

メールアドレスの記述やコンタクトフォームの設置はスパムという問題がありますが、大きな解決になります。
スパム対策としては、メールアドレスの暗号化やCAPTCHAの設置などがありますが、アクセシビリティの面で問題があることを忘れないでください。

これらユーザーとの直接的なコンタクト手段以外に、フォーラムを設置することでコミュニケーションをはかることができます。
これはあなた自身がユーザーに返答をしなくても、別のユーザーが問題解決を助けることもあります。

6. 検索の手段が無い

ウェブサイトに来訪した際、多くのユーザーは検索ボックスを探します。これはユーザーが目的のものを探し回ることに興味を持っていないということです。

解決方法

検索ボックスを設置するのに、高度な知識は必要ありません。GoogleやYahoo!などの検索サービスを利用することができます。

7. 登録を必要とするサービス

ウェブサービスの利用に、登録を必要とするサイトがあります。その際、利用できるサービスの範囲を注意深く考えてください。

ログインをせずに、ユーザーが利用できるサービスを提供することは重要です。例えば、diggではログインをせずに、全てのサービスを閲覧することができます。

また、容易にサービスを利用できるようにすることで、サービスの利用者を増やすことも可能です。

サンプルのキャプチャ

Posterousでは、アカウントの作成の必要がありません。メールを送信するだけで、すぐにサービスが利用できます。

8. 古いパーマリンクのリンク切れ

パーマリンクとは変化しない固定リンクのこと。
パーマリンクが、ドメインの移動時やサイトの再構築時などに変更してしまい、リンク切れを起こしてしまうことがあります。

これは、ユーザーが古いリンク情報を使用してアクセスした際、目的のページにアクセスができなくなります。

解決方法

ユーザーはアクセスした際に、404 Not Foundのページを見ることを望んではいません。
301 Redirectを使用して、適切なページへ誘導してください。

9. 入力項目が多いフォーム

入力する項目が多くて長いフォームは、ユーザーが入力する努力を伴うため、障害となります。決して、その入力作業はユーザーにとって楽しいことではありません。

サンプルのキャプチャ

解決方法

入力する項目は、可能な限り少なくします。

必須ではない入力項目は、本当に必要であるか検討してください。

最後に

「Less Thinking」

ユーザビリティは、より容易に使用できるようにすることが大切です。

より少ない思考、より少ないフラストレーションで、ユーザーが探しているものを提供できるようにします。

sponsors

top of page

©2018 coliss