最小タップ数を極限まで追求したスマホ通販UIの商品選択仕様

Pocket

item_detail06スマホUIはタップ数を極限まで減らすことが命題だがパソコンサイトの小型版のようなユーザビリティで提供しているスマホサイトもまだまだ目にする機会がある。

ご承知の通りスマホは画面が小さく滞在時間も短い傾向にあるのでユーザーのニーズを瞬間的に満たすことがWeb設計で求められる視点だ。

本稿では商品詳細ページのうち、カラー選択・サイズ選択等の選択機能に着目してみたい。

何故なら商品詳細ページは興味半分でたどり着いたユーザーが購入フローに進む重要な画面であるが、カートに入れる直前の操作は商品パターンの選択であるから、そこを改善すればカートに入れる比率に好影響があると考えるからだ。

<目次>
[1] 最高の商品選択仕様
[2] 商品選択仕様の3事例
[3] やってはいけない仕様

[1] 最高の商品選択仕様

最高のUIはTV通販「QVC」だ。
item_detail01

ユーザーが選ぶことが出来る選択肢が全て一画面で視覚化されている点がもっとも評価するポイントだ。何を選ぶことが出来るのかを知るためにプルダウンをタップする仕様はよく見掛けるがスマホUIでは正しくない。

QVCではカラーと在庫の情報が一覧化され、どの商品が今この瞬間に選択できるのか一目瞭然だ。プルダウンをタップし、プルダウン内の選択肢で確認しないといけないのは不親切だ。プルダウンは表示エリアが限られるので、そこから何を選択できるのか選ぶのはスムーズな操作ではない。

色合いにも工夫が見て取れる。緑のボタンは「在庫あり」、黄色のボタンは「残りわずか」、赤のボタンは「完売」であり、緑の直進、黄色の注意、赤の止まれの信号カラーは日本人が共通して理解しているルールだ。感覚で選択できるような工夫であり自然な動作がしやすい。

基本的な考え方としてプルダウンで情報を隠すのは推奨できない。四十七都道府県の選択などの圧倒的な選択肢の多さがある場合でかつ選択肢の中が分かっている場合は使ってもよいが選択肢を見るにはタップしないといけない点がプルダウンの弱点である。

[2] 商品選択仕様の3事例

[2]-1 家具通販:ニトリ

ニトリはQVCと同様にサイズとカラーをボタン型で選択できる仕様だ。
item_detail02

ベッドの商品ページを見てみると「S」(シングル)、「SD」(セミダブル)、「D」(ダブル)のボタンをタップすると選択することができる。ボタンの表記は「S」であり、「S」だけでは何を表すのか一瞬では分からないが、テキストで「シングル」と説明文でカバーされているのも親切だ。

QVCと違う点は在庫状況がこのパターン選択エリアから確認できない点であるが、ニトリの家具という特性上、恐らくは在庫は常にあるから(≒もしくは注文を受け付けてから組み立て)通販サイトで受け付けているのだとすれば、在庫状況をグラフィカルに表現する必要がないのかもしれない。

[2]-2 携帯アクセサリー通販:Hameeストラップヤ本店

iPhoneケース等はiPhoneのハードサイズに合わせた商品であるためサイズがない商品ではあるがカラーが豊富にある商品が多いのでカラー選択エリアを工夫している。
item_detail03

プルダウンを使うことなくすべてをオープンにしており俯瞰して見ることができるのは使いやすい。もしこれをプルダウンにするとどのカラーがそもそもあるのかを知るためにプルダウンを開く必要があり、プルダウンの小さな表示エリアで、青があり、緑があり、赤があり、白があり・・・というカラー展開の全パターンを知った上で、その中から自分が求めるものを選ぶことになるので、頭の中も行き来することになり不親切になってしまう。

[2]-3 ファッション通販:ZOZOTOWN

ZOZOTOWNの場合は商品詳細ページで「サイズ・カラーを確認」というボタンをタップしポップされるエリアでサイズとカラーを選択する仕様だ。
item_detail04

カラー・サイズごとに在庫状況が見え、在庫なしの場合のメッセージ「完売しました」も表示されており親切な表現ではあるものの、商品詳細ページ上での選択ではなく、「サイズ・カラーを確認」ボタンをタップしてからの選択であるからタップ数を増やすことになる。システム仕様上の制限があるからだと思うがユーザーのタップ数削減という視点に限れば詳細ページで選択できるほうが親切だろう。

[3] やってはいけない仕様

求められる要素は下記の3つである。

・選択できる商品の全パターンが一覧化されていること
・選択できる商品の在庫状況が一目瞭然であること
・プルダウンで情報を隠さないこと

反対にやってはいけない仕様は以下のイラストのような構成だ。多少極端に書いたがプルダウンで情報を隠し、タップしないと選択可能パターンが見えないのはユーザー視点で設計されていないことになるので必ず避けなければならない。ワザとらしいイラストに感じたかもしれないが、本当にあなたのサイトで対応できているのかもう一度見直してみて欲しい。
item_detail05

Pocket

無料ebook:ミナクル式スマホサイト改善
スマホECの売上を2割アップする!
スマホサイト改善ちょっとしたコツ
76連発レポート!

業界によっては6割以上がスマホからのアクセスになりましたが、「実際にどうサイトを改善したらいいかわからない」という声をたくさん頂きます。

本PDFは、弊社のお客様に改善提案する中で生まれたノウハウを体系化した全100ページ以上にわたる資料です。

  • 自社のサイトは大丈夫だろうか
  • スマホサイト改善と言っても実際どうしたらいいか分からない
  • スマホでの売上をアップしたい

などとお考えの方はぜひご覧ください。

ebook無料でダウンロードする

【弊社実績一例】



ヤマハ発動機株式会社様/積水化学工業株式会社様/株式会社パルコ様/株式会社エポスカード様/アディダス ジャパン株式会社様/株式会社フジゼロックス様/シュウウエムラ様/ダノンジャパン株式会社様/株式会社マイナビ様/第一三共ヘルスケア株式会社様/株式会社サイバーエージェント様/株式会社船井総合研究所様

コメントをどうぞ

*