👀 오늘 소개할 서비스와 기능
- 번개장터 : 검색 필터
- 아몬즈 : 장바구니
- 솜씨당 : 상품 상세
1. 번개장터 검색 필터
우리가 서비스에서 자주 사용하는 기능 중 하나는 ‘검색’이에요. 원하는 결과를 빠르게 찾는, 가장 효율적인 방법이자 기능이기 때문입니다. 검색은 전, 후로 과정이 나뉘며 검색 후에는 입력한 키워드 (또는 선택한)에 따른 결과를 보게 되는데요. 이때 중요한 건 수많은 결과 중 사용자가 의도한 대상을 어떻게 잘 보여주고, 범위를 줄여줄 수 있을까?라고 생각해요.
오늘 소개할 업데이트 사례는 ‘번개장터’로, 최근 검색 결과 화면 내 ‘상세 필터’ 기능이 추가되었어요. 번개장터는 왜 필터를 추가했으며, 필터를 어떻게 활용할 수 있는지 살펴볼게요.
업데이트 전 번개장터 검색 결과 화면을 보면, 정확도순 등의 정렬 조건 하단에 개별 필터를 제공하는 모습이에요. 텐트 등 일정 상품군의 경우에는 따져야 할 조건이 많기에 그만큼 세부 조건으로 넣어야 할 내용도 많아질 수 있는데요. 필터 기능 자체는 제공하지만, 브랜드 / 카테고리 / 가격 / 동네 등 개별 필터를 하나씩 눌러 설정해야 하는 불편이 있었어요.
(1) 업데이트 후에는 개별 필터는 유지하면서, 전체 필터를 상세히 설정할 수 있는 버튼이 추가되었어요. 개별 필터는 중요도에 따라 순서를 정했을 테니 1-2개의 필터를 바로 사용할 유저들은 기존 방법을, 여러 필터를 빠르게 확인하고 적용하고 싶은 유저는 새로 적용된 상세 필터 버튼을 활용할 수 있죠. 또, 검색 결과를 보여주고 그 옆으로 정렬 기능을 배치한 점 역시 이번 업데이트에 포함되었어요. 검색 결과의 수에 따라 필터 사용의 편의가 달라질 수 있기에 선택한 방법이 아닐까 싶어요.
새로 추가된 ‘상세필터’의 모습이에요. 없었던 기능을 추가했다기 보다, 개별 필터를 하나의 화면에서 확인하고 한 번에 설정할 수 있도록 하는데 초점이 맞춰져 있어요. 초기화, 적용하기 버튼은 고정되어 있고 나머지는 스크롤을 통해 확인할 수 있는 구성이에요.
1-1. 카멜 검색 필터
카멜은 명품 중고거래 서비스예요. 카멜 역시 검색 결과 내 다양한 필터를 제공하고 있는데요. 눈에 띄는 건 상세 필터를 바텀시트로 제공, 각 구분을 탭으로 적용했다는 점이에요. 이 경우, 상세 필터 버튼을 선택함과 동시에 대략적으로 어떤 필터가 제공되는지 확인할 수 있으며 원하는 필터를 빠르게 찾을 수 있다는 장점이 있어요. 브랜드 필터의 경우 검색 기능을 제공한다는 점, 필터에서 설정한 값에 따라 검색 결과가 얼마나 되는지 바로 보여주는 점 또한 눈에 띄네요.
1-2. 함께 읽어볼만한 글
2년 전 글이지만, 당근이 중고거래에서의 검색 필터 사용성을 개선하기 위해 어떤 노력을 기울이고 있는지 확인할 수 있는 글이에요!
2. 아몬즈 장바구니
아몬즈는 주얼리를 전문으로 판매하는 버티컬 커머스 플랫폼인데요. 최근 장바구니 내 기능이 업데이트되어 함께 살펴보고자 해요.
(1) 아몬즈는 장바구니 화면 최상단에서 총 결제 금액, 수량, 적립 예정 포인트를 보여주는 점이 인상적이었어요. 장바구니에 담긴 상품 정보에 대한 요약 기능으로서 사용자가 다시 한번 내역 정보를 확인할 수 있도록 하고 있어요.
(2) 이번 업데이트에선 장바구니 내 상품 수량을 변경할 수 있도록 하는 기능이 추가되었어요. 사용자가 직접 수량 옵션을 좀 더 자유롭게 변경할 수 있도록 하기 위함으로 보이는데요. 장바구니 화면 내에서 이렇게 옵션을 변경할 수 있도록 기능을 제공하는 데에는 다시 상품 상세 화면으로 이동해서 상품을 담도록 하는 과정의 불편함을 줄여주고, 중간 과정에서 사용자 이탈을 막음으로써 자연스럽게 구매로 이어질 수 있도록 유도하기 위해서일 것 같아요.
한편으로는 주얼리 상품의 경우 상품 호수, 컬러 등 다양한 옵션 기능이 제공되기 때문에 수량 옵션 외 상품 종류에 대한 옵션 수정 기능도 함께 제공되면 어땠을까 하는 생각도 들었어요.
(3) 또한, 구매 직전 과정에서 사용자가 다시 한번 수량과 가격을 확인할 수 있도록 안내하고 있는 점도 눈에 띄어요. 어떻게 보면 이번 업데이트를 통해 수량 변경 기능이 추가된 점도 연관 지어 볼 수 있을 것 같은데요. 구매 수량으로 인한 이슈가 많았다면 이 문제를 해결하기 위한 부분으로 관련지어 생각해 볼 수 있을 것 같아요.
2-1. 컬리, 올리브영, 오늘의집 장바구니
기타 버티컬 커머스 플랫폼의 사례도 함께 살펴볼게요. (1) 먼저 컬리인데요. 눈에 띄었던 부분은 배송지 선택이 최상단에 노출되던 부분이에요. 컬리의 사례처럼 퀵커머스 서비스를 제공하는 플랫폼의 사용자일 경우 결제한 사람과 배송받는 사람이 다른 경우가 많고 퀵커머스 특성상 결제 후 일정 시점 이후로 취소가 불가능하기 때문에 한번 더 사용자에게 안내하고 있어요. 사용 가능 쿠폰 안내를 통해 특정 금액 이상 결제하도록 유도하는 점도 참고해 볼 만한 것 같아요. 별도 영역에 최종 결제 금액을 보여주는 방식이 아니고 버튼 내 문구로 보여주는 점도 인상적이에요.
(2) 다음은 올리브영 사례를 살펴볼게요. 올리브영은 여러 방식의 배송 서비스를 제공하고 있고 취급되는 상품 수도 다양하기 때문에 배송 방식별로 구분해 조회할 수 있도록 탭으로 구분해 둔 점이 편리하게 느껴졌어요. 또한 장바구니 내에서 기타 다른 옵션으로 상품을 변경할 수 있도록 구성한 점도 눈에 띄어요.
(3) 마지막으로 오늘의집인데요. 주목할만한 부분은 상품별로 옵션을 구분해 리스팅 하고 있는 점이에요. 옵션별로 하나의 상품을 묶어 보여주고 있는데요. 또한 상품 구매처를 각각 명시해 둔 점도 눈에 띄어요. 오늘의집과 같은 플랫폼의 경우 거래 당사자가 아니고 거래를 위한 공간만 제공한다는 점을 다시 한번 안내하고 있어요.
2-2. 함께 읽어볼만한 글
커머스 장바구니에 대한 사례와 분석 내용을 확인할 수 있어요!
3. 솜씨당 상품 상세
취미∙여가 플랫폼 솜씨당의 상품 상세가 업데이트되었어요. 기존 기능들의 위치가 일부 변경되었고, 새로운 기능이 추가되었는데요. UI에 어떤 변화가 있을지 함께 살펴보아요.
이번 업데이트는 기존 기능들의 위치 변경(1~4번)과 새로운 기능 추가(5~6번) 두 가지 포인트로 나눌 수 있어요.
(1, 2) 우측 상단에 ‘찜, 공유하기’ 기능이 위치했었는데요, 업데이트 이후 ‘찜’ 기능은 좌측 하단으로, ‘공유하기’ 기능은 화면의 우측 중앙으로 이동한 것을 볼 수 있습니다.
(3) 클래스의 혜택을 안내하는 배지 영역도 타이틀 하단에서 타이틀 상단으로, (4) 좌측 하단에 위치하던 가격은 타이틀 하단으로 이동한 것을 볼 수 있습니다.
(5) 기존에는 이전 화면으로 이동할 수는 있었지만 ‘홈’으로 이동할 수 있는 기능은 존재하지 않았었는데요. 업데이트 이후에는 우측 상단에 ‘홈’ 버튼을 두어 이동이 편리하게 하였습니다.
(6) 마지막으로 좌측 하단에 ‘선물하기’ 기능이 추가되었는데요, 기존에는 다른 경로를 통해 금액권 선물이 가능했다면, 선물하기 버튼을 상품 상세에 노출하여 해당 기능의 사용을 유도하려는 것으로 보여요.
핸드폰을 사용할 때 엄지손가락으로 대부분의 화면 영역을 사용할 수 있지만, 편하게 사용할 수 있는 영역은 화면의 1/3 정도 영역인데요. 접근이 편리한 곳에 핵심 기능 혹은 강조하고 싶은 기능을 위치시킨 것으로 보여요. ‘찜, 공유하기, 선물하기’ 기능은 접근성이 편리한 곳에, 비교적 덜 사용되는 ‘홈, 채팅’ 기능은 상단에 위치시키고 있죠.
다만 ‘선물하기’ 기능이 상품 상세에 위치하다 보니 마치 해당 상품에만 사용할 수 있는 것처럼 보이는데요, 사실은 상품 제한 없이 사용할 수 있다는 점을 함께 전달할 수 있도록 개선되면 좋을 것 같아요.
3-1. 29CM, W컨셉, SSG.COM
대표적인 온라인 커머스 플랫폼인 29CM, W컨셉, SSG.COM의 상품 상세는 솜씨당의 업데이트 후와 상당히 유사한 구조를 띠고 있어요.
상단에는 홈, 검색, 장바구니 기능을 공통으로 보여주어 상품을 구경하다가 다른 곳으로의 이동을 편리하게 하고 있어요.
가장 클릭하기 쉬운 우측 중앙에는 찜 기능과 공유하기 기능을 보여주고 있어요. 온라인 커머스 플랫폼 특성상 상품을 구경하다가 ‘나중에 사야지!’하고 찜하거나 ‘이거 어때?’하고 공유하는 경우가 많아 가장 편안하고 정확하게 터치할 수 있는 영역에 위치시킨 것으로 보여요.
하단에는 찜, 선물하기, 구매하기 기능을 공통으로 보여주고 있는데요, 사용자가 최종적으로 하는 행위가 구매 혹은 선물일 테니 이를 편리하게 나누어 보여주는 것 같아요.
3-2. 함께 읽어볼만한 글
디바이스별로 테스트를 통해 얻은 터치 영역에 대한 데이터와 그에 따른 인터페이스 설계를 확인할 수 있어요.
💬 팁스터 뉴스레터가 오픈채팅방을 시작했어요!
뉴스레터를 통해 미처 전하지 못한 이야기, 자료 등을 확인하실 수 있어요! (오픈채팅방 참여하기)
#지식토스트