[UX 분석] 이커머스의 상품 썸네일 분석 (티몬, 쿠팡, SSG, G마켓)

1. 주제 선정 배경

: 쿠팡, 네이버 쇼핑, G마켓, SSG 비교

(1) 쿠팡과 네이버 쇼핑이 주축이 되는 모바일 이커머스

(2) 가격, 이벤트, 프로모션을 넘어 차별화된 강점이 필요하다. 그 예로 쿠팡은 '빠른 상품 배송'을, 네이버는 '간편한 결제 시스템'을 내세우고 있다. SSG의 경우 꾸준히 주 이용률이 상승되고 있으며 '브랜드 이미지'가 강점이 되고 있다.

(3) 앱은 쿠팡과 11번가, 웹은 지마켓과 11번가가 순 방문자 수가 높다.

2. 이커머스의 상품 썸네일 UX 분석

(1) 티몬

Price Area의 Type의 경우 균일가로 표시되거나 null값으로 표시된다. 즉, 가격이 정해진 가격이면 '균일가' 표시와 함께 특정 가격 (3,000원)이 표시된다. 반면 가격이 여러개인 상품의 경우 Type이 미표시 된 후에 최소 가격 (9,500원~)이 표시된다.

Image (제품 사진) 위에 Sticker 제품이 참여한 딜, 이벤트를 노출시킨다. 티몬의 경우 특가딜과 같은 행사가 많은 커머스이기 때문에 해당 상품을 더 적극적으로 노출시키고 있다.

Buy Counts (구입 수)를 함께 보여주고 있다. 즉, 구매에 있어 가장 신뢰가 되는 정보를 제공함을 통해 다른 고객들이 해당 상품을 얼마나 구입했는지 직관적으로 알 수 있다.

Label로 '선물하기' 기능을 표시하고 있다. 티몬의 경우 단순히 구매할 뿐만 아니라 선물하기 기능을 우선순위로 제공하고 있음을 알 수 있다.

 

(2) 쿠팡

'Delivery' 이름의 동일한 Class가 두 개 존재하였다. 첫 번째의 경우 세부 속성으로 Arrival Info (도착 정보)가 포함되어 있으며 '내일(토) 1/9 도착 보장'이라는 일반 고객이 이용한 경우의 도착 정보가 제공된다. 두 번째의 경우 세부 속성으로 Badge Falcon (로켓와우)와 Arrival Info (로켓와우 도착 정보)가 포함되어 있으며 이에 따라 '로켓 와우) 내일 (토) 새벽 도착 보장'이라는 로켓 와우로 구매했을 때의 정보가 제공된다. 특이했던 점은 두 가지 모두 동일한 시점에 배송이 되지만, 로켓 와우의 경우 '새벽'이라는 구체적인 시간대 정보가 제공된다는 것이다.

Price Value (판매가)만 노출되는 것이 아닌 Instant Discount Rate (할인률), Base Price (정가) 또한 작은 사이즈로 노출시켜, 제품의 할인 정보에 대해 더 자세히 제공하고 있다.

Reward Cash Badge, 즉 해당 상품을 구입했을 때 쿠팡캐시로 적립되는 금액을 하단에서 보여주고 있다. 구매가 또 다른 구매로 선순환되는 쿠팡캐시의 사용을 적극적으로 장려하고 있음을 알 수 있다.

 

(3) SSG

SSG은 인터랙션이 가장 많은 커머스이다. 이미지 위에 커서를 올릴 경우 Unit Box가 이미지 하단에 노출되는 동시에 Coupon, SSG_Deliv, Icon_Lnes 아이콘이 사라지는 인터랙션이 제공된다. 더불어 상품의 이미지가 여러개인 경우 두 번째 이미지로 변경된다. Unit Box의 기능은 1) 크게보기 2) 새 창으로 열기 3) 장바구니 담기 4) 찜하기 5) 유사한 상품 찾기 (SSG Lens)로 이루어져있다. 이미지의 우측 하단에 제공되는 Icon_Lens는 SSG Lens로 유사한 상품을 검색하는 기능이다. 해당 아이콘에 커서를 올릴 경우 Tx_Lnes, 즉 '유사한 상품을 확인하세요!'라는 텍스트가 제공된다.

Pirce (가격)의 우측에는 Dtl Price-Tooltip 즉 툴팁이 제공된다. 이를 클릭할 경우 해당 판매가에 대한 상세 설명을 볼 수 있다. 쿠폰, 최적가 등을 확인 가능하다.

인터랙션을 제외하고는 제공하는 상품 정보는 단순하다. Mall (해당 상품이 속한 신세계 몰의 종류를 색과 함께 표시), 상품 타이틀, 가격, 평가와 같이 가장 단순한 정보만을 제공한다.

 

(4) G마켓

G마켓의 경우 가로형으로 상품이 나열되어있는 것이 가장 큰 특징이다. 따라서 타 사이트 보다 특정 상품에서 제공할 수 있는 정보의 양이 많다. 이러한 점을 고려했을 때, 실제로 제공되는 정보들은 간단명료하게 정리가 잘 되어 있다.

크게 Image와 Information으로 구성되어 있으며, Information의 경우 가격 / 점수를 먼저 보여주고, 우측에는 그 외적인 정보인 셀러 정보, 장바구니 담기를 나타낸다.

Information에서 가장 눈에 띄는 특징은 할인 정보이다. Discount(할인률)과 Price_Seller(판매가)를 가장 큰 글자로 보여주며 특히 할인률은 파란색을 통해 더 가시적으로 보여준다.

Action Cart, Action Favorite, Action GroupVIP는 커서를 위에 둘 경우 색이 바뀌는 인터랙션을 제공한다.

 

'연관상품' 아이콘을 클릭하면 창의 하단에 (매우 큰 비율)로 연관 상품을 나열해준다. 

3. Insight

G마켓에서 제공하는 '연관상품' 기능이 필요한 기능일지 궁금해졌다. (검색해서 보는 상품들과, 연관 상품의 차이가 있는지)

 

> 연관상품의 기준은 브랜드명, 타이틀이었으며, 동일 상품 가격 비교 용도로 사용되고 있었다. (가로형)

4. 추가 자료 : 관련 용어

Depth
: 메뉴의 단계를 의미하며 단계가 깊어질수록 세부적인 카테고리
Header
: 일반적으로 웹사이트 상단 영역 ex) 로고, GNB
Footer
: 페이지 하단에 위치하는 노출영역 ex) 회사 정보, 사업자 정보
RFP (Request For Proposal)
: 제안요청서로써 SI 및 웹에이전시에 요청하는 문서. 제안 요청서는 수신한 회사에서 수록된 내용을 바탕으로 제안서를 작성하는 용도
GNB (Global Navigation Bar)
: 웹사이트를 방문한 사용자의 이동 경로를 하이퍼링크 형태로 모아서 보여주는 내비게이션 시스템. 어느 페이지에 들어가든 공통적으로 사용할 수 있는 메뉴들로 위치
LNB (Local Navigation Bar)
: 사이트 특정 지역으로 가기 위하여 적용되는 내비게이션으로써 메인이 되는 메뉴나 대메뉴에 사용되고 보통 왼쪽에 위치
SNB (Side Navigation Bar)
: 서브메뉴나 서브페이지에 존재하는 사이트 내 지역으로 이동하는 내비게이션
FNB (Foot Navigation Bar)
: 하단 메뉴, 하단 로고, 주소, 카피라이팅
WBS (Work Breakdown Structure)
: 작업분할구조는 프로젝트에서 수행해야 하는 활동 기준으로 작업들을 계층화, 상세화 함으로써 체계적으로 프로젝트 범위를 분류하는 것