온라인 쇼핑객은 읽지 않고 훑어봅니다.

대부분의 온라인 쇼핑객은 낭만적인 의미의 '쇼핑'을 하지 않습니다. 이들은 엄지손가락으로 모바일 화면을 빠르게 스크롤하고, 반쯤 집중한 채 모바일에서 하는 것처럼 멀티태스킹을 하며, 10분 안에 일을 끝내려고 노력하며, 시선추적을 통해 쉽게 관찰할 수 있는 잔인한 진실은 간단합니다: 그들은 거의 아무것도 읽지 않습니다.

사람들은 이미지를 훑어보고 자신감을 느낄 수 있을 만큼만 훑어본 후 다음 단계로 넘어갑니다. 브랜드 스토리, 크기 또는 변형이 아름답게 제작된 팩에 작은 저대비 텍스트로만 존재한다면 모바일 화면에서는 존재하지 않는 것이나 마찬가지일 수 있습니다.

이 블로그 게시물에는 제가 작업한 세 가지 내용이 담겨 있습니다:

영국 온라인 식료품 쇼핑객을 대상으로 한 대규모 시선추적 연구 결과, 영국 온라인 식료품 쇼핑객을 대상으로 한 대규모 시선추적 연구 결과 토비 인사이트 팀, 캠브리지 및 GS1이 지원하는 모바일 레디 히어로 이미지 표준, 그리고 Rhino, Neem의 시각적 선명도 및 대비 테스트를 대규모로 자동화하는 도구입니다.

이들은 함께 하나의 스토리를 전달합니다: 디지털 진열대에서 승리하려면, 사람들이 온라인에서 내가 원하는 방식이 아니라 실제로 보고 결정하는 방식을 고려한 디자인을 해야 합니다.

유니레버가 시선추적을 통해 주요 이커머스 이미지의 새로운 표준을 만든 방법

영국의 "빅 4" 식료품점에서 토비와 함께 온라인 식료품점 시선추적 연구를 진행했을 때, 그 규모만 봐도 심각했습니다: 58명의 헤비 온라인 쇼핑객, 28시간의 실제 쇼핑, 4,000개의 제품 구매 및 4,600페이지 캡처전체 동영상과 인터뷰까지. 포커스 그룹의 환상이 아닌 실제 쇼핑 환경에서 사람들이 진정으로 무엇을 보고, 무시하고, 행동하는지를 파악하는 것이 목표였습니다. 모바일과 데스크톱을 모두 사용했으며 참가자들에게 평소처럼 온라인으로 매주 쇼핑을 하라고 지시하고 그 다음 상황을 기록했습니다.

데이터는 많은 편안한 가정을 무너뜨렸습니다. '정상적인' 쇼핑 방식은 단 하나도 없었지만, 분명한 행동 스타일이 있었습니다: 검색을 우선시하는 '검색 중독자', 즐겨 찾는 목록을 중심으로 쇼핑하는 '스마트 리스트족', 부서를 탐색하는 '메뉴 행거족'이 있었습니다.

일관되게 잘라낸 한 가지 요소는? 기본 팩 썸네일. 히트맵, 시선 재생 및 고정 플롯에 따르면 페이지의 많은 부분이 단순히 무시되고 있었지만, 쇼핑객은 거의 항상 목록과 검색 결과의 기본 제품 이미지 타일에 고정되어 있었습니다. 시선추적 결과를 통해 이 사실을 몇 번이고 명확하게 확인한 관계자들은 기존 이미지가 쇼핑객의 시선을 사로잡지 못한다는 사실을 깨닫게 되었습니다.

사람들은 이미지를 기본 선택 도구로 사용하여 썸네일 열을 세로로 스캔하고, 불분명하거나 누락된 부분이 있을 때만 텍스트로 이동했습니다. 이미지가 브랜드, 형식, 변형 및 크기를 한 눈에 전달하지 못하면 오류와 불만이 급증했습니다.

4W: 쇼핑객이 즉시 확인해야 하는 사항

토비와의 협업에서 얻은 인사이트를 바탕으로 캠브리지 대학의 인클루시브 디자인 팀과 GS1은 진정한 '쇼핑객 우선'을 위해 썸네일이 전달해야 할 내용을 정확히 정의할 수 있는 토대를 마련했습니다. 결론은 쇼핑객이 제품 제목을 읽지 않고도 이미지만 보고도 답할 수 있어야 하는 네 가지 간단한 질문 — the 4Ws — 으로 요약되었습니다:

• 어떤 브랜드인가요? 명확하고 인식 가능한 브랜드 이름 또는 장치입니다.

• 어떤 형식인가요? 제품 유형 또는 카테고리 키워드(예: 샴푸, 아이스크림).

• 어떤 변형? 맛, 향 또는 기능적 변형과 같은 주요 차별화 요소.

• 어떤 크기/개수인가요? 수량( — 밀리리터, 세탁 횟수, 정제 개수, 기저귀 크기 등).

기존의 포장 전면 사진은 이 중 적어도 한 가지 이상에서 가독성이 떨어지는 경우가 많습니다:

크기와 개수가 가장 흔한 실패 요인입니다: 디지털 진열대에서는 실제 포장의 상대적인 크기 단서가 사라지고, 작은 팩 카피는 썸네일 크기에서는 읽을 수 없을 정도로 흐릿해집니다. 쇼핑객은 긴 제품 제목을 읽는 것을 싫어하며, 시각적 정보만으로 구매 대상을 확인하고자 하며, '잘못된 사이즈'는 온라인 쇼핑 실수 중 가장 빈번한 실수 중 하나입니다.

진정한 모바일 지원 영웅 이미지를 채택한 브랜드는 그 성과를 측정할 수 있었습니다.

그것은 '색칠하기'가 아니라 — 작지만 중요한 타일 하나에서 마찰을 제거함으로써 발생하는 실질적인 수익 이동입니다. 최근 Neem이 Sodastream과 함께 진행한 작업에서 모바일 지원 비주얼을 추가한 이후 온라인에서 브랜드가 두 자릿수 상승세를 보이며 이를 다시 한 번 확인했습니다.

모바일이 이 모든 것을 타협할 수 없는 이유

데스크톱만 고려했다면 브랜드는 여전히 작은 타이포그래피로 버틸 수 있었겠지만, 이제 모바일은 리테일의 주요 관문입니다. 트래픽은 결정적으로 기울었습니다: 전체 리테일 트래픽의 약 4분의 3이 모바일에서 발생하며, 쇼핑객은 지속적으로 스크롤하며 제품당 소비하는 시간이 상품당 1.7초 리스팅을 빠르게 스와이프합니다. 평균 스마트폰 화면은 6.1인치의 작은이며, 사용 가능한 이미지 영역은 보통 제품 타일의 경우 90픽셀 정사각형에 불과하며, 대부분의 쇼핑객은 멀티태스킹을 하고 주의가 산만하며 참을성이 없습니다.

동시에 시력은 개선되지 않고 있습니다. 인구통계 및 임상 데이터에 따르면 2050년 이후에는 평균 연령이 상승하고, 40세 이후부터는 작은 디테일에 집중하는 눈의 조절력 — — 이 꾸준히 감소합니다. 40세 이상의 많은 쇼핑객은 이상적인 조건에서도 작고 대비가 낮은 텍스트에 어려움을 겪으며, 움직임, 눈부심, 시력 저하, 어수선한 화면이 더해지면 가독성은 절벽 아래로 떨어집니다.

브랜드는 사실상 상당수의 잠재고객이 선택의 순간에 읽을 수 없는 아름답게 제작된 자산에 자금을 지원하고 있는 셈입니다. 모바일 전환율이 데스크톱에 비해 계속 뒤처지는 상황에서 그 격차가 좁혀지고 있는 상황에서 대응하지 않는 것은 자기 파괴입니다.

인사이트에서 표준으로: 모바일 지원 영웅 이미지

이러한 인사이트를 확장 가능한 것으로 전환하기 위해 캠브리지 대학의 인클루시브 디자인 팀, GS1 및 주요 CPG는 공식적인 모바일 레디 히어로 이미지 가이드라인을 만들어 2022년에 전 세계적으로 승인받았습니다.

GS1 표준은 세 가지 중요한 기능을 수행합니다:

먼저, 모바일 레디 히어로 이미지의 역할을 정의합니다.
전체 팩의 사진을 그대로 보여주는 것이 아니라 작은 크기로 4W를 우선시하는 단순화되고 깔끔하며 화면에 최적화된 팩을 표현합니다. 이는 종종 브랜드 디바이스를 확대하고, '크고 얇은' 팩의 크기나 개수를 명확하게 표시하며, 불필요한 문구와 노이즈를 제거하는 것을 의미합니다.

둘째, 일관성을 유지하고 '시각적 아마겟돈'을 피하기 위해 엄격한 규칙을 설정했습니다.

사이즈 콜아웃은 GS1의 일반 이미지 사양과 일치하는 깔끔한 흰색 배경에 가독성을 위해 검은색 바탕에 검은색 Open Sans Bold를 사용하여 표준화된 오른쪽 하단 로젠지 안에 배치해야 합니다. 로젠지에는 마케팅 슬로건( — )이 아닌 크기 또는 개수( — )만 포함할 수 있으며 캔버스의 다른 곳에는 플로팅 요소가 허용되지 않습니다.

셋째, 디자인 결정을 객관적인 테스트와 연계합니다.

이 가이드라인은 이미지가 모바일 썸네일 크기로 인식할 수 있을 만큼 선명한지 평가하는 캠브리지의 시각적 선명도 테스트에 직접 연결되며, 이 테스트를 통과하지 못한 이미지는 모바일에 적합하지 않은 것으로 간주됩니다. 오픈 소스 포토샵 템플릿과 레이아웃 예제가 공급업체와 리테일러에게 제공되므로 규정 준수를 추측하지 않아도 됩니다.

그 결과 브랜드, 대행사, 리테일러 간에 공통의 언어가 생겼습니다: 취향에 대한 논쟁 대신 이미지가 일반적인 휴대폰 화면에서 선명도와 대비 임계값을 제어한 상태에서 4W를 제공하는지에 대해 모두가 이야기할 수 있습니다.

격차: 테스트하지 않는 것은 고칠 수 없습니다.

견고한 글로벌 표준이 있어도 대부분의 조직은 같은 벽에 부딪힙니다: 규모

일반적인 멀티 브랜드 포트폴리오는 여러 리테일러와 시장에 걸쳐 수만 개의 SKU를 쉽게 포괄할 수 있습니다. 모든 이미지의 최소 텍스트 크기, 획 너비, 색상 대비, 선명도를 여러 화면 크기에 맞게 수동으로 확인하는 것은 현실적으로 불가능합니다.

많은 팀이 '눈으로 보는 것'에 의존합니다: 디자이너나 마케터가 조명이 밝은 사무실의 고해상도 모니터에서 읽을 수 있다면 괜찮다고 생각합니다. 다른 팀들은 명시적인 계약이나 자동화된 검사 없이 색상별로 수동으로 WCAG 대비 검사를 실행하거나 대행사가 올바른 작업을 수행할 것이라고 믿습니다.

선의의 접근성 열망이 보통 여기서 사라집니다. 의도는 있지만 운영 부담이 너무 커서 팀들은 주먹구구식으로 점검하고 최선을 다하기만을 바랄 뿐입니다. 규제 당국(및 활동가 그룹)이 민간 부문 이커머스의 디지털 접근성을 면밀히 조사하기 시작한 지금, 이러한 '희망'은 값비싼 위험을 감수해야 하는 자세입니다.

대규모 선명도 및 대비 자동화

Rhino는 이 격차를 줄이기 위해 정확하게 개발되었습니다. 두 가지 핵심 구성 요소를 사용하여 디지털 이미지를 빠르게 대량 테스트합니다: APCA 대비 알고리즘(새로운 WCAG 3 사고의 핵심 부분)과 모바일 레디 히어로 표준을 뒷받침하는 캠브리지 시각적 선명도 모델입니다. 즉, 과학과 표준을 반복 가능한 자동화된 파이프라인으로 인코딩합니다.

워크플로는 간단합니다: 단일 이미지 또는 전체 배치를 업로드하거나 URL을 Rhino에 지정하면, 시스템이 Azure AI 컴퓨터 비전과 OCR을 사용하여 이미지의 모든 텍스트를 감지합니다 — 가로, 세로, 각진 또는 곡선 — 그런 다음 독점적인 3단계 알고리즘을 사용하여 배경에서 텍스트를 분리합니다. 그런 다음 각 텍스트-배경 쌍을 APCA로 테스트하여 정의된 AA 및 AAA 대비 임계값을 충족하는지 평가하고 Cambridge 알고리즘은 모바일 영웅, 웹 배너 또는 보조 이미지와 같은 특정 대상 크기에 대해 텍스트 높이, 획 너비 및 선명도를 측정합니다.

결과는 각 텍스트 요소에 대한 명확한 합격/불합격 및 권고 플래그와 함께 디자이너와 법률 검토자를 위한 자세한 오버레이와 메트릭으로 표시됩니다. 팀은 이미지 세트에 태그를 지정하고, 보고서를 내보내고, 기록을 검색하고, API를 통해 Rhino를 DAM, CMS 또는 패키징 워크플로우에 통합할 수 있으므로, 검수가 일회성 감사가 아닌 일상적인 제작 파이프라인의 일부가 될 수 있습니다. 특히 Rhino는 장식적인 텍스트나 브랜드 문구를 현실적으로 제외할 수 있도록 지원하여 노이즈를 낮추고 실제 구매자에게 영향을 미치는 부분에 노력을 집중할 수 있습니다.

'있으면 좋은' 기능에서 협상 불가 기능까지

이 모든 것을 종합하면 이동 방향이 명확해집니다. 시선추적 에 따르면 쇼핑객은 대부분의 제품 디스플레이 페이지의 텍스트를 체계적으로 무시하고 거의 항상 이미지를 주요 의사 결정 기준으로 삼는다고 합니다.

캠브리지 대학교의 연구와 GS1과의 작업은 이러한 이미지가 전달해야 하는 내용과 작은 화면에 맞게 이미지를 디자인하는 방법을 정확하게 보여줍니다. 인구통계학적 및 생리적 현실에 따르면 고령층이 완전히 참여하려면 더 크고 대비가 높은 텍스트가 필요합니다. 그런 다음 다음과 같은 토비 포트폴리오의 도구를 사용하여 리테일러와 커머스 플랫폼에서 이러한 이미지의 성능을 쉽게 테스트할 수 있습니다.
Sticky by Tobii 와 같은 툴을 사용하거나 Tobii Pro Spark 아이 트래커와 결합하여 Tobii Pro Lab 소프트웨어와 결합하여 모바일 또는 데스크톱 장치에서 테스트할 수 있습니다.

CPG와 리테일러에게 이것은 더 이상 한계가 있는 디자인 주제가 아닙니다.

성장, 포용, 위험이 교차하는 지점에 있습니다:

a) 성장: 선택 시점에서의 마찰을 제거하면 현재 대부분의 트래픽이 발생하는 채널에서 전환율과 검색 점유율이 높아지기 때문입니다.

b) 포함: 접근성이 뛰어나고 가독성이 좋은 시각적 요소는 노년층과 저시력 고객들이 작고 대비가 낮은 텍스트로 인해 배제되지 않고 독립적으로 참여할 수 있게 해줍니다.

c) 위험: 규제 당국과 활동가 그룹은 새로운 유럽 접근성 법에 따라 인구의 많은 부분을 은밀하게 차별하는 디지털 경험을 점점 더 면밀히 조사하고 있으며, 프랑스 소매업체들은 이미 활동가들의 표적이 되고 있습니다.

스크롤에서 시선을 사로잡는 방법은 다음과 같습니다...

디지털 커머스의 다음 단계에서 승리하는 브랜드는 사람들이 온라인에서 진정으로 보고 결정하는 방식을 존중하는 브랜드가 될 것입니다. 이는 시선추적 데이터의 불편한 진실을 받아들이는 것을 의미합니다: 쇼핑객은 읽지 않고 훑어봅니다. 따라서 모든 팩, 히어로 이미지, 배너를 디자인할 때는 이미지의 텍스트를 '한 눈에 읽을 수 있도록' 이해해야 합니다.

한 눈에 알아볼 수 있는 가독성:

1. 깔끔하게 정리하고 작은 텍스트는 모두 제거하며 4개 이상의 메시지는 너무 많습니다.

2. 텍스트와 배경의 대비가 높은 색상을 선택하세요.

3. 텍스트 뒤에 그라데이션을 피하고 — 평면 디자인을 사용합니다.

4. 경험상 텍스트는 캔버스 크기의 최소 8%가 되어야 합니다.

5. 읽기 어려운 제목은 피하세요.

6. 디자인할 때 대비 및 선명도 테스트를 모두 실행합니다.

7. 사용 토비 시선추적 을 사용하여 사람들이 새로운 영웅 디자인에 시선을 집중하는지 확인하세요.

8. 사용 Rhino 에서 Neem 의 Rhino를 사용하여 최종 디자인이 한 눈에 읽기 쉽다는 것을 증명하세요.