by
Oct 18. 2024
실전 UI/UX - 수량변경UI, +-인가 드롭다운인가
수량변경 UI를 설계할 때 고려해야 할 것들
장바구니에서 상품 수량 변경 기능에 대해 유심히 살펴본 적이 있는가?
그동안 무심코 지나쳐왔던 수량 변경 UI에도 다양한 기능과 과학적 원리가 숨어 있다.
본격적으로 수량 변경 UI에 대해 알아보기 전 수량 변경의 메커니즘부터 살펴보자.
장바구니 수량 조절은 재고 변경의 리스크를 동반한다. 상세 페이지에서 장바구니 담기 버튼을 눌렀을 때 상품이 바로 장바구니에 담기는 것이 아니라 백앤드에서 상품 재고 DB를 확인하여 재고가 있으면 상품이 장바구니에 담기고 재고가 없으면 에러 메시지가 출력된다. 그런데 상품의 재고가 1개만 있다고 가정해 보자. 상세 페이지에서 장바구니를 누를 시점에는 재고가 있어서 장바구니에 상품이 담겼지만 장바구니에서 재고를 2개나 3개로 변경하면 주문 불가 상태가 된다. 주문가능한 재고는 1개이기 때문이다.
재고가 있을 때와 재고가 없을 때 화면 비교그렇다면 사용자는 주문 불가 상태를 언제 인지하게 될까. 과거 UI는 구매 페이지로 이동하는 주문하기 버튼을 누르는 순간 장바구니에 담긴 상품들의 재고를 체크해 재고 여부를 확인했다. 그런데 이 방식은 사용자 친화적이지 못하다. 상품 수량을 변경하는 시점에 주문 가능 여부를 실시간으로 체크하면 사용자가 주문하기 버튼을 누르는 불필요한 액션을 하지 않고도 주문 가능 여부를 인지할 수 있게 된다. 그래서 최근에는 재고를 변경하는 순간 재고를 실시간으로 조회해 주문 가능 여부를 조회하는 방식을 주로 사용한다.
주문하기시와 수량변경 시 재고 체크 차이상품 수량 UI에는 크게 2가지 방식이 있다.
드롭다운
+- 버튼 (스테퍼)
드롭다운과 +- UI 비교과거 수량 변경 UI의 트렌드는 드롭다운이었다. 요즘도 드롭다운을 쓰는 곳이 있긴 하지만 최신 트렌드는 +- 버튼이다. 재고 조회 관점에서 +- 버튼은 드롭다운에 비해 치명적인 단점이 있다. 내가 어떤 상품을 장바구니에 1개 담고 5개로 수량을 변경한다고 가정해 보자.
드롭다운 :
① 드롭다운 박스 터치
② 5 선택
③ 재고 조회
④ 5개 수량 적용
+- 버튼 :
① +버튼 터치
② 재고 조회
③ 가능 시 2로 변경
④ + 버튼 터치
⑤ 재고 조회
⑥ 가능 시 3으로 변경 …. (5까지 반복)
수량을 변경하는 시점에 재고를 조회하면 드롭다운은 1개에서 5개로 변경하기 위해 2번의 터치와 1번의 데이터 조회가 필요하다. 그런데 +- 버튼은 1개에서 5개로 변경하기 위해 4번의 터치와 4번의 데이터 조회가 필요하다. +- 버튼은 드롭다운에 비해 불필요한 터치와 트래픽을 유발하는 구조다.
그렇다면 이런 치명적인 문제점이 있음에도 불구하고 많은 커머스들이 +- 버튼을 사용하는 이유는 뭘까? +- 버튼이 모바일 기기에서 드롭다운보다 사용성이 좋고 대부분의 상품이 수량 변경이 필요 없는 물건이기 때문이다.
셀렉트 박스는 모바일에서 모달 팝업을 띄우고 수량을 선택한다. +- 버튼은 현재 창에서 수량 조절이 가능한 반면 드롭다운은 수량을 변경하기 위해 무조건 모달 팝업을 띄워야 한다. 즉각적인 반응이 가능하다는 측면에서 보면 +- 버튼이 훨씬 더 직관적이다. 재고 관리 측면에서도 마찬가지인데 드롭다운은 박스를 누르는 시점에 잔여 재고를 조회해서 주문 가능한 개수만큼 드롭다운 리스트에 표시하거나 드롭다운에서 숫자를 선택한 시점에 재고를 조회하는데 비해 +- 버튼은 버튼을 누르는 순간에 재고를 실시간으로 조회해 재고가 주문 가능한 한계에 다다르면 + 버튼을 비활성화하는 형태로 수량을 제한하고 사용자에게 안내해 줄 수 있다.
그렇다면 모든 사이트가 +- 버튼을 사용해야 할까. 아니다 취급 상품에 따라 +- 버튼보다 드롭다운이 더 적합한 경우도 있다. 동일 상품을 한 개 이상 구매할 가능성이 극히 적은 상품들, TV나 냉장고 같은 대형 가전이나 명품, 의류 브랜드는 +-를 사용하는 것이 좋고 반대로 똑같은 상품을 여러 개 구매할 가능성이 있는 물건 볼펜이나 지우개 같은 문구류나 도매 사이트는 드롭다운 또는 직접 입력 방식이 더 적합할 수 있다.
이제 정리해 보자.
상품 수량 인풋 박스의 UI를 결정하는 요인은 취급 상품의 성격이다.
1개만 구매할 확률이 높은 전자제품이나 고가품 :
+- 버튼
1~10개까지 다양한 수량을 구매할 확률이 높은 비품 쇼핑몰 :
드롭다운 + 직접입력
여기까지가 상품의 수량 변경 UI에 대한 얘기였다. 여기서 끝내면 실전 UI/UX가 아니다. 실무에서 써먹기 좋은 꿀팁을 하나 방출하며 이번 장을 마무리하도록 하겠다.
요즘 이커머스들이 +- 수량 선택을 많이 사용하는 이유는 모바일 친화적이기 때문이다. 반대로 생각하면 데스크톱에서는 +- 버튼이 편리하지 않을 수 있다는 얘기다. 오히려 데스크톱에서는 드롭다운이 더 적합하다. 그럼 어떻게 해야 할까? 데스크톱을 사용하는 비중이 모바일보다 훨씬 적으니 데스크톱을 버려야 할까?
자세한 내용은 서점직원의 신간
<실전 예제로 알아보는 서점직원의 실전 UI/UX>에서 만나보실 수 있습니다.
도서 구매 및 이벤트 안내
서점직원의 실전 UI/UX 저자 서점직원과 함께 하는 커피챗 이벤트
책을 구매하신 모든 분들께 서점직원과의 커피챗 1시간 이용권을 드립니다.
자세한 내용은 아래 커피챗 이벤트 안내 및 신청서를 참고하세요!
● 서점직원과 커피챗 이벤트 안내 및 신청서
● 책 구매 링크
https://product.kyobobook.co.kr/detail/S000214458798
https://www.yes24.com/Product/Goods/134305285
https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=348982667&start=slayer
