KAZさんのマイページ

■ユーザーの目線を追え・ウェブツールで手軽に検証インターネット-ウェブデザインの力（河内康和）:IT-PLUS

ユーザーの目線に合わせたウェブデザインについてはこれまで何度か触れてきた。ウェブデザインの世界において、アイトラッキング分析（ユーザーの目線の追跡調査）は現在一般的に行われている。


この愛トラッキング分析結果によれば、多くのユーザーはウェブページを閲覧する際にはアルファベットの"F"の文字を描くようにページ全体を眺める傾向にあるという。そしてこのF型の目線の集まる所に、クリックも集中するということが明らかとなった。以下の図はドイツにあるハンブルグ大学の研究員による調査から得られたもので、ユーザーの目線とクリック数が比例することを「Clickstream(クリックストリーム)」と名付けられている。ちなみにこちらはGoogleの検索結果ページのトラッキング分析の結果である。


Clickstream Study Reveals Dynamic Web - fast web navigation in browser study heatmapsより

ユーザーの目線を追跡するにはどうすればいいのだろうか。ユーザーの頭に医学的装置を装着して目線を追うのが一番的確かもしれないが、ユーザーのマウスの動きを追うことである程度、把握できるのではないかという仮説から、手軽にウェブサイトのユーザーの行動を解析できるクリック分析ツールが当記事で紹介されている。


Crazy Egg






Crazy Eggはアメリカの有料のクリック解析サービスではあるが、このブログのように1日のアクセス数が何万にも満たない訪問数の少ないサイトであれば、無料で利用することができる。導入方法としてはブログやウェブサイト内のHTML内にスクリプトを埋め込むだけなので、手軽にクリック解析を行うことができる。登録が完了すると、管理ページにて各クリックがグラフで表示されるオーパーレイ、一覧で確認できるリストや、上記の図のようにマウスの動きが色分けで表示されるヒートマップモードが備わっている。僕も先日登録したばかりで結果はまだ反映されていないが、様々なバリエーションでユーザーのクリックを解析することできることが当サービスの魅力だと言える。


ClickHeat

ClickHeatはCrazy Egg同様無料で使えるクリック解析ツールであるが、日本語版も公開されている。こちらはヒートメーターのようにユーザーのマウスが集中するエリアを色別に表示するのではなく、クリックされた箇所を点でプロットしてくれるサービスだ。これによって、リンクが貼られているのではないかというユーザーの錯覚を認知することができ、結果的にウェブデザインの改善に繋げることができるのではないだろうか。






これらのツールを使ってユーザーの目線やマウスの動きを解析したうえで、実際にどのようなデザインを考えていくのがよいのだろうか。
これまでのデータでは、やはりユーザーはアルファベットのＦの文字を描くようにページを眺めることが多いようである。その結果多くのサイトでは、ユーザーの目線の集まりやすい、ページ左上のコーナーにサイト名やロゴを配置する。そして、ページ左上から水平位置または垂直位置にメニューをレイアウトするデザインが一般的である。要するに、そのページにおいて、重要な要素をユーザーの目線の流れに配置することで、ユーザーは自然にページを読み進めてくれるのである。
意外にも多くのユーザーは、画像よりもテキストの方に、先に目線が行くようだ。画像を見せるのが主目的のギャラリー系のサイトは別として、一般的にサイトに訪問するユーザーの多くは、画像を見に来たのではなく、そのサイトから情報を得ようとしているのである。画像はあくまでも、最も重要なテキストを補足する物として扱う方が、よりユーザーに受け入れられやすいサイトとなるのである。


ユーザーの目線に合わせたインターフェイスを設計することは容易ではない。だが、無から有は生まれない。これらの調査結果を反映させていくことで、ウェブデザインが更に改善されていくきっかけになるはずだ。

関連エントリー：

ウェブアクセシビリティが進まない理由 Vol.1 - First Penguin : ファースト・ペンギン
ウェブアクセシビリティが進まない理由 Vol.2 - First Penguin : ファースト・ペンギン
ウェブのユニバーサルデザインポリシー - First Penguin : ファースト・ペンギン