UX/UI | 쿠팡이츠 '가격' 노출하기
if...메뉴를 선택하면서 카트에 담길 메뉴의 가격을 파악할 수 있다면
어떠한 문제점을 발견하였는가.
1. 다른 선택 항목을 선택하려고 스크롤을 내리면 상단 가격이 보이지 않는다. 스크롤을 위로 이동하거나, 카트에 담으면 총가격이 보인다. 선택해야 하는 옵션이 많은 경우, 금액을 확인하면서 옵션을 보려면 위아래 반복해서 이동해야 한다.
2. 1번과 같은 상황이 발생하여 금액을 확인하기 위해 위로 이동해야 한다. 이 경우 기존에 넣은 메뉴의 가격이 하단에 표시되는데, 고객이 카트에 담긴 가격을 현재 페이지 메뉴의 가격으로 잘못 인지할 수 있다.
3. 최소주문금액은 매장 페이지에 진입했을 때, 상단에 배달비 정보와 함께 볼 수 있다. 이를 놓치고 보지 못했다면, 최소금액에 대한 인지가 최종 카트 보기 단계에서 이루어진다. 만약 금액이 부족하다면 다시 메뉴리스트로 돌아가서 메뉴를 선택해야 하는 상황이 발생한다.
쿠팡이츠를 사용하면서 위와 같은 문제점을 발견하였다.(이전 글 쿠팡이츠 '가격' 보기)
사용자는 선택한 옵션을 반영한 가격을 확인하기 위해 다시 스크롤하여 이동하고, 카트로 이동한 뒤 최소주문금액이 되지 않은 것을 인지하고 다시 메뉴리스트로 돌아가 메뉴를 고르는 등 '가격' 정보를 바로 확인하지 못해 반복되는 이동 동선을 경험하고 있다.
이 같은 반복되는 이동 동선을 줄이고 빠르게 메뉴를 결정하고 결제창까지 갈 수 있도록 하는 것을 목표로 세웠다.
어떻게 해결했는가.
① 옵션 선택하는 것에 따라 가격이 변동되는 것을 즉각적으로 확인할 수 있도록 하단 배달 카트 담기 버튼에 가격을 함께 보여준다. 스크롤 진행 방향이 밑으로 진행되고 마무리될 수 있도록 수량의 위치를 맨 아래로 변경한다.
② 메뉴 1개가 담겨있는 상태에서 다른 메뉴 페이지에 진입했을 때, 하단에는 현재 메뉴 상세 페이지의 가격이 보인다.
③ 배달 카트에 담긴 메뉴가 없거나 최소주문금액 미만으로 메뉴가 담겨 있는 경우, 메뉴 상세 페이지 하단에 최소주문금액이 얼마인지 알려주다. (메뉴 상세 피이지에서) 만약 카트에 담긴 메뉴의 가격이 최소주문금액을 충족한다면 [가격]배달 카트에 담기 버튼만 보여준다.
(좌)최소주문금액 충족, (우)최소주문금액 미만④ 카트에 담기 후 메뉴 리스트로 돌아왔을 때, 최소주문금액을 충족하지 못한다면 추가해야 할 금액을 알려준다.
가격을 확인하기 위해 위아래 이동하였던 동선을 없애 반복되는 이동 동선을 줄였다. 카트에 담긴 메뉴가 최소주문금액을 충족하지 못했을 경우를 현재 페이지에서 가늠할 수 있어서 메뉴를 빠르게 선택할 수 있도록 하였다. 카트에 담은 뒤 금액이 충족되지 못했을 경우에도 부족한 금액을 알려줘서 카트로 이동하지 않고 현재 머무르고 있는 메뉴리스트에서 메뉴를 고를 수 있도록 하였다.
