ヒートマップを使ったUI改修

こんにちは。
アメーバ事業本部ブログディビジョンでデザインを担当している井上です。
2011年11月に中途で入社いたしました。

私がこのチームに配属されよく聞かれるのが、「ブログで何をデザインするの？」っという事です。おそらくブログという完成されたサービスの中で、何か新しくデザインする事があるのか？っと言う質問だと思うのですが、完成されたサービスだからこそ時流に合ったサービスを提供できているか、日々クオリティーに目を光らせていると言う訳です。

具体的には、ブログエディタをはじめとするプラットフォームの改修やSNSとの連携、スキンの量産などありますが、今回は改修について触れたいと思います。

改修と言っても大規模なものから小規模なものまであります。大規模なものは現在作業中なので小規模な改修について書きたいと思います。

ヒートマップ

小さな気遣いが、時に大きく利便性を高める事があります。これは大変難しいことです。その気遣いに気がつく為のツールとして、ヒートマップがあります。

ヒートマップとは、Webサイト内でユーザーが注目をしている部分を色分けし、視覚的に行動をとらえる事の出来るツールです。レイアウトデザインやインターフェイスが効果的に使われていつかなどを検証する為に用いられます。多くの場合はサーモグラフィーの用に注目が集まった部分が熱を帯びた色で表示されます。

Amebaサービス内のページでもまだまだ研究段階ですが、改修やリニューアルの参考資料の一つとして使用されています。

実験的に用いた例

「百聞は一見に如かず」と言う事で実際の画面をお見せしたいと思います。



ヒートマップを見る限り、コンバージョンボタンや見出しに注目が集中していることがよくわかります。因に、マウスの軌道の83～7%は視線の動きと同じといわれています。

今回の参考ページではブログサービス内の、ある機能の手順を解りやすく説明する事が目的です。実際にユーザーの行動をチェックしてみましょう。



懸念された点は上記画面内の【A】の部分になります。「機能の入り口部分が、いまいち認識されていないのでは？」と言う声があがり改修することにしました。確かに見出し以下のフローが無視されているに見えます。

早速改修へ…

改修はそれぞれの画面キャプチャを均等に配置し、マウスの軌道が集中する中央に“機能のアイコン”を配置しました。


※画面は改修前後の土日に測定したものの比較です。

すると…
中央にマウスの軌道が集中しています。アイコンに注目しながら緩やかにスクロールしている様子がうかがえます。
右下の画面キャプチャ内の“適用ボタン”にまで視線をおくる余裕も感じられます。
少なくとも以前よりは目に留まるようになったと言って良いのではないでしょうか？

今回はクリックテールを使ってみました。

数あるヒートマップツールの中でも今回は“ClickTail”の使用例を上げてみました。ClickTailでは、クリックされてた部分だけでなくマウスカーソルの起動を録画し、指定の日にちや期間事の測定データを閲覧する事ができます。ヒートマップの他にも…


などのツールでも測定可能です。

今後のUI改善

このように私たちは、毎日たくさんの人が訪れ、愛用され続けてきたアメーバブログをより楽しく使っていただけるよう、日々小さな所から改善を模索し続けています。

今回はランディングページでの事例でしたが、プラットフォームUIについても改修を行っていますので近々お見せできれば良いなと思っておりますのでご期待ください。

因に、普段の私はブログスキンの生産も担当しています。是非お気に入りのデザインを探して、お楽しみいただきたいと思います。最後まで読んでいただき、ありがとうございました。

http://ameblo.jp/