見エール｜ECサイトのユーザーテスト・ユーザビリティチェック » 読み物 http://www.mi-yell.net アイトラッキングを利用したユーザーテスト。ユーザー視点からECサイトの改善を！ Fri, 06 Jan 2012 06:30:41 +0000 ja hourly 1 http://wordpress.org/?v=3.0.5 ECサイトのおもてなし力をあげる6つのポイント http://www.mi-yell.net/2012/01/ec%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e3%81%8a%e3%82%82%e3%81%a6%e3%81%aa%e3%81%97%e5%8a%9b%e3%82%92%e3%81%82%e3%81%92%e3%82%8b6%e3%81%a4%e3%81%ae%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88/ http://www.mi-yell.net/2012/01/ec%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e3%81%8a%e3%82%82%e3%81%a6%e3%81%aa%e3%81%97%e5%8a%9b%e3%82%92%e3%81%82%e3%81%92%e3%82%8b6%e3%81%a4%e3%81%ae%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88/#comments Fri, 06 Jan 2012 06:30:41 +0000 admin http://www.mi-yell.net/?p=2583 買いやすいECサイトとは、お客様がストレスなく商品を購入できるサイト。
必要な情報が見つからなくてサイトをうろうろして疲れてしまったり、たくさんの商品があって何を選べばよいかわからなくなったり・・・そんな小さなストレスの積み重ねで、お客様はサイトから離れて行ってしまいます。

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

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

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


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


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

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

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

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


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

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



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


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

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

４．在庫状況の明示

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

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

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

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


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


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


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


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


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

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

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




]]> http://www.mi-yell.net/2012/01/ec%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e3%81%8a%e3%82%82%e3%81%a6%e3%81%aa%e3%81%97%e5%8a%9b%e3%82%92%e3%81%82%e3%81%92%e3%82%8b6%e3%81%a4%e3%81%ae%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88/feed/ 0 サイトの老化対策10ポイント http://www.mi-yell.net/2011/08/%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e8%80%81%e5%8c%96%e5%af%be%e7%ad%9610%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88/ http://www.mi-yell.net/2011/08/%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e8%80%81%e5%8c%96%e5%af%be%e7%ad%9610%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88/#comments Fri, 26 Aug 2011 04:46:59 +0000 admin http://www.mi-yell.net/?p=2400

１．文字の大きさも大切だけど、行間が大切。

最低でもフォントサイズ×1.5の行間が必要です。

文字の大きさは統一されていれば焦点が合いますので、読みづらいながらもそこまで小さくなければ読むことができますが、行間が狭いと読めなくなります。行間は1.6em以上に設定しましょう。

2.色は多く使いすぎない

あまり色をたくさん使うと、焦点が合いづらくなります。

沢山の色が使われると、焦点をすぐに合わせることができずにユーザーを疲れさせてしまいます。
老眼が始まった方は焦点を合わせるのが難しくなることを考え、目を疲れさせない作りにしましょう。


3.色差をしっかりつける

色の差をしっかりつけましょう。少ないと、見えづらくなり、見られなくなります。

白地に黄色で描かれた表示がぼけて見えたり、グレーに黒色だと、全体的に黒く見えてしまうことがあります。色差がはっきりしないと文字やモノとして認識されないことがありますので、しっかりと色差をつけましょう。
色差チェックにはカラー・コントラスト・アナライザー などを使うとよいでしょう。

4.端っこにごちゃごちゃおかない

加齢に従って周辺視野が狭くなります。

端っこに買物籠へのリンク等を置くと、見逃されやすくなります。
重要なボタンは画面の中央に配置するようにしましょう。

5.違うものは、違う写真で！

同じような写真が並ぶと判断がつかず、見逃されます。

その商品を表す解りやすい画像はとても必要ですが、同じような商品だからと同じ写真を載せると判断がつかず、そのまま見逃されます。
ユーザーが眠くてもすぐに理解できるような写真を利用するのがよいでしょう。

6.Flashなどの動きがある物は、動き過ぎないようにする

動体視力が落ちますので、動き過ぎないように

動体視力が落ちてくると、その動きに心を奪われて、そして、疲れてしまいます。
動き過ぎないように、動きがきちんと予測可能なものであるようにしましょう。
（たとえば、スライドの切り替わりが毎回違う、マウスを押したら思ったものと違う等ならないようにしましょう）

7.ルールを統一する

ページごとに雰囲気ががらりと変わったりしていませんか？

ページによってメニューの表示方法が違ったり、グローバルナビに変化があったりすると、同じものとして認識できず、疲れてしまいます。

8.ファーストビューに気を使う

ファーストビューでその先を見るかどうか決めます。

判断力が落ちてくるので、ファーストビューだけでそのサイトを見るかどうか、判断します。（若い方は比較的すぐにスクロールから入ります。）
多くのサイト運営者は、スクロール前提にサイトを構築しますが、スクロールをされない前提でサイトを構築して下さい。

9.関連する説明は近くに配置する

加齢により、集中力が減退してきます。
ですから、サイトの内容をしっかり覚えておくことはしません。

よくあるのが、ページ上部に商品説明があり、お客様の声が出てきた後に、商品の色についての説明などがあるパターン。多くの人は行ったり来たりとサイト閲覧を繰り返し、疲れ果ててしまいます。ですから、商品説明と色の部分などは、近くに置いておかないといけません。

10.関連性のある内容について、別ページを開かないようにする

周辺視野が狭くなるので、画面の周辺の集中力が、激減しています。

関連性のあるページが別ウィンドウで開くと、元のページに戻りたいが故に、軽い気持ちで閉じるボタンをクリックします。ところが、周辺部分に集中力はありませんので、多くの人が元になるページの閉じるボタンを押してしまいます。

自社サイトがユーザーを疲れさせていないかどうかをチェックするためにもユーザーテストをお薦めしています。
どうぞお試しください。

]]> http://www.mi-yell.net/2011/08/%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e8%80%81%e5%8c%96%e5%af%be%e7%ad%9610%e3%83%9d%e3%82%a4%e3%83%b3%e3%83%88/feed/ 0 動画で見る画像と文字配置の注意点 http://www.mi-yell.net/2011/07/%e5%8b%95%e7%94%bb%e3%81%a7%e8%a6%8b%e3%82%8b%e7%94%bb%e5%83%8f%e3%81%a8%e6%96%87%e5%ad%97%e9%85%8d%e7%bd%ae%e3%81%ae%e6%b3%a8%e6%84%8f%e7%82%b9/ http://www.mi-yell.net/2011/07/%e5%8b%95%e7%94%bb%e3%81%a7%e8%a6%8b%e3%82%8b%e7%94%bb%e5%83%8f%e3%81%a8%e6%96%87%e5%ad%97%e9%85%8d%e7%bd%ae%e3%81%ae%e6%b3%a8%e6%84%8f%e7%82%b9/#comments Fri, 08 Jul 2011 08:04:25 +0000 admin http://www.mi-yell.net/?p=2367 ユーザーは商品の画像に意識が向きがち。画像の近くの注意書きには、視線が向かわないこともあります。

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

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

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



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


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

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


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


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

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

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


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

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



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

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


]]> http://www.mi-yell.net/2011/07/%e5%8b%95%e7%94%bb%e3%81%a7%e8%a6%8b%e3%82%8b%e7%94%bb%e5%83%8f%e3%81%a8%e6%96%87%e5%ad%97%e9%85%8d%e7%bd%ae%e3%81%ae%e6%b3%a8%e6%84%8f%e7%82%b9/feed/ 0 動画で見るサブカテゴリ展開と商品検索 http://www.mi-yell.net/2011/05/%e5%8b%95%e7%94%bb%e3%81%a7%e8%a6%8b%e3%82%8b%e3%82%b5%e3%83%96%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e5%b1%95%e9%96%8b%e3%81%a8%e5%95%86%e5%93%81%e6%a4%9c%e7%b4%a2/ http://www.mi-yell.net/2011/05/%e5%8b%95%e7%94%bb%e3%81%a7%e8%a6%8b%e3%82%8b%e3%82%b5%e3%83%96%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e5%b1%95%e9%96%8b%e3%81%a8%e5%95%86%e5%93%81%e6%a4%9c%e7%b4%a2/#comments Tue, 24 May 2011 05:25:36 +0000 admin http://www.mi-yell.net/?p=2308
　大項目をクリックしたときにサイトがどんな動作をするかをチェック！

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

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

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

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

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

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

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

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


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

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

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

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



]]> http://www.mi-yell.net/2011/05/%e5%8b%95%e7%94%bb%e3%81%a7%e8%a6%8b%e3%82%8b%e3%82%b5%e3%83%96%e3%82%ab%e3%83%86%e3%82%b4%e3%83%aa%e5%b1%95%e9%96%8b%e3%81%a8%e5%95%86%e5%93%81%e6%a4%9c%e7%b4%a2/feed/ 0 問題点が見エール：宅配花屋さん 花RiRo さん http://www.mi-yell.net/2009/10/%e5%95%8f%e9%a1%8c%e7%82%b9%e3%81%8c%e8%a6%8b%e3%82%a8%e3%83%bc%e3%83%ab%ef%bc%9a%e5%ae%85%e9%85%8d%e8%8a%b1%e5%b1%8b%e3%81%95%e3%82%93-%e8%8a%b1riro-%e3%81%95%e3%82%93/ http://www.mi-yell.net/2009/10/%e5%95%8f%e9%a1%8c%e7%82%b9%e3%81%8c%e8%a6%8b%e3%82%a8%e3%83%bc%e3%83%ab%ef%bc%9a%e5%ae%85%e9%85%8d%e8%8a%b1%e5%b1%8b%e3%81%95%e3%82%93-%e8%8a%b1riro-%e3%81%95%e3%82%93/#comments Wed, 14 Oct 2009 10:24:27 +0000 admin http://www.mi-yell.net/?p=606 宅配花屋さん 花RiRo さん見エール体験談はこちらから


■調査対象URL

宅配花屋さん 花RiRo

■目的

・検索エンジンから入った場合、「誕生日祝いの花」をすぐに見つけ購入する事ができるか。
・どのように誕生日祝いの花を探すか

■調査手法

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

■調査日時

９月１４日～１６日

■タスク内容

あなたのご家族もしくはご友人が誕生日の為、誕生日祝いの用途として5000円程度のお花を探しています。 そこで当店を見つけサイトのトップページにきました。 今から花屋のサイトが開きますので、どんな種類があるのか、誕生日祝いとしてどのようなものがいいのかを 確認した上で好みの商品を選んで購入して下さい。

全体評価

概要

・ユーザーが送料が分からないなど不安な点があると、買物かごへの動きがぎこちなくなる。送料、お届け日数、会社概要はしっかり明記。
・同じ種類でネ団体が違う商品でも、ファーストビューが同じであればユーザーには違う商品であることが分かりづらい。面倒でも、すべてのページはファーストビューを買えるようにしましょう。

タスクについて

全員誕生日祝いのページに到達した
・カテゴリの分類が迷わせることが多々あった
例）誕生日のページを表示させたが、値段で絞る時に左のグローバルナビゲーションを利用し、絞り込みと勘違いしてクリックした例（３０歳代男性）

視線の特徴

花、という言葉で検索してこのページにたどりついたことが前提であるためにロゴはあまり見られていない。

カテゴリーページ

カテゴリーページ
＜(1)の問題点＞
商品を求めている場合、文章はあまり読まれない。
＜(1)の改善点＞
この部分を短い文章にし、ページ全体をすっきりさせる

＜(2)の問題点＞
花の種類を分からない人はどれを選べばいいか解らない、という意見が上げられた。
＜(2)の改善点＞
全体的にシンプルに、読んでほしいところを太字にする

＜(3)の問題点＞
違いが分かりにくい商品はランダムに並べてもあまり見られない。
＜(3)の改善点＞
カテゴリ別のページに移動するか、売れ筋ランキングなどを掲載する。


個別商品ページ

個別商品ページ
＜(1)＞
上部がすべて同じなので、違いが分からず、クリックし間違えと勘違いして戻ってしまうケースがあった。
また、違いが分からないために左メニューをクリックしてしまう場合もあった。
＜(2)＞
商品画像の方が小さく、下の別製品の案内が大きいため、下の製品も関連製品と考え商品をクリックせずに下の関連製品を見に行く人も。
結局同じものを選択し、ループしてしまう。
もうすこし写真を大きくするとよい
＜(3)＞
上の製品より目立たないようにする
＜キーポイント＞
同種類の商品であってもファーストビューは「何の商品であるか」をはっきりすべき。とくに、今回は「誕生日祝いを探して」というタスクだったために、個別商品のファーストビューに「誕生日・・・」と出ていても魅力的には映らない。


買い物かご

買い物かご
＜(1)＞
この段階では送料が分かりづらいため、合計金額のところがよく見られている.
「注意点」というタイトルは見られているものの、内容までは見られていない。

＜(2)＞
カートの問題であるが、買い物を続ける」という表現が分かりづらく、続けるとこのまま決済に行けるのかと思ってしまう


入力フォーム

入力フォーム ・一通りページを見てから入力している。
・この時点で送料が分かっていないために、視線に不安が現れている。
＜改善案＞
御届け先のご住所のご入力後、送料を計算します。などの文言を籠の下に赤字でいれる


レジ

レジ ・送料のページがカテゴリにまとめられているため、どこにあるのか判明しづらい。そのため、ここで送料が判明する場合があった。
・送料などは分かりやすい場所に書くことで、操作中の不安を軽減することができる


宅配花屋さん 花RiRo さん見エール体験談はこちらから

]]> http://www.mi-yell.net/2009/10/%e5%95%8f%e9%a1%8c%e7%82%b9%e3%81%8c%e8%a6%8b%e3%82%a8%e3%83%bc%e3%83%ab%ef%bc%9a%e5%ae%85%e9%85%8d%e8%8a%b1%e5%b1%8b%e3%81%95%e3%82%93-%e8%8a%b1riro-%e3%81%95%e3%82%93/feed/ 0 見エール体験談：唐辛子への道 ハクタカ さん http://www.mi-yell.net/2009/09/%e8%a6%8b%e3%82%a8%e3%83%bc%e3%83%ab%e4%bd%93%e9%a8%93%e8%ab%87%ef%bc%9a%e5%94%90%e8%be%9b%e5%ad%90%e3%81%b8%e3%81%ae%e9%81%93-%e3%83%8f%e3%82%af%e3%82%bf%e3%82%ab-%e3%81%95%e3%82%93/ http://www.mi-yell.net/2009/09/%e8%a6%8b%e3%82%a8%e3%83%bc%e3%83%ab%e4%bd%93%e9%a8%93%e8%ab%87%ef%bc%9a%e5%94%90%e8%be%9b%e5%ad%90%e3%81%b8%e3%81%ae%e9%81%93-%e3%83%8f%e3%82%af%e3%82%bf%e3%82%ab-%e3%81%95%e3%82%93/#comments Mon, 28 Sep 2009 07:37:26 +0000 admin http://www.mi-yell.net/?p=552 唐辛子への道 ハクタカ 「日本最大級の唐辛子専門店」をコンセプトに、唐辛子やそれにまつわる商品を主に売っています。
元々はソースの会社であり、調味料を扱っているので調味料も同時に販売しています。
1998年頃、キムチブームが到来しキムチの素に使う安定した味の唐辛子を研究しているうちに、唐辛子の魅力に魅せられた店長が「唐辛子のすばらしさを皆様へ伝えたい！」という理念で開店しました。
今では辛さのレベルの違うさまざまな唐辛子商品を仕入れ辛いもの好きなかたに応えられるよう努力しています。
買うだけでなく参加型のイベントも開催して、お客様との距離が近い楽しんでいただけるサイトを目指しています。

販売責任者：伊藤　惣一
運営会社：白鷹ソース株式会社 唐辛子への道 ハクタカ
創業：昭和６年
会社所在地：東京都江東区

見エールを受ける前、「見エール」について思っていたこと

サイトのみられていない部分がはっきりわかりそうだなあと思っていました。口コミで教わったので、割と信頼して参加をお願いしました。

見エールを受ける前に抱えていたサイトの「ユーザビリティ」の課題

トップページのファーストビューに商品があまり出ていないので、目的の商品ページにたどり着きやすくしたい。見られていない部分が多ければ改善していきたい。

見エールの感想

お客様の視点がはっきりとわかるので、とても参考になりました。
「ここ見てないだろうな・・・」と予想していたところは見事に見られていなく、何も考えていなかった商品ページや購入のシーンでもかなり問題があることがわかりました。
店舗スタッフ間で問題点を話したりするよりもぐっと説得力があり、改善のための意思決定が早くなるのでよかったです。

今後、どのように見エールを活用していきますか？

ページ制作のスピートが遅いので、すぐ100%改善は無理ですがとりあえずは指摘された点から1個ずつ直していこうと思います・・・。

お客様に良かれと思ってしていたことが、逆に手間をとらせていたなんてところが沢山あったので（同梱オススメとか、慣れてるお客様
には余計なお世話かなぁとか考えさせられました）お客様視点の貴重な意見として、今回頂いた問題点を1個ずつ解消していきたいです！

]]> http://www.mi-yell.net/2009/09/%e8%a6%8b%e3%82%a8%e3%83%bc%e3%83%ab%e4%bd%93%e9%a8%93%e8%ab%87%ef%bc%9a%e5%94%90%e8%be%9b%e5%ad%90%e3%81%b8%e3%81%ae%e9%81%93-%e3%83%8f%e3%82%af%e3%82%bf%e3%82%ab-%e3%81%95%e3%82%93/feed/ 0 ウェブサイトの制作者とユーザーとのウェブサイトの見かたの違い http://www.mi-yell.net/2009/08/%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%a8%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%81%a8%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b5%e3%82%a4/ http://www.mi-yell.net/2009/08/%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%a8%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%81%a8%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b5%e3%82%a4/#comments Fri, 28 Aug 2009 08:51:00 +0000 admin http://www.mi-yell.net/?p=500

ユーザーは制作者の期待通りにウェブサイトを見てくれるか


サイト運営者側と初めてウェブサイトを見るユーザーとの視点の違いを検証します。
京都・おぶぶ茶苑の松本さんに協力していただきました。

運営責任者さんの視点


こちらは「かぶせ茶と大地の茶を購入する」というタスク（課題）でウェブサイトが閲覧された様子です。
検索で偶然このページにたどり着いたユーザーさんのつもり、という設定です。
被験者はおぶぶ茶苑の販売責任者松本さんです。



ページの上から下に向かって満遍なく読み、情報収集しようとしています。

初めてサイトに訪れたユーザーの視点


続いて、サイトを見たことのない30歳代男性の視点。インターネットはほぼ毎日利用している方です。



はじめにサイトの上部のロゴやメニューなどを見て、どんなサイトなのかを把握しようとしている様子がわかります。
次に商品について知りたいと考えますが、ぱっと見てサイトや商品のポイントを把握できません。
普通のお茶とどう違うのか、どんな魅力があるのか、画面をスクロールしてざっとながめて特徴を捉えようとします。
スクロールを止めて読んで見たいと感じる部分がないため、視点が止まらずかなりのスピードで読み飛ばされていきます。

なかなかポイントをつかめず、一旦ファーストビューまで戻り、「わからないのははじめてだからだな」と「はじめての方へ」のメニューをクリックしました。
今回はユーザーテストですから進めてもらえましたが、ここでページを離脱されてしまう可能性はかなり高いのではないでしょうか。

「はじめての方へ」にあるオーナーさんの思いの書かれた画像は流し見されてしまっています（0:37～）。
それよりも「おぶぶ茶苑って何？」やQ＆Aのほうが興味を持って見られていました。
理念を伝えることは必要ですが、初めてサイトに訪れたユーザーが必要としているのは”情報“をより必要としています。
うまく情報の中に思いを盛り込むことができるとよいでしょう。

]]> http://www.mi-yell.net/2009/08/%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e5%88%b6%e4%bd%9c%e8%80%85%e3%81%a8%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e3%81%a8%e3%81%ae%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b5%e3%82%a4/feed/ 0 問題点が見エール：京都おぶぶ茶苑さん http://www.mi-yell.net/2009/08/%e5%95%8f%e9%a1%8c%e7%82%b9%e3%81%8c%e8%a6%8b%e3%82%a8%e3%83%bc%e3%83%ab%ef%bc%9a%e4%ba%ac%e9%83%bd%e3%81%8a%e3%81%b6%e3%81%b6%e8%8c%b6%e8%8b%91%e3%81%95%e3%82%93/ http://www.mi-yell.net/2009/08/%e5%95%8f%e9%a1%8c%e7%82%b9%e3%81%8c%e8%a6%8b%e3%82%a8%e3%83%bc%e3%83%ab%ef%bc%9a%e4%ba%ac%e9%83%bd%e3%81%8a%e3%81%b6%e3%81%b6%e8%8c%b6%e8%8b%91%e3%81%95%e3%82%93/#comments Fri, 28 Aug 2009 07:17:56 +0000 admin http://www.mi-yell.net/?p=461

京都おぶぶ茶苑さん見エール体験談はこちらから

■調査対象者概要

被験者 年齢 インターネット利用歴、その他情報
Ｍさん男性 ３５歳 ヘビーユーザー。ネットで商品購入をよく行っている
Ｍさん男性 ３９歳 ヘビーユーザー。
Nさん男性 ３６歳 ヘビーユーザー。自分自身でウェブを制作することもある。
Ｍさん女性 ３１歳 ヘビーユーザー。ネットで商品購入は問題ない。
Yさん女性 ２５歳 ヘビーユーザー。

■調査対象URL

お茶の通販・京都おぶぶ茶苑
http://www.obubu.com/

■目的

・商品ページから購入への導線を探る
・複数個買い物かごに入れるときの障壁

■調査手法

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

■調査日時

８月１８日～２０日

■タスク内容

かぶせ煎茶と大地のお茶を購入してください。

概要

・全体的に操作上の問題点はほとんどなく、タスクの「ついで買い」の達成率は100%であった。
・商品を表す画像とキャッチコピーが端的に商品を伝えきれず、もったいない。

今回のキーポイント

「ユーザーは、何を求めて自社サイトに来たのかを知る」（アクセス解析からユーザーのペルソナを考える）
「お茶」で検索したのなら「自分のサイトをきっと読みたいはずだ」というのは考え違い。多くのユーザーはそこまで商品や店舗のことを思っていない。

ユーザーは10秒で「そのサイトで何を次にすべきか」を決める
今回は「タスク」があるので、そのまま注文という行動に移ったが、サイトの内容を把握できない場合にはナビゲーションから別のページへ、もしくはページを離脱する可能性もある。

写真は思考を促すためのツール。そこで内容を判断し、文章で確信に変わる

ファーストビュー

ファーストビュー 全体的に奇麗なページ。
ただし、検索エンジン経由でこのかぶせ煎茶のページに入ってしまった場合、「どのようなお茶のページなのか」を理解しにくい。リピータが多いウェブサイトの場合詳しい説明が省かれる傾向があるが、サイトに初めて訪れた方を考慮し、説明は省かないほうが望ましい。

本サイトの場合、トップページに「甘みとコクが濃ゆい『かぶせ煎茶』 」とあるが、ファーストビューが画像だけになってしまうため、理解がしづらくなる。（解像度：1024×768の場合）
ユーザーは写真で理解できない場合、写真に書かれているキャッチコピーをチェックし、その後サイトロゴを見る傾向が高い。画像のクオリティとキャッチコピーが非常に重要である。

ページには「ご注文はこちら」とリンクが張っており、リンク先もショッピングカートボタンが画面中央にくるように配置されているため、初心者も戸惑わずに操作が可能。

＜問題点＞
１）写真だけではお茶の特徴がわからない
２）文章でお茶の良さ・特徴が伝わっていない

＜改善点＞
１）かぶせ茶の特徴を画像の周りにキャッチコピーを配置。
２）文章を全体的に短く、端的に書く。

ついで買い

＜問題点＆改善点＞
ボタン １）一つの商品を買い物かごに入れた後に「買い物を続ける」ボタンの意味が「１）元の商品に戻る」のか「２）購入ステップに進む」のか　わかりづらい。できれば「元の商品に戻り買い物を続ける」とラベルを変える。

２）「買い物を続ける」をクリックし、元のページに戻ってから、次のアクションの起こし方で惑う。主に上部のナビゲーションにいくか、左のナビゲーションに移る。
左のナビゲーションに視線が行った場合には商品をカテゴリで認識できる。
上のグローバルナビゲーションに目線が行った場合には、ナビゲーションの文字が薄く、ティッカーのように表示されているために、クリックできると思わないことがある。よりついで買いを促すために、上部のナビゲーションがもう少しボタン形状になっているとよい。

３）1名、元の商品に戻った後にページをスクロールさせ、ページ下の「おすすめ関連商品」から購入しようとしたが実際この部分は「かぶせ煎茶」と同時に購入するときに利用するものであり、個数を選んでも特に意味がない。ユーザーを惑わすナビゲーションになってしまうため、ここで個数を選べないようにするか、ショッピングカートボタンの近くにお薦め商品を配置する。

買い物かご周り

１）上記でも触れたが、「買い物を続ける」ボタンがナビゲーションとして惑わせやすい。
２）買い物ナビゲーションがあるが、矢印の形状になっていないため、その意味が理解されにくい。
３）買い物かご部分に5000円以上で送料半額とあるが、買い物かごページでの送料が下のほうにあるために戸惑うことがある。

京都おぶぶ茶苑さん見エール体験談はこちらから

]]> http://www.mi-yell.net/2009/08/%e5%95%8f%e9%a1%8c%e7%82%b9%e3%81%8c%e8%a6%8b%e3%82%a8%e3%83%bc%e3%83%ab%ef%bc%9a%e4%ba%ac%e9%83%bd%e3%81%8a%e3%81%b6%e3%81%b6%e8%8c%b6%e8%8b%91%e3%81%95%e3%82%93/feed/ 0 見エール体験談：京都おぶぶ茶苑さん http://www.mi-yell.net/2009/08/%e8%a6%8b%e3%82%a8%e3%83%bc%e3%83%ab%e4%bd%93%e9%a8%93%e8%ab%87%ef%bc%9a%e4%ba%ac%e9%83%bd%e3%81%8a%e3%81%b6%e3%81%b6%e8%8c%b6%e8%8b%91%e3%81%95%e3%82%93/ http://www.mi-yell.net/2009/08/%e8%a6%8b%e3%82%a8%e3%83%bc%e3%83%ab%e4%bd%93%e9%a8%93%e8%ab%87%ef%bc%9a%e4%ba%ac%e9%83%bd%e3%81%8a%e3%81%b6%e3%81%b6%e8%8c%b6%e8%8b%91%e3%81%95%e3%82%93/#comments Fri, 28 Aug 2009 07:17:41 +0000 admin http://www.mi-yell.net/?p=441 京都おぶぶ茶苑 京都で宇治茶を作ってる茶農家のグループで、宇治茶を茶畑から世界中に直送しています！

2004年京都おぶぶ茶苑の前身「おぶぶ.com」始動
2007年「京都おぶぶ茶苑」に名称変更。
店舗運営責任者：松本靖治

運営会社：お茶の通販・京都おぶぶ茶苑合同会社　お茶の通販・京都おぶぶ茶苑
会社所在地：京都府相楽郡
京都おぶぶ茶苑さん見エール動画はこちらから

見エールを受ける前、「見エール」について思っていたこと

アイトラッキングは、とっても高額なイメージがあるので、まさかうちのサイトを見てもらえる日が来るなって思っても見ませんでした。何をされるのかさっぱり分からずに行きました。

見エールを受ける前に抱えていたサイトの「ユーザビリティ」の課題

きっと分かりにくいところはあるだろうなって思っていました。

見エールの感想

なによりもその説得力ですかね。

目の前で、いろいろと思い悩んでいる人や導線を見ていると
もういても立ってもいられなくなりますね。。。涙

なので、改善しようという圧力が他の誰に何を言われるよりも強い気がしました。

翌日から、買い物かご周りや買い物かごの修正に入りました。

今後、どのように見エールを活用していきますか？

継続的に何度か受けてみたいですね。

あと、こういう情報は、まだ世の中に出てないのでもっと件数を見てみたいです。

そして、自分自身の中に一般人の目線の動きの予測を作りたい。

そうしたら、かなりこれからのサイト作りに行かせる気がします。

これは本当に作る人が見て理解して、初めて意味がある気がします。

そういう意味でも今後も継続的に見ていきたいですね。

とにもかくにもありがとうございました！！

京都おぶぶ茶苑さん見エール動画はこちらから

]]> http://www.mi-yell.net/2009/08/%e8%a6%8b%e3%82%a8%e3%83%bc%e3%83%ab%e4%bd%93%e9%a8%93%e8%ab%87%ef%bc%9a%e4%ba%ac%e9%83%bd%e3%81%8a%e3%81%b6%e3%81%b6%e8%8c%b6%e8%8b%91%e3%81%95%e3%82%93/feed/ 0 問題点が見エール：ウッドワーロックさん http://www.mi-yell.net/2009/08/%e5%95%8f%e9%a1%8c%e7%82%b9%e3%81%8c%e8%a6%8b%e3%82%a8%e3%83%bc%e3%83%ab%ef%bc%9a%e3%82%a6%e3%83%83%e3%83%89%e3%83%af%e3%83%bc%e3%83%ad%e3%83%83%e3%82%af%e3%81%95%e3%82%93/ http://www.mi-yell.net/2009/08/%e5%95%8f%e9%a1%8c%e7%82%b9%e3%81%8c%e8%a6%8b%e3%82%a8%e3%83%bc%e3%83%ab%ef%bc%9a%e3%82%a6%e3%83%83%e3%83%89%e3%83%af%e3%83%bc%e3%83%ad%e3%83%83%e3%82%af%e3%81%95%e3%82%93/#comments Tue, 11 Aug 2009 08:35:55 +0000 admin http://www.mi-yell.net/?p=335

調査概要

ウッドワーロックさんの見エール体験談はこちらから

調査対象者概要

被験者 年齢 インターネット利用歴、その他情報
Nさん男性 ７７歳 毎日３０分以上インターネットを利用。孫がいるが、かなり大きい。
Mさん女性 ５０歳 インターネットヘビーユーザー。業務もあわせて毎日５時間以上インターネットをしている。最近姪の子どもが生まれたために子ども向けプレゼントを購入。
Mさん男性 ４１歳 ヘビーユーザー。ほぼ１日ネットをしている。ご自身に3歳の子供がいる。
Nさん男性 ３６歳 ヘビーユーザー。自分自身でウェブを制作することもある。
Oさん女性 ２５歳 ヘビーユーザー。

調査対象URL

木のおもちゃwood warlock
http://www.rakuten.ne.jp/gold/woodwarlock/

目的

・トップページからどのように遷移するかを知る
・包装をつけて注文できるか（タスク）

調査手法

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

調査日時

５月２３日～２６日

トップページ

トップページ１．まんべんなく商品のページを見られているが、初見ユーザーかつ商品知識があまりない人にとってはどのような商品か解りづらく、年齢の区別なくランキングや対象年齢から見る傾向がある。
２．商品種類がたくさんあり、何を選べばよいのか解っていない状態。
プレゼント需要を見込む場合にはランキングや対象年齢別をもう少し目立つようにすればよい。

カテゴリーページ

カテゴリーページ １．まずは画像で文章を読む・読まないを判断する。画像の位置は右でも左でも、画像に目がいく。解りやすい画像を配置。
２．文末に画像がある場合、視線はそのまま、画像の下の画像に移る。そのことを意識して、右上に売れ筋を配置するのも手。
３．下に行くほど真ん中の列は見られない。


商品ページ

個別商品ページ １．個別商品ページでは絵よりも文章が重視される。
２．料金の部分が見られている。
３．ラッピングできます、のところには目線が止まらない（ラッピングが当然できると思っているため）

ラッピングページ

wrappingpage １．ラッピングの前書きが長く、戸惑う人が多い。
２．ラッピングの画像が目に入らないため、ここで何を選べばいいのか解らない。エルダー組ではどうしようもなくなり、画像の「ここで指定」の上でずっとクリックしている人もいた。

ラッピングページ改善点

ラッピングページ改善案
  • ラッピングは推奨されないが、おくりものではラッピングをしたいという人も多い。各ページの「ラッピングについて」を目立たせる
  • ラッピングのページは最初にラッピングの種類、料金（と、その料金の理由）について明記し、活動の部分を後に回す。
  • 選択肢を少なくし、こだわりを直感的に伝える。
  • こだわりの部分は簡潔に。ページ下部に詳細のこだわりを持ってくる。


ウッドワーロックさんの見エール体験談はこちらから

]]> http://www.mi-yell.net/2009/08/%e5%95%8f%e9%a1%8c%e7%82%b9%e3%81%8c%e8%a6%8b%e3%82%a8%e3%83%bc%e3%83%ab%ef%bc%9a%e3%82%a6%e3%83%83%e3%83%89%e3%83%af%e3%83%bc%e3%83%ad%e3%83%83%e3%82%af%e3%81%95%e3%82%93/feed/ 0