前から、エクストリムの商品ページについて少しずつ気になる箇所の改善を進めています。
今回は、商品ページ上部の見せ方を中心に、
- ページ内リンクの追加
- 「カートへ入れる」ボタンの高さ変更
- 販売価格の「￥」マークのサイズ変更
の3つを、小林さんに改修してもらいました。
一つひとつを見ると、それほど大きな変更ではありません。
ただ、ネットショップの商品ページでは、
「どこを押してもらいたいのか」
「どの情報を先に見てもらいたいのか」
「初めてページを見た人が迷わないか」
といった小さな違いが、使いやすさや購入のしやすさにつながっていくと思っています。
今回も、実際に形になってから小林さんとやり取りする中で、当初考えていたものから少しずつ変わっていきました。
商品ページの中を移動できるリンクを追加
今回追加したのが、商品ページ上部にあるページ内リンクです。
この改善には、以前から感じていた課題がありました。
Microsoft Clarityでユーザーの動きを見ていると、スマートフォンから訪問したお客様は、商品ページ上部のスライダー画像までは見ていても、その下にある「商品Q&A」などの情報まで到達していないケースが多いことが分かっていました。
せっかくページ下部に有用な情報を用意していても、そこまで見てもらえなければ意味がありません。
そこで、ページ上部から必要な情報へ直接移動できるようにアンカーリンクを追加しました。
現在は、
- 商品説明
- 説明書
- 商品Q&A
という3つのリンクに加え、レビューもページ上部に表示しています。
エクストリムの商品ページは、商品によってはかなり情報量があります。
画像を見る。
価格を見る。
商品説明を読む。
Q&Aを見る。
レビューを見る。
と進んでいくと、ページ自体もそれなりに長くなります。
最後まで読んでもらうこと自体が目的ではありません。
知りたい情報へ早くたどり着けるようにすることで、結果としてページから離脱しにくくなればいいな、という考えです。
小林さんから「おすすめポイント」を入れては？と提案
最初の改修が終わったあと、小林さんから一つ提案をいただきました。
現在の、
- 商品説明
- 説明書
- 商品Q&A
ではなく、
- おすすめポイント
- 商品説明
- 商品Q&A
にしてはどうか、というものです。
理由は、「おすすめポイント」という言葉の方がクリックしたくなるのではないかということ。
また、店長として書いている独自のコメントでもあるので、せっかくなら見てもらった方がいいのではないかという提案でした。
これは確かにその通りだと思いました。
「商品説明」より「おすすめポイント」の方が、ちょっと押してみたくなります。
ただ、今回は採用しませんでした。
「おすすめポイント」を入れなかった理由
理由は、商品によっておすすめポイントの内容に差があることです。
現在の商品ページは、すべて同じ時期に作ったものではありません。
かなり昔に登録した商品もあれば、最近作り直したページもあります。
おすすめポイントも、
詳しく書いている商品。
簡単なコメントだけの商品。
現在は上部のスライダー画像側に情報を集めている商品。
と、ページごとにクオリティがそろっていません。
そこで「おすすめポイント」という期待値の高いボタンを押してもらったのに、
「これだけ？」
と思われてしまう商品の存在が気になりました。
せっかくクリックしてもらうのであれば、その期待は裏切りたくありません。
そのため、現段階では「おすすめポイント」を共通ナビゲーションに入れるのは見送ることにしました。
「説明書」は地味だけど、実務ではよく使う
逆に小林さんからは、「説明書」は商品説明と名前が似ていて、初めて見る人には違いが分かりにくいので外してはどうか、という提案もありました。
これもUIだけを見れば納得できます。
ただ、こちらは残しました。
理由はかなり実務的です。
電話で商品のお問い合わせをいただいた時に、
「商品ページの途中に説明書というボタンがありますので、そこを押してください」
と案内することが今まで結構ありました。
これまでは「商品ページの途中」と説明していたので、どこにあるのか分かりにくい部分もありました。
今回の改修で、商品ページを開いた直後から「説明書」のリンクが見えるようになったため、購入前に仕様を確認したいお客様にとっても使いやすくなったと思います。
もちろん、お客様自身が探して読むためだけではなく、こちらがお客様をご案内する導線としても使っています。
サイトだけを見ていると不要そうでも、日々の問い合わせ対応まで含めると必要。
こういう部分は、実際にネットショップを運営していないと分かりにくいところかもしれません。
そのため今回は、
商品説明・説明書・商品Q&A＋レビュー
という構成を維持することにしました。
デザインも一度作ってから考え直した
ページ内リンクの機能自体はできたものの、最初に見た時に少し見た目が気になりました。
そこで私の方から、
- スマートフォンでは横並びのボタン形式
- PCでは商品バリエーションの左端にそろえる
- ボタン間にはある程度の余白を取る
- レビューは少し独立して見せる
といった修正案を出しました。
特にボタン同士を詰めすぎたくなかったのは、誤クリックを防ぎたかったからです。
情報をたくさん見せればいいわけではなく、余白も必要だと思っています。
現在使っているICONICというテーマも比較的余白を取ったデザインなので、その雰囲気を崩さないようにしました。
同じ機能なのにアイコンが違う問題
ここでも小林さんから指摘がありました。
私が作った案では、商品説明・説明書・商品Q&Aと、レビューで使っている矢印アイコンが違っていました。
小林さんからは、
UIデザインでは、同じ機能なら同じUIデザインにするのが基本ですよ。
という話がありました。
確かにその通りです。
私自身も試作を作っている途中でかなり悩んでいました。
同じ下向き矢印をたくさん並べると、画面が少しうるさく見えたからです。
そこで小林さんが、
- 矢印自体を小さくする
- 色を赤にする
- ページ内リンクは同じ矢印に統一する
という形に調整してくれました。
結果として、機能としての統一感を保ちながら、圧迫感もかなり減りました。
最終的には、この形でお願いすることにしました。
デザインは好みもありますが、迷った時に「なぜこの形にするのか」というルールがあると判断しやすいですね。
「カートへ入れる」ボタンも少し大きくした
今回、ページ内リンク以外にも、「カートへ入れる」ボタンの高さを少し大きくしました。
これはかなり単純で、
押してほしいボタンだから、押しやすくした
という変更です。
特にスマートフォンでは、クリックというより指でタップします。
商品ページの中でも購入に直接つながる一番重要なボタンなので、ほかの要素より存在感があってもいいと考えました。
また、現在のカート周辺には色付きの案内やボタンが増えているため、その中でも「カートへ入れる」が一目で分かるようにしたかったという意図もあります。
極端に大きくすると逆に邪魔になりますが、以前より少し高さを出すことで、押しやすさと存在感の両方を意識しました。
「￥」マークも小さくした
もう一つ変更したのが販売価格です。
以前は、
￥105,200
の「￥」と価格部分がほぼ同じ大きさでした。
今回、「￥」だけ少し小さくしています。
これも本当に小さな変更です。
ただ、見せたいのは通貨記号ではなく価格そのものです。
視線が数字へ行きやすくなるように、価格表示に強弱を付けました。
改修後の商品ページを見ても、以前より価格の数字そのものが目に入りやすくなったと思っています。
……なんだか自分の手柄のように書いていますが、これは小林さんの案です（笑）
今まであまり意識してこなかったのですが、大手モールの商品ページを見てみると、Yahoo!ショッピング、楽天市場、Amazonのいずれも、「￥」や「円」といった通貨表記は金額より小さく表示されています。
Amazonに至っては、「￥」マークがかなり小さく表示されています。
偶然というより、金額そのものへ視線を集めるための見せ方なのではないか、と考えました。
改善を同時にやると、どれが効いたか分からない
今回、小林さんから面白い提案もありました。
今回行った、
- ページ内リンク
- カートボタンの高さ変更
- ￥マークのサイズ変更
を全部同時に実装するのではなく、2か月ごとなど時期をずらした方がいいのではないか、という話です。
理由は明確です。
仮に、この後コンバージョン率が上がったとしても、3つ同時に変更してしまうと、
「何が効いたのか分からない」
からです。
小林さんいわく、
魚よりも、魚の釣り方の方が欲しいですよね？
確かに、検証という意味ではその通りです。
どの変更が効いたのか分かれば、ほかの商品ページや今後の改修にも使えます。
でも今回は全部同時にお願いしました。
私からの回答は、
魚の釣り方も重要ですが、釣ってナンボですので（笑）
でした。
もちろん検証も大切です。
ただ、エクストリムは研究機関ではなくネットショップです。
改善できそうだと思ったものを数か月寝かせて、売上の機会を逃す必要まではないと思いました。
特に今回の3つは、お互いに悪影響を与えそうな変更でもありません。
それならまず全部やってしまって、サイト全体が良くなる方を選びました。
正解を一人で決めない商品ページ改善
今回のやり取りで面白かったのは、小林さんの提案をそのまま採用したわけでも、私の案をそのまま通したわけでもないことです。
「おすすめポイント」は小林さんの提案を聞いた上で見送る。
「説明書」は実際の問い合わせ対応を考えて残す。
アイコンについては、私のデザイン案をベースに小林さんのUI上の考えを取り入れる。
そんな形で最終形が決まりました。
制作する側から見えることと、毎日そのサイトで受注や問い合わせ対応をしている側から見えることは少し違います。
どちらか一方だけで決めるより、
「なぜそうしたいのか」
をお互いに出した方が、最終的には良いものになる気がしています。
今回の変更も劇的なリニューアルではありません。
でも、
少し見つけやすくする。
少し押しやすくする。
少し分かりやすくする。
そういう小さな違和感を一つずつ減らしていくことが、今のエクストリムの商品ページ改善なのだと思っています。
今回は人の目に見える部分をまとめて変更しました。
次はSEOや検索結果など、普段のお客様には見えにくい部分も少し触っていく予定です。
コメント