このシリーズでは、サイト設計において意識するべきユーザー エクスペリエンスの 5 つの原則を、3 回に分けてご紹介しています。今回はパート 2 です。

ユーザー エクスペリエンスについての前回の記事では、サイトを設計する上で重要なヒントと、サイトとユーザー両方の目的を見定める方法についてご紹介しました。
今回の記事では、サイト内でユーザーを的確に誘導する方法と、PC サイトとモバイル サイトの異なるサイト作りについてご説明します。

1. ユーザーがサイト上で取るべきアクションを明確にする
サイト上で次に何をするべきか、ユーザーが迷うことがないようにします。ユーザーがページにアクセスした段階で、最初に何に注意を払うべきか、次に何に注意を払うべきか、といったことが明確に示されているべきです。次に取るべきアクション （たとえば「購入」ボタンをクリックすることや、関連する記事を読むことなど） を明確に示すようにしましょう。

ヒント:
アクションを呼び起こす要素をサイトに配置する際は、次の点に注意しましょう。
  • 強調: サイズ、色、対比、空白の活用などにより、アクションを呼び起こす要素を強調します。
  • シンプルさ: ページ内で案内するアクションの数が多すぎないようにします。本当にユーザーに行ってほしいアクションをよく検討し、そのアクションに重点を置いたサイト設計を採用します。
  • 近接性:　アクションをしてほしい要素は、ユーザーの導線に沿って配置します。たとえば記事を中心に据えたページであれば、アクションを呼び起こす要素は記事の下に配置するといいでしょう。
  • 一貫性: アクションを呼び起こすような要素はサイト全体に表示し、見せ方も統一します。

2. ユーザーの状況に合わせてサイトを調整する
サイトでは、タイミングや場所を選ばず、ユーザーが必要とするすべての場面で、優れた体験を提供する必要があります。ユーザーは状況に応じて異なる方法でサイトを利用するため、そのことに配慮したサイト作りが重要です。時間的制約の有無や、携帯端末かパソコンかといった点に注意を払いましょう。

ヒント:
以下のヒントを参考に、様々なユーザーの状況について考えてみましょう。
  • 状況: 情報を求めてサイトにアクセスしたユーザーは、どのような状況に置かれているのでしょうか？
  • 機能の絞り込み: モバイル版のサイトでは、ユーザーが目的の情報を見つけるのに役立つ、重要な機能だけを提供します。その他の高度な機能は、ユーザーの時間的制約が少ない PC サイトにて提供します。
  • 速度: ユーザーは数秒しか待ってくれません。サイトの読み込み時間は可能な限り短縮しましょう。読み込み時間の高速化には、Google の PageSpeed Insights が役立ちます。
  • 操作性: ユーザーは操作ミスをするものです。モバイルでは特にそれが顕著になります。[戻る] ボタンを使わなくても、簡単に操作を取り消して元の場所に戻れるようにします。

例:
たとえばレストランのレビュー サイトで、モバイルサイトのユーザーの行動は、PC サイトのユーザーの行動とどのように異なるでしょうか？

まず、モバイルサイトのユーザーは移動中の可能性が高い点が挙げられます。道を歩きながらサイトを閲覧していることもあるでしょう。PC サイトのように、何ページものレストラン情報に目を通す時間はありません。ユーザーは、携帯電話の GPS 情報と検索内容に応じて、近辺の人気レストランが表示されることを期待します。また、レビューの表示をモバイル向けに最適化することも考えられます。モバイルでは長文のレビューに目を通す時間はないため、最も人気のある短いレビューを優先して表示するとよいかもしれません。

重要なのは、ユーザーが置かれている状況に気を配ることです。サイトにアクセスしたときのユーザーの状況に応じて、最適な体験を提供できるようにしましょう。

関連情報: 
  • Google アナリティクスのイベント トラッキング
    サイト設計の変更による影響の計測や、継続的なサイト利用状況の監視を行うことで、サイトでのユーザーの行動、利用状況の変化などについて、常に最新のデータを把握することができます。Google アナリティクスのイベント トラッキングでは、動画やガジェット、Ajax ベースのユーティリティなど、ページビューとは関係のないサイトの機能に対するユーザーの行動をトラッキングできます。

  • PageSpeed Insights
    お客様のウェブページとモバイル サイトのコンテンツをリアルタイムで解析し、ページ読み込み時間を短縮するためのヒントを提示します。

  • 「GoMo 日本語版」サイト
    ウェブサイトがモバイルでどのように表示されているか、すばやく確認できるツールです。モバイル サイトの構築に役立つさまざまなリソースも提供しています。
Posted by David Richards - Google AdSense
このブログ記事はお役に立ちましたか？ブログに関するご意見や、取り上げてほしい特定のトピックがございましたら、アンケートよりお聞かせください。
2012 年 11 月 12 日