UX 히트맵으로 온라인 커머스 메인 데이터 분석하기
UX 히트맵 뷰저블과 뷰저블리로 이커머스 UI 분석하는 방법
안녕하세요 뷰저블입니다. 오늘은 어떻게 하면 온라인 커머스의 레이아웃과 UI를 UX 히트맵을 활용하여 분석할 수 있는지 공유해드리고자 합니다. 특히 그중에서도 사용자의 주요 핵심 랜딩 페이지이기도 한 '메인' 분석방법에 대해 소개합니다.
우리나라의 온라인 커머스의 정의
국내에서는 온라인 커머스를 어떻게 정의 내리고 있을까요? 통계청 자료를 가져와 보았습니다.
온라인 쇼핑은 '컴퓨터, 정보통신 설비 등을 이용하여 재화 및 용역을 거래할 수 있도록 설정된 가상의 영업장을 인터넷 쇼핑몰이라고 지칭'하고 있으며 'PC 및 모바일을 이용하여 거래를 주로 하는 인터넷 쇼핑몰로 정의'내린다고 합니다. 판매 매체별로는 온라인과 모바일로 세분화하고 있으며, 취급상품 범위별로는 종합몰과 전문몰로, 운영형태별로는 온라인몰과 온/오프라인 병행몰로 세분화합니다.
한국의 온라인 커머스는 대다수 메인 페이지의 UI, 레이아웃 형태가 비슷하다는 사실을 아시나요?
여러분, 국내 온라인 커머스는 대다수 메인 페이지 UI와 레이아웃 형태가 비슷하다는 사실을 알고 계시나요? 아마 국내 사용자에게 최적화된 UI라고 고민한 결과물일 것입니다. 제가 위메프, GS SHOP, Gmarket, 11번가를 예시 이미지로 가져와보았습니다. 왼쪽에 로고가 있고, 가운데에는 검색창이 펼쳐져 있으며 서랍 메뉴, 캐러셀 형태로 Above the Fold 영역이 배치되어 있습니다.
국내 많은 온라인 커머스가 비슷한 레이아웃과 UI를 보유하고 있습니다.그리고 Below the Fold 영역에는 MD의 딜 상품을 배치합니다. 네 사이트 모두 비슷한 UI와 구조를 가지고 있다는 것이 느껴지시나요?
Below the Fold (사용자 평균 브라우저 높이 하단 영역)에는 주로 딜 상품을 배치합니다. 오늘은 이처럼 비슷한 국내 온라인 커머스 메인 페이지의 레이아웃과 UI를 어떻게 UX 히트맵 데이터로 분석할 수 있는지 소개합니다. 크게 3가지 내용에 대해 전달드리겠습니다. 또한, 본 내용은 데스크톱을 기준으로 말씀드리고자 합니다.
GNB 분석하기
캐러셀 영역 분석하기
딜 상품의 소비 효율 분석하기
(1) GNB : 관심 및 최종 목적 카테고리 분석하기
- 준비물 : 클릭 히트맵, 관심 히트맵(뷰저블리)
- 주요 지표 : Click PV %, 관심도
보통 커머스 GNB는 마우스를 Hover 하면 펼쳐집니다. 이럴 때는 어떻게 분석하면 좋을까요? 뷰저블리로 관심 히트맵을 살펴봅시다. 노출된 콘텐츠에 사용자가 얼마나 Hover 하여 관심을 보였는지를 정량적인 수치로 확인할 수 있습니다.
이후에는 클릭 히트맵으로 사용자가 어떤 메뉴를 '클릭하여 최종적으로 이동'하였는지를 살펴봅시다. 이때 Click 수를 보는 것이 아닌, Click 한 PV의 규모를 의미하는 Click PV%를 살펴봐주세요.
관심 히트맵 상으로 수치가 높았는데 Click PV %가 저조하지는 않은지, 관심이 저조한데 Click PV% 성과가 높은 메뉴는 없는지 등을 발견해봅시다.
고객사의 커머스 데이터를 공개할 수 없어 뷰저블 홈페이지를 예시로 분석기법을 알려드리고자 합니다. 뷰저블의 관심 히트맵 상으로 Comparison Referrers 메뉴는 관심도가 21%로 타 메뉴에 비해 약간 높지만 실제 Click PV 규모는 0%입니다. 우선순위가 높은 메뉴인가요? 사용자가 관심을 보였는데 왜 해당 메뉴로 이동하지 않았는지에 대한 새로운 하나의 '과제'를 발견하였습니다.
(2-1) 캐러셀 : 사용자의 콘텐츠 반복 소비율 분석하기
- 준비물 : 클릭 히트맵
- 주요 지표 : Click 수, Unique Click 수
캐러셀 UI에는 좌우 화살표가 있습니다. 캐러셀을 적극적으로 탐색하고자 하는 사용자는 해당 화살표를 클릭하여 어떤 콘텐츠들이 제공되고 있는지를 살펴볼 것입니다. '1PV가 캐러셀을 몇 번 반복하여 소비'했는지를 살펴봅시다. 캐러셀 화살표의 전체 Click 수를 Unique Click(=PV) 수로 나눠 '1PV 당 반복 클릭 수'를 계산합니다. 간단하죠?
(2-2) 캐러셀 : 노출 대비 전환 콘텐츠 분석하기
- 준비물 : 노출 히트맵 (뷰저블리), 클릭 히트맵
- 주요 지표 : 노출도, Click PV %
다음으로는 사용자가 마우스를 클릭하여 노출된 해당 콘텐츠를 얼마나 실제로 클릭하여 소비하였는지를 살펴볼 차례입니다. 노출된 콘텐츠 대비 실제 Click PV규모가 어떠한지 살펴봅시다. 노출이 저조함에도 불구하고 높은 Click PV %를 지녔다면 노출이 많았던 콘텐츠와 순서를 바꿔봅시다. 반대로 노출이 많지만 Click PV %가 저조하다면 순서를 뒤로 변경합시다.
마찬가지로 커머스 데이터를 공개할 수 없어 자사 서비스의 캐러셀 UI 노출 히트맵을 예시로 가져왔습니다. 두 번째에 위치한 콘텐츠임에도 불구하고 제공되는 Click PV%가 가장 높아 순서 변경을 고려해야 합니다.
(3) 딜 상품 : 도달 대비 소비 효율 분석하기
- 준비물 : 스크롤 히트맵, 클릭 히트맵
- 주요 지표 : 스크롤 도달률, Click PV %
딜 상품은 도달된 PV 규모 대비 얼마나 많이 실제 클릭하여 해당 상품으로 이동하였는지, 도달 대비 Click PV 규모로 분석할 수 있습니다.
스크롤 히트맵과 무브 히트맵, 클릭 히트맵을 함께 비교하여 도달된 PV 규모 대비 실제로 많이 클릭하였는지, Hover를 통해 관심은 보였지만 클릭한 사용자 규모가 적지는 않았는지 등을 고려하여 분석할 수 있습니다.
오늘은 온라인 커머스의 메인 페이지 주요 UI 분석법을 살펴보았습니다. 이후에도 카테고리, 상세 페이지, 장바구니 등의 UX 히트맵 분석법을 소개해드리도록 하겠습니다. 감사합니다.
하마터면 뷰저블을 모르고 일할 뻔했다고요?
뷰저블을 통해 서비스 내 사용자 경험(UX)에 영향 끼치는 문제점을 발견하세요.
뷰저블이라면 그 많은 문제점들을 '새로운 비즈니스 기회'로 바꿔드릴 수 있습니다.
경쟁사는 이미 시작했습니다!
