UX 히트맵으로 온라인 커머스 카테고리 페이지 분석하기
필터 영역, 상품 카드, 이동 경로 분석하기
안녕하세요 뷰저블입니다. 오늘은 온라인 커머스 웹 페이지 분석 마지막 시간입니다. 지난 시간에는 메인과 상품 상세 페이지의 UX 히트맵 분석법에 대해 소개해드렸습니다. 이번 시간에는 '카테고리' 페이지에 대해 설명드리겠습니다.
지난 글 이어 보기 :
전자상거래 서비스의 경우, 카테고리 페이지도 여러 개로 분류된다는 사실을 아시나요?
보통 전자상거래 서비스의 User Journey는 [메인 - 카테고리 - 상품 상세 - 장바구니 - 결제 - 결제 완료] 순으로 이어집니다. 여기서 카테고리 페이지는 상품 특성에 따라 여러 상세 단계로 다시 나뉩니다. 삼성전자의 삼성닷컴을 예로 들겠습니다.
삼성닷컴의 메인 GNB에서 '모바일 > 스마트폰'을 선택하면 1차 카테고리 페이지로 이동합니다. 삼성전자에서 내놓고 있는 스마트폰은 갤럭시 S, 갤럭시 노트, 갤럭시 A, 갤럭시 J 총 4가지 시리즈가 있습니다. 시리즈 별로 한번 묶어서 보여준 뒤 원하는 시리즈를 선택하면 '상품 상세 페이지'로 이동할 수 있는 상품 카드 UI가 제공됩니다.
삼성닷컴 카테고리 UI 스크린숏 (예시 이미지)GS홈쇼핑의 GS SHOP 홈페이지로 살펴보겠습니다. GS SHOP에서도 마찬가지로 카테고리 페이지가 여러 개로 분류되어 있습니다. 상품의 종류가 많고 세분화되어 있어 여러 개의 페이지로 분류하여 보여주네요. 삼성닷컴과 마찬가지로 페이지마다 제공되는 상품의 종류, UI의 형태가 모두 다릅니다.
1차 카테고리 페이지에서는 딜 상품, 추천 상품, 테마/브랜드별 상품으로 묶어 보여주고 있습니다. 2차 카테고리 페이지에서는 상품 필터와 함께 TV쇼핑, 백화점 상품으로 분류하여 보여주네요. 필터 UI에서는 브랜드, 사이즈, 가격, 혜택/배송 등의 정보를 필터링할 수 있습니다.
GS SHOP 카테고리 UI 스크린숏 (예시 이미지)11번가도 한 번 살펴볼까요? 11번가의 카테고리 페이지 별 GNB, LNB, 필터 UI 내 정보를 살펴보겠습니다. 메인에서 상품군별로 카테고리 메뉴를 제시한 뒤 1차 카테고리에서는 해당 상품의 베스트, 브랜드별로 재차 카테고리 메뉴를 제공합니다. 마지막으로 2차 카테고리에서는 브랜드, 혜택/배송/상품상태를 묶을 수 있는 필터를 제공하네요.
이처럼 카테고리 페이지는 전자상거래 서비스 다루는 상품의 특성에 따라 다양한 형태로 1차, 2차, 3차 분류될 수 있으며 각 페이지에서 제공되는 내용 또한 달라집니다.
<카테고리 페이지 분석 방안>
1. 필터 영역 : 사용자가 선호하는 필터 정보는 무엇인가? 디폴트로 어떤 정렬 기준을 보여주어야 하는가?
2. GNB 영역 : 사용자가 상품 상세 페이지로 이동하지 않는 이유는 무엇인가? 어떤 타 메뉴로 이동하는가?
3. 1차 카테고리 내 딜/추천 상품 영역 : 제공되는 광고, 딜, 추천 상품으로 사용자가 이동하는가? 소비 효율이 어떻게 되는가?
4. 상품 카드 영역 : 상품 상세 페이지로 이동하는 사용자 규모가 얼마나 되는가?
1. 필터 영역 : 사용자가 선호하는 필터 정보는 무엇인가?
카테고리 페이지에서는 필터를 제공하여, 사용자가 원하는 정보를 더 빠르게 찾을 수 있게 합니다. 아래 커머스 페이지들의 카테고리 형태를 살펴봐주시기 바랍니다. 스티키 바 형태로 왼쪽에 세로 정렬로 제공하는 곳이 있는가 하면 가로 긴 형태로 제공하는 곳도 있습니다.
- 준비물 : 클릭 히트맵, 무브 히트맵
- 주요 지표 : 호버 수 대비 클릭 수, 클릭 PV %
GS SHOP, COUPANG, 11st, Gmarket 카테고리 페이지 UI 스크린숏 (예시 이미지)(1) 사용자가 어떤 필터 정보를 선호하는지 살펴보세요.
필터의 호버 수 대비 클릭 수를 살펴봅시다. 사용자의 '관심'이라고 볼 수 있는 호버 수에 비해 '최종 목적'이라고 볼 수 있는 클릭 수가 높은 필터 정보는 무엇인가요? 특정 콘텐츠에 관심은 많지만 클릭 수가 저조하지는 않나요? 그 이유는 무엇인지 인뎁스 인터뷰 등을 통해 원인을 상세히 파악하세요.
뷰저블 메인 페이지를 뷰저블의 클릭 히트맵으로 살펴본 예시 이미지
뷰저블 메인 페이지를 뷰저블리의 무브 히트맵으로 살펴본 예시 이미지(2) 필터를 사용하는 규모는 얼마나 되나요? 필터가 상품 탐색을 방해하지는 않나요?
클릭 PV %를 통해 필터 콘텐츠 별 사용자 규모를 파악하세요. 필터를 사용하는 규모가 페이지 유입 사용자의 몇 % 인가요? 특정 세그먼트에서 필터를 더 많이 사용하지는 않나요? 필터 사용률이 저조하다면, 상품 카드 탐색에 집중할 수 있도록 Depth를 두는 것도 좋은 방법 중 하나입니다.
위 두 방법을 통해서 필터의 정보 정렬, 상품 카드의 디폴트 정렬 값 등을 설정할 수 있습니다.
2. GNB 영역 : 상품 상세 페이지로 이동하지 않는 이유는 무엇인가? 어떤 타 메뉴로 이동하는가?
다음으로는 GNB 영역을 살펴볼 차례입니다. 카테고리 페이지의 목적은 사용자가 '상품 상세 페이지'로 이동하거나 '장바구니' 또는 '구매하기' CTA를 클릭하는 것입니다.
- 준비물 : 클릭 히트맵, 이동 경로
- 주요 지표 : 클릭 PV %, 이동 경로의 PV 비율
사용자가 상세 페이지로 이동하지 않고, 어떤 메뉴로 상품 재탐색을 시도하려 하나요?
카테고리 페이지에서의 목표는 사용자가 상품을 장바구니에 담거나 결제 시도 또는 상품 상세 페이지로 이동하는 것이 됩니다. 상세 페이지로 이동하지 않는다면 어떤 페이지로 이동을 시도하나요? GNB의 클릭 PV% 또는 이동 경로를 살펴봅시다.
3. 1차 카테고리 내 딜/추천 상품 영역 : 제공되는 광고, 딜, 추천 상품으로 사용자가 이동하는가? 소비 효율이 어떻게 되는가?
다음으로는 딜, 광고 상품 등의 소비 효율을 살펴볼 차례입니다. 많은 오픈마켓 전자상거래에서 광고 상품을 최상단에 배치하고 있습니다. 11번가 같은 경우는 '추천상품, 포커스 클릭'이라는 이름으로 배치되어있네요.
11번가 상품 카테고리 페이지 스크린숏 (예시 이미지)- 준비물 : 관심 히트맵, 클릭 히트맵
- 주요 지표 : 관심도, 클릭 PV %
뷰저블리의 관심 히트맵을 통해 각 딜 상품의 관심도가 어떤지 살펴봅시다. 관심도가 높은 상품은 무엇인가요? 해당 상품의 관심도가 낮은데 클릭 PV%가 높진 않나요? 혹은 관심도도 높고 클릭 PV%도 높은 상품이 있나요? 관심도 클릭 PV% 모두 높은 콘텐츠가 있다면, 더 많은 사용자에게 노출될 수 있도록 배치를 재고민해봅시다. 혹은 관심은 높은데 PV%가 낮다면 상품명이나 이미지를 조정해봅시다.
4. 상품 카드 영역 : 상품 상세 페이지로 이동하는 사용자 규모가 얼마나 되는가?
장바구니, 결제하기 CTA의 클릭 PV 규모가 어떻게 되나요? 상품 상세 페이지로 얼마나 이동하나요?
다음으로는 본 페이지의 핵심 KPI가 되는 장바구니, 결제하기 CTA의 클릭 규모 그리고 상품 상세 페이지의 이동 규모를 살펴볼 차례입니다. 또한, 상품 카드의 클릭 PV 규모가 어떠한지를 살펴보세요.
- 준비물 : 스크롤 히트맵, 어텐션 그래프, 클릭 히트맵
- 주요 지표 : 스크롤 도달률, 어텐션%(도달 사용자의 구간 별 체류 시간), 클릭 PV %
여기서 관심 있게 살펴보아야 하는 것은 '스크롤 도달 대비 클릭 PV 규모가 높은 상품'을 찾는 것입니다.
스크롤 도달 규모 대비 클릭 PV%가 높은 상품은 무엇인가요? 스크롤 히트맵, 클릭 히트맵을 교차 분석해봅시다. 또한, 숙독 구간이 높은지도 살펴보아 사용자의 관심 콘텐츠에 해당하는지도 함께 살펴봅시다.
스크롤 도달률이 저조하나 타 콘텐츠대비 클릭 PV규모가 높은 상품이 존재한다면 해당 상품이 더 많은 사용자에게 노출되도록 상단으로 조정해봅시다. 혹은 핵심 상품임에도 불구하고 클릭 규모가 저조하다면 레이블이나 이미지 등을 조정해봅시다.
오늘은 온라인 커머스의 카테고리 페이지 주요 UI 분석법을 살펴보았습니다. 위 분석기법은 조직의 KPI나 UI에 따라 충분히 달라질 수 있음을 염두하세요.
하마터면 뷰저블을 모르고 일할 뻔했다고요?
뷰저블을 통해 서비스 내 사용자 경험(UX)에 영향 끼치는 문제점을 발견하세요.
뷰저블이라면 그 많은 문제점들을 '새로운 비즈니스 기회'로 바꿔드릴 수 있습니다.
경쟁사는 이미 시작했습니다!
