デザイン

デザイン

【UXデザインのすすめ】ユーザをついイラっとさせるUXデザインミス9点【eコマースサイト編】

379 views

隅から隅まで念入りに作り込まれたeコマースサイト。

本当にユーザが使い易いものになっているでしょうか?

さくさく進むローディングやモバイルに対応したデザインだけが、eコマースサイトのすべてではありません。

ユーザを引き付けるには、言うまでもなくUXの質が重要になってきます。

UXのためのハウツーは色々ありますが、この記事では、ついやってしまいがちな間違いをまとめてみた。

 

1.ややこしくて凝りすぎたデザインのナビゲーションメニュー

ナビゲーションはユーザエクスペリエンスの要と言っても過言ではありません。メニューの最終目的はあくまでユーザの誘導であって、デザインスキルを披露するためのものではありません。アイコンに凝りすぎたり、メニューにプロモーションを詰め込んだりするのはよくある間違いです。パンくずリストをつけて、とにかくシンプルにしましょう。商品には複数のカテゴリタグをつけておくと、ユーザが検索したときに見つけやすくなります。

 

2.使いづらいサイト内検索

サイト内検索が使いやすいとユーザが他の2倍集まりやすくなるという研究がありますが、eコマースサイトの多くが何かかしらの課題を抱えており、サイトの34%が商品名での検索に対応していないというデータもあります。

e-c1

正確な商品名や商品番号を持っているユーザは購買意欲が高いのに、検索で出てこなければユーザコンフィデンスを損なうことになります。画像はウォルマートの検索機能ですが、サイズとコントラストにこだわっただけでずいぶん印象が変わりませんか?

e-c2

検索バーが太い方がサイト内検索の利用率が13.2%上がったというデータもあります。

デザインが完成したら、検索結果が商品名や商品番号に正確に対応するように注意しましょう。

 

3.残念なヒーローデザイン

私がよく目にする間違いのひとつがホームページのスライダーです。

ユーザは広告だと思ってクリックしませんし、コンテンツの目的もぼやけがちです。

コンシューマに訴えかけるようなヒーローイメージをつくることに集中しましょう。

 

4.複雑すぎるフォーム

初めてのブランドやサイトでいきなり買い物をするユーザは多くありません。

繰り返しサイトを訪問してもらうためにも、アカウントやメールアドレスを登録してもらうのが有効な手段ですよね。そこで重要になってくるのがフォームです。

e-c3

ボタンやコントラストには徹底的にこだわって、ユーザアクションにつながるようにしましょう。

 

5.在庫切れ商品の表示

購入できない商品を表示しても、ユーザの信用を損なうだけです。

再入荷の予定がいつなのかを、しっかり表示しましょう。

在庫切れ商品はカテゴリ一覧から除外したり、再入荷予定のタグをつけるのも有効です。

 

6.見えない購入ボタン

なぜかは分かりませんが、「カートに入れる」ボタンが極端に見えにくいeコマースサイトに遭遇することがあります。

e-c4

在庫切れ販売終了品かと思ってしまいますし、情報が不確実だとユーザの信用を損ないます。

e-c5

もし購入前にオプションの選択が必要なら、その旨をはっきりとボタン近くに表示しましょう。

 

7.商品写真

ユーザは商品に触れることができない分、商品写真を重要視します。白い背景に大きくて鮮明な画像をのせて見やすくしましょう。

e-c8

 

8.小さすぎるタップターゲット

マウスでクリックしやすいものがモバイルでもそうとは限りません。

スマートフォンからのアクセスも想定して、タップターゲットは押しやすい大きさにしましょう。

e-c6

ちなみにグーグルは48ピクセル四方以上を推奨しています。

 

9.どこにも見当たらないカスタマーサービス

EコマースではカスタマーサービスとUXがCXのすべてです。消費者の85%が「サービスが良ければ25%多く支払っても良い」と考えているというデータもあるほどなので、利用案内のリンクや問い合わせ先は分かりやすい場所に明記しましょう。

 

いかがでしたか?

今回はeコマースサイトに焦点を当てていますが、それ以外のサイトデザインにも参考になるはずです。

UXを考える材料にしてみてください。

 

(※本記事は、The eCommerce UX Mistakes That Drive Us Nutsを翻訳・再構成したものです)

関連記事

おすすめ記事