UI/UX 원칙

[UI/UX 원칙 #7] 구매를 유발하는 제품정보 구성 6가지 UX 원칙 가이드라인

2024.08.30 | 조회 1.05K |
0
|
from.
전민수

전코치의 사용성 리서치 UX 방법론

프로덕트 매니저/프로덕트 오너/프로덕트 디자이너를 위한 UI / UX / UX 방법론&프레임워크 소식

구매를 유발하는 제품정보 구성 6가지 UX 원칙 가이드라인

 

닉 바비치의 [구매를 유발하는 제품정보 구성 6가지 UX 원칙 가이드라인] 소개하고자 합니다.

웹사이트나 앱에서 구매 전환율을 높이기 위해 가장 중요한 요소는 제품 페이지입니다. 방문자가 쉽게 정보를 얻고 구매를 할 수 있도록 제품 페이지를 개선하는 몇 가지 방법을 소개하겠습니다.

 

첫째. 제품 세부사항과 옵션

사용자는 제품 페이지에서 재고, 사이즈, 색상, 제품 설명, 사진, 리뷰 등을 기대합니다.

제품의 세부사항과 옵션은 명확하고 직관적으로 보여야 합니다. 즉, 전체적인 개요를 알 수 있으면서도 원하는 정보를 쉽게 찾을 수 있어야 합니다. 예를 들어, 사이즈에 대한 재고가 있는지와 해당 사이즈의 정확한 치수를 제공해야 합니다. 색상에 대해서는 실제 제품의 색상을 잘 전달해야 합니다.

또한, 사용자가 입력해야 하는 부분은 최소화해야 하며, 핀치(pinch)와 더블 탭(double-tap) 제스처를 지원해야 합니다.

불완전한 제품 세부 정보는 유저가 불만을 갖게 합니다
불완전한 제품 세부 정보는 유저가 불만을 갖게 합니다

 

모바일에서 가장 많은 오류가 발생하는 부분은 ‘입력 필드’입니다. 사용자가 직접 입력해야 하는 필드를 없애는 것이 가장 이상적입니다. 대신, 라디오 버튼이나 +, - 같은 버튼을 활용하는 것이 좋습니다.

+와 - 를 활용해 구매 수량을 정하게 하면 수량 타이핑으로 인한 오류를 줄일 수 있습니다
+와 - 를 활용해 구매 수량을 정하게 하면 수량 타이핑으로 인한 오류를 줄일 수 있습니다

 

둘째. 제품 이미지

제품 이미지는 제품 페이지에서 가장 중요한 요소입니다. 좋은 제품 이미지는 좋은 인상을 주면서도 필요한 정보를 제공합니다.

크고 고퀄리티의 이미지를 사용하는 것이 중요합니다. 사용자가 이미지를 확대하는 정도를 선택할 수 있도록 해야 합니다.

상품 구매 결정에 도움이 될 만큼 적절한 수의 이미지를 제공해야 하며, 이미지 갤러리는 가로로 스와이핑할 수 있게 만들어야 합니다. 또한, 핀치(pinch)와 더블 탭(double-tap) 제스처를 지원해야 합니다.

 

Case 1. 퀄리티가 좋은 이미지

확대 버튼을 명확하게 인지할 수 있게 만들어야 합니다
확대 버튼을 명확하게 인지할 수 있게 만들어야 합니다

 

Case2. 확대 이미지 영역 선택

기존에 정해진 크기 만큼만 이미지를 확대해서 보여주면 사용자가 불만을 가질 수 있습니다.

확대 정도와 확대할 영역은 사용자가 선택할 수 있도록 해야 합니다
확대 정도와 확대할 영역은 사용자가 선택할 수 있도록 해야 합니다

 

Case3. 상품 구매 결정에 도움이 될 만큼 적절한 이미지 개수

이미지가 많을수록 좋지만, 갤러리에 있는 사진의 활용도를 높이기 위해서는 제품 설명에서 강조된 세부사항과 관련된 사진이 필요합니다..

사진은 정보를 전달하는 도구로 사용해야 합니다. 구체적인 정보를 제공하는 것도 도움이 됩니다. <br>예를 들어, 브랜드 스토리를 전달하는 이미지를 활용할 수 있습니다.
사진은 정보를 전달하는 도구로 사용해야 합니다. 구체적인 정보를 제공하는 것도 도움이 됩니다.
예를 들어, 브랜드 스토리를 전달하는 이미지를 활용할 수 있습니다.


Case4. 이미지 갤러리: 가로 스와이핑

사용자가 스크롤하지 않고도 가로로 스와이프하여 빠르게 이미지를 볼 수 있도록 해야 합니다
사용자가 스크롤하지 않고도 가로로 스와이프하여 빠르게 이미지를 볼 수 있도록 해야 합니다

 

Case5. 모바일 제스처 지원

사용자는 보통 이미지를 확대하기 위해 핀치 제스처와 더블 탭 제스처를 많이 사용합니다. 이러한 제스처를 지원하고, 어떤 제스처를 사용할 수 있는지 힌트를 제공하면 도움이 됩니다
사용자는 보통 이미지를 확대하기 위해 핀치 제스처와 더블 탭 제스처를 많이 사용합니다. 이러한 제스처를 지원하고, 어떤 제스처를 사용할 수 있는지 힌트를 제공하면 도움이 됩니다

 

셋째. 제품 가격

제품 페이지에서 가격을 적절한 위치에 배치하는 두 가지 방법이 있습니다.

첫 번째, 가격 경쟁을 하고 있다면 가격을 전면에, 즉 이미지와 제품명 바로 다음에 보여줘야 합니다.

두 번째, 가격 외의 다른 요소로 경쟁하고 있다면 가격에 대한 강조를 줄이고, 제품의 강점이나 특징을 먼저 보여준 후에 가격을 제시할 수 있어야 합니다.

 

넷째. 재고 유무 및 배송 옵션

제품 페이지에서 사람들이 이탈하는 가장 큰 이유 중 하나는 배송 옵션과 배송비에 대한 정보를 제공하지 않기 때문입니다.

매장에서 직접 제품을 구매하거나 픽업하고 싶어하는 사용자에게는 매장 재고 유무가 매우 중요합니다. 따라서 사용자의 위치를 기반으로 가까운 매장의 재고 정보를 제공하고, 사용자가 원하는 매장의 재고도 검색할 수 있도록 해야 합니다.

또한, 배송 비용과 배송 날짜에 대한 정보도 반드시 포함되어야 합니다.

 

Case 1. 재고 유무 

우측 사례와 같이 매장 재고 정보를 제공해야 합니다
우측 사례와 같이 매장 재고 정보를 제공해야 합니다

 

사용자는 명확한 배송 비용과 배송 예정 일자를 알고 싶어 합니다. 이는 구매 전에 배송 비용에 비해 배송이 얼마나 빠른지를 비교하기 위해서 입니다


Case2. 배송 비용 및 배송 예정 일자

제품 상세 페이지에서는 배송 비용과 배송 옵션을 표시해야 합니다
제품 상세 페이지에서는 배송 비용과 배송 옵션을 표시해야 합니다


다섯째. 도움이 되는 제품 리뷰

온라인 쇼핑에서 가장 중요한 것은 '신뢰'이며, 사람들은 다른 사람의 의견을 통해 신뢰를 쌓는 경향이 있습니다. 사용자는 리뷰를 두 가지 방식으로 활용합니다.

첫째, 제품의 품질과 서비스 수준을 확인하기 위해 사용합니다.

둘째, 제품 페이지에서 찾을 수 없는 세부사항을 확인하기 위해 사용합니다.

리뷰가 이렇게 활용되기 때문에, 리뉴 기능을 잘 활용하면 제품 페이지의 신뢰도를 높일 수 있습니다.

용자가 리뷰를 필터링할 수 있도록 해야 하며, 부정적인 리뷰를 숨기지 않아야 합니다. 또한, 전체 투표자의 수를 표시해야 합니다.

사용자가 제품에 대한 신뢰할 수 있는 정보를 찾을 수 있도록 필터를 제공해야 합니다
사용자가 제품에 대한 신뢰할 수 있는 정보를 찾을 수 있도록 필터를 제공해야 합니다

 

부정적인 리뷰는 숨기지 않습니다
부정적인 리뷰는 숨기지 않습니다

 

전체 투표자의 수를 표시합니다
전체 투표자의 수를 표시합니다

 

여섯째. 이탈률 줄이기

사용자가 사이트나 앱에 최대한 오랫동안 몰입할 수 있도록 관련 제품, 인기 있는 제품, 함께 구매하면 좋은 상품 등 추가 콘텐츠를 제공해야 합니다.

제품 페이지가 구매하기 쉽게 구성될수록 구매 확률이 높아지기 때문에, 제품 상세 페이지를 잘 만들어야 합니다.

======================
안녕하세요! 전코치입니다 😊

제가 운영하는 링크드인 프로필을 공유합니다. 함께 지식과 경험을 나누고, 네트워크를 확장해보아요! 여러분의 소중한 1촌이 되어주시면 감사하겠습니다.

👉 링크드인 프로필 바로가기

여러분의 많은 관심과 연결을 기다립니다!✨

다가올 뉴스레터가 궁금하신가요?

지금 구독해서 새로운 레터를 받아보세요

✉️

이번 뉴스레터 어떠셨나요?

전코치의 사용성 리서치 UX 방법론 님에게 ☕️ 커피와 ✉️ 쪽지를 보내보세요!

댓글

의견을 남겨주세요

확인
의견이 있으신가요? 제일 먼저 댓글을 달아보세요 !
© 2024 전코치의 사용성 리서치 UX 방법론

프로덕트 매니저/프로덕트 오너/프로덕트 디자이너를 위한 UI / UX / UX 방법론&프레임워크 소식

자주 묻는 질문 서비스 소개서 오류 및 기능 관련 제보

서비스 이용 문의admin@team.maily.so

메일리 사업자 정보

메일리 (대표자: 이한결) | 사업자번호: 717-47-00705 | 서울 서초구 강남대로53길 8, 8층 11-7호

이용약관 | 개인정보처리방침 | 정기결제 이용약관