アプリUI研究#016 「AmazonとWalmartの検索結果UIについて」

こんにちは!デザイナーのヒロコです。今回はウェブで、ECサイトAmazonとWalmartの検索表示部分のみを比較しました。その前にお知らせです。

(9月から少し時間ができそうなので、ゆるーく募集します。「デザイナーがいなくて困っている」「運営しているサービスのUIについて意見が欲しい」などお悩みの方がいらっしゃいましたら、twitterからご連絡ください!今までもこのブログを見てご連絡頂いていたのですが、なかなか時間に余裕がなくお断りしていました。事業内容を教えて頂いて、働き方などは相談させて頂きたいと思っています)

オンラインで強みを持つAmazonと実店舗で強みを持つWalmart。Walmartはアメリカの大手小売チェーンで、Amazonの最大の競合と言われている。


1.検索フォーム

Amazon

検索フォームに使われている白と背景の暗い色のコントラストで、検索フォームの存在を目立たせている。また検索フォームには、27文字以上入る幅を持たせている。(NN/g

Walmart

スクロールすると、暗い色の背景が出現し固定される。


2.表示設定:リストビューかグリッドビューかを選択できる(共通)

例えば電化製品を検索している場合は、商品ごとのスペックを一覧で比較したい。そのような時は一画面でより多くの商品情報を確認できるリストビューの方が良い。洋服などのアパレルの場合は、大きなイメージ写真でユーザーの視覚に訴えかけることができるため、グリッドビューが適している。

検索したい商品によってどちらか選べる機能があるのは両サイトに共通している。画面右上の機能で切り替え可能

AMAZON(リストビューの例)

Walmart(グリッドビューの例)

3.検索結果一覧

AMAZON

これはソファーの検索結果一覧。7種類の色があるが、それぞれの色のイメージ写真を確認するには、詳細ページへ遷移しなければならない。

Walmart

遷移せずに、画像の上をロールオーバーすることで異なる色の商品イメージを確認することができる

4.それぞれの特典

商品表示部分では、商品名、評価、価格、セール中などの表記の他にAmazon、Walmartそれぞれの特典が表示されている。

AmazonはPrime会員特典、Walmartは店頭で受け取れば割引される特典がある。アメリカ国内に約5,000もの実店舗があるWalmart の強み

5.検索した商品が無い場合

AMAZON

検索した商品は無いと表示した上で、「より短い言葉での検索」や似たような言葉での検索を提案してくれる。

Walmart

特に何も検索結果に関しての表記はなく、似たクエリを含む商品が一覧に表示される。

6.タイポへの対応

「Apple pencil 」のタイポの例

AMAZON

タイプミスをすると正しいスペルを提案し、その上該当すると思われる商品も表示してくれる。

Walmart

注意書きは出ずにそのまま検索され、該当する可能のある商品は一覧に出ない。

7.検索後のクエリ表示(共通)

検索後もクエリが残っていないと、再度修正したい時に最初からワードを入れなければならないためストレスが発生する。両サイトともクエリが残るので容易に修正できる

最後に

今日こんな記事が出ていた。(6 Ways Ecommerce Sites Can Compete With Amazon)Amazonサイトのデメリットをまとめていて、勉強になる。

エラーの対応やカラーバリエーションの見せ方など、検索表示部分だけでも多くの違いがあって、それぞれにメリットデメリットがある。ブランドの強みを生かして、デザインに落とし込んでいくことが大事なよう。




この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

ありがとうございます🤗
16

Hiroko

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
1つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。