Webサイト上でのユーザー体験を高めるために必ずおさえておきたいユーザービリティーチェックリスト

ここ数年でのテクノロジーの進化とデバイスの多極化により、WebサイトなどのUXデザインを行う際に気をつけなければならないポイントが非常に多くなった。

特にユーザビリティーが結果に大きな影響を与えるサービスにおいては、どのような内容のプロダクトであっても高いユーザーエクスペリエンスを達成する為に普遍的にクリアしなければならないポイントが幾つか存在する。

品質管理とコンバージョンアップの実現を目標に、10の項目ごとのチェックポイントのチェックリストを作成してみた。

サービス公開前に必ず確認し、全項目のクリアを目指したい。

1. ユーザーエクスペリエンス関連

ユーザー登録する際にユーザーになにかしらの価値を提供
例えば登録ボタンは単純に “登録” ではなく、”無料トライアル申し込み” とした方がユーザーにとってのメリットが伝わりやすい。また、極力無駄な登録はさせない。

料金/費用を分かりやすく表示
料金形態をクリアに記載し、サービスチャージや税金等の追加費用がある場合は合計額とそのうちわけも記載する。

ページの自動リフレッシュは行わない
一見便利そうに感じる自動リフレッシュだが、ニュース等のコンテンツであっても、勝手にページの内容が更新されるとユーザーに混乱を招く原因となる。

サンプルコンテンツの掲載
登録する事でメルマガやコンテンツが読めたりする場合は、登録画面にサンプルコンテンツを掲載する。

サイト全体から信頼感を伝える
掲載されているコンテンツが、ユーザーに安心感を与える内容である。例えば会社概要やアクセス情報がしっかりしている、代表や従業員の写真が掲載されている。最新情報が最近の内容である等。また、サイト自体のデザインもプロが最新のトレンドを採用してデザインしたクオリティーが高い。

商品やサービスの情報は分かりやすく表示
ページに記載されている情報は詳しく読まなくてもその内容が一目でどこに何があるかが直感的に分かりやすくする。商品の写真はズームで詳細が見れる様にする。

2. 制作プロセス関連

不具合/品質管理プロセスの設定
バグや動作の不具合だけではなく、ユーザビリティやユーザーエクスペリエンス的な問題点も含め、随時チェック、管理、改善を行えるプロセスとシステムが存在する。

ユーザーテスティングの実施
ターゲットとするユーザーによるユーザビリティテスティングを行う前に、社内外でプロジェクトに全く関わっていないユーザーにテストしてもらいフィードバックを得る。

改善点における優先順位の設定
改善点が多くある場合はそれぞれにおいて、目的、インパクト、コスト、スケジュール、必要リソース等の側面から最も高いROIを達成するために優先順位を設定する。

変更がもたらす影響を想定
サイトやアプリの一部に変更を施す事で、ブランディングやユーザーエクスペリエンス全体に影響を与える事もある。予想される影響をネガティブ/ポジティブ両方の側面からの予想/分析を行う。

変更を行った際のクリアなゴールを設定
改善後の結果の集計/分析方法と求められるKPIの数値を設定し、変更の前後での数値の違いを分析する。

3. レイアウト関連

重要な情報がページ上部に表示されているサイトがレスポンシブである
PCの加えスマートフォンやタブレット等の複数のデバイスと異なるサイズのスクリーンに対応している。小さめのスクリーンでも横スクロールバーが表示されない。

関連しているコンテンツが同じ箇所に分かりやすくまとめられているポップアップウィンドウが最低限に抑えられているサイト全体に統一性が保たれている
レイアウトやページ遷移が一定の規則に従って構成されている。

ページに十分な余白が確保されている
ユーザーが見やすい様にコンテンツを詰め込みすぎていない。

4. アクセシビリティ関連

テキスト以外の要素に適切なALTタグが設定されている
音声ブラウザに対応するため、画像を始めイメージマップや音声ファイル、ビデオコンテンツに適切なALTタグやキャプションが設定されている。

モノトーンにしても情報が伝わる
色盲のユーザーにも対応できるように、色彩要素はあくまでも二次的要素とし、色をメインのコミニュケーション要素としていない。

コンテンツが読みやすい
スタイルシートやJavaScriptがOffになっていてもコンテンツを読む事が可能である。

キーボドナビゲーションに対応している
サイトがマウスを使わなくてもキーボドのみでナビゲーションが可能である。また、その場合ブラウザーの既存のキーボドショートカットも利用出来る。

Flashコンテンツを利用していない
もしくはFlashファイルが表示出来ない場合でも代替えコンテンツが表示される様になっている。

リンクやボタン、チェックボックスなどがクリックしやすい
ユーザーがクリック可能な要素がクリックしやすい様に十分に大きい。また、チェックボックス等のフォーム要素はテキストなど付随している要素をクリックしてもチェック可能になっている。関連ツール: *アクセシビリティチェッカー

5. ナビゲーション関連

主要ページは全てナビゲーション要素からリンクされている
メインとなるページへはトップページに表示されてるスクロールやアコーディオンなどの動的モジュール要素からだけではなく、メインナビゲーションからもアクセスが可能である。

ナビゲーション要素が最適な順番表示されている
ナビゲーションやリンク等の要素を表示する際には五十音順ではなく、ユーザーにとって最もふさわしい順番で並べられている。

自分の居場所が一目で分かる
パンくずやサイトマップ等の要素からユーザーがサイト上でどのページにいるかが分かるようになっている。

サイト全体において統一したナビゲーション要素が表示されているリンク要素が分かりやすい
リンク可能な要素は行き先がユーザーに一目で分かる様になっている。 例えば”こちらから”では無く”お問い合わせページから”など。

タイトル要素にページの説明が含まれている
ページをブックマークした際に分かりやすい様に、タイトルタグにはそのページの内容を簡単に説明する文章が表示されている。

ページURLが分かりやすい
サイトやページのURLを見ただけでもその内容が想像しやすいものである。

6. コンテンツ関連

コントラスト
コンテンツを見やすくする為に、バックグラウンドと表示要素に十分なコントラストが設けられている。 関連ツール: *コントラストチェッカー

一目でコンテンツの内容が分かる
見出しやレイアウト、画像要素等を活用し、ページのどの部分にどのような内容のコンテンツが掲載されているかが一目見ただけで簡単に伝わる。

コンテンツに難しい表現が使われていない
ターゲットユーザーが理解しにくい専門用語やカタカナ表現が使われていない。 関連ツール: *読みやすさチェッカー

コンタクト情報と会社概要が分かりやすい
コンタクト情報ページにはメールアドレスと電話番号が記載され、”問い合わせボタン”をクリックした際には問い合わせフォームにリンクし、メーラーが立ち上がらない。

最新で役立つコンテンツである
ページに記載されているコンテンツはユーザーにとって知りたい内容であり、最新のものが分かりやすく表示されている。

英語標記の場合は全て大文字は使わない
英語の文章は大文字と小文字を利用する事で読みやすくなる。大文字だけを使うのは見出しのみに限定する。

7. トップページ関連

第一印象が良い
サイトに始めてきたユーザーに良い印象を与えるデザインになっている。

Call-to-Action (CTA) がクリア設定されている
トップページに来たユーザーにサイトの目的が分かりやすく伝わり、次に行ってほしいアクションを自然と喚起させる設計になっている。

ログインしたユーザーの名前が表示されている
例えば”XXXさんようこそ” のようにログインしたユーザーの名前がトップに表示されている。

重要な変更情報が表示されている
サイトのリニューアルや、規約の変更、サーバーダウンのお知らせなどの重要な情報が随時表示されている。

会社の情報が表示されている
会社のアドレスや電話番号等の情報がトップページに分かりやすく表示されている。

プライバシー情報へのリンクが表示されている
ユーザー情報を入力する必要があるサイトの場合は必ずプライバシー情報へのリンクをトップページの分かりやすい場所に配置する

視覚的要素はメッセージに合致したものを使う
トップページに掲載する画像やビデオの要素は、実際の商品やサービスに関連する種類のものや、そのサイトがユーザーに伝えたい内容に合うものにし、関連性の低い一般的な素材写真などは使わない。また、ビデオや音声コンテンツはユーザーが期待しない限り自動再生しない。

クロスドメインURL
サイトのURLはwww.のある無しに関わらずサイトへのアクセスが可能。例: “www.yahoo.co.jp” vs “yahoo.co.jp”

8. 検索機能関連

検索機能が実装されている
ページが多い大規模サイトの場合は検索機能が実装されている必要がある。

検索ボックスがフォーム要素になっている
検索ページへのリンクではなく、そのまま文字が入力出来るフォームになっている。

検索機能はどのページからも費用可能である検索ボックスの大きさが十分である
検索ボックスの縦と横の幅が文字が入力しやすい大きさになっている。

9. フォーム要素関連

最低限の入力事項
フォームに入力するべき情報は最低限に抑えられている。

ドロップダウンが長過ぎない
選択型のドロップダウンをユーザーがスクロールしなければならないほど長過ぎる場合はユーザビリティが低くなるので、テキスト入力にする。

テキストボックスは入力しやすいタイプのものである
例えば電話番号やクレジットカード番号等を入力するボックスは複数の箱ではなく、一つのボックスに入力出来る様になっている。

フィールドのラベルには一般的な名称が採用されている
例: フォームフィールドのラベルをNameやAddress等の一般的な名称にする事で、ユーザーに自動入力をしやすくする。

フォーム送信完了画面が存在する
フォーム送信後に送信完了をクリアに示す完了画面が表示される。

エラーメッセージの表示方法
入力エラーがある場合は、ページ上部だけではなく、エラーのあったフィールドの横にも分かりやすく表示する。

10. リンク関連

リンクとボタンを正しく使い分ける
“購入”や”申し込み”等のユーザーに重要な行動を喚起させたい場合は、リンクではなくボタンを採用する。

サイト内リンクは同じブラウザーウィンドウ/タブ内にて表示する
一方で外部リンクやPDFファイルを開く場合は新しいウィンドウやタブを開く。

リンクは一目でリンクだと分かる
ページ上のリンク要素はマウスを動かさなくても見ただけでリンクだと分かる。逆にリンクではないものはクリック出来ない様に見せる。

リンクの色
ボタンやテキスト等のリンク要素に使う色には一定の法則を採用する。

リンク切れが無い
Check with e.g. W3が提供するリンクチェッカー等を利用してリンク切れをチェックする。

筆者: Brandon K. Hill / CEO, btrax, Inc.

関連記事:

ユーザビリティを向上させる25のデザインの基本概念