スマホのUXを改善する方法3：商品ページ、カート機能、登録画面はどうあるべきか

引き続きGoogleのMobile UX Marathonから骨子を（あらっぽく）翻訳します。

自分の勉強と仕事のためにメモ感覚で書いているので、このブログだけだとわかりづらいと思います。詳しくは元ネタのスライドを参照してください。

商品詳細ページで気をつけること

価値は常に表示する

例）「〇日まで送料無料」などの表示はグローバルナビの下に常に表示する。

購入ボタンを工夫する

• 購入ボタンの近くにも価値を記載する
• 購入ボタンをページ下部に常に表示する
• 購入ボタンの文言をABテストする
  └明確に説明する文言にする
  └ユーザを急かさない「カートに入れる」系と、急かす「購入する」系でABテストする

購入以外の選択を設ける

• 「お気に入りに登録する」
  └ユーザが戻ってきやすくなる
• 「店舗でチェックする」
  └オフライン購入につながる
• 「メールする」
  └他のデバイスで見るのに役立つ

商品写真について

商品の写真が複数あるなら、矢印やドット、サムネイルを表示する。そうすれば写真が複数あることがユーザに伝わる。

写真にはズーム機能をつける。なお、ズーム中でも次の写真に移れるようにすること。（ズームを解除しなければ次の写真を見られない…なんてことはしない）

「ズームアイコン」と「タップして拡大する」というキャッチのどっちがいいかABテストする。

カート機能で気をつけること

ユーザが商品をカートに入れたら「カートに入った」ことを知らせる。ポップアップウィンドを使うとアップセルにつながりやすい。

「ショッピングを続ける」「レジに進む」の選択ボタンのうち、ユーザがショッピングを続けるボタンを押したら、その直前の商品画面に戻る設定にする。

登録画面で気をつけること

• 苦痛ゼロ
• シンプル
• 簡単にできる
  

この画面にくるということは、ユーザはすでに買い物をする気になている。購入の手間をかけさせてはいけない！

登録の流れは常に表示する

• いくつステップがあるのか
• いまどのステップなのか
  ※登録画面の上部に常に表示する。
  ステップはアイコンと文言の両方で示す
• 離脱につながる項目は排除する
  └TOPナビゲーションやハンバーガーメニューは排除する。
  └「カートに戻る」や「1つ前のステップに戻る」「問い合わせる」などは残す。
• 次の流れへのCAT文言はABテストしてベストなものを探す。
  └例：「続ける」「次のステップに進む」「最後の手続きに進む」など。

 登録の最初のステップはゼロにしない！

ゼロから始めると、登録を完了するモチベーションが下がる。だから登録の流れの最初のステップは、登録画面にくる前の段階で終わっていることにする。

└例）宿を予約するサイトなら、登録画面（支払画面）に来る前に「この宿にする」とユーザは決めているので、それを最初のステップとしてカウントする。

登録を完遂したくなるメリットを常に表示する

たとえば「もうほとんど入力は終わっています」とか。

• 選択肢にドロップダウンメニューは使わない
  └ドロップダウンは少なくとも2回タップが必要になる。選択肢が5個以下ならタグで、6個以上ならポップアップで示す。
• 旅行や保健期間はカレンダーで選ばせる。
• 誕生日は手入力方式にする。

 入力間違いはリアルタイムで知らせる

• 入力間違いの場所はハイライトする
• どう正せばいいのか知らせる
• あまり細かい設定にしない（許容範囲を広くする）
• 正しいメルアドを入力してもらうために…
  └正しいドメインを提示するスクリプトを組む
  └メジャーなドメイン名はオートコンプリートにする

 項目に合ったキーボードを表示する

• 電話番号の入力なら数字キー
• メールアドレスならアルファベットと＠

 支払い画面

• 支払い方法やセキュリティーはアイコンで示す
• 支払いの合計金額を表示する
• CTAボタンは明瞭に
  └ボタンの色はABテストする
• サードバーティの画面に飛ばす場合、自社サイトと同じデザインにカスタマイズすること。支払い画面のデザインがサイトと異なると、ユーザは困惑し、怖さを覚える。

ふー、今回はここまでです。

※画像がないとわかりづらいので、GoogleのMobile UX Marathonのスライドを参照してくださいね。