상품 검색을 도와주는 UX 디자인
지그재그, 쿠팡, 배달의민족, 오늘의집 검색 화면 자세히 뜯어보기
사용자는 원하는 상품이 있을 때 탐색을 통해 물건을 찾기도 하고 바로 검색을 통해 상품을 검색하기도 합니다. 검색은 원하는 상품을 빠르게 찾을 수 있도록 도와주는 도구이지만, 유용하게 사용하기는 쉽지 않습니다. 검색 기능이 제대로 결과를 보여주지 못하는 경우도 많고, 사용자들은 예상치 못한 검색어를 입력하기도 합니다. 어려운 검색 기능, 오늘은 4개의 커머스 서비스가 검색어 입력 페이지에서 어떻게 사용자를 도와주고, 어떻게 검색 결과를 보여주는지 자세히 살펴보고자 합니다.
오늘 살펴볼 서비스
패션, 생필품, 음식, 인테리어 등 각 분야에서 여러 물건들을 보여주고 판매하는 서비스 4가지 - 지그재그, 쿠팡, 배달의민족, 오늘의집을 선정하였습니다.
지그재그: 여러 쇼핑몰의 제품을 모아 보여주는 쇼핑 서비스
쿠팡: 다음날 배송인 로켓배송, 신선식품 배송인 로켓프레시로 다양한 제품을 판매하는 커머스 서비스
배달의민족: 맛집 주문부터 마트 상품 배달까지 해주는 배달 서비스
오늘의집: 인테리어 사진을 공유하고 제품 구입까지 가능한 서비스
검색이 하고 싶을 때, 어떻게 이동할까?
상품을 찾고 싶을 때, 어떤 버튼을 통해 검색을 할 수 있을까요? 물건을 판매하는 커머스 앱의 경우 (1) 홈 화면 상단에 원하는 상품을 검색할 수 있도록 검색바를 제공하고, 때로는 (2) 하단 내비게이션을 통해 앱을 사용하는 어느 과정에서든지 상품을 검색할 수 있도록 하고 있습니다.
(1) 홈 화면 상단에 검색어 입력을 유도
쿠팡, 배달의민족, 지그재그, 오늘의집 모두 앱의 첫 시작인 홈 화면에서 검색바를 제공하고 있습니다. 가장 상단에 위치해 상세 상품을 보기 이전 원하는 상품을 검색할 수 있도록 말이죠. 특히 배달의민족에서는 "와플? 핫도그? 마카롱?"과 같이 메뉴 이름을 구체적으로 재미있게 보여주며, 사용자에게 어떤 것을 검색할 수 있는지 알려줍니다.
(2) 하단 내비게이션에 검색 기능을 제공하는 쿠팡, 배민
하단 내비게이션의 탭 바는 엄지 손가락이 닿는 위치인 만큼, 어느 화면에서든지 앱의 중요한 기능으로 빠르게 이동할 수 있도록 도와줍니다. 쿠팡, 배달의민족은 홈 화면뿐만 아니라 하단 내비게이션에서 검색으로 바로 이동할 수 있도록 버튼을 제공합니다.
쿠팡은 로켓프레시, 로켓직구 등 다양한 서비스를 제공하고 있고, 배달의민족은 배달, 포장, B마트 등 물건을 다양한 서비스로 나누어 제공하고 있습니다. 여러 서비스에서 공통적으로 활용할 수 있는 요소들을 하단 내비게이션에 포함하였습니다.
(3) 제품 상세 페이지에서 검색 기능을 제공
네 서비스 모두 상품 상세 페이지에서 검색으로 바로 가는 아이콘을 상단에 제공합니다. 상세 페이지에서는 하단 내비게이션이 보이지 않는 만큼 홈, 장바구니, 검색 바로가기 버튼을 상단에 보여줍니다. 사용자는 홈 화면으로 다시 이동하지 않아도 상품 탐색 중 검색할 수 있습니다.
이런 검색어는 어때요? 검색어 입력 화면
(1) 최근 검색어, 인기 검색어를 보여주는 쿠팡, 배민, 지그재그
각 앱은 검색 아이콘을 누르면, 사용자가 검색어를 입력할 수 있는 페이지를 보여줍니다. 지그재그, 쿠팡, 배민은 상단에는 사용자가 검색한 최근 검색어를, 하단에는 인기 있는 검색어를 보여줍니다.
쿠팡과 배달의민족은 인기 검색어를 순위를 보여주며 제공하고 있는데, 배달의민족에서는 '뭘 먹을까'의 고민을 해소해주는 역할을 하고 있다면, 쿠팡에서는 '다른 사람들은 지금 어떤 물건에 관심이 있을까'를 보여줍니다. 구체적인 상표명을 포함하는 검색어도 있어서, 광고와 같은 느낌을 주기도 합니다. 이에 반해 지그재그는 순위 없이 여러 단어를 나열하여 보여줍니다.
쿠팡은 인기 검색어 위쪽에 '추천 검색어'를 통해 내가 이전에 검색한 물건에 기반해 검색할만한 단어를 추천해줍니다. 최근 검색어가 '과일', '모닝빵'과 같은 먹을거리였다면 추천 검색어에도 '빵', '딸기잼', '계란' 등을 제안합니다. 다른 서비스보다 판매하는 물건의 종류가 많은 만큼, 능동적으로 사용자의 맥락을 파악하고 물건을 제안해 더 빠르게 원하는 쇼핑을 도와준다는 점이 인상적입니다.
(2) 검색보다는 탐색을 유도하는 오늘의집
세 서비스와는 다르게, 오늘의집은 검색 페이지에서 글자를 입력할 수 있는 키보드를 바로 보여주지 않습니다. 대신 카테고리, 공간, 주거형태와 가족형태별 집들이, 추천 키워드를 제안합니다. 사용자가 입력하는 검색어는 다양하고, 그에 따른 결과를 제대로 제공하는 것도 쉽지 않습니다. 대신 보다 정제된 정보를 줄 수 있도록 이미 서비스 내에 분류된 체계를 제공하여 주어진 정보를 탐색할 수 있도록 사용자를 유도합니다.
검색창을 한 번 더 누르면 검색어를 직접 입력할 수 있습니다. 검색하기까지 단계는 한 번 늘어났지만, 사용자에게 더 명확한 결과나 정보를 찾는 것을 우선시한다면 이러한 방법이 더 효율적일 수도 있겠네요.
검색어 자동완성 화면
(1) 과거에 검색했던 단어를 먼저 보여주는 쿠팡, 배달의민족
키보드를 통해 검색어를 입력하기 시작하면, 각 앱은 입력한 단어에 따라 완성된 검색어를 제안합니다. 쿠팡, 배달의민족은 과거에 검색했던 단어를 가장 상단에 보여주고 그 아래에 다른 검색어를 보여줍니다. 오늘의집은 과거에 검색했던 결과를 별도로 표시하지 않고 완성된 검색어들을 차례로 보여줍니다.
쿠팡, 배달의민족은 사용자가 입력한 검색어가 여러 위치에 포함된 결과를 보여줍니다. 예를 들어 '콜라'를 입력하면, '저분자 콜라겐'과 같이 앞에 다른 단어가 붙어 있는 단어까지 제시합니다. 배달의 민족도 '초밥'을 검색하면 '광어초밥'과 같은 단어를 같이 보여줍니다.
(2) 내가 입력한 단어는 흐리게, 읽어야 하는 단어는 진하게
어떤 단어를 강조해서 보여주느냐에서도 차이가 있습니다. 쿠팡, 배민은 사용자가 검색한 단어는 흐린 색으로 보여주고, 주변에 덧붙여지는 단어는 진하게 보여줍니다. 이미 내가 입력한 단어가 아니라, 읽고 파악해야 하는 단어를 더 진한 색, 볼드한 글씨체로 보여주어 빠르게 원하는 단어를 찾을 수 있도록 도와줍니다.
(3) 다양한 결과 유형 미리 보여주기
지그재그는 자동 완성된 검색어를 제안할 때 다양한 유형의 결과를 차례로 보여줍니다. '니트'를 검색해도 '어니트'리는 명칭의 쇼핑몰을 보여주거나 '니트 기획전'같은 이벤트, '니트조끼'와 같은 일반 검색어 단어 순으로요. 검색어에 따라서 보이는 결과가 다르다면, 자동 완성되는 화면에서 미리 유형을 보여주고 사용자가 선택할 수 있도록 도와줄 수 있습니다.
이 정보를 찾으시나요? 검색 결과 화면
(1) 연관 검색어
지그재그, 쿠팡은 검색 결과 가장 상단에 연관 검색어를 보여줍니다. 쿠팡의 경우 이미 입력한 검색어인 '콜라'를 제외하고 전후에 붙여 검색할 수 있는 단어를 보여주지만, '코카'나 '겐' 만으로는 어떤 단어인지 유추하기 어렵습니다. '코카콜라', '콜라겐'과 같이 지그재그와 유사하게 전체 단어를 보여주는 것이 사용자가 단어를 인지하기에 더 용이해 보입니다.
(2) 다른 고객이 많이 구매한 상품, 연관 카테고리를 보여주는 쿠팡
쿠팡은 검색어에 따라 상품을 다양한 형태로 보여줍니다. '다른 고객이 많이 구매한 상품'을 보여주거나, '콜라 찾고 계신가요?'라는 부분을 통해 특정 제품의 광고를 보여주기도 합니다. 상품만을 보여주는 것이 아니라 '연관 카테고리'. '연관 검색어' 등을 통해 다른 상품도 검색할 수 있습니다. 다양한 유형을 통해 사용자가 지루하지 않게 결과 탐색을 도와줍니다.
(3) 서비스에 따라 탭으로 상품을 나누어 보여주는 오늘의집, 배달의민족
배달의민족은 홈 화면에서 '배달', '포장', 'B마트' 등의 다양한 서비스를 제공합니다. 검색 결과도 서비스에 따라서 다르기 때문에, 탭을 이용해 검색 결과를 나눠서 보여줍니다. 오늘의집도 '사진', '집들이', '노하우' 등 다양한 유형의 콘텐츠를 제공하고 있어서, 각 유형에 맞게 탭으로 결과를 나눠서 보여줍니다. 두 앱 모두 '전체', '통합'과 같은 형태로 여러 유형의 결과를 한 페이지에서 요약하고 있습니다.
검색 결과를 더 자세히, 검색 필터
(1) 사용자가 자주 쓰는 정렬은 앞으로
배달의민족, 쿠팡은 사용자가 자주 사용하는 정렬 버튼을 검색 결과 위쪽에 보여줍니다. 배달의민족에서 검색어를 입력한 후 가장 먼저 사용자에게 보여주는 것은 '기본순'이지만, '배민 배달 빠른 순' '배달 팁 낮은 순'을 빠르게 확인할 수 있도록 두 필터를 '기본순' 보다 앞으로 배치했습니다.
쿠팡은 '쿠팡랭킹순' '낮은가격순' '높은가격순' '판매량순'의 정렬 방식을 상단에 보여주고, 나머지 부가적인 검색은 '필터' 버튼을 통해 제공합니다. 보통 배달의민족과 같이 정렬 옆에 바로 '필터' 버튼을 제공하는데요, 쿠팡은 필터 버튼이 정렬 바로 옆에 위치하지 않아, 습관적으로 '판매량순' 옆의 네모 버튼을 누르면 다른 기능이 뜹니다. (네모 버튼은 바둑판식으로 상품을 보여주는 기능입니다)
(2) 카테고리별로 상세한 필터를 제공하는 지그재그
지그재그에서는 카테고리를 고르면 기장이나 핏, 소재, 색상, 가격 등을 세부적으로 조절해 원하는 결과를 볼 수 있습니다. 패션에서는 한 가지 제품에도 다양한 색상이 존재하고, 다양한 가격의 제품이 존재하는 만큼 사용자가 원하는 결과로 좁혀 확인할 수 있도록 배려하였습니다.
지금까지 4가지 커머스 앱이 어떻게 상품 검색을 도와주는지 알아봤습니다. 어떤 제품을 판매하느냐에 따라서, 어떤 서비스를 제공하느냐에 따라서 검색어를 입력하고 결과를 보여주는 방식이 달라집니다. 중요한 것은 사용자가 원하는 결과를 빠르고 정확하게 찾을 수 있는지이니까요.
오늘 앱프리콧의 콘텐츠가 도움이 되셨나요? 다음 글도 더욱 쉽고 알차게 돌아오겠습니다. 또 뵈어요!
By 에디터 Crumble
