見エール｜ECサイトのユーザーテスト・ユーザビリティチェック » 問題点が見エール

ECサイトのおもてなし力をあげる6つのポイント

admin — Fri, 06 Jan 2012 06:30:41 +0000

買いやすいECサイトとは、お客様がストレスなく商品を購入できるサイト。
必要な情報が見つからなくてサイトをうろうろして疲れてしまったり、たくさんの商品があって何を選べばよいかわからなくなったり・・・そんな小さなストレスの積み重ねで、お客様はサイトから離れて行ってしまいます。

ECサイトのおもてなし力向上のために念頭に置くべきこと次の３つです。

・お客様があなたのサイトで商品を選ぶ際”着目したいこと”は何か
・それが”すぐに解る状態”になっているか
・お客様が”楽しい買い物”ができるか

商品自体の良し悪しは重要ですが、それ以外にも大切なことがたくさんあります。
それがストレスなく判断でき、そして楽しく買い物ができるサイト。それが「おもてなし力の高いサイト」です。

１．サムネイルにはモデル着用画像を表示

商品の着用イメージは画像はありますか？
マネキンが着ている画像だけになっていませんか？

お客様が商品を選ぶ「ワクワク感」を大切にしましょう。
商品のスペックがわかればよい、だけでは、お客様は楽しいお買い物ができません。

「普通に買えるしわかるけど、マネキンだけだとイメージがつかみにくく感じる」という感想を持たれることがよくあります。

２．カートに入っている金額と数量

一度に複数の商品を購入するお客様は、カートにどれくらい入っているのか気になります。
「今どのくらい買っているのか」がいつでも解れば、ストレスを感じずに落ち着いて買い物を楽しめます。

【カートを見る】や【かいものかご】ボタンが右上によく設置されます。
そこに合計金額と数量があらかじめ表示されていると、いちいちボタンを押す手間もかからず、買い物を進められます。

３．送料無料条件がすぐわかる

「このサイトっていくら購入すれば送料無料になるんだっけ…5,000円？10,000円だった？」
いつでも確認できるようになっていて欲しいもの。一度確認してもすぐに忘れてしまいます。
全てのページのヘッダーとフッターに、条件を明記しましょう。

その他、
・返品・交換について
・お届け日について
・支払い方法について
はいつでもわかる必要があります。
全ページの下部に一覧でわかるように明記しましょう。

４．在庫状況の明示

【在庫なし】と表示されていても、案外気づかれないものです。
これは、お客様が「掲載されている商品はすべて購入できる」と思ってサイトを利用しているから。ネットショッピングに慣れていても、いざ購入、というときまで在庫切れに気づかないというケースはよくあります。

＜初見で気づきにくい在庫なし表示の例＞

お客様の立場になれば、在庫のない商品は掲載しないことが一番です。
検索結果やレコメンドに、在庫のない商品は表示されないようにしましょう。

サイズや色によって在庫の有無が異なる場合もあります。
商品ページで、在庫の有無の分かる表を出しましょう。

プルダウンやポップアップではなく、一目で分かる表であることが大切です。
早い段階でお客様に在庫状況を知らせることが重要なのです。

５．検索結果にレビュー件数と評価の表示

商品数が多いECサイトの場合、お客様は検索だけでは絞りきれず、漫然と商品を眺めてしまうことがあります。
お客様は商品選択の優先順位を決めたいと思っています。
優先順位を決める要素は、【価格】であったり、【デザイン】であったりしますが、忘れてはいけないものは【レビュー】です。
検索結果にも【レビュー件数】と【評価】を表示させておくと、指名買い（購入する商品をあらかじめ決めている）以外のお客様が商品を選ぶ基準になります。

６．上手なカテゴリわけと特集バナーで目的のないお客を逃さない

今回のマタニティショップの調査では、Amazon.co.jpでは全員がキーワード検索をしましたが、その他のショップではほとんど利用されませんでした。

ターゲットに合わせて商品カテゴリや特集バナーを上手に見せているサイトでは、検索ボックスはあまり使われていません。
購入する商品が決まっていない場合、商品をお客様が求める切り口で分類して提示することが商品探索の手助けとなります。

上の図の例では、商品を複数の観点で分類し、観点ごとに異なるデザインと配置にすることでお客様一人ひとりのニーズに当てはまるよう工夫されています。

動画で見る画像と文字配置の注意点

admin — Fri, 08 Jul 2011 08:04:25 +0000

ユーザーは商品の画像に意識が向きがち。画像の近くの注意書きには、視線が向かわないこともあります。

博多明太子の老舗・ふくやさんのインターネットショップでお中元に贈る商品を探しているときの視線から。

定番のオリジナルギフトセット・「潮（しお）」セットでは、セット内容（明太子の種類）を選択することができます。

【味の明太子】１種類と【あえもの明太子】２種類のセットであることは、画像から伝わってきて、文字をじっくり読まなくても理解できています。

しかし、セット内容のカスタマイズをしようとして問題が発生しました。

●味の明太子・・・７つの味のバリエーションからお選びいただけます。

「７つ」という表現に引っかかり、注文をためらっています。
あえものは画像があり、4種類のうち2つ選択できることが理解できましたが、7つの味については説明がありません。
このページだけではわからないと判断し、味の種類を確認するために別のカテゴリを見に行ってしまい、余計に混乱してしまいました。

このときの視線の動きを見てましょう。

「《オリジナルセットの中身をお好みに応じて変更いたします》※ご指定がない場合は、レギュラー味（昔ながらの辛口タイプ）となります。」という説明と指定方法が明記されていますが、なかなか目に入りませんでした。

注意書きのすぐ上に商品の画像があるため、そちらに意識が向かい、注意書きが見逃されてしまっているのです。

※画像の赤い部分が視線が動いている様子です。動画はこちらから ↓
http://www.youtube.com/watch?v=3VsWQtYoZMY

さらに、注文ボタン付近に味を選択できるメニューがないため、必要なものをどう選んだらいいかわからず戸惑うことになりました。

この場合のような注文のカスタマイズに関する注意書きは、注文ボタンの近くに記述すると安心して買い物カゴへ進むことができます。

サイトのつまずきポイントがないか動画でチェックしたい！　
そんなあなたにオススメ　⇒ 見エールFree

新規ユーザーも迷わないサイト制作のポイントが知りたい方はこちら

動画で見るサブカテゴリ展開と商品検索

admin — Tue, 24 May 2011 05:25:36 +0000

　大項目をクリックしたときにサイトがどんな動作をするかをチェック！

【サカタのタネ】さんは、大正2年創業の老舗の種苗会社さん。通販も豊富な品ぞろえで人気です。
【サカタのタネオンラインショップ】で、「このサイトで野菜のタネや苗など、自分の好きな商品を購入する」というタスクでサイトを閲覧しました。
商品検索の際に発生したちょっとしたつまづきをご紹介します。

【サカタのタネオンラインショップ】さんのサイトは、サイトサイト左にある商品検索窓や商品カテゴリーのリンクから商品を検索できるようになっています。
（※基本的にはカタログからのご注文が多いようで、カタログ注文用のメニューが充実しています。今回は純粋にオンラインのみのユーザーを想定しています）

商品カテゴリーはシンプルですが、クリックすると展開されるようになっています。

このメニューを利用した時の視線の動きとコメントは・・・

※画像の赤い部分が視線が動いている様子です。動画はこちらから → http://www.youtube.com/watch?v=CNJaZJXBGcY

商品カテゴリーの【野菜のタネ、イモ、苗】をクリックして商品を検索しようとします。

視線は検索結果画面の方へ。
しかし、商品が7点しか表示されません。

野菜のタネ類はあまり充実していないという印象を持ってしまいました。

この後、仕方なく草花の種でもさがそうかと商品カテゴリに目を戻し、初めてサブカテゴリが表示されていたことに気づきますが、もし野菜の種が欲しかった実際のユーザーであれば、ここでサイトを離脱していてもおかしくありません。

商品点数が多いにもかかわらず、それが表現できずとてももったいなく感じられます。
カテゴリをサブカテゴリに分類するときには、大項目をクリックしたときにどのような動きになるかは重要なポイントです。ページを読み込み直すタイプのメニューと、メニューが展開されるだけのものでも、ユーザーの動きは異なります。
あなたのサイトのメニューは、ユーザーが戸惑わないつくりになっていますか？　ぜひチェックしてみてください。

サイトのつまずきポイントがないか動画でチェックしたい！　
そんなあなたにオススメ　⇒ 見エールFree

新規ユーザーも迷わないサイト制作のポイントが知りたい方はこちら

ECショップ利用初心者の視線・上級者の視線

admin — Fri, 23 Jul 2010 02:57:25 +0000

　ヘビーユーザーとライトユーザーはトップページの見方が違う

ECショップオーナーやウェブ制作担当の方の多くは、ECサイトの基本的な閲覧・購入の手順に熟知しています。
しかし利用者の多くはそれほど精通していません。

下のヒートマップは、同じサイトのトップページが表示されてから10秒間に、ユーザーがどこを見たかを示したものです。
ECサイトを使い慣れているユーザーと、使い慣れていないユーザーの違いがわかります。

画面の中央に視線が集中しています。目を引く画像に目線が取られている様子が見てとれますね。
慣れていない人は全体を俯瞰することができないため、どこを見れば目的のものが見つかるのかがわかりません。

画面の中心にある画像にそれほど視線が滞留せず、左のナビゲーション部分や上部のタブメニューに目を向けています。

ヘビーユーザーは検索やカテゴリからの絞込みを使って自分の欲しいものを手早く見つけたいと思っています。
運営サイトがどちらをターゲットとしているかをよく考慮し、力を入れる方向を定めましょう。

ショップ制作者が自社サイトを「ユーザーの視点」で見た視点

ページの下部にある単価表を確認しているのをチェックしてください。サイト全体がわかっていないと気付くことができないですが、制作者はあることを知っているために操作ができています。

インターネットに熟達していない人の視点

制作者の視点と比較して、ページ全体の構造を理解していないために目的の情報を探せない様子がわかります。

インターネットに熟達している人の視点

インターネットに熟達している人は最初にサイトの情報構造をつかもうとします。インターネットに熟達していない人との違いを確認してください。

協力：名入れボールペン(粗品・販促・記念品用)製作専門「OH！名入れペン」さん　 http://www.opening.jp/

どこでも買える商品をわざわざネットで買う理由：ECサイトの問題点

admin — Tue, 18 May 2010 03:53:08 +0000

　高級志向のセレブ主婦を意識したサイト作りを

概要

・”お味噌”ということで、ビジュアル表現で商品ごとの違いを見せることが大変な商材。料理の画像や表現しようとしている。
・購入したいと思わせる表現が必要。あか抜けた表現で高級志向のユーザーへの訴求力を高めて。

視線の特徴

商品ページ

ランディングページに表示される2つの商品は、価格帯が違い、各ページでさまざまな画像や表現を使って違いを理解してもらえるよう工夫されています。
ユーザーも理解出来ています。
ですが、高価格帯の商品について、「あまり高級感が感じられない」という意見があがることがありました。

＜改善案＞
お味噌など、どこでも購入出来る商材を販売するネットショップのターゲットを考えるとき、「なぜスーパーで購入出来る商品をわざわざインターネットで購入しようとするのか」ということを意識しなければなりません。
お客様の中には、「毎日使うものだから安く済ませたい」という方と、「多少手間をかけてでも体に良いもの、ちょっと良いものが欲しい」という方がいます。
どちらをメインターゲットとすべきか、商材によって違いますが、今回の場合は後者を意識したサイト作りが妥当でしょう。
むしろ「セレブ志向の主婦向け」と割り切った作りにすることで、訴求力も高まります。
また、今回の場合、肝心の料理の写真は2つの商品どちらも同じものを使っています。
お味噌汁の表現一つとっても、器や具の見せ方をより工夫したり、料理の名称にひねりを加えてセレブ感を演出するなど、「多少送料がかかってもご近所スーパーよりここの商品が使いたい！」と感じてもらえるようになる工夫をしていきましょう。

■調査対象URL

味噌・醤油の老舗・厳選素材専門店　山田屋

http://www.e-misoya.com/hpgen/HPB/entries/238.html

■目的

・ちょっと高級なお味噌を探す主婦の方に、どんなページがよいか確認したい

■調査手法

・アイトラッキングによる視点追跡・ヒアリングによる意見聴取・ユーザー観察による問題点抽出

■タスク内容

あなたは普段使いや贈り物として使えるお味噌をインターネットで購入しようと思い検索したところ、あるページにたどりつきました。
表示されるページから、お味噌を選んで購入してください。

リピーターへのオススメ：ECサイトの問題点

admin — Wed, 28 Apr 2010 01:51:10 +0000

　魅力ある言葉でリピーターのセット購入への誘導を

概要

・『油』というメイン商品そのものに関連しない情報が多く、初めて訪れたユーザーが『油の店』であることが直感的に理解しにくい。リピーターを飽きさせない工夫は必要だが、重要な商品から離れすぎないように注意。

視線の特徴

商品個別ページ

［五味一体特別の油寿］の商品ページ。
商品ページの上下に買い物かごのボタンあり、初めて購入するユーザーもリピーターも購入しやすい。
＜改善案＞
ページ下の買い物かごボタンのそばに関連商品にお得なセット販売があります。左図ヒートマップの赤くなって入る部分（注視されている部分）がそれです。
リピーターの方が購入しやすいよう、セット販売ページへのリンクをページの上部にある買い物かごボタンのそばに設けるとより親切です。商品についてわかっているリピーターは、わかっているからこそあまりページをよく見ずに条件反射で買い物かごボタンをクリックしてしまう場合があります。カートに入れるボタンを押す前に早めに表示させるようにしましょう。
バナーなど凝ったものではなく、「お得な6本セット販売はこちらから」などのテキストリンクで十分。魅力ある言葉で引きつけるようにしましょう。

金田油店さん見エール体験談はこちらから

■調査対象URL

えごま油の店金田油店

■目的

・「五味一体特別の油『寿』」を頂き物としてもらい、美味しかったので自分で買おうと思い検索して来店した方がきちんと購入できるか確認したい
・セット販売のものを購入するとお得になること（1本当たり100円引きになる）に気づくか確認したい

■調査手法

・アイトラッキングによる視点追跡・ヒアリングによる意見聴取・ユーザー観察による問題点抽出

■調査日時

１１月２４日～２５日

■タスク内容

あなたは以前、「五味一体特別の油寿」という商品をお友達から頂きました。
おいしかったので、自分で購入しようと思い検索したところ、あるページにたどりつきました。
「五味一体特別の油寿」を、何本購入されても結構ですのでなるべくお得に（送料無料など）になるように購入してください。

肝心のコンテンツは早く見せて！：ECサイトの問題点

admin — Tue, 27 Apr 2010 01:49:51 +0000

　商品の説明や買い物かごへのボタンは早めに見せる

概要

視線の特徴

商品個別ページ

［五味一体特別の油寿］の商品ページ。
ファーストビューは雑誌掲載・テレビ紹介の情報になっている。
＜問題点＞
商品よりも雑誌の表紙の顔写真が目立ち、何のページなのかすぐに判断できない。
商品の部分も、他の商品の写真が一緒に掲載されているためメインの商品が目立たない。

＜改善案＞
ユーザーは作り手が思っているほどページをスクロールしてくれません。ファーストビューで商品の把握ができないと、「ちょっと違うのかも･･･」と不安になって離脱されてしまいます。
ページが変わっても画面に変化がないという状況は避けてください。
そのページで販売されている商品とその特徴の説明をはっきりとファーストビューで示すようにしましょう。
商品の信頼性やイメージアップのために、掲載履歴も重要です商品説明の下に配置しておきます。
その際、人の顔には視線が固定されることに気をつけましょう。

金田油店さん見エール体験談はこちらから

■調査対象URL

えごま油の店金田油店

■目的

■調査手法

・アイトラッキングによる視点追跡・ヒアリングによる意見聴取・ユーザー観察による問題点抽出

■調査日時

１１月２４日～２５日

■タスク内容

買い物かごからまっすぐレジへいけますか？:ECサイトの問題点

admin — Mon, 26 Apr 2010 01:39:25 +0000

　　購入までに使うボタンひとつひとつに気を配る

概要

・サイト全体の雰囲気や操作性は統一されていて、概ね迷わずに操作していくことができる。ギフトセットなどを含めても商品点数は20程度となり、それほど多くなく、それぞれの商品ページでは魅力的な写真と丁寧な説明で商品のよさを伝えている。
・商品ページごとについている【カートへ入れる】ボタンは大きく見やすいが、購入手続きへ進むためのボタンが見づらくなっていてもったいない

視線の特徴

買物カゴ

注文確認の表は見やすくなっていて、間違いなくチェックをすることができる。

＜問題点＞
購入手続きへ進むためのボタンと買い物を続けるボタンの違いがわかりにくい。また、ボタン自体が小さく、文字も背景色と同化したようになってしまい読み辛く感じられる。せっかく買い物籠に商品を入れたユーザーの”購入したい意欲”とボタンの購入して欲しい勢いがかみ合っていない。

＜改善案＞
購入手続きへ進むためのボタンはもっと大きくはっきりさせたり、支払いなどの手続きであることを示すアイコンをつけるなどの工夫をするとよりわかりやすくなる。

佐野洋菓子研究部さん見エール体験談はこちらから

調査対象URL

ベイクドチーズケーキ・洋菓子専門店　佐野洋菓子研究部

目的

・スムーズに購入できるページ構成になっているか?
・知りたい情報（説明や画像）がきちんとページに記載されているか?
・分かりづらい文章はないか?
・買い物かごに入れた後、注文確定まで不安無く終了したか?
・他ページへの移動はスムーズか?

調査手法

・アイトラッキングによる視点追跡・ヒアリングによる意見聴取・ユーザー観察による問題点抽出

調査日時

２０１０年９月２８日～３０日

タスク内容

あなたはインターネットで「ベイクドチーズケーキ」を購入したいと思っています。
ヤフーなどで「ベイクドチーズケーキ」で検索し、あるサイトを見つけました。
今から表示されるサイトで、チーズケーキを購入してください。
その他、購入したい商品を自由に購入してください。

カート内で上手く同梱を促す：ECサイト問題点

admin — Fri, 23 Apr 2010 01:38:58 +0000

　　カートでのおすすめ商品表示を効果的に

全体評価

概要

・商品画像がシンプルだが大きく、ユーザーが気になる部分についてきちんと掲載されていて商品を検討をする材料としてとても役立っている。

視線の特徴

ショッピングカート内

ショッピングカート内の商品数が１種類の場合、購入手続きへ進むためのボタンもきちんとファーストビューに入り、スムーズな操作ができるようになっている。
ボタン自体も大きく、間違えることがない。
＜問題点＞
スクロールせずに購入手続きに進める分、ついで買いのおすすめ商品がファーストビュー外になってしまっているため見てもらいにくい。
注文に関する注意書きが多く、ページ下におすすめ商品を押し下げてしまっている。

＜改善案＞
商品確認部分の上部にある説明をうまく省略し、おすすめ商品がうまくファーストビューにかかるようになるとなお良いでしょう。

■調査対象URL

ブランドセレクト通販ショップ【亜洲’Ｓ本店】

■目的

主なユーザーは男性、ファッション誌を読む２０－３０代の大学生、社会人

雑誌掲載商品だけでなく、そのブランドの他の商品も見てもらい、今の
シーズン（今は秋）のトレンド品種や新作をバンバン買って行って欲し
い。

■調査手法

・アイトラッキングによる視点追跡・ヒアリングによる意見聴取・ユーザー観察による問題点抽出

■調査日時

９月２８日～３０日

■タスク内容

あなたは、ファッション雑誌を読んで見つけた、あるブランド（インパクティスケリー）の服が気になっています。
ブランド名で検索し、ある通販ページにたどり着きました。
気に入る服があるか、自由に探して購入してください。
このブランド以外にも、自由に閲覧し、好みの商品を購入してください。
（ただし、このサイト内での購入に限ります。）

サイト構造でユーザーの商品理解向上：ECサイト問題点

admin — Thu, 22 Apr 2010 01:38:30 +0000

　　商品の理解が低いユーザーも取り込めるサイト作りを

全体評価

概要

・商品画像がシンプルだが大きく、ユーザーが気になる部分についてきちんと掲載されていて商品を検討をする材料としてとても役立っている。
・服のブランドセレクトショップのため、ユーザーの興味の強弱で導線が異なる

視線の特徴

トップページ

トップページのファーストビューはブランドごとのグローバルメニューとランキングに占められる。
送料や発送に関する説明ページへのバナーや電話番号などもファーストビューに入っており、初めてのお客様へも親切な作りになっている。
＜問題点＞
ファッションに興味があり、ある程度ブランドについての情報を持っている人がターゲットとなっているため、知識のない人にとってはとっつきにくい雰囲気がある。
商品の分類や価格帯で絞り込むメニューも右に用意されているが、メインコンテンツの部分の大きな画像が目立ちすぎるためあまり見られていない。

＜改善案＞
分類で商品を選べるページを１ページ用意し、トップにバナーを張るなどの方法でユーザーがブランドの新規開拓をしやすくする。

■調査対象URL

ブランドセレクト通販ショップ【亜洲’Ｓ本店】

■目的

主なユーザーは男性、ファッション誌を読む２０－３０代の大学生、社会人

雑誌掲載商品だけでなく、そのブランドの他の商品も見てもらい、今のシーズン（今は秋）のトレンド品種や新作をバンバン買って行って欲しい。

■調査手法

・アイトラッキングによる視点追跡・ヒアリングによる意見聴取・ユーザー観察による問題点抽出

■調査日時

９月２８日～３０日