オンラインショッピングの利用者は読むのではなく、目を通す

※翻訳ソフトを使用しています。

ほとんどのオンラインショッピング利用者は、ロマンチックな意味での「買い物」をしているわけではない。彼らは親指でモバイル画面を高速スクロールし、半ば集中し、あなたがモバイルでやっているようにマルチタスクをこなし、10分以内に仕事を終わらせようとしている：彼らはほとんど何も読んでいないのだ。

彼らは画像に目を通し、自信が持てる程度にざっと目を通し、次に進む。もしあなたのブランドストーリーやサイズ、バリアントが、美しく作られたパックに小さくコントラストの低いテキストとしてしか存在しないのであれば、それはモバイル画面には存在しないのと同じかもしれない。

このブログ記事は、私の仕事の3つの柱をまとめたものだ：

イギリスのオンライン食料品店での買い物客を対象とした大規模なアイトラッキング調査の結果が発表された。 トビー・インサイトチーム、ケンブリッジ大学とGS1が支援するMobile Ready Hero Image規格、そして サイ, ニームの視覚的な明瞭さとコントラストのテストを自動化するツールです。

このふたつを合わせると、ひとつのストーリーになる：デジタル・シェルフで勝ちたいのであれば、オンライン上で人々が実際にどう見て、どう判断するかを考えてデザインしなければならない。

アイトラッキングによって、ユニリーバはいかにしてeコマースの主要画像の新基準を作り上げたのか？

イギリスの大手食料品店4社を対象に、トビーと共同でオンライン食料品のアイトラッキング調査を実施したところ、その規模だけでも大変なものでした：58人のオンラインショッピング利用者、28時間の実際のショッピング、4,000の商品購入、4,600のページ閲覧。さらに、完全なビデオとインタビューも行った。ブリーフは、フォーカス・グループの空想の中ではなく、自然の中で買い物をするときに、人々が何を本当に見て、無視し、行動するのかを理解することだった。私たちは、モバイルとデスクトップの両方で調査を行い、参加者には、普段と同じように毎週オンラインで買い物をするように指示し、その後何が起こったかを記録しました。

そのデータは、多くの快適な思い込みを吹き飛ばした。買い物をする "普通の "方法はひとつではなかったが、明確な行動スタイルはあった：検索第一の「サーチホリック」、お気に入りリスト主導の「スマートリスター」、そして売り場をブラウズする「メニューハンガー」である。

一貫して突き抜けた要素とは？ プライマリーパックのサムネイル.ヒートマップ、視線リプレイ、フィクセーションプロットを見ると、ページの大部分は単に無視されていることがわかる。アイトラッキングの結果を通じて、このことが何度も何度も明らかになったことで、関係者は、既存の画像が買い物客の注意を引いていないという現実を目の当たりにした。

人々はサムネイルの列を縦にスキャンし、画像を主な選択ツールとして使い、不明な点や足りない点があるときだけテキストに目を通す。画像がブランド、フォーマット、バリエーション、サイズを一目で伝えるものでなければ、エラーやフラストレーションが急増する。

4W：買い物客が即座に見るべきもの

ケンブリッジ大学のインクルーシブ・デザイン・チームとGS1は、トビーとの取り組みから得た知見をもとに、サムネイルが真に "ショッパーファースト "であるために何を伝えなければならないかを明確に定義した。その結論は、4つのシンプルな質問（— 4Ws— ）に集約され、買い物客は商品タイトルを読まなくても、画像だけで答えられるようにする必要がある：

• ブランドとは？明確で認識可能なブランド名または装置。

• どんなフォーマット？製品タイプまたはカテゴリーキーワード（例：シャンプー、アイスクリーム）。

• どんなバリエーション？フレーバー、フレグランス、機能的バリアントなど、主要な差別化要素。

• サイズは？量— ミリリットル、洗浄回数、錠剤の数、おむつのサイズなど。

従来のフロント・オブ・パックの写真は、これらのうち少なくとも1つにおいて、一見して読み取れるかどうかで失敗することが多い：

最も一般的な失敗は、サイズと数である：デジタルの棚の上では、物理的なパッケージからの相対的なサイズの手がかりは消え、小さなパックのコピーはサムネイルスケールでは読めないぼやけたものになる。買い物客は長い商品タイトルを読むのを嫌い、ビジュアルだけで買うものを確認したがる。

ブランドが真のモバイル対応ヒーロー画像を採用した場合、その効果は測定可能でした。

これは「色付け」ではない。— 、小さな、しかし重要な1つのタイルの摩擦を取り除くことによる実質的な収益の動きである。NeemがSodastreamと行った最近の仕事では、モバイル対応のビジュアルを追加して以来、このブランドのオンライン売上が2桁上昇し、再びこのことが確認されました。

モバイルがこれらすべてを譲れない理由

これがデスクトップだけの話であれば、ブランドはまだ小さなタイポグラフィで済むかもしれない。 しかし、モバイルは今や小売店への主要な玄関口である。トラフィックは決定的に変化している：小売店全体のトラフィックの約4分の3がモバイルであり、買い物客はスクロールを繰り返し、1商品あたり1.7秒という短い時間を費やすことが多い。 1商品あたり1.7秒を費やすことも多い。平均的なスマートフォンの画面は 6.1インチで、使用可能な画像領域は 90ピクセル四方そして、ほとんどの買い物客はマルチタスクをこなし、注意散漫でせっかちだ。

同時に、視力は向上していない。人口統計学的および臨床的データによると、2050年以降、年齢の中央値は上昇し、眼球収容力（Ocular Accommodation）— 、小さな細部に焦点を合わせる目の能力— 、40歳以降確実に低下する。40歳以上の買い物客の多くは、理想的な条件下でも、小さくて低コントラストの文字に苦労している。動きやまぶしさ、最適でない視力、乱雑な画面が加われば、読みやすさは崖から落ちる。

ブランドは事実上、美しく作られたアセットに資金を提供しているのだが、オーディエンスのかなりの部分は、選択した瞬間に文字通り読むことができないのだ。モバイルのコンバージョンがデスクトップに遅れをとり続けている世界では、その差が縮まるにつれて、行動を起こさないことは自滅である。

洞察から標準へ：モバイル対応のヒーロー画像

これらの洞察をスケーラブルなものに変えるため、ケンブリッジ大学のインクルーシブ・デザイン・チーム、GS1、そして大手CPGは、以下のような正式なガイドラインを作成した。 モバイル・レディ・ヒーロー・イメージ・ガイドラインを作成し、2022年に世界的に承認された。

GS1規格には3つの重要な役割がある：

まず、モバイル・レディ・ヒーロー画像の役割を定義する。
パック全体を文字どおりの写真で表現するのではなく、4Wを優先し、簡略化し、画面を最適化したパックの表現。これは多くの場合、ブランド・デバイスを拡大し、「背が高く、薄い」パックのためにサイズや数を示す明確なロゼンジを追加し、本質的でない主張やノイズを取り除くことを意味する。

第二に、一貫性を保ち、"ビジュアル・ハルマゲドン "を回避するために、厳格なルールを設定している。

サイズのコールアウトは、GS1の一般的な画像仕様と一致する清潔な白地に、読みやすさを考慮して黒のOpen Sans Boldを使用し、標準化された右下のローゼンジに配置する必要があります。ロゼンジには、サイズまたはカウント（— ）のみを含めることができ、マーケティング・スローガン（— ）は含めることができません。

第三に、設計の決定を客観的なテストに結びつける。

このガイドラインは、画像がモバイルのサムネイルサイズで認識できるほど鮮明かどうかを評価するケンブリッジの視覚的明瞭度テストに直接リンクしています。オープンソースのPhotoshopテンプレートとレイアウト例がサプライヤーや小売業者向けに提供されているため、コンプライアンスを当て推量する必要はありません。

その結果、ブランド、エージェンシー、小売業者の間で共有言語が生まれた：テイストについて議論する代わりに、一般的な携帯電話の画面上で明瞭度とコントラストの閾値を管理した上で、画像が4Wを実現しているかどうかについて、誰もが話し合うことができる。

そのギャップテストしないものは修正できない

確固たるグローバル・スタンダードがあっても、ほとんどの組織は同じ壁にぶつかる：規模

典型的なマルチブランドのポートフォリオは、複数の小売業者や市場にまたがり、数万SKUに及ぶこともあります。すべての画像について、複数のスクリーンサイズに対応した最小のテキストサイズ、ストローク幅、カラーコントラスト、鮮明度を手動でチェックすることは、実際には不可能です。

多くのチームは "目測 "に頼っている：デザイナーやマーケティング担当者が、明るいオフィスの高解像度モニターでそれを読むことができれば、問題ないと考えるのだ。また、手作業でWCAGのコントラストチェックを色ごとに行おうとしたり、明確な契約や自動チェックなしに正しいことをするエージェンシーを信頼したりする人もいる。

良かれと思ったアクセシビリティの向上心は、たいていここで挫折する。意図はあるが、運用の負荷が大きすぎるため、チームは奇妙な抜き打ち検査を行い、最善を望むのだ。規制当局（および活動家グループ）が民間のeコマースにおけるデジタル・アクセシビリティを精査し始めている今、その「希望」は高価なリスク姿勢である。

規模に応じた明瞭さとコントラストの自動化

Rhinoは、このギャップを埋めるために開発されました。Rhinoは、2つの重要なコンポーネントを使用して、デジタル画像を高速で一括テストします：APCAコントラストアルゴリズム（新しいWCAG 3の考え方の中核部分）と、Mobile Ready Hero標準を支えるケンブリッジ視覚明瞭度モデルです。つまり、科学と標準を反復可能な自動化されたパイプラインにエンコードします。

ワークフローはシンプルだ：システムは、Azure AI Computer VisionとOCRを使用して、画像内のすべてのテキストを検出します。— 水平、垂直、角度、曲線— 次に、独自の3段階アルゴリズムを使用して、テキストを背景から分離します。各テキストと背景のペアは、次にAPCAでテストされ、定義されたAAおよびAAAコントラストしきい値を満たしているかどうかを評価する。ケンブリッジアルゴリズムは、モバイルヒーロー、ウェブバナー、二次画像などの特定のターゲットサイズについて、テキストの高さ、ストローク幅、明瞭度を測定する。

結果は、各テキスト要素に対して明確な合否および勧告フラグとして表示され、詳細なオーバーレイやメトリクスをデザイナーや法的レビュアーが利用できます。チームは、画像セットにタグ付けしたり、レポートをエクスポートしたり、履歴を検索したり、APIを介してRhinoをDAM、CMS、またはパッケージングワークフローに統合したりできるため、チェックは単発の監査ではなく、日常的な制作パイプラインの一部になります。重要なのは、Rhinoが装飾テキストやブランドフレーズの現実的な除外をサポートしているため、ノイズが少なく、実際に買い物客に影響を与える部分に労力を集中させることができる点です。

あればいい」から「譲れない」へ

これらをまとめると、方向性は明らかだ。 アイトラッキングを見ると、買い物客はほとんどの商品表示ページの文章を体系的に無視し、ほとんど常に画像を主な判断材料としていることがわかります。

ケンブリッジ大学の研究は、GS1での私の仕事と並んで、これらの画像が何を伝えなければならないか、そして小さなスクリーン用にどのようにデザインすべきかを正確に示している。人口統計学的および生理学的な現実は、高齢化した視聴者が完全に参加するためには、より大きく、よりコントラストの高いテキストが必要であることを示している。小売店やコマースプラットフォームにおけるこれらの画像のパフォーマンスは、トビーのポートフォリオにある以下のようなツールを使って簡単にテストすることができます。
スティッキー by Tobiiまたは Tobii Pro Spark/スパークアイトラッカーと トビー・プロ・ラボソフトウェアと組み合わせて、モバイルまたはデスクトップデバイス上でテストすることができます。

CPGや小売業者にとって、これはもはやデザインに関係ない話題ではない。

成長、インクルージョン、リスクの交差点に位置する：

a) 成長:選択肢の時点で摩擦を取り除くことで、コンバージョンが向上し、現在最もトラフィックが集中しているチャネルでの検索シェアが高まるからだ。

b)インクルージョン:アクセシブルで読みやすいビジュアルにより、高齢者や弱視の買い物客は、小さくてコントラストの低いテキストによって排除されることなく、自主的に参加することができます。

c) リスク:規制当局や活動家グループは、新しい欧州アクセシビリティ法により、人口の大部分を静かに差別しているデジタル体験をますます厳しく監視しているため、フランスの小売業者はすでに活動家の標的になっており、この問題は今急激にクローズアップされている。

巻物で一目惚れする方法は...。

デジタル・コマースの次の段階を勝ち抜くブランドは、人々がオンラインで実際にどのように見て判断するかを尊重するものである。それは、視線追跡データから得られた不快な真実を受け入れることを意味する： 買い物客は読むのではなく、見るのだ。そのため、すべてのパック、ヒーロー画像、バナーをデザインするということは、画像上のテキストが「一目で読める」ものであるべきだと理解することを意味する。

一見して読みやすい：

1. 小さな文字はすべて削除し、4つ以上のメッセージは多すぎる。

2. テキストと背景はコントラストの高い色を選ぶ。

3. テキストの後ろにグラデーションを使わない— フラットデザインを使う。

4. テキストはキャンバスサイズの8％以上を目安に。

5. TITLE CASEは避けましょう。

6. コントラストと明瞭度の両方のテストを行いながらデザインしましょう。

7. 使用方法 トビー・アイトラッキング人々があなたの新しいヒーローのデザインに視線を送ったり固定したりすることを証明するために。

8. 使用方法 サイより ニームを使って、最終的なデザインが一目で読めるものであることを証明しましょう。