구매를 유발하는 제품정보 구성 6가지 원칙
UX 디자인 배우기 #17
Today UX 아티클
UX Planet에 게재된 Nick Babich의 글 MobileeCommerce: Product Details를 소개하고자 합니다.
웹사이트나 앱에서 구매 전환율에 가장 중요한 것은 제품 페이지라고 합니다. 이 글에서는 제품 페이지를 개선하여 방문자가 쉽게 정보를 얻고 구매를 하게 할 수 있는 몇 가지 방법을 얘기합니다.
제품 세부사항과 옵션
유저는 제품 페이지에서 재고, 사이즈, 색상, 제품 설명, 사진, 리뷰 등을 기대한다고 합니다.
제품 세부사항과 옵션은 명확하고 직관적으로 보여야 한다고 합니다. 즉, 전반적으로 오버뷰를 할 수 있으면서도 원하는 정보를 찾을 수 있어야 한다는 겁니다. 예를 들어 사이즈에 해당하 는재고가 있는지, 해당 사이즈의 정확한 치수가 어떻게 되는지 알려줘야 한다고 합니다. 색상 같은 경우에는 실제 제품의 색상을 알 수 있게 정보를 전달해야 한다고 합니다.
유저가 타이핑해야 하는 요소를 최소화해야 합니다.
핀치(pinch)와 더블 탭(double-tap) 제스처를 지원해 줘야 합니다.
불완전한 제품 세부 정보는 유저가 불만을갖게 한다고 합니다.모바일에서 가장 많은 오류가 발생하는 부분이 ‘입력 필드’라고 합니다. 유저가 직접 타이핑해야 하는 모든 입력 필드를 제거하는 것이 가장 이상적이라고 합니다. 대신 라디오 버튼이나 +,- 같은 버튼을 활용하면 된다고 합니다.
+와 - 를 활용해 구매 수량을 정하게 하면 수량 타이핑으로 인한 오류를 줄일 수 있다고 합니다.제품 이미지
제품 이미지는 제품 페이지에서 가장 중요한 요소라고 합니다. 좋은 인상을 남기면서도 정보를 제공하는 것이 좋은 제품 이미지라고 합니다.
크기가 크고 퀄리티가 좋은 이미지를 사용해야 합니다. 이미지를 효과적으로 쓸 수 있으려면 크기가 크면서도 퀄리티가 좋아야 한다고 합니다.
유저가 이미지를 확대 정도를 선택할 수 있게 해야 합니다.
상품 구매 결정에 도움이 될 만큼 적절한 이미지 개수를 제공해야 한다고 합니다
이미지 갤러리는 가로 스와이핑이 되게 만들어야 합니다.
핀치(pinch)와 더블 탭(double-tap) 제스처를 지원해 줘야 합니다.
Case 1. 퀄리티가 좋은 이미지
확대 버튼을 명확하게 인지할 수 있게 만들어야 한다고 합니다.
이미지는 줌인 했을 때도 해상도가 유지되어야한다고 합니다.Case2. 확대 이미지 영역 선택
기존에 정해진 정도로만 확대 이미지를 보여주면 유저는 불만을 가질 수도 있다고 합니다.
확대 정도와 확대 영역은 유저가 정할 수있게 해줘야 한다고 합니다.Case3. 상품 구매 결정에 도움이 될 만큼 적절한 이미지 개수
이미지가 많을수록 좋다고 하지만 갤러리에 있는 사진의 활용도를 최적화하기 위해서는 제품 설명에서 강조된 제품 세부사항과 관련된 사진이 있어야 한다고 합니다.
정보를 전달해주는 도구로 사진을 사용하라고 합니다.맥락적 정보를 제공하는 것도 도움이 된다고 합니다. 이 사례에서는 브랜드 스토리를 전달하는 이미지를 활용하였습니다.Case4. 이미지 갤러리: 가로 스와이핑
스크롤해서 내리지 않고도 가로로 스와이프해서빠르게 이미지를 볼 수 있게 해줘야 한다고 합니다.Case5. 모바일 제스처 지원
유저들은 보통 이미지를 확대하기 위해 핀치 제스쳐와 더블탭 제스쳐를 많이 사용한다고 합니다. 이런 제스쳐를 지원하고, 어떤제스쳐를 지원하는지 힌트를 주면 도움이 된다고 합니다.제품 가격
제품 페이지에서 가격을 제대로 된 위치에 놓는 두 가지 접근법이 있다고 합니다.
가격 경쟁을 하고 있다면, 가격을 전면(이미지와 제품명 바로 다음)에 내세워야 한다고 합니다.
가격 외 다른 부분으로 경쟁하고 있다면, 가격에 대한 강조를 줄이거나 제품의 강점이나 특징 후에 가격을 보여줄 수 있다고 합니다.
재고 유무 및 배송 옵션
제품 페이지에서 사람들이 이탈하는 가장 큰 이유 중 하나는 배송 옵션과 배송비에 대한 정보를 알려주지 않기 때문이라고 합니다.
매장 재고유무는 매장에서 직접 제품을 구매하거나 픽업하고 싶어 하는 유저에게 매우 중요한 요소라고 합니다. 유저의 위치를 기반으로 가까운 매장의 재고 정보를 제공하고 유저가 원하는 매장의 재고 정보도 검색할 수 있게 해줘야 한다고 합니다.
배송 비용과 배송 날짜
Case 1. 재고 유무
우측 사례처럼 매장 재고 정보를 제공해야 한다고 합니다.유저는 명확한 배송 비용 및 배송 예정 일자를 알고 싶어 한다고 합니다. 구매 전에 배송 비용에 비해 배송이 얼마나 빠른지 비교해보기 때문이라고 합니다.
Case2. 배송 비용 및 배송 예정 일자
제품 상세 페이지에서 배송 비용과 배송 옵션을 보여줘야 한다고 합니다.도움이 되는 제품 리뷰
온라인 쇼핑에서 가장 중요한 것은 ‘신뢰’이며 사람들은 다른 사람의 의견을 통해 신뢰하는 경향이 있다고 합니다. 유저는 두 가지 방식으로 리뷰를 활용한다고 합니다.
제품의 품질 및 서비스 수준 확인 용도
제품 페이지에서 찾을 수 없는 제품의 세부사항 확인 용도
리뷰가 이렇게 활용되기 때문에 잘 활용하면 제품 페이지의 신뢰도를 높일 수 있다고 하며 몇 가지 방법을 제시합니다.
유저가 리뷰를 필터링할 수 있게 해 줘야 합니다
부정적 리뷰를 숨기지 않아야 합니다.
전체 투표자의 수를 보여줘야 합니다.
유저가 제품에 대한 진정성 있는 정보를 찾아볼 수 있도록 필터를 제공해야 한다고 합니다.
부정적 리뷰를 숨기지 않습니다.
전체 투표자의 수를 보여줍니다.이탈률 줄이기
유저가 사이트나 앱에 최대한 오래 몰입할 수 있도록 관련 제품이나 가장 인기 있는 제품, 같이 구매하면 좋을 상품 등 추가적인 콘텐츠를 제공해야 한다고 합니다.
Nick Babich는 제품 페이지가 구매하기 쉽게 만들어져 있을수록 구매할 확률이 더 높아지기 때문에 제품 상세 페이지를 잘 만들어야 한다고 강조합니다.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
줌 Live 강의 수강생 모집 중
(매월 Live 3-4개 강좌 오픈하고 있습니다)
인프런 20개 UX 인터넷(VOD) 강좌 수강생 모집 중
(평생 수강)
https://www.inflearn.com/users/196290
