Internet Watch logo
記事検索
バックナンバー
【 2009/06/11 】
最終回:現場におけるユーザビリティの活かし方
[11:08]
【 2008/09/08 】
実践編:その5「OKWave」
[11:55]
【 2008/08/19 】
理論編:その7
アクセス解析とユーザビリティ(その2)
[12:01]
【 2008/07/17 】
理論編:その6
アクセス解析とユーザビリティ(その1)
[11:18]
【 2008/05/28 】
理論編:その5
ヒューリスティック評価の実施方法
[11:14]
【 2008/03/17 】
実践編:その4「News2u.net」
[11:12]
【 2008/02/06 】
実践編:その3「BBソフトダイレクト」
[10:52]
【 2007/12/27 】
理論編:その4
ユーザーテストの実施方法(後編)
[11:05]
【 2007/11/28 】
理論編:その3
ユーザーテストの実施方法(前編)
[11:31]
【 2007/09/21 】
理論編:その2
アイトラッキングツールのメリット
[11:11]
【 2007/08/28 】
実践編:その2 「インプレスキャリア」
[11:00]
【 2007/07/18 】
理論編:その1
訪問者数はそのままで、売上が倍に?
[12:52]

実践編:その1「窓の杜」


Webサイトのユーザビリティを、実例を基にわかりやすく紹介する新連載「実践! Webユーザビリティ研究室」。第1回目の今回は、オンラインソフト紹介サイト「窓の杜」を取り上げます。


「Webユーザビリティ」とは

 Webの世界において「ユーザビリティ」という言葉を、ここ数年でさかんに耳にするようになりました。ユーザビリティ(Usability)というのは、つまるところ「ユーザーが意図通りに使えること」を意味する言葉になります。

 具体的な例を見てみましょう。例えばこのINTERNET Watchのサイトでは、ページ左上の「INTERNET Watch」ロゴをクリックすると、トップページに移動します。このように「ページ左上のロゴをクリックするとトップページに移動」というのは、多くのユーザーの経験則上「当然そうあるべき反応」として認識されています。下層ページで迷ったユーザーの多くは、ページ左上のロゴをクリックし、トップページへの移動を試みます。


ページ左上のロゴをクリックするユーザーは、サイトのトップページに戻ることを期待して、操作を行なっている

 しかし、このリンクがそもそも張られていなかったり、違うページに移動してしまった場合、期待通りの反応を得られなかったユーザーはストレスを感じ、操作をやめてしまったり、サイトを離脱してしまいます。ほかにも、目的の情報がすぐに見つからない複雑なサイト構成、読みづらいフォントサイズ、入力の負担が大きい申込フォームなど、サイト離脱のきっかけとなる要因は、サイトのあちこちに潜んでいます。

 こうした「ユーザビリティ上の問題点」をひとつずつ解決し、ユーザーが意図通りに使えるサイトを実現することで、ECサイトであればコンバージョン率の向上が見込め、リピータの増加も期待できるようになります。最近では多くの企業がこうしたユーザビリティの観点に基づいて自社サイトをチェックし、改善に乗り出すようになっています。

 では、こうしたユーザビリティ上の問題点を的確に発見していくためには、どのような方法で行なうのが望ましいのでしょうか。今回は、皆さんがよくご存知のオンラインソフト紹介サイト「窓の杜」を例に、Webユーザビリティ調査の実例をご覧いただきたいと思います。


「ユーザーテスト」でサイトの問題点を抽出

 サイトのユーザビリティ上の問題点を発見するための手法はいくつかありますが、今回は「ユーザーテスト」に絞ってご紹介します。ユーザーテストとは、実際のサイト利用者に近いプロフィールを持つ被験者(ユーザー)に、対象サイトを実際に操作してもらいつつ、問題点を洗い出していく手法のことです。

 もっとも、目的もなしにいきなりサイトを操作しろと言われても、ユーザーは困ってしまいます。そこで、対象のサイトを利用するにあたって「実際にありがちな目的」を課題として用意し、それをユーザーに解いてもらう形を取ります。

 例えば、今回「窓の杜」を調査するに当たっては、以下のような課題を用意しました。

【「窓の杜」ユーザーテストの課題】
 新しく購入したパソコンに、解凍ソフトをインストールしようと考えています。
 LZH形式のファイルの解凍が行なえるフリーソフトを、指定のサイトから探してダウンロードしてください。


 非常にシンプルな課題ですが、これを十数人のユーザーに対して実施するだけで、実に多くの問題点が浮き彫りになりました。今回はその中から、ユーザーの傾向が顕著だった2つの問題点についてご紹介しましょう。


「左ペイン」=「重要なメニュー」という図式

 「窓の杜」で解凍ソフトを探す場合、中央ペイン上部にある「ソフトライブラリ」のメニューをクリックするのが一般的です。ジャンル別に分類された中から「圧縮・解凍・ランタイム」をクリックして進んでいけば、ソフトの一覧ページに辿り着くことができます。


中央ペイン上部の「ソフトライブラリ」にある「圧縮・解凍・ランタイム」をクリックするのが正解。「窓の杜」編集部デスクHさんもここを予想

 しかし、ユーザーテストを行なった結果、過半数ものユーザーが、こことは異なるリンクをクリックしていることがわかりました。ユーザーはいったい、どの部分をクリックしたのでしょうか。

 「窓の杜」トップページの左ペインには、ジャンル別NEWSINDEXという見出しがあり、そこに「圧縮・解凍・ランタイム」というリンクがあります。ラベルこそ中央ペインの正しい入り口と同一ですが、実はこれはニュース記事のバックナンバーへのリンクであり、解凍ソフトの一覧ページに辿り着くには回り道となってしまいます。


左ペインにある「圧縮・解凍・ランタイム」のリンク。すぐ上には「ジャンル別NEWSINDEX」という見出しがあるが、ユーザーにはほとんど見られていない

 今回実施したユーザーテストでは、実に過半数ものユーザーが、このリンクを誤ってクリックしてしまうという結果が出ました。つまり「圧縮・解凍・ランタイム」という文言を見て、ここがダウンロードページへの入り口だと勘違いしたわけです。

 今回のユーザーテストでは、ユーザーの視線情報を計測する「アイトラッカー」と呼ばれる装置も利用しましたが、左ペインの記事リンクを誤ってクリックしたユーザーは、中央ペインにある「圧縮・解凍・ランタイム」の画像はまったくといっていいほど見ていません。実際、ユーザーテスト終了後のアンケートでも「重要なメニューだから、左ペインの目立つところに入り口があると思った」という回答が見られました。



正しい入り口をクリックしたユーザーの視線データ(上の画面)と、誤って左ペインの記事リンクをクリックしたユーザーの視線データ(下の画面)の比較。左ペインを誤ってクリックしたユーザーは、視線があちこちにバラけているものの、正しい入り口はほとんど見ていないことがわかる

 つまり、どれだけデザインや面積の広さで強調しようとも、それが一般的でないエリアに設置されていると、ユーザーの目に留まらない場合がある、ということです。今回の場合、ユーザーが「ここにあってほしい」と思うエリア、つまり左ペインの上部にリンクを用意するのが正解ということになります。


ダウンロードボタンは、ソフト紹介文の「直下」が望ましい

 もうひとつ、今回の課題において、3割近いユーザーが操作を間違えた箇所があります。それはソフトの「ダウンロードボタン」の設置場所についてです。

 窓の杜におけるソフトの紹介ページでは、見出し(ソフト名)の右端にダウンロードボタンが設置され、その下にソフト紹介文・ソフト画面がレイアウトされています。ダウンロードボタンはページ右上の1カ所のみで、ソフト紹介文の直下には「このソフトに関連する記事を検索」というボタンのほか、作者情報、広告などが並んでいます。


ソフトの紹介ページ。見出しの横にダウンロードボタンがあり、下にソフト紹介文などが並ぶ

 さて、実際にこのページに来たユーザーの3割は、どのような反応をしたのでしょうか。彼らは見出し右のダウンロードボタンを見落としたまま、ページを下までスクロールし、ページ下部でダウンロードボタンを探したのです。

 中には、ソフト紹介文をまったく読まずにページを下までスクロールし、ダウンロードボタンがないことに気がついて動きが止まってしまう、といったケースも見られました。つまり、ここでも「ダウンロードボタンはページの最下段にあるはず」といった経験則をもとに、ユーザは行動しているのです。

 実際のページをご覧いただければわかりますが、ページ右上のダウンロードボタンは決して目立たないデザイン・サイズではありません。しかし、ユーザーの経験則の前には、デザインやサイズはたいした問題ではなく、「あるべき位置にボタンがなかった」ことが致命傷になってしまうのです。


右上部のダウンロードボタンに気付かなかったユーザーの視線の流れ。「このソフトに関連する記事を検索」をダウンロードボタンと勘違いしてクリックしようとしたが、間違いに気付いて操作を中断。そのまま視線がページ内を上下にさまよう結果に

具体的にどう修正すればよい?

 以上、今回は2つの問題点に絞ってご紹介しましたが、ではユーザビリティの観点から、具体的にどのような対策を施せばよいのでしょうか。

 まずトップページについては、左ペインの記事リンクをダウンロードページへのリンクと誤認するユーザが多いことから、思い切ってダウンロードページへのリンクに差し替えてしまうのが効果的だと考えられます。中央ペインのメニューについては、画像の状態ではあまり見られていないことから、テキストで記載することも視野に入れるとよいでしょう。

 次にダウンロードボタンの配置についてですが、紹介文の直下にもうひとつ、同じ役割を持つダウンロードボタンを設置するだけで、問題は解消すると考えられます。右端にあるボタンを下に移動させるといった大掛かりな修正をするのではなく、もうひとつボタンを追加することで、ユーザーの取りこぼしはほぼゼロになります。

 なお、実際の修正にあたっては、修正後に再度ユーザーテストを実施し、検証を行なうことをお勧めします。


サイトの目的と合致しているかも要チェック

 ただ、サイトにこうした修正を施す際は、そもそもサイトの目的と合致しているか、しっかり確認しておく必要があります。つまり「窓の杜」というサイトが、ソフトのダウンロードのみを目的としているのであれば、上記の修正案はたしかに妥当です。しかし、ユーザーに記事を読んでもらうという目的がそれ以上のウェイトを占めるのなら、ダウンロードに特化したページ修正を実施することは、サイトの改悪にもつながりかねません。

 ユーザーが思い通りに使えるサイトを設計することはもちろん重要ですが、運営側の目的をきちんと反映しなければ、何のためのサイトなのかがわからなくなってしまいます。ユーザーテスト、ひいてはユーザビリティ調査を実施する際は、前もってこうした前提条件の確認も重要になってきます。

 以上、今回は「窓の杜」を例にユーザーテストの事例をご紹介しました。本連載では次回以降も、読者の皆さんのサイトなども例に、Webサイトのユーザビリティを研究していきたいと考えています。今後とも本連載をご愛読いただけますよう、よろしくお願い申し上げます。



2007/06/05 11:20
山口真弘
(株)NTTデータキュビット コンサルティング本部所属。Webユーザビリティのコンサルタントとして活動中。本職外ではテクニカルライターとしての活動歴も長く、PC Watch「電子辞書最前線」、Broadband Watch「気になる! itemズ」のほか、本誌エイプリルフール企画の執筆なども手掛ける。近著は「3分LifeHacking」。

- ページの先頭へ-

INTERNET Watch ホームページ
Copyright (c) 2007 Impress Watch Corporation, an Impress Group company. All rights reserved.