검색 절차 줄이기 UX 디자인 가이드 원칙
UX 디자인 가이드 원칙 배우기
검색 절차 줄이기 원칙 1. 검색 시 입력 절차를 간소화할 수 있도록 초성 검색이 제공되어야 합니다.
가령 PC는 키보드 자판에서 빠르게 타이핑을 하면 되지만 모바일은 글자 하나하나 입력하는 과정이 번거롭습니다. 이를 해소하기 위해 모바일에서 초성 검색이 제공되면 풀네임을 입력하지 않아도 돼 입력 편의성이 높아집니다.
아이폰에서 연락처에서 사람을 빠르게 찾아 연락하고 싶은데 초성 검색이 안됩니다. 바쁜데 풀네임으로 찾고자 하는 사람의 이름을 다쳐야 하는 불편함이 있습니다. 연락처에서 강래경 강사님을 찾고자 하여 'ㄱㄹ ㄱ' 초성 검색을 하였으나 결과 없음으로 나옵니다.
쇼핑몰의 예를 들어 보겠습니다. 쿠팡에서 노트북 검색 시 풀네임을 입력하지 않아도 초성 'ㄴㅌㅂ'만 입력만 해도 노트북 관련 추천 키워드가 제공됩니다. 이처럼 초성 검색 기능은 사용자가 타이핑하는 수고를 덜어주어 입력 편의를 높여 줍니다.
쿠팡: 초성 검색이 지원이 됨반면, 위메프에서 키워드 검색 시 초성 검색 기능이 지원되지 않아 풀네임을 모두 입력해야 하는 불편함이 있습니다.
위메프: 초성 검색이 지원되지 않는다.검색 절차 줄이기 원칙 2. 자동 완성 검색어 기능이 제공되어 검색어 선태의 폭을 넓혀 줘야 합니다.
평소에 물건을 잘 떨어트리고 잊어버리는 어떤 사용자가 에어팟 구매 시 또 에어팟을 잊어버릴까봐 걱정이 됩니다. 그래서 이번에 에어팟 구매 시 고리로 연결되는 스트랩도 함께 구매하고자 합니다. 그런데 에어팟에 연결하는 고리 이름이 생각나지 않는 것입니다. 티몬 검색창에 '에어팟' 치니까 '에어팟 악세사리’가 자동 검색어로 추천되고, 빠른 시간 내에 에어팟 스트랩을 찾을 수가 있어 편합니다.
티몬. 에어팟 키워드 입력 시 자동 검색어가 추천됩니다.이처럼 자동 완성 검색어는 모바일 사용자에게 있어 유용한 기능 중 하나입니다. 사용자가 검색창에서 찾고자 하는 검색어를 모두 입력하지 않거나, 단어를 정확히 몰라도 시스템이 현재 입력한 상태에 맞춰 관련 단어를 추천해줘 핵심 키워드 위주로 상품을 좁혀나갈 수 있기 때문입니다.
더구나, 사용자가 생각지 못한 다양한 관련 단어들이 검색어에 나열되어 검색어 선택의 정확성을 높여주기도 합니다. 마지막으로 자동 완성 검색어는 단어 입력 횟수를 줄여주고, 오타 입력도 최소화하고, 글자 하나 입력할 때마다 관련 단어가 실시간으로 나열되기 때문에 검색어 선택의 편의를 함께 높여줍니다.
만약 자동 검색어가 제공되지 않으면 리스트를 다 훑어봐야 하는 등 상품을 탐색하는데 어려움이 클 것입니다.
예를 들면 이베이 쇼핑의 경우 검색 시 자동완성 검색어 기능이 제공되고 있지 않아 다른 쇼핑몰에 비해 검색 편의성이 떨어집니다. 다른 쇼핑몰처럼 키워드 입력 상황에 맞춰 자동 검색어가 제공되어야 할 것입니다.
이베이 쇼핑: 자동 완성 검색어 기능이 제공되고 있지 않습니다.검색 절차 줄이기 원칙 3. 시스템에서 사용자가 검색한 검색어에 대한 연관 검색어를 제공하여 관련 정보들에 쉽게 다가갈 수 있도록 도와줘야 합니다.
사용자가 검색하였으나 검색 결과에 사용자가 기대한 정보가 없을 경우 연관검색어가 제공된다면, 재검색을 유도할 뿐만 아니라 사용자가 검색한 검색어와 관련하여 다른 사용자들이 가장 많이 검색한 검색어를 추천해줘 검색의 폭을 점점 좁혀 나갈 수 있습니다.
개편 전 옥션은 검색어와 연관 있는 추천 검색어가 제공되지 않아 검색의 편의성이 낮아집니다.
개편 전 옥션. 연관검색어가 없습니다반면, 개편된 옥션의 경우 검색창 바로 아래에 삼성 노트북 등 연관 검색어가 제공되어 검색의 폭을 넓혀 줍니다.
개편된 옥션. 검색 키워드 바로 아래에 연관 검색어가 제공됩니다.검색 절차 줄이기 원칙 4. 최근 검색어 기능이 제공되어 재검색의 편의를 높여줘야 합니다.
상품을 탐색할 때 어떤 경우는 물건을 검색하고 바로 구매하는 경우도 있지만, 어떤 경우는 물건을 검색하고, 또 검색하고 사는 경우가 있습니다. 사용자는 이전에 검색했던 물건의 이름을 일일이 다 기억해서 해당 물건을 다시 찾는 것은 귀찮을 것입니다. 그런데 사용자가 최근에 검색했던 물건을 한 번에 조회할 수 있는 기능이 제공된다면 사용자는 물건을 찾는데 불편함이 최소화됩니다. 이처럼 최근 검색어는 사용자가 검색했던 최근 단어들이 시스템에 기록되어 기록된 검색어를 토대로 재검색이 수월해집니다. 가령, 시간이 촉박하거나 여러 가지 단어로 검색을 하다 보면 이전에 어떤 단어로 검색했는지 기억이 안 날 수가 있는데, 최근 검색어가 제공되면 재 검색의 편의를 높여주기 때문입니다.
예를 들어 쿠팡의 경우 검색창 선택 시 바로 하단 영역에 최근 검색어가 보여줘 한눈에 알아보기 편합니다.
쿠팡. 최근 검색어가 제공되고 있습니다.반면, G마켓은 검색창 하단에 검색어가 제공되고 있으나, 최근 검색어라는 것을 알려주는 타이틀 레이블이 없어 불친절해 보입니다. 보여주는 검색어(삼성, 노트북)가 최근 검색어인지, 인기 검색어인지 불 명확합니다. 물론 바로 얼마 전에 검색한 키워드는 사용자의 머릿속에 인지되어 있어 최근 검색어로 생각할 수 있으나, 몇 개월 만에 방문한 사용자의 경우 이전에 내가 검색한 키워드인지, 연관검색어인지, 인기 검색어인지 바로 인지하기는 어려울 수 있습니다. 사용자의 인지 기억의 부담을 최소화하기 위해서는 '최근 검색어'라는 레이블이 붙여져 있으면 친절성이 더 높아질 것입니다. 또한, 검색창 키패드 영역에 상품 리스트가 있는데 이 또한 타이틀이 없어 최근에 검색했던 상품 목록임에도 불구하고 상품 광고나 인기 검색어처럼 보여집니다. 이 경우도 '최근 본 상품 목록'이라는 타이틀이 제공되어야 할 것입니다.
G마켓. 최근 검색어, 내가 본 상품 목록이라는 타이틀이 없습니다.검색 절차 줄이기 원칙 5. 검색 탐색의 편의성을 높여줘야 합니다.
PC 버전의 경우 검색 결과 목록에서 페이지네이션을 통해 검색 결과를 조회할 수 있지만, 모바일은 작은 화면에서 한정된 정보를 보여줄 수밖에 없어 검색 결과를 보여줄 때 PC 버전처럼 페이지네이션 형태로 결과를 보여주기는 어렵습니다. 그렇다면 모바일에서 검색 결과를 보다 빠르게 검색할 수 있는 방법은 뭐가 있을까요? 대표적인 사례로 '더보기' 방식과 '무한 스크롤' 방식 등이 있습니다. '더보기'는 버튼을 누르기 전까지는 다음 검색 결과를 보여주지 않고, 더보기 버튼을 눌러야 다음 결과를 보여주는 방식입니다. '무한스크롤'은 사용자가 스크롤만 하더라도 시스템이 자동으로 다음 검색 결과를 불러오는 방식입니다.
예를 들면 더보기와 무한스크롤은 음악 앱에서 많이 접할 수 있습니다. 음악 어플의 경우 검색 시 많은 데이터를 불러오므로 'V' 버튼과 같은 더보기 버튼 방식이나 자동으로 데이터를 불러오는 무한 스크롤 방식이 사용됩니다.
벅스의 경우는 무한스크롤 방식의 대표적 사례로 페이지 하단에서 스크롤할 때마다 시스템이 자동으로 곡을 계속 불러와서 곡 탐색하기 편합니다.
반면, '더보기' 버튼 방식의 대표적 사례로 지니가 있습니다. 지니는 '더보기' 버튼 영역에 현재 탐색된 곡이 얼마인지, 앞으로 곡 탐색이 남았는지 숫자로 표식 되어 있어 사용자를 배려하는 친절함이 느껴집니다.
반면, 멜론의 경우 더보기 버튼 방식이 제공되고 있으나 현재까지 몇 곡을 탐색하였고, 앞으로 총 몇 곡이 남았는지 알려주지 않아 답답합니다. '더보기' 버튼만 봐서는 얼마나 눌러야 곡 탐색이 종료되는지 예측할 수 없기 때문입니다.
감사합니다
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성, SK, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
