장바구니 UI 고치기
상품 정보는 어디로 흐를까?
별생각 없이 시작한 일 때문에 퇴근 한계점을 넘게 되었다.상품 상세 페이지에 들어가기 전에 상품의 썸네일 하단에 위치하고 있다.
이 기능은 상품을 확인한 후, 개수를 정하는 것이다.
수량을 결정해서 버튼을 누르면, 장바구니에 상품이 담긴다.
예전에는 장바구니를 누르면, 몇 개인지 정하지 않고, 일단 넣은 후에 장바구니에서 상세한 수치를 조정했던 것 같은데, 아무래도 식료품을 다루다니 보니까 필요할 것 같기도 하다.
그런데 대부분의 상품은 1개의 상품이 1개의 품목인데, 하위 품목이 여러 개 있는 상품이 있다. 왼쪽처럼 '투명한 만두 물방울 4종'이라는 상품이 있으면, 이 상품은 하위 품목이 4개가 있다. 그리고 하위 품목을 각각 몇 개 살지 선택할 수 있다.
마침 주변을 돌아다니는 8살 아들에게 왼쪽과 오른쪽 디자인 중에서 어느 것이 더 좋냐고 물었다. 대답은 간단했다. 전반적으로 사진이 있는 쪽이 좋다. 그리고 상품 숫자를 선택하는 UI는 왼쪽이 좋다고 했다.
몇 가지 간단한 문제를 해결하기 위해 목록을 만들었다.
글자의 문제
'취소'와 '담기'가 된 이유가 '닫기'가 '담기'와 형태가 비슷하기 때문인 듯하다. 그런데 취소가 더 커 보인다. 왼쪽 디자인은 '닫기'라고 해두었다. 텍스트의 크기도 전체 면적에 비해서 작은 편이다.
색상의 문제
하얀 바둑돌과 검은 바둑돌의 크기는 똑같지 않다. 바둑돌은 검은 돌을 약간 더 크게 만든다. 색이 보라색이지만, 취소와 비교해서 어둡기 때문에 취소가 더 크게 보인다.
데스크톱과 모바일의 차이
서비스가 데스크톱과 모바일로 제공되고 있다면, 양쪽을 다 신경 써야 한다. 사진을 넣게 되면, 왼쪽처럼 디자인을 할 수 없다. 모든 디바이스에서 동일한 경험을 주는 것을 권장하기 때문에 UI가 가급적 통일되는 것이 좋다.
1. 텍스트 중심으로 디자인한다.
폭을 좀 더 좁게 제한했다.상품 정보 UI 디자인에서 했던 것을 바탕으로 ‘장바구니에 담기 위한 장바구니 UI 디자인’을 다시 했다.
먼저 작업에서 배운 데로 글자 크기의 차이가 너무 크게 차이 나지 않도록 조정하고, 사진을 제거했다. 사진을 없앤 이유는 팝업의 폭이 모바일 디바이스에 맞게 좁아졌기 때문이다. '취소'는 과감하게 생략했다. 상품명이 길어서 이 디자인은 어떻게 해도 복잡해 보이는 문제가 있다.
여기서 적용한 논리는 "사용자의 선택을 제한해서 '담기'에 집중시킨다."이다. 이미 이 UI에는 닫기가 2개나 있다. 1개라도 장바구니에 담으면, 창이 닫힌다. 또 오른쪽 상단에도 '닫기'가 있다. 무조건 없애지 말고, 서비스 전반의 디자인 규칙과 UX를 고려하여 결정해야 한다.
2. 색상으로 정보와 기능, 텍스트를 구분한다.
차이가 안 나는 듯, 차이가 난다.왼쪽과 오른쪽은 별 차이가 없어 보이지만, 그레이 스케일로 표시된 입력 UI의 일부에 포인트 색상을 약간 추가해 주면, 입력과 기능에 대한 UI를 조금 더 눈에 띄게 하고, 텍스트와 차이를 만들 수 있다.
몇 가지 간단한 문제는 해결된 듯 하다.
이쯤에서 마무리 할 수 있다.
선을 넘어보자.
3. 다른 회사 디자인과 비교한다.
나라면, 1회 최대 구매가 10세트면, 10세트 사기 버튼도 만든다. 버튼이 있으면, 누르는 사람도 있다.다른 회사 디자인과 비교할 때 가장 중요한 점은 '다른 회사'라는 점이다.
다른 회사는 사업 내용도 다르고 방법도 다르다. 세트 구성에 대해서 생각해 봐야 할 부분이 있다. 마켓 컬리의 경우는 하위 상품이 있고, 하위 상품을 상세 페이지에 들어가기 전에 개별 구매가 가능하도록 했다. 비슷한 형태의 상품 구성이 다른 쇼핑몰에도 있는데, 배달의 민족의 B마트의 경우는 세트 상품은 말 그대로 한 세트 단위의 구매이다.
세트가 하나의 상품으로, 1개의 상품을 사면서 구매량을 조정할 수 있지만, 마켓 컬리의 UI는 하위 상품을 각각 구매할 수 있고, 그 개수의 격차가 매우 크다. 어떤 상품은 하위 상품이 없다. 또 어떤 상품은 4종 정도이다. 모니터링을 해보니까 11종 상품이 있다.
왼쪽의 예시 UI는 첫 화면에서 3종 정도가 표시된다. 11종의 하위 상품 구성이 극단적일 수 있지만, 안 보이는 상품이 너무 많고, 같은 종류의 버튼이 수십 개 표시된다.
어중간하면, 상품도 충분히 못 보여주고, UI도 어려워진다.
대체 왜 11종 개별 구매 상품이 있을까? 11종을 각각 팔아도 될 텐데, 왜 하나의 상품으로 묶어버렸을까? 이게 더 많이 팔리는 팁일까? 그렇다면 상관없지만, 이런 다중 상품은 메인 페이지에는 없다. 어떤 전략이 있는지 모르겠지만, 개발 브랜드 페이지를 만든 후에, 거기에 상품 11종을 잘 표시하고, 그중에서 세트 구성품을 만들어서 1개의 품목으로 B마트처럼 팔면 되지 않을까?
어쨌든, 이 문제는 1개의 상품에 적합한 UI를 디자인할 때, 큰 제한사항이 된다.
두 가지 시나리오를 생각해 본다.
텍스트와 이미지로 분리해 보았다.
텍스트냐, 이미지냐...좁은 화면에 많은 글자를 넣으면, 어떻게 해도 UI 디자인은 어려워진다. 그렇다고, 텍스트를 임의로 줄이는 것도 한계가 있다. 왜냐하면, 어떤 상품은 텍스트의 끝 부분에서 차별성이 생기는데, 텍스트를 줄여버리면, 다 똑같은 상품처럼 보일 수 있다. 실제 운영 중인 콘텐츠를 사용해서, 2가지 시나리오를 시도해본다.
A와 B를 통해서 UI 디자인할 때 할 수 있는 실수와 고통을 간접 경험해보도록 하자.
플랜 A
버튼을 좀 줄여보자.텍스트가 있고, 버튼이 있는 UI에서 생각해 볼 수 있는 가능성을 고려해보았다. 가장 간단한 방법으로 보라색 원을 선택했다. '닫기' 버튼을 없앤 것처럼, '담는' 버튼만 남겨둔 것이다. 버튼 한 개를 줄이면서, 텍스트를 표시할 수 있는 비중을 늘렸다.
넣는 UI를 추가했으니, 어딘가에는 빼는 UI가 있어야 한다. 그런데 먼저 쓴 것처럼 11종의 상품을 보여주려면, 정해진 제한 공간 안에서 최대한 효율적으로 배치해보았다. 그리고 담기만 하는 부분이 있으니, 빼기만 하는 부분도 만들었다. 이 시나리오에서는 '추가'만이 살 길이므로, 추가를 집중적으로 배치하고, 가격과 할인을 표시하는 부분을 추가해 보았다.
가격 부분을 누르면, 빼기만 할 수 있는 부분을 볼 수 있다.
이 UI의 문제는 다음과 같다.
1. 복잡하다. 평범한 UI가 가장 현명한 UI인 경우가 있다.
2. 기존의 Select 박스와 똑같은 문제가 있다. 보이지 않으면, 없는 기능이다.
3. 사용자는 장바구니 전에 사용하는 장바구니에서 빼는 기능을 찾지 못할 수 있다.
4. 어차피 장바구니에서도 해당 항목을 볼 수 있다.
상품 목록을 더 자세히 보여주려고 할수록 텍스트가 많아진다.
파일을 삭제하고 다음 계획으로 넘어간다.
플랜 B
컨트롤 하는 영역을 한 줄로 배치해서 한 손으로 쓰기 쉽게 한다.대부분은 하위 상품이 없이 상품이 하나뿐이다. 그러면, 상품 이미지를 보여주고, 숫자만 쉽게 결정할 수 있는 UI다. 하지만 같은 문제가 있다. 11종의 하위 상품이 있는 UI에는 대응할 수 없다.
아까 그 8살 아들은 이 편을 더 좋아했다. 아이스크림 사진이 크게 보이기 때문에...
다양한 스크롤바 디자인을 시도해 봤지만, 플랜 A와 마찬가지로 해독이 필요해진다.
크기의 제한은 매우 크다. 더구나 폭이 좁고, 보여줘야 할 정보가 많은 경우는 괴롭다. 이런 종류의 디자인은 채용 과제로 적합한 것 같다.
잠시 머리를 식히기 위해 폭이 넓은 상상의 세계로 도피해 본다.다시 제한 사항을 생각하고, 새로운 계획을 생각해 본다.
모바일은 기존의 셀렉트 박스 UI를 사용하고, 데스크톱 한정으로 '좀 더 넓은 장바구니 담기 전의 장바구니'를 디자인해봤다. 내 모니터는 16:9 큰 스크린이니까, 그냥 좌우로 충분히 스크롤하면서 유기농 아이스크림 7종을 한 개씩 전 종류 담을 수 있는 UI를 만들면 안 될까?
... 안 되는 것 같다. 플랜 B도 삭제하고, 현실로 돌아가자.
공통된 기능 중심의 UI 디자인
이상한 시나리오를 만들지 말고, 기존 상황을 바탕으로 생각할 수 있는 기능을 만들고, 그 기능을 구매 흐름 속에 넣어서 같은 기능을 하는 컴포넌트를 생각하고 디자인한다.
좁은 영역에 버튼을 배치할 때는 충분한 여백을 주는 것이 좋다. 하나의 상품 정보에 맞출 수 없기 때문에 여백이 매우 중요하다. 모니터링했을 때 본 가장 긴 제목은 45자(공백 포함)였다. 그러므로 실제 디자인을 할 때는 30% 정도 인심을 써서, 60자 정도를 생각하면 좋을 것 같다.
폭은 가변적이므로 글자 수로 생각하는 것이 좋다.
라노벨 제목도 아니고, 적당히 상품명을 제한하는 것도 좋은 방법이다.
상품을 선택하고, 수량을 결정하는 UI를 장바구니 이전에서도 사용하고, 장바구니에서도 사용해야 한다면, 이 기능은 같은 디자인으로 만들고 플랫폼과 상황에 맞게 조정한다.
기본적인 룰은 '두 개로 나누기'를 사용했다.
한 페이지에서 제목과 본문 혹은 콘텐츠와 기능으로 나눈다.
본문에서 상품 목록과 버튼을 나눈다.
상품 목록에서 글자와 UI로 나눈다.
글자에서 상품명과 나머지를 나눈다.
나머지 정보에서 가격과 단위 정보를 나눈다.
상품의 수량을 결정하는 UI는 표시되는 위치에 따라 다른 위계를 가질 수 있다. 예시에서는 한 상품 페이지 안에서 하위 상품을 볼 때와 여러 상품 가운데서 하위 상품을 볼 때로 상태와 스타일을 구분했다.
쉽게 말하면, 상품 페이지에서 글자 색이 다른 상품과 함께 보이는 장바구니에서는 한 단계씩 흐려진다.
웹페이지의 팝업 디자인에서는 반응형 디자인을 유연하게 쓸 수 있기 때문에 텍스트가 줄 바꿈이 바뀌면, 높이도 바뀌게 디자인할 수 있다.
모바일 화면에서는 여백이 생기더라도, 높이를 규칙적으로 정해두는 것이 좋다. 어떤 사람은 높이의 리듬이라고 하는데, 패턴을 만들기도 쉽다.
웹페이지의 팝업 디자인은 높이를 최대한 줄이기 위해 합계 가격 표시와 담기 버튼을 같은 라인에 배치했다. 모바일 디자인의 장바구니에서는 상품의 텍스트만으로는 해당 상품을 기억할 수 없기 때문에 사진을 추가하고, 실수로 의도하지 않은 탭을 피하기 위해서 기능을 왼쪽 끝과 오른쪽 끝에 배치했다.
더 심플하고 명확한 디자인을 위해서!
다시 다른 커머스 서비스와 비교해서 여백에 오른쪽처럼 추가 기능을 배치했다.
보면 알겠지만, 이 모든 것이 정말 필요할까?
이렇게 디자인하면, 45자가 넘는 상품명을 입력하는 것과 같은 실수를 하게 된다.
현재 문제는,
장바구니 담기 전에 수량 결정 후, 장바구니에서 확정하는 구조에서 정보를 너무 많이 표시해서 생긴다.
주문 확인과 결제 부분도 문제가 생기게 된다.
UI 디자인이 미궁에 빠지는 이유는 고민을 할수록 현재 상황과 일상의 행동과 멀어질 가능성이 커진다는 것이다. 플랜 A와 B의 경우가 그렇다. 또 디자이너는 가장 많은 시간을 쓴 디자인을 설명하기 위한 논리를 자꾸 쌓게 된다.
가끔은 잔뜩 만들어 놓고, 다 버리는 게 좋다. 과정이 결과보다 중요한 경우다.
더 이상 뺄 것이 없는 간단한 디자인을 만들려면, 뭘 빼야 하는지 알아야 한다.
그리고 점점 더 퇴근을 늦게 한다.
어려운 문제엔
간단한 해결책이 있지만,
간단한 해결책은 찾기 어렵다.
최종 결제 전의 상황을 목록을 더 간단하게 보여준 후에, 개별 항목은 모달을 띄워서 수정하게 하는 플랜 D를 생각할 수 있다.(그리고 또 퇴근을 못 하겠지.)
대형 마트나 소매점에서 구매자가 할 수 있는 행동을 다시 생각해보자.
지금 장바구니 디자인의 문제는 물건 3개를 샀는데, 화면이 꽉 차 버리는 데 있다. 실제로 매장에서 물건을 살 때 인간은 간단한 규칙으로 정보를 줌인-줌아웃한다. 구매자의 시점에서 사진과 합계 가격 중심으로 플로우를 구성하고, 관련 정보는 모달로 처리하는 것이 좋을 것 같다.
상품을 사진으로 치환해서 현재 구조와 비교해 보려고 한다.
1. 매대를 확인하고, 상품을 인지한다. > 사진
1.5. 상품의 텍스트를 확인한다. > 텍스트
2. 상품을 카트에 한 개 혹은 여러 개 담으며 순서대로 쌓이며, 배열된다. > 사진
2.5. 계산대에서 상품이 구매한 순서와 다르게 재배열된다.
3. 계산대에서 상품의 수를 세고 가격을 확인한다. > 사진 + 숫자
4. 계산대를 통과한 상품을 확인하고, 결제한다. > 사진 + 숫자
5. 영수증을 받는다. > 텍스트 + 숫자
6. 상품을 고객이 다시 재배열하여 박스에 담는다. > 사진
이 관점에서 구매 과정을 보면, 사진으로 쇼핑이 진행되고, 텍스트로 끝나며,
상품이 재배열되는 부분에서 고객의 확인이 필요할 것이라고 가정할 수 있다.
이 가정을 바탕으로 만일, 장바구니 UI와 장바구니에 연결된 흐름에 큰 변화를 시도한다면, 사진에 정보를 더하는 부분과 영수증을 보는 시선을 생각해보거나, 꾸러미 혹은 세트 상품을 커스텀해서 상품 구매 목록을 구성할 수도 있을 것 같다.
뭐가 더 나올 것 같지만, 일단은 여기서 마무리다.
