プロの目は「そんなもんだろう」では済みません。「なぜそうなったか」まで考えます。サンプルとしてはいい選択だと思います。
⇉ トップページ
サイトの概要
ヨドバシで扱っている商品なら基本的に掲載されています。価格についてはドットコム価格になっていて、店頭とは一致しません。たまに店頭の方が高かったりした時は、店員に言ったら何とかしてくれたりします。
扱う商品の種類が多すぎて、ほとんどAmazon状態です。従って、商品を探すスキルが無いユーザーには厳しい場所です。目的をハッキリと意識して探さないといけません。それが店頭より難しいとすれば、WEBショップとして成立していないということです。
どのショッピングサイトにも言えることではあります。
今回のレビューは、そのモバイル版（スマートフォン向け）です。
レビュー
アクセスして最初に開くのはこういうページです。
ショッピングサイトにアクセスするユーザーにとって最も関心が高いのは商品です。検索バーが上部にあるのは当然です。スペースで区切るのも今や常識ですから、プレースホルダーに書かれていなくても困る人は少ないでしょう。
誰でログインしているのか分かるように、すぐ下にアカウントを表示し、ついでにポイント数も見せる。以前に保留していた商品が無いか分かるように、カートを表示しておく。カートの数字に「0」と表示していれば満点合格です。
大きな問題があります。変な画像リンクがありますね。私はこの時、コミックスを買おうとしていました。専任オペレータによる設置相談については全く関心がありません。邪魔です。
それならば、この画像リンクに意味があるのはどんな時か。大型家電を購入する動機を持つ人がアクセスしている時です。では、その人がこの画面でこの画像リンクを見る必要があるのか。いいえ。それは実際に大型家電の購入を検討し始めた時、つまり商品を閲覧する時です。そして、今はその時ではありません。
以前に関心を持った商品であれば、関心が続いている可能性があるので、最近チェックした商品のリストを配置するのは妥当です。しかし、なぜ1件だけ？ よく見ると「1/10」と表示されています。10件の候補があるようです。それなのに、あたかも1件しか無いかのように見えます。その理由は、おそらく横スクロールだと思われる表示エリアの、続きがある方向に、何も見えないことです。隠れていてよく分からないけど何かがあるようだ、という見え方をしていないと、あまり注意深くないユーザーは横スクロールを見落とします。商品の下に置いている「1/10」とスクロールボタンまで含めた部品を開発する方法もあります。
ヨドバシでネットショッピングするようなユーザーは、みんなリテラシーの高い注意深い人ばかりであり、それ以外のユーザーが困惑しようと、販売機会を逸しようと、別に構わない。それがヨドバシカメラの姿勢だということでしょうか。デザインからはそう読み取れます。
ユーザーの指は縦に動くものです。余程のシグニファイアがなければ、横には動きません。
検索してみます。
件数と条件指定の方法が狭い領域に無理なく表示されています。並べ替えることもできて、並び順の候補も妥当です。
なのに、気を利かせて関連商品まで見せています、というアピールなのでしょうが、余計なことです。最新刊を探している人以外には無用です。関連商品は実際に開いた商品のページに載っていれば十分です。そして最新刊がほしい人には発売日が最大の関心事です。それが出ていない。
最新刊がほしい人にしか必要ない情報を表示していながら、最新刊がほしい人なら見たい情報を表示していない。何がしたいのか分かりません。
商品を選びます。
タイトル、著者、表示画像のセットは今時の常識です。レビューをこの場所に書く理由は不明です。買わない動機にはなり得ても、買う動機にはなりにくい情報です。ユーザーが知りたいのはこういうことではないでしょうか。
- どういう趣味の人に受けているのか
- どのくらい流行っているのか
カートに入れます。
- カートに追加というアクションに対して「追加しました」というメッセージ
- 何をカートに入れたのかを明示
- 結果としてカートの状態がどうなったのかを明示
飛ばした段に戻ります。
ここは主に「ショッピングを続ける」と「購入手続きに進む」の選択を迫っています。商品を増やすか、このまま決済するかという選択です。最大の問題が、ショッピングを続ける場合の機能デザインです。
「ショッピングを続ける」をタップすると、なんと、カートに入れた商品のページの戻ります。ブラウザーのbackと同じです。そのページを改めて見てみましょう。
ショッピングを続けることを選択したユーザーのネクスト・アクションは何でしょうか。次のいずれでもないことは明らかです。
- 同じ商品の別フォーマットを探す
- 同じ商品の無料サンプルを読む
- 同じ商品をお気に入りに登録する
- 同じ商品の在庫がある店舗を探す
ショッピングを続けるユーザーの二つめの妥当なアクションは、全く無関係な別の商品を探すことです。上の画面のどこから商品を探せるでしょうか。答えは、スクリーンショットで微妙に切れてしまっている左上の「トップ」というリンクをタップすることです。そうするとトップページが表示され、検索バーが使えます。これもあり得ないデザインです。
どうやら、ヨドバシカメラとしては一点カートに追加したら即座に決済してほしいようです。それにしては、決済し忘れた商品があった時に備えてトップページにカートの表示があります。やはり関西人は商魂逞しいということでしょうか。客とは決済額の数字に過ぎず、買物を、商品を、ヨドバシカメラとの付き合いを楽しむ人間だとは思っていないのでしょうか。
そろそろ、買物を終わらせます。
受取方法の選択
金額を確認させると、次に受取方法の選択を迫ってきます。親切のつもりなのだと思いますが、気持ちがデザインに反映できていません。情報の構造はこうなっています。
- 配達で受け取る
- ポイントの使い方を選ぶ
- 店舗で受け取る
- 店舗を選ぶ
配達の場合は家に商品が届くため、決済さえすれば終わりです。店舗の場合には店頭に在庫を準備する必要があるため、店舗を選ぶという手続きが必要です。
この構造自体は妥当ですが、画面のデザインが問題です。二つの関心事を同じ画面で処理させようとするとどんな混乱が起きるか、良い反面教師となっています。
この画面でユーザーが求めているのは、カートをコミットすることです。黙って購入画面へ進めばいいんです。現時点でという注釈付きですが、どうせ送料無料です。配達でも店舗でも決済額は同じです。商品の引き渡し方法は、ここで決めることではありません。
表示エリアのテーマは「受取方法」だと言っています。それにしてはメッセージに違和感があります。
- 配達で受け取りたい方
- 店舗でも受け取ることができます
なにせ、ポイント残高はとっくに知っているんです。今も、ページの左上にずっと出ています。モザイクをかけていますが、黄色い文字が分かるでしょう。デザインを犠牲にしてまで、わざわざ二重に出してくれなくていいんです。消しましょう。
実は、店舗でも受け取ることができますの部分をタップすると、店舗選択画面へ遷移するためのボタンが現れます。それを最初から表示していないのも、店舗受取を選んでほしくないという意図を感じます。
配達のエリアにポイントの表示は要らない。店舗のエリアには最初からボタンを表示する。それだけでも大きな改善です。
カートの商品
画面の下部には、商品のリストが出ています。追加する度に商品は確認していますが、ここでの目的は最終確認です。意図した商品が、意図した数で入っているか。この画面の目的はカートのコミットです。リストの内容で決済することになるので、意識の高いユーザーはこの瞬間に最も慎重になります。ここにも問題があります。
ここにリストがある理由は、実際に追加されている商品がユーザーの意図した通りかどうかを最終確認するためです。そのために必要な情報とは何でしょうか。
- 商品リストとして
- 全ての商品の目録
- 到着予定に基づくグルーピング
- 合計金額
- 個々の商品として
- 商品のタイトル
- タイトル毎の個数
- タイトルの単価
- タイトル毎の小計
余計な情報もあります。多いので表にしておきます。
| 余計な情報 | なぜ余計なのか |
|---|---|
| 出版社 | この期に及んで関心は無い |
| ポイント還元率 | 商品個別で見たいものではない |
| 在庫有無 | 到着予定だけで十分 |
| プレゼント包装可否 | プレゼント包装を注文する時だけ分かればいい |
| 店頭受取可否 | 店頭受取を選択した人だけ分かればいい |
あとは、あまり気にしないでしょうが、計の表記が違います。再計算の下に書いてある値は「単価」、商品毎の個数を考慮した額は「小計」です。どうせヨドバシは内税表示ですから、「単価」でいいはずです。少なくとも、「合計」という一つの言葉を二つの意味で使われるのはご免です。
今回は書籍なので表紙画像は不要情報ですが、家電ならばカタログ写真が表示されるので、あって悪いことは無いでしょう。
注文したかった内容と違った場合には、ここから操作できると便利です。どんな違いがあり得るでしょうか。
- 商品が足りない
- 不要な商品が含まれる
- 個数が違う
- 予算に合わせて調整が必要
四つの目的に対してデザインを検証しましょう。
| 目的 | 機能 |
|---|---|
| 商品が足りない | 対処不能 |
| 不要な商品が含まれる | 削除可能 |
| 個数が違う | 数量を変更可能 |
| 予算に合わせて調整が必要 | 不完全だが可能 |
ここはカートの内容を表示する画面です。購入画面ではありません。それなのに、商品をさらに追加するメニューが無いのは不自然です。作り手としては、この画面へ遷移した時点で決済するも同然と思っているのでしょうが、ユーザーを無視した勘違い設計です。今までの売ろう売ろう精神に反している点でも不可解です。
問題は数量変更の仕様です。個数をタイプして再計算をタップして再表示させる。よく見るデザインです。しかし、デザインは多数決で正解を出すものではありません。みんなが間違っているというデザインは無数にあります。タイプできるのはいいとして、基本的には数字を選択するか、増減させるデザインとするべきです。「小計」はリアルタイムに更新し、できるなら「合計」がどうなったかも見える場所に表示してもらいたい。ユーザーの関心は「小計」よりも「合計」に強く向いているからです。それができなければ、四つめの目的を達成することが難しいです。
急に技術的なことを言います。この時代ですから、計算ロジックをフロントに持たせるなり、Ajaxで計算結果だけ受け取るなり、技術はフォームの送信を求めていません。再計算ボタンは過去の遺物です。ヨドバシドットコムのサーバーは他のサービスと比較してどうも非力に思えるので、もっと軽量な処理に移行する努力をすべきでしょう。
決済します。
難癖ではなく正当な指摘をしましょう。「配達オプション指定」と「配達オプション」の違いとは何か。「配達オプション指定」という機能を使って指定した内容が「配達オプション」ではないのか。それが違うから気持ち悪いんです。
ここでの「配達オプション指定」とは、その下にうっすらと書かれている通り「配達会社の指定」です。おそらく、配達会社（という意味不明な概念）以外にも、ここで指定させたいものがあったのでしょう。もうかなり長い年月を経てこのままなのを見れば、その計画はとっくに頓挫しているはずですが。
それならば実際には「商品発送のまとめ方」である「配達オプション」の名前を変えれば良かったんです。どうせユーザーはピッカーの中身にしか関心がありません。項目の名前が少し変わったくらいでは驚かないでしょう。それよりは、意味の分からない項目名を理解しろと迫られる方が困ります。
配達オプション指定を開くとこうなります。
「メール便」とは配達業者なのでしょうか。「配達会社」と「配達業者」は何か違うのでしょうか。「前に戻る」機能をより正確に表す名前は「キャンセル」ではないでしょうか。そもそも、この画面の前や次とはどこなのでしょうか。
謎だらけのエリアを通過して商品を確認しようと思えば、ここで初めて到着予定に基づくグルーピングが行われます。できるなら最初からやってほしかった。可能な日より後ならば変更可能なのは自然なことです。もちろん、変更後の日付に元から商品があったなら、全部をまとめてグルーピングします。
やっと買い物が終わりました。
開くと画像のようになっています。やけに広いエリアですが無駄ばかりです。無駄とは内容の重複です。
- ゴールドポイントは出荷時に付くということを3回
- ポイントは次回以降使えるということを3回
最も大きな問題は、注文内容が書かれていないことです。タイトルが嘘を言っています。ここにあるのは注文内容を見るためのリンク（ボタン）と、還元されるポイント数の表示です。リンクとポイントを注文したわけではないので、これらが「ご注文内容」だと言うのは無理があります。
ポイントの表示面積を4分の1に直して、画像なしでタイトルと個数のみの商品一覧を普通に表示してくれればいいのではないでしょうか。大量注文でとても見切れないほど長いリストになっても、いいじゃないですか。店で買い物をして、印刷がいつまでも終わらないレシートを見ながら感慨に耽るのと同じ事です。
まとめ
色についてはよくできていますが、二点気になりました。
なんとなくオレンジっぽい黄色
ゴールドポイントという名前からテキストをゴールド色で表示するという動機は分かります。しかし、評価の星の色が黄色なので、色だけを見ると両者が同じカテゴリーに属するように見えます。別々の文脈であればいいのですが、商品の属性として常に関連付いているので、今回のように厳しい目で見ると気になります。これが売上に影響するとは考えにくいですが。
赤
ヨドバシカラーでしょうか。赤をあちこちで使っています。赤は目立ちます。なぜなら、危険を意味する色だからです。カートに入れる時は十分注意しなさい、という意味なら理解できます。しかし、売ろう売ろう精神に反していることが腑に落ちません。買物は楽しくしたいものです。
いかがでしたか？
⇉ トップページ