「Webユーザビリティ・デザイン」を元に、要約メモしておきたいと思います。
Webサイトを作る前に考えること
そのプラットフォームがある程度の段階まで熟してくると、その中にまた新たな市場が生まれて「車輪の再発明」といったことがよく起こるように思います。正しく言うと意味は違いますけどね。
例えばパソコンだとネットブックという市場です。そろそろ 1024×768px というモニタサイズを最小と考えてWeb制作を行って良いかのような流れもありましたが、現行のネットブックのモニタサイズは、1024×600px あたりが主流です。
また今回、「テキストはできるだけ画像にしない」という必要性も改めて痛感させられました。テキストサイズを変更したいと思っているのは、何も年配の方だけではないのです。
ユーザビリティとは、次のように定義されています。
- 使用性（usability）
ある製品が、指定された利用者によって指定された利用の状況下で指定された目標を達成するために用いられる際の、有効さ、効率及び満足度の度合い - 有効さ（effectiveness）
利用者が、指定された目標を達成する上での正確さ及び完全さ - 効率（efficiency）
利用者が、目標を達成する際に正確さと完全さに関連して費やした資源 - 満足度（satisfaction）
不快さがないこと、及び製品使用に対しての肯定的な態度
要するに「その製品を使う対象となるユーザが、間違えずに最後までたどり着けるか、その目的達成までに無駄な時間や労力を使うことがないか、嫌な思いをさせずに目的を果たして満足し、好印象をもてるかどうか」ということです。
01｜長期継続か短期のインパクトか目的をしぼる
長期運用のWebサイトは XHTML + CSS で構築してデザインの変更などをしやすくする。プロモーションなどを目的とした短期のWebサイトの場合は Flash などを使って話題性や新規性を打ち出したものにするなど。
02｜Webサイトの目的を考える
Webサイトを立ち上げる前に、なぜWebサイトが必要なのかを検討する。
「これだけは人に負けない」という何かを探す。成功して他の大企業がマネできるものは、広告・宣伝や価格競争で最終的に負けてしまう。他にはなくて、しかも独自の情報やルートがある、大規模化しても採算が合わないなど、他社がマネしにくいことが条件。
03｜ターゲットユーザーを考える
会社や実店舗がある場合は、その顧客層がインターネットにおいても、初期のターゲットユーザーの基本となる。また、取り扱う商品によってもおよそ検討がつく。
会社や実店舗と違う層の潜在顧客を発見できる場合もある。想定ターゲットユーザーの見直しを検討したら、次にそのユーザーがどのようなWebサイトを好んで利用しているかも調査してみる。「高機能よりも簡単」「テキスト主体よりもビジュアル主体」「堅実・重厚よりも親しみ・柔らかさ」など。
04｜競合サイトを研究する
同規模の会社やショップだけがライバルとも限らない。他の会社やショップが競合している分野に新規参入し、なおかつ売上を伸ばすには、他のWebサイトとは比べものにならない何かが必要となってくる。
05｜ユーザーからのフィードバックを受け入れる体制を整える
お問い合わせ内容を書き込める程度のシンプルなフォームや、お問い合わせ先のメールアドレス、電話番号などを用意して、ユーザーからの積極的な質問を促す。サポートページを活用すると、ユーザーの意見を引き出しやすい。
06｜技術志向ではなくユーザー志向で考える
どんな技術が使われているかはユーザーには分からないし関係のないこと。ただそのWebサイトが自分にとって使いやすいか、好感を持てるかどうかでユーザーは判断する。
07｜コンテンツを整理してランク付けをする
運営サイドとして入れたいコンテンツと、ユーザーが望むコンテンツがある。運営サイドがブランドのイメージアップやサポートの効率化など、ユーザーは商品を買いたいなど。いったんそれらをリストアップしてカテゴリに分け、ランク付けをしてみる。
08｜ユーザーの目的を細分化してランク付けをする
例えば商品の購入が目的の場合、「商品を探す→商品を比較する→商品を注文する」というタスクが考えられる。
09｜コンテンツとタスクから基本構成を考える
基本となる導線以外にトップページなどから優先度の高いコンテンツに直接リンクするといったショートカットを配置するなど。階層で考えるのではなく、主要コンテンツに簡単にたどり着けるかどうかで考える。
そして、本来の目的に関係のないメルマガや会員登録などの要素を、タスクの流れに入れないようにする。
10｜Webサイトの企画とドメイン名をセットで考える
サイト名とドメイン名を直接結びつける代わりに、サイトのキャッチコピーなどと連動させる方法がある。
基本構造とレイアウト
11｜わかりやすいディレクトリ名とファイル名を使う
動的ページは静的ページの URL に変換するなど。URL を見ただけで Web サイトの構成や自分の現在位置を想像できるようになる。
12｜ページの内容がひと目でわかる title 要素にする
Web ブラウザのタイトルバーやブックマークの登録にも使われ、検索エンジンの検索結果にも表示されるので、特に強調したい内容を15文字程度に収める。「ページの内容｜サイト名」の順番にしてページ内容をわかりやすくする。
13｜alt 属性で画像の代替テキストを入れる
画像を表示できない環境のユーザーに画像の内容をテキストで説明するという本来の意味で使うべきであり、SEO 効果はあくまでも副次的なもの。
14｜検索結果をわかりやすくする
現在では meta 要素のキーワードよりも description に重きが置かれるようになっている。
15｜ユーザーがわかりやすいカテゴリに分ける
たとえば「生活雑貨」というカテゴリに「ティッシュ、タオル」など、カテゴリに説明文を付けて補う。
Webサイトの情報量が多い場合は、ひとつのカテゴリを見ただけでは目的の情報にたどり着きにくいので、機能別、ブランド別など複数のカテゴリ分類を併用する。
16｜ナビゲーションに例外規則を作らない
「たとえ初めて訪れたユーザーでも、それ以降すぐにそのWebサイトの閲覧方法や操作を覚えることができる」あるいは「リピーターが最初に訪れたときとは異なる目的のページに行こうとする場合でも、以前の経験を手がかりにすばやく移動できる」。
サブサイトやグループサイトでも、ナビゲーションの規則を統一させることで、ユーザーがWebサイトで迷子になる可能性を下げられる。
17｜フッタ部分から次のアクションへ結びつける
ページの下までスクロールするユーザーは、次のアクションを考えていたり、なんらかの情報を求めている場合が多い。グローバルナビゲーションや、関連商品の案内・関連カテゴリなどを入れる。
18｜レイアウトで情報を明確に区分する
たとえばテレビは情報を順番に流すが、Webサイトはいくつもの情報がページの各所にちりばめられている。これを分かりやすく見せるために、情報の塊（チャンク）ごとに区分けし、レイアウトしていく。
19｜ユーザーの視線をコントロールする
Webブラウジングの経験が少ないユーザーほど画面の上部から情報を探し始めるというデータがあるので、重要な要素は画面の上部に配置する。また、画面のチャンクを意識して視線を移動するユーザーは多いので、ボーダーや背景色などでチャンクを明確にする。
20｜文字サイズはユーザー側で変更できるようにする
意図したデザインを崩したくないという理由から文字サイズを固定しているWebサイトは多いが、「% か em」で相対的に指定する。
21｜Webサイトの横幅は1024ピクセル表示を前提にしない
実際にはユーザーはWebブラウザを画面いっぱいに広げない場合もあるし、サイドバーを表示している場合もあるので、3カラムレイアウトの3カラム目は表示されない可能性がある。
22｜文字色と背景色の組み合わせを考え、コントラストを十分にとる
「見出しは文字色と背景色のコントラストを十分にとる」「本文は白背景に黒い文字か濃いグレーの文字にする」など。雑誌の場合も見出し要素はコントラストを十分にとっている。
23｜Webサイトのテーマカラーを決める
色数の多いWebサイトは、場合によってはチープな印象を与えてしまいかねない。テーマカラーを決めて色味を統一し、目立たせたいところだけにアクセントカラーとして目にとまりやすい色を使用する。
24｜コンバージョンを上げるサイト設計にする
コンバージョンレートは「具体的に行動を起こしたユーザーの数 ÷ 訪問者数」。
トップページの場合は、ユーザーにすすめたい商品やニーズの高い商品があるページへのリンクやバナーを置く。カテゴリページの場合、リピーターや欲しい商品が決まっているユーザーのために、詳細ページを確認することなく買い物ができるよう、カテゴリページのサムネールに「今すぐ購入」のボタンを配置する。詳細ページは、コンバージョンを促す情報やリンク、レビューや送料、個人情報の取り扱いなどを設け、ユーザーが安心してコンバージョンできるような環境を整える。
25｜1ページの情報を多くして盛りだくさん感を演出する
ユーザーテストを行うと、はじめに表示されていない情報は、ユーザーの目にとまらない傾向にある。商品紹介などのコンテンツの場合は、情報をあえてまとめず、1ページの情報量を多くして認知度を上げることも有効。
26｜CSSで印刷されることも考えたページをデザインする
Internet Explorer 6 の初期設定の状態では、ページの横幅が640ピクセルまでしか印刷されないので、印刷用の CSS では次のような設定を行う。
- ナビゲーションメニューや広告など不要と考えられる要素を display:none; で消す
- フォントサイズは font-size:12px のようにポイントで指定する
- リンクには下線を指定する
- 画像リンクがある場合を考えて、画像に枠線が付かないように border を0にする
27｜ノイズのないデザインを目指す
信号は「本来伝えたいこと」を差し、ノイズは一連の行程の中で入る「雑音」。ノイズの部分を最小化し、信号がユーザーに伝わりやすくすることが、Webサイトをデザインするうえでの唯一の目標といってもいい。
- ボタン
ボタンで一番伝えたい信号は「このラベルがクリック可能なこと」 - ナビゲーション
重要なのはラベルと現在位置を示すこと。クリックできることを明確にするためにエンボスや影を付けることは悪くないが、そればかりが目立ってしまってはノイズとなる。 - 見出し
見栄えをよくするために写真を重ねたくなるが、そうするとバナーと間違えられやすくなる。 - 製品写真
製品写真では、製品の写真だけでなくユーザーにとっての利用シーンがわかるようにするといい。単に抽象的な背景を敷いたようなものはノイズといえる。
ユーザーをWebサイトに迎える
28｜どのページから入ってきても次の行動がわかるように設計する
Yahoo! や Google などの検索エンジンからやってきて、そのページに目当てのものがあるかどうかを確認し、なければ帰って行く。情報が別のページにあるにもかかわらずナビゲーションが不十分なために1ページしか見ずに直帰されているとすれば、それは大きな機会の損失になる。パンくずリストなどを使って、2ページ目以降に誘導する。
29｜ランディングページの最適化を図る
ユーザーが、クリックに対して課金するPPC広告（Pay Per Click）やバナーをクリックし、最初に訪れるページのこと。ランディングページを見て、商品の購入、プレゼントの応募、資料請求などのアクションを起こすかどうかを判断する。そのために、LPO（Landing Page Optimization：ランディングページ最適化）を行う。
30｜会員登録とログインでユーザーを囲い込まない
通常のWebサイトでは、会員登録とログインをやめるだけで、売上やユーザー数は確実にアップする。ログインが必要なのは、オンラインバンキングのような「セキュリティが非常に重要な場合」や、ブログのような「第三者に侵入されることを防ぐ必要がある場合」、そして、食品の配達のような「定期的に必ず利用するサービスサイト」くらい。
31｜すべてのページにお問い合わせ先を明記する
広告や新聞への折り込みチラシで、お問い合わせ先の電話番号が記載されていないものはほとんどない。それは、お問い合わせが購買や契約につながる重要なきっかけだから。連絡先の記載が、冷やかしや苦情の殺到につながるのではないかと考えるかもしれないが、現実社会の企業での常識は、ネット上でも常識。
32｜記載したページを削除・移動・リネームしない
新URLに自動的に移動させたり、サイトマップを表示するなどエラーページをカスタマイズしたHTMLファイルを用意して、せっかく来てくれたユーザーを追い返さない。
33｜どのページから来てもホームに戻れるようにする
サイトロゴの下に「ホーム」を表示したり、グローバルナビに「ホーム」を表示したり、パンくずリストに「ホーム」を表示するなど、迷ったらホーム、とりあえずホーム、という行動に応える。
34｜Webサイトの目的やテーマはタグラインで瞬時に伝える
何を目的としたWebサイトなのかを知らせるために、サイトロゴの周辺などにタグラインを入れる。
35｜トップページでユーザーを信頼させる
顔が見えるリアル店舗と違い、ユーザーにとってはWebサイトの情報がすべて。個人情報保護方針や会社住所、連絡先を明記する。プライバシーマークを取得するのも有効。TRUST-e、VeriSign、JADMAなど。
ユーザーを迷わせない情報とナビゲーション
36｜テキストリンクには具体的な内容を記載する
「ここをクリック」や「詳細はこちら」ではなく、「○○サービスの詳細仕様」などのようにリンク先の内容を具体的に示すことが重要。
37｜テキストリンクはWebブラウザの標準仕様をベースにデザインする
「青くて下線のある文字はクリックできる。一度見たページは紫色になる」ということは、インターネットを利用しているユーザーのほとんどが知っている。Webサイトの配色にあわせてテキストリンクの色をアレンジするのであれば、未訪問リンクと訪問済みリンクで色分けをし、下線を引くかマウスオーバー時にのみ下線が表示されるようにする。
38｜target="_blank"による新規ウィンドウ表示は避ける
「そのままのウィンドウで他サイトに移動させてしまうとユーザーを逃がす」という発想は、ユーザーの操作の妨げとなるだけで、有効なユーザーの囲い込み策にはならない。
39｜HTMLページ以外のリンクは事前に知らせる
「売上報告書：PDF形式（300KB）」のように、ファイルの内容、形式、サイズを明記しておく。
40｜ページ内リンクは他ページへのリンクと区別してわかりやすくする
ページ内リンクの先頭に「▼」の記号を付けたり、リンクの色を変えたりして区別する。ページ内リンクは、自分がどこにいるか見失いやすいし、「戻る」ボタンをクリックすると元の場所ではなく、ひとつ前のページに移動してしまう。
41｜画像リンクはまわりとのメリハリで目立たせる
画像サイズをむやみに大きくするよりも、ボタン部分だけをポイントで色を使って目立たせて、「注文する」「お申し込みへ」といった簡潔な文字を入れて太字で囲む、あるいは影付きにするなど。
42｜サムネイル画像リンクからアクションを起こしやすくする
大きな画像を最初からページに掲載すると表示に時間がかかるうえ、同時に他の情報を見せられなくなる。このため、ファイルサイズを縮小したサムネイル画像を表示しておき、クリックすると画像が拡大するようにするのがスマート。
43｜ページの「戻る」リンクは JavaScript ではなく URL 指定にする
「Javascript:history.back()」は、途中ページから閲覧したユーザーをWebサイトから離脱させる。
44｜文字の行間を調整して読みやすくする
文字の行間は読みやすさに大きく影響する。
45｜読まずにパッと見てわかる文章にする
ブログのような読みものをのぞき、ユーザーは文字を「読む」のではなく「見る」。ビジュアルが目にとまったあとで初めて文章が読まれるくらいの位置づけでデザインのバランスを考えたほうがいい。
46｜表記と用事用語を統一してユーザーの混乱を防ぐ
商品名はスペースの半角・全角まで気を配る。前ページに戻るボタンが「戻る」だったり「Back」だったりするのもわかりにくい。「尚」と「なお」、「下さい」と「ください」、「出来ます」「できます」なども統一する。
47｜ユーザーが誤解しやすい表現は避ける
「ご注文日から2営業日以内に発送します」といった文章はあいまいな表現の代表例。「遅くとも何日以内」などと表示したうえで、受注メールや発送連絡メールでフォローする。
48｜機種依存文字は使わない
文章が文字化けしていると、ユーザーはその部分を読めなくなり、Webサイトの信頼も落ちる。
49｜外国語はカタカナ表記でわかりやすく検索しやすくする
たとえば「Bambino」というイタリアンレストランであれば、「イタリアンレストラン・バンビーノ」と併記する。
50｜制作者ではなくユーザーにわかる言葉を使う
「スパム」は「迷惑メール」に、「ヤフオク」は「Yahoo! オークション」のように正式名称にする。「ワンセグ」のように「1セグメント放送」よりも略語が一般的な場合は略語を使う。
51｜ページ内にスクロール枠は付けない
新着情報などをスクロール枠の中に表示させている場合、表示されていない部分はほとんど読まれない傾向にある。こうした情報は、最新の何件かだけをトップページに表示し、以降の部分は一覧ページを別に用意するほうが読みやすい。
52｜テキストをスクロール・点滅させない
点滅する文字は非常に読みづらいので、内容が読まれないままほとんど無視されてしまう。それに加えて、画面に細かな動きがあるとユーザーの気が散り、操作や閲覧の妨げになる。
53｜Webサイトの目的に応じて画像の量や使い方を決める
画像には、「テキストでは表現しにくい内容を伝える」「テキストを補完する」といった情報伝達目的のものと、「見出しに添えるイラスト」のような修飾的なものがある。修飾として用いる画像はあくまでも脇役であることを意識し、主役となる情報伝達の画像よりも目立つ使い方は避ける。
54｜アイコンには意味をそえる
アイコンでユーザーの視角に訴え、テキストで意味を補足する。誰もが知っていると思えるようなアイコンでも、意味の取り方は人それぞれ違う。
55｜CSSで読みやすい表組みを作成する
以下のポイントを念頭にデザインする。「見出しとデータを明確にする」「罫線を立体ではなくフラットなものにする」「罫線と文字の間を十分にとる」
56｜図や表の統一を図る
- 色彩設計
Webサイトのベースカラーと図表の色を同一の色相やトーンにする - 文字の種類と大きさ・位置
文字の大きさ、行間、フォントを統一することで可読性を向上させる - グラフ・図表の基本形式
ラベルの記載箇所、縦軸と横軸の幅、キャプションの位置、枠の付け方や、矢印などの形や影の落とし方 - 図表のサイズ
極端に大きいものや小さいものがないように、最大/最小の幅を決めておく - 表組みの設計
色彩のほか、見出しの方向や罫線の太さなどを統一する
57｜印刷できて迷わない地図ページを作る
地図ページはWebサイトでもっとも利用されることが多いページのひとつ。
58｜ユーザーが本当に安心できるSSLを導入する
Internet Explorer 7 で、より厳しくなったセキュリティ警告に適切に対応する。
59｜情報バーで注意される技術は使わない
ポップアップウィンドウは使わない。
60｜「よくある質問と答え」でユーザーの問題を解決する
企業のWebサイトは一方的な情報発信になりがちだが、「よくある質問と答え」を用意すれば、ユーザーの問題を解決して相互の信頼関係を築くことができ、その後のアクションに つなげることもできる。また、1ページに質問と答えを複数掲載せずに、質問をまとめたインデックスページを作成し、質問と答えを1ページに1つずつ掲載するのが望ましい。アクセス解析でユーザーの悩み、問題点などをリサーチすることができる。
61｜現在位置を常に明確にする
ユーザーが目的の情報を探しやすくするためには、 ナビゲーションメニュー、見出し、パンくずリストの3つが助けになる。複数ページにわたる文章の場合は、総ページ数や現在表示されているのが何ページ目なのかという情報を掲示する。
62｜サイト内に検索ボックスを各ページに付ける
検索ボックスがあれば、とりあえず検索してみようという気になるユーザーは少なくない。
63｜サイト内検索の結果表示の最適化に力を入れる
Google Co-op や Google Mini など。
64｜サイトマップはユーザー用と検索エンジン用を分けて作る
Google ウェブマスター用と、ユーザー用を用意する。
65｜要所にナビゲーションを置いてサイト共通のナビゲーションを補完する
「グローバルナビゲーション」は、カテゴリの上部階層にある項目を掲示するナビゲーションで、ページ上部に配置されることが多い。「ローカルナビゲーション」は、同じ階層内のコンテンツを掲示するナビゲーションで、ページの左右いずれかに配置されることが多い。このような「埋め込み型ナビゲーション」は、コンテンツを並列に並べるため優劣が付けにくいなどの問題がある。それを解決する手段として、「コンテンツナビゲーション」がある。本文中に適切なタイミングで自由にナビゲーションを挿入できる。そのため、ユーザーを効果的に誘導でき、Webサイトのユーザビリティを容易にアップさせることができる。
入力しやすいフォーム
66｜フォームの項目は本当に必要なものだけにしぼる
フォームの項目を増やせば増やすだけ、ユーザーを逃すことになる。あるいはフォームにするのをやめて「カタログをご希望の場合は、TEL：00-0000-0000 までご連絡ください」と電話請求にしたほうが、むしろ見込み客から声がけされるチャンスが増える。
67｜制限入力と自由入力を使い分ける
- 制限入力
入力するものに合わせて区切りを入れておいたり、選択肢を用意しておいたりするものを指す。入力した内容を確認しやすいというメリットがある。都道府県など、選択肢が多い場合に探すのが面倒というデメリットもある。 - 自由入力
ユーザーに自由に入力してもらうものを指す。意図したことと異なる言葉で入力したり、間違いに気付きにくいといったデメリットがある。
68｜入力制限をできるだけ減らす
「全角」を英語の「大文字」のことと思い込んでいるユーザーもいる。注意書きは混乱のもととなるので避けるべき。出来る限りサーバ側で対応する。
69｜自動入力で入力ミスを減らす
郵便番号から住所を自動入力するなど。姓名のふりがなは、カタカナよりもひらがなのほうが入力しやすい。
70｜入力内容に合わせたフォームの要素を使う
ドロップダウンメニューを利用してユーザーに選択してもらうほうが入力の手間が省け、入力ミスの防止にもなるが、生年月日などは数字で入力するほうが早い。
71｜単純な2択でも、フォーム要素を使い分ける
AとBの2つの選択肢がある場合にはラジオボタンを使う。単純な2択にはチェックボックスを使う。選択肢が増える可能性があるならプルダウンメニューを使う。
72｜初期値を上手に使ってユーザーの手間を省く
たとえば、飛行機チケットの予約フォームでは、当日の利用がもっとも多いことが予測されるため、初期値を現在の日付・時刻にしておく。
73｜複数ページにわたるフォームは現在位置と終了までの経過を明示する
【STEP1】ショッピングカート、【STEP2】お届け先情報入力、【STEP3】お支払い情報入力、【STEP4】ご注文内容確認、【STEP5】ご注文完了 など。
74｜ユーザーを混乱させるボタンは付けない
「クリア」ボタンは必要ない。クリック後の予測が付きやすいボタン名にする。「次へ」や「送信」では不安になるので、「注文内容の確認画面へ」や「上記内容で注文する」などとする。
75｜エラーで画面を切り替えない
入力して「送信」ボタンをクリックすると「入力エラーです」とだけ表示するのは、何を間違えたのかがわからない。
76｜エラーは画面上部と問題箇所に具体的に表示する
該当箇所にエラーを表示させたうえで、ページの上部にエラーの一覧を表示させる。また、エラーの内容を具体的に示す。
ユーザーテストと行動分析
77｜ユーザーテストは企画段階で実施する
実際のWebページの代わりに、紙に書いたラフの設計図を使用して行う「ペーパープロトタイピング」と呼ばれる方法を使う。被験者に「デジタルカメラのなかで、一番画素数の高いものを購入してください。ただし、一眼レフカメラを除きます」のようなタスク（目的）に従って、紙の上でクリックする箇所を指し示してもらう。
78｜ユーザビリティチェックシートを活用する
チェックシートの項目をひとつひとつ確認することで、Webサイトの問題点を洗い出し、サイト全体のトーン＆マナーを統一することができる。
79｜ユーザーテストの結果を反映させる
- ユーザーテストの結果をレポートする
ユーザーの行動と発言から発見できた問題点をリストアップする。 - テスト結果を反映させる方針を決める
問題点のうち、どれを反映させてどれを反映させないかの方針を決める。 - Webサイトのプロトタイプを作る
方針をもとに、Webサイトのプロトタイプを数ページ作成する。 - チェックシートで再確認する
ユーザビリティチェックシートを随時確認しながら、実際のページを作り込んでいく。
80｜閲覧時間が長いページの離脱率を調べる
アクセスログを見ていると「たくさんの人がこのページを長い時間閲覧しているので、人気のあるページだな」と考えがちだが、実際には目的の情報が見つからずに長時間滞在してしまっているだけかもしれない。
81｜出口ページをつきとめてユーザーの離脱を防ぐ
ユーザーがWebサイトを離脱するのは、比較的長文のページが多い。長文の情報を読んで満足してしまったり、ページの下部まで来て戻るのが面倒になったりするため。ページの下部に次のページへのリンクやパンくずリスト、グローバルナビゲーションなどを配置して次の行動を喚起させる。
82｜ユーザーの直帰率を改善する
直帰率は「直帰数÷トップページ訪問者数」。直帰率の平均は約38％。直帰率が高い理由は次のようなものが考えられる。- 目的の情報が見つからない
- より詳しい情報へのリンクが見つからない
- 申込みや問い合わせなどの方法が見つからない
- 社名や問い合わせ先が明記されておらず、信用できない
83｜リピーター向けに項目別ナビゲーションを作る
リピーターを大切にして彼らを確保することは、Webサイトで重視すべき事項のひとつ。新規ユーザーとリピーターの行動の違いを考える。「目的別」「項目別」のナビゲーションでユーザーをつなぎ止める。
Flash・Ajaxなどの技術と使いやすさ
84｜ここぞの場面でこそ Flash を使う
全体の構造はHTMLをベースにし、そのなかの一部に Flash を使うハイブリッド型を基本にする。ページに動的な要素があるとユーザーの視点が止まる確立が高くなるため、新製品の紹介などに Flash を使うのは有効。
85｜ウィンドウは最大サイズで開かない
ウィンドウの最大化ボタンを無効にして、必ずフルスクリーンで開くことを強要するのは、ユーザーが好みにあわせて閲覧する自由を奪う行為なので、避けるべき。
86｜skip ありきで Flash コンテンツを考えない
イントロダクションで意味のないイメージムービーを見せるWebサイトは、イメージダウンになることはあっても、いい印象をもたれることはない。
87｜Flash の待ち時間をユーザーに伝える
ローディング画面をコンテンツの一部にしてしまう。ユーザーのイライラをワクワクに変える。
88｜ユーザーインターフェイスはリアルさよりも使い勝手を優先する
人物のアニメーションがコンテンツをナビゲートしたり、3Dを利用したりといったリアルに近いインターフェースは、ユーザビリティを損ねる場合がある。一番優先させるべきなのは、ユーザーの学習時間を短縮し、目的の情報にスムーズに誘導できること。
89｜Flash のメニューはユーザーが直感的に使えるようにする
Flash を使ったナビゲーションのポイントは、コンテンツとナビゲーション部分を分けること。コンテンツ部分はダイナミックに動き、ナビゲーションは下部に配置するなど。
90｜Flash では標準のパーツを活用する
ユーザーは標準のものによく慣れており、これらをカスタマイズしてしまうと操作効率が落ちてしまう。
91｜Flash や Ajax を利用して無駄なページ移動を減らす
ユーザーのリクエストに応じて画面の一部分を動的に書き換えて、画面推移を減らすなど。
92｜シームレスな画面の変化をユーザーに意識させる
Flash や Ajax を利用して画面の一部分を書き換えた場合、情報の書き換えがシームレスであるぶん、それに気付かないユーザーが出てきてしまう。この問題を防ぐために、アニメーションで印象づけたり、Ajax でモーダルボックスを表示させる。例）lightbox
93｜スライドしながら展開するコンテンツは見た目でわかるようにする
「プルダウンメニュー」などのスプリング式のアクションは、ナビゲーションなどの、ユーザーがここはクリックするだろうとイメージできるところでしか使用しないほうがいい。
94｜テキストはできるだけ画像にしない
Google は、Flash が生成する swf のテキスト要素をインデックス化している。ユーザビリティの観点からも、SEO対策の観点からも、Flash 内のテキストを画像化しないほうがいい。
95｜音声や動画はコントロールできるようにする
ナレーションや BGM 付きの Flash、動画コンテンツなどには、音声のオン/オフ、ボリュームのコントロールが必須。
96｜新技術を取り入れる目的と対象を明確にする
RSS配信やQRコードによるサイト閲覧などは、「わかるユーザーにはわかる」といったサービスだが、これらのサービスを利用するユーザーの満足度は高まるし、利用しないユーザーの不利益になることもない。
97｜RSS配信には説明文を付ける
Internet Explorer 7 に RSSリーダー機能が付いて、RSSフィードを購読するユーザーは増加傾向にある。しかし Internet Explorer 7 では「フィード」という言葉が多く使われ、FireFox では「ライブブックマーク」と呼ばれる。RSSアイコンだけではなく、説明ページへのリンクを付けておくのが親切。
98｜ブログを知らなくてもトップページとほかの記事に移動できるようにする
ブログも通常のWebサイトだと思って閲覧/操作するユーザーは多い。カレンダーも月別記事も意味がわからない。ユーザーができることは「リンクをクリックすること」。カテゴリをメニューらしく分類/表示したり、各ページからトップページやほかの記事にリンクさせる。
99｜ブログもユーザビリティに配慮する
title要素やパンくずリストに配慮する。
100｜「ポッドキャスト」を知らないユーザーでも使えるようにする
最初はともかく視聴してもらったうえで、iTunes やポッドキャスティングの説明を入れれば、iTunes や RSS が情報収集に便利なものだと理解してもらえる。