モデルとなるコーヒーショップのレイアウトを 2014 年にスケッチしたとき、ヘッダー、ホームページ、カテゴリー、商品詳細を、左にロゴ、右にカート、ここにフィルター、そこに購入ボタンというように、まるで積み木のように説明するのは理にかなっていました。
人々の基本的な期待は、さほど変わっていません。変わったのは文脈です。今では、ほとんどのデザインがモバイルで機能しなければならず、オファーはより複雑で、追加するスクリプトはすべて速度と注意を奪い合います。そのため私は、レイアウトを盲目的にコピーすることをもう勧めていません。顧客の行動を順にたどることを勧めています。
ヘッダーはすべての選択肢を見せるのではなく、方向を示すべきです
ヘッダーで人々が探すのは、ブランド、ナビゲーション、検索、アカウント、カートです。すべてを同じ大きさで目立たせる必要はありません。優先順位は、商品構成と購入段階によって変わります。
- ロゴからホームへ移動でき、わかりやすいテキスト名が付いている。
- 商品やパラメーターがわかっている人が、検索に簡単にアクセスできる。
- カートは現在の状態を示し、商品を追加した後に消えない。
- 購入の妨げにならず、問い合わせ先やヘルプを見つけられる。
- メニューがタッチ、キーボード、そしてマウスで正確に狙わなくても操作できる。
幅広い商品構成には、ドロワーメニューが役立つことがあります。カテゴリーが10個ある場合は、印象的なだけの障害になりがちです。Googleは、通常のナビゲーションリンクからカテゴリーや商品にアクセスできるようにすることを推奨しています。検索だけでは、検索ロボットに商品構成全体が見つからない可能性があります。原則については、eコマースサイトの構造に関するドキュメントで説明されています。
ホームページは商品構成全体を語るのではなく、訪問者を振り分けるべきです
ホームページでは、そのショップが何を販売していて、誰を対象にしており、次にどこへ進めばよいのかをすぐに理解できる必要があります。自動スライダーよりも、1つの明確な優先事項と、主な購入シーンへつながるいくつかの安定した入口を私は好みます。
売れ筋商品は役立ちます。季節のカテゴリー、アドバイス、ショップを信頼する理由も同様です。すべてのブロックには役割が必要です。「ページが空にならないようにする」は役割ではありません。
カテゴリーは選択肢を絞り込むのに役立ちます
カテゴリーは、商品グリッドの上に貼り付けたSEOテキストではありません。意思決定のためのツールです。名前と短い紹介文が提供内容を定義し、フィルターが絞り込み、並べ替えが顧客の状況に合わせるのを助けます。
- フィルターには、社内データベースの項目名ではなく、顧客の言葉を使う。
- 絞り込み後も選択中の条件を表示し、簡単に削除できるようにする。
- 重要なサブカテゴリーは、スクリプトの値だけでなくリンクとして表示する。
- 比較に必要な一覧情報を表示し、それ以外は詳細ページに置く。
- 結果が空の場合は行き止まりにせず、戻る方法を示す。
パンくずリストは、商品構成の中で自分がどこにいるのかを理解するのに役立ち、検索エンジンが階層を理解する助けにもなります。構造化データを使う場合は、Googleの現在のパンくずリストに関するドキュメントに従ってください。
商品詳細は、ボタンを押す前後の疑問に答えなければなりません
目立つカート追加ボタンは土台であって、詳細ページのすべてではありません。決める前に、商品名、価格、バリエーション、在庫状況、配送、返品、写真、そして購入時のリスクに応じた情報が必要です。
コーヒーなら、産地、風味、焙煎、重量、抽出方法が重要です。ドリルなら、仕様、互換性、サービスのほうが重要になります。普遍的な順序はありません。普遍的な問いはあります。顧客が適切なバリエーションを購入し、後で返品しないためには、何を知る必要があるのか。
レビューは信頼できるもので、特定の商品に関係しているべきです。おすすめ商品は選択を支えるものであり、購入がほぼ完了している人の注意をそらすものであってはいけません。商品詳細ページにソーシャルボタンを置くことも、依然として優先事項ではありません。いいねボタンが何にでも答えになる時代は、もう乗り越えたはずです。
カートとチェックアウトは、予想外の事態をなくすべきです
カートでは、数量やバリエーションの変更、商品の削除ができなければなりません。合計金額、送料、配送日を、3つ目のステップや会員登録の後ではなく、できるだけ早く表示します。
ゲスト購入は、多くの場合、合理的なデフォルトです。アカウントに本当の価値があるなら、注文後に提案してください。フォームには正しいラベルと自動入力を用意し、何を直せばよいのか説明するエラーを表示します。タッチ領域は十分な大きさにする必要があります。現在の基準は、WCAG 2.2 のターゲットサイズに記載されています。
ボタンの色ではなく、行動を測定する
A/Bテストは、十分なアクセス数、1つの仮説、そして決定的な指標がある会社にとって役立ちます。十分なサンプル数がないまま毎週バナーを変更するのは、信頼できる結論ではなく、遊び場です。
私は、検索とフィルターの利用、カート追加、フォームエラー、各ステップでの離脱、返品、サポートへの質問を追跡しています。数字に加えて、人々とその質問を観察します。分析はどこで起きているかを示し、人はしばしばなぜ起きているのかを説明します。
測定の基盤はGoogle Analytics 4にあります。パフォーマンスチェックについては、ウェブサイトを高速化する方法で説明しています。
オンラインショップは、カートの場所で独自性を競う必要はありません。ここでこの商品を買う理由を説得力を持って示す必要があります。
商品ページや販売ページで使える訴求については、販売ページに重要な要素を続けてご覧ください。ウェブサイト全体の基盤については、ウェブプロジェクトの始め方で説明しています。