본문 바로가기

UX 이론

이커머스에서 장바구니

[이커머스에서의 장바구니]

- 장바구니란? 이커머스에서 재품을 구매하기 위한 첫 번째 단계.
- 성공적으로 항목을 장바구니에 넣었다는 피드백 : 사용자에게 진행한 작업을 확인하고 쇼핑을 지속 또는 결제 진행 단계로 나아가게 함
- 항목을 넣는 작업이 성공적으로 완료되었는지 확인해야 한다고 느끼는 사용자는 장바구니에 제품을 추가하는 것과 관련해 이전에 좋지 않은 경험을 가지고 있는 상태임
- 이커머스 웹사이트가 가지고 있던 사용성 문제를 개선하기 위해 다양한 방법으로 장바구니 UI/UX 개발에 힘써야 함

[장바구니 아이콘]
- 장비구니 아이콘에 표시되는 장바구니에 포함된 항목의 수 : 장바구니에 제품이 성공적으로 추가되었음을 간접적으로 확인함. 숫자의 색상이 대조되면 더욱 명확하게 식별이 가능함

[장바구니 아이콘 근처의 소계]
1. 항목 중복 추가 등의 실수 추측 가능
- 사용자는 항목을 두 개 이상 추가하는 등의 큰 실수가 발생했는지 어느정도 추측이 가능함

2. 소계 내용이 바뀌면 사용자의 시선 집중
- 소계 내용이 바뀌면 사용자의 시선을 끌 수 있음
- 특히 모션이나 애니메이션이 동반되는 경우 변경되는 내용에 더욱 관심을 갖게 되는 사용자

3. 장바구니 영역의 증가로 사용자의 관심도 증진
- 장바구니 항목 수와 해당 정보를 표시함에 따라 동반되는 장바구니 또한 커지기 때문에 사용자가 클릭하거나 관심을 가질 확률이 증가함

[장바구니에 항목 추가 확인]
- 장바구니의 아이콘을 변경하는 것 : 사용자의 실수를 줄일 수 있도록 지원하지만 충분하지 않음. 인디케이터를 사용하여 제품이 장바구니에 추가되었음을 확인할 수 있도록 하는 것이 더욱 효과적임. 
- 예 : 사용자가 항목을 추가할 때 보여지는 팝 오버 또는 장바구니에 추가된 제품을 보여주는 별도의 페이지 - 이 경우 제품 이미지와 해당 옵션에 대한 정보와 제품 목록을 포함시켜야 함. 과도한 애니메이션은 지양(애니메이션 움직임이 클 경우 주의를 산만하게 하고 성가시게 보일 수 있으므로 주의할 것). 빠르게 사라지는 오버레이 지양(장바구니에 구체적으로 무엇이 포함되어 있는지 쉽게 검토할 수 없음). 

[장바구니 피드백 권장 사항]
1. 오버레이 또는 팝오버는 제품 상세 페이지의 핵심 정보를 방해하지 않도록 배치
2. 제품 상세 페이지 상단에 배치
3. 수량 변경, 삭제 등 옵션 수량과 수정/결제 혹은 쇼핑 계속하기가 가능하도록 설계

[장바구니 피드백에 포함되어야 하는 정보]
- 다양한 피드백 중 적합한 유형은 사용자의 쇼핑 행동에 따라 다름. 대부분의 경우 장바구니에 성공적으로 추가되었음을 나타내는 오버레이 또는 배너가 가장 유용함. 
- 제한된 수의 옵션이 있는 사이트or세션에서 소량만 구매하는 경우 : 별도의 페이지를 제공하는 것은 사용자가 결제 프로세스에 집중할 수 있어 신속하게 처리할 수 있도록 지원
- 적절한 크기의 제품 이미지 / 제품 이름 / 제품 가격 / 추가된 수량 / 옵션에 대한 텍스트 

[사용자의 실수를 줄이는 방법]
1. 사용자가 실수를 하는 이유 : 사용자는 실수로 같은 항목을 중복 추가하고 체크아웃 단계에서 확인하게 됨.
- 사용자가 집중을 하지 못한 경우
- 구매 과정이 오랜 기간에 걸쳐 분할되어 이미 장바구니에 담은 사실을 잊은 경우
- 유사한 품목의 비교를 위해 후보 제품으로 계속 추가하는 경우
- 검색 결과 페이지 및 제품 페이지의 관련 제품 목록 등 여러가지 도달 경로로 이전에 저장해 둔 사실을 잊는 경우
- 사이트의 잘못된 피드백으로 추가 버튼을 여러 번 누른 경우

2. 항목이 이미 장바구니에 추가되었음을 사용자에게 상기시키는 것이 디자이너의 역할
- 시각적으로 눈에 띄어야 함
- '장바구니에 추가' 버튼 옆에 배치
- 버튼의 레이블을 '다른 항목 추가'로 변경
- 장바구니에 추가 버튼 색을 회색으로 변경
- 레이블이나 버튼에 대한 변경을 일시적 허용 -> 몇 초 후에 표준모드로 복귀
- '장바구니에 추가' 버튼 아래 이미 이 상품이 담겨 있음을 나타내는 메시지 표시 

'UX 이론' 카테고리의 다른 글

인페이지 링크  (0) 2022.11.14
장바구니  (0) 2022.11.13
심리스Seamless 디자인  (0) 2022.11.10
고객 여정 지도 Customer Journey Map  (0) 2022.11.10
프로토타입  (0) 2022.11.07