このエントリーをはてなブックマークに追加

ユーザテストはこう活用する!『ユーザテスト×食品ギフトECサイト』2.ヘッダ解説編

食品ギフトECサイト_サムネイル当ブログではアイトラッキングを中心とした調査を紹介していますが、アイトラッキングだけが消費者の行動を知る手段ではありません。

このシリーズでは、リモートユーザテストと定量的なデータの活用・専門家評価により、競合サイトをベースにした商品購入の動き・商品購入の際に必要な条件・競合サイトの抱える課題を抽出し、それらの問題解決をするためのギフト向け牛肉ECサイトデザインを作成した事例をご紹介します。

前回、そのための調査方法をご紹介しましたが、今回からはその調査に基づきどのようなサイトをデザインしたかを詳細にご紹介してまいります。

『おかいもの研究室が作った食品ギフトECサイト』シリーズの目次

  1. 制作の流れ紹介編
  2. ヘッダ解説編 ← 今回はここ
  3. 商品ページ解説編
  4. ギフト紹介ページ解説編
  5. トップページ・その他解説編

完成したデザイン

完成したデザインはこちらからご確認いただけます。

商品ページ / ギフトトップ / ギフトカテゴリ / トップページ

※ダミーとはいえ実際の本店サイト構築システムであるCARTSTARを使用して構築しています。商品検索や商品注文などができてしまいますが、実際に商品をお届けすることは出来ません。また表示確認のため様々なダミー商品データ・ダミーページが登録されておりますので、ご理解の上閲覧ください。

サイドナビを兼ね備えたヘッダ

『おかいもの研究室が作った食品ギフトECサイト』の中で、もっとも重要な役割を担っているのがヘッダです。

ヘッダ_01
└ヘッダと、その少し下のエリア

ヘッダに求められた要件のうち、特に重要だったのは以下のものです。

・サイトのテーマが伝わる
・一般的なECサイトのレフトナビの機能を持たせる
・サイトの不安感や疑問点を取り除くための案内ページを、確実に発見できる
・情報過多になって情報が埋もれないようにする

上記の要件を満たすため、以下のような要件は一般的に考えられるよりも優先順位を落としました。

・商品検索機能をすぐに使える
・利用できる決済方法をアイコン等で明示する

サイトのテーマが伝わる

前提条件にもあったように、サイトへの入り口はトップページとは限りません。コンテンツに商品写真の使われない会社概要ページに辿り着くかもしれません。商品ページだったとしても、主力商品以外の商品のページ(例えばタレとか)である可能性もあります。

いずれの場合でもサイトのテーマが伝わるように、ヘッダの左上にはショップのロゴと主力商品の写真を入れられるようにしました。

ロゴも、出来る限りテーマが伝わるようなものが使われ、またそのデザインを邪魔してしまわないようなレイアウトを心がけました。

一般的なECサイトのレフトナビの機能を持たせる

一般的なECサイトではレフトナビを持たせることで、ショップ内の様々なジャンルの商品を探すことが出来るようになっています。

しかし、レフトナビはサイトの左側に設置されます。必然的に項目を縦に並べることになり、デザインは縦長になります。WEB SEEYAさんの『モニター解像度のシェアを調べてみた(2015年9月版)』によれば、縦幅768pxのディスプレイのシェアが高く、取扱商品によっては画面の縦幅にジャンルの一覧が収まりきらない可能性が考えられました。

実際にサイトを運用するときのことを考えてみましょう。レフトナビは、無制限に高さを増やすことができます。「あれもこれも」と盛り込む項目を増やしていくことになれば縦に長くなって一覧しにくくなり、本来の機能が目立たなくなってしまいます。

リモートユーザテストを行った結果でもサイドナビへのアクセス頻度は決して高くありませんでした。また画面左側に200px程度の幅を使ってしまうので、本来見せるべきメインのコンテンツエリアの横幅も狭めてしまっています。食品において、写真が小さくなることは美味しそうに感じてもらうチャンスを減らしてしまうと考えました。

このように、レフトナビには課題が多く、検討の結果『グローバルナビのドロップダウンメニューにジャンル一覧を並べる』という方法を採用しました。

ヘッダ_ドロップダウンメニュー_01
└『贈答用に探す』にオンマウスした時のドロップダウンメニュー

ヘッダ_ドロップダウンメニュー02
└『商品一覧』にオンマウスした時のドロップダウンメニュー

メニューを画面横幅いっぱいに広げることで、一度に表示できる項目数を多くすることができました。

また、贈答用商品が多いということで、贈答用商品を探すためだけのメニューと、全商品を一覧するためのメニューの、二つを設置しました。これにより、ユーザのサイト利用目的に合わせて使い分けができます。

贈答用の場合は特に、予算で探す用途が多いのはもちろんですが、贈る相手の好みに合うかどうかも重要になってきます。そこで、『嗜好で探す』という項目を設けました。肉であれば霜降りの度合いや部位などで分けられますし、多様な商品を取り扱っている場合も、「お客様がどんな商品の探し方をしているのか」を調査し様々な切り口で商品を紹介することができます。

サイトの不安感や疑問点を取り除くために必要なガイドにすぐアクセスできる

リモートユーザテストやネットアンケートの結果を考慮すると、商品そのものの情報以外にでは、下記のような情報がすぐに確認できる必要があります。

・送料
・お店の信頼性
・ギフトの包装状態

ギフトの包装状態については後述しますが、ギフトトップページの下部で詳細を確認できるようにしました。

送料についても、商品ページ内に記述するのが理想です。しかし複数の商品を購入する可能性もあるため、ショップ全体としての送料についての確認はグローバルナビからアクセスできるようにしました。

お店の信頼性を表現する方法は、そのショップの持つ歴史や実績などから多様になってきますが、シニア層にとっては困ったらまず電話という意識が強いことから、サイトの右上に電話番号を記載しました。

加えて、お店のこだわりを紹介するページ、よくあるご質問ページを用意することも想定し、グローバルナビ内にそれらのページヘのリンクも設置しています。

わかりやすい言葉

ECサイトでは一般的になりつつある『ご利用ガイド』という言葉は、その先にあるものを表現していません。実際の意味としても、かなり幅が広そうです。

このサイトでは、明確に『◯◯◯のこだわり』『会社概要』『支払・配送について』『よくあるご質問」のように、どこに知りたいことが書いてあるのか分かりやすい言葉を使うことを意識しました。

すぐにアクセスできる

ページの最上部まで戻らなくてもアクセスできるよう、グローバルナビは画面スクロールに追従するようにしました。タップに十分なサイズと、前述したディスプレイの縦幅との兼ね合いが難しいところですが、ジャンル一覧に加え配送情報やよくある質問ページなどへも必要時にすぐにアクセスできる事の利便性を考慮し、この形を採用しました。
タブレット_グローバルナビ追従
└タブレットでもグローバルナビが追従する

オンマウスで展開するドロップダウンメニュー

ドロップダウンメニューは、存在に気付かれないことと、使用時にクリック面倒に感じることが無いよう、マウスポインタをリンク上に持ってきただけ(オンマウス)で展開するようにしました。

ヘッダ_ドロップダウンメニュー_オンマウス

一度オンマウスで展開することを理解してしまえば、容易にアクセスできるようになるので、ストレスは最小限に抑えられると考えました。

ただし、タブレットではオンマウスという概念がないので、タップの必要がありますが、使えないということは無いように作られています。

優先度を下げた要件:商品検索機能をすぐに使える

商品検索機能は、当然ですがユーザが自分でキーワードを入力する必要があります。

特に年齢層が高くなるほどキーボードを触ることはストレスにつながりやすいこと、商品点数100〜300点程度を想定していたこと、CARTSTARには入力したキーワードから候補を表示する機能(サジェスト機能)が存在しない(改善すべき課題ですが)といった点から、この機能を目立たせるメリットが小さいと考えました。

優先度を下げた要件:利用できる決済方法をアイコン等で明示する

ヘッダ内に利用可能な決済方法のアイコンが並んでいるサイトは、ECモールに出店しているショップでは特によく見かけます。同じ商品を取り扱うECモールでは、僅かな送料や決済方法の利便性の差が命運を分けるため、このような差を表現することがとても大事になってきます。

しかし、本店サイトの場合は購入の意志がない段階でサイトを閲覧している可能性が高く、その場合利用できる決済方法を知りたい段階は比較的後の方になってきます。

本店の場合は会員関連のリンクの設置場所が必要にもなりますので、その他の要素が目立たくなってしまうことを防ぐため、決済方法アイコンは表示しないという選択をしました。

次回は、商品ページを詳細に解説していきたいと思います。

  1. 制作の流れ紹介編
  2. ヘッダ解説編 ← 今回はここ
  3. 商品ページ解説編
  4. ギフト紹介ページ解説編
  5. トップページ・その他解説編
このエントリーをはてなブックマークに追加

おかいもの研究室のサービスに関して
お気軽にお問い合わせください

▲ ページ先頭へ