brunch

매거진 UX 디자인의 모든 것

라이킷 83 댓글 1

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Dec 06. 2017

UX 가이드 원칙 #01. 검색 절차 줄이기

전민수의 UX 가이드 칼럼 #02

오늘의 주제는 UX 가이드 첫 번째 모형인 단축성 개념과 하위 속성인 '검색 절차 줄이기'에 대해 얘기하고자 합니다.

아래 사례는 일상생활에서 우리가 많이 접하고 있습니다.

자동 센서가 갖춰진 형광등은 사용자가 형광등의 스위치를 켜지 않아도 자동으로 인식되어 불이 켜집니다.

네이버페이를 미리 정보를 등록해 놓으면 다음번에 번거로운 입력 없이 쉽게 결제를 진행할 수 있습니다.

사이트 내 아이디 저장 비밀번호 저장 후 사이트 접속 시 자동 로그인이 됩니다.

어떤 공통점이 느껴지시나요?

'편하다, 간단하다 등' 떠오르지 않나요?

이처럼 모바일에서 사용자가 자신이 원하는 과업을 간단하게 마무리할 수 있도록 시스템은 이를 지원해줘야 합니다. 이를 UX 디자인 가이드에서는 단축성이라고 합니다.

모바일에 적용된 단축성 하위 속성은 다음과 같습니다.

검색 절차 줄이기
(자동 완성 검색어, 최근 검색어, 연관 검색어, 결과 내 재검색, 무한 스크롤)

페이지 이동 최소화
(팝업 행위 최소화, 조작 기능의 간편성)

폼 입력 절차 줄이기
(커서 자동 이동, 게시물 옵션 선택 편의, 숫자 입력 편의, 디폴트 값 지정, 질의형 인터페이스, 슬라이더)

메뉴/기능 선택의 절차 줄이기
(주요 서비스 모아보기/즐겨찾기 기능)

사용자의 행동 패턴에 맞춰 시스템 지원하기
(반복하는 행동 패턴, 이전에 했던 행위를 기억)

바로가기
(링크, 관련 콘텐츠 바로가기, Shortcut, Context 내비게이션)

연동 및 URL복사
(SNS 공유, URL 복사)

위처럼 단축성 하위 속성이 많은 관계로 오늘 칼럼은 단축성 모형 중 '검색 절차 줄이기'에 대해 설명하고자 합니다.

검색 절차 줄이기

검색 절차 줄이기 원칙 1. 검색 시 초성 검색 기능이 제공되어 입력하는 수고를 덜어줘야 합니다.

검색에서 초성 검색 기능을 이용하면 풀네임 입력하지 않아도 보다 찾고자 하는 키워드가 추천되어 입력하는 절차가 간단해서 편합니다.

다음 검색창에서 에버랜드 키워드 입력 시 풀네임 입력하지 않아도 'ㅇㅂㄹㄷ' 입력만 하더라도 에버랜드 관련 추천 키워드가 제공되어 편합니다.

포탈 검색 외 내가 저장한 주소록에서 친구를 찾는 것이나 채팅방을 검색할 때 초성 검색 기능을 이용하는 것은 사용자에게 타이핑 입력의 수고를 덜어 주는 것입니다. 예를 들면 카톡 채팅 창에 ‘X'을 입력하면 검색창 하단 영역에 ‘X’이 들어간 채팅방이 제공되어 보다 빨리 채팅방에 찾아갈 수 있습니다.

카카오톡. 채팅방에 'X' 키워드 할 경우 UX 관련 채팅방이 검색됩니다

이처럼 초성 검색은 입력의 수고를 덜어주는 효율적인 기능입니다.

검색 절차 줄이기 원칙 2. 자동 완성 검색어 기능이 제공되어 정보 검색 선택의 폭을 넓혀 줘야 합니다.

자동 완성 검색어는 모바일 사용자에게 있어 가장 유용한 기능 중 하나입니다. 사용자가 검색창에서 찾고자 하는 키워드를 다 입력하지 않거나 사용자가 정확하게 단어를 잘 모르더라도 시스템이 사용자가 입력한 현재 입력 상태에 맞춰 시스템이 권장 키워드를 추천해 줘 타이핑 시간을 줄일 수 있어 효율적입니다. 또한, 사용자가 전혀 생각하지 않아도 다양한 관련 키워드가 자동 완성 검색어가 추천되어 키워드 선택의 정확성을 높여 줍니다.

네이버 모바일 웹에서 검색 시 사용성 단어와 관련된 키워드가 추천되어 검색의 편의성을 높여주고 있습니다.

검색 절차 줄이기 원칙 3. 최근 검색어 기능이 제공되어 재검색의 편의를 높여줘야 합니다.

사용자가 어떤 특정 정보를 찾고자 하여 검색창에 단어를 입력하고 검색하려 하는데, 예전에 검색했던 최근 단어들을 시스템이 저장했다가 사용자에게 이를 알려준다면 좀 더 편하게 검색할 수 있을 것입니다. 최근에 어떤 키워드로 검색했는지, 그날은 언제였는지, 풀 네임을 입력하지 않아도 되기 때문입니다.

예를 들어 쿠팡의 경우 검색창 선택 시 바로 하단 영역에 최근 검색어가 보여줘 한눈에 알아보기 편합니다.

검색 절차 줄이기 원칙 4. 사용자가 검색한 내용에 대한 연관 검색어를 제공하여 근접한 다른 정보들에 더욱 쉽게 다가갈 수 있도록 도와줘야 합니다.

연관 검색어는 사용자가 검색한 키워드와 관련하여 다른 사람들이 가장 많이 검색했던 다른 검색어를 추천해줘 검색의 폭을 점점 좁혀 나갈 수가 있습니다. 일반적으로 사용자가 정보를 검색하는 방식은 검색창에서 자동 검색어 선택 > 결과 내 재검색 > 연관 검색어 > 카테고리 검색 > 상세 검색 > 정렬 순 > 상세 페이지 > 관련 정보 페이지로 링크 이동 등 검색의 범위를 줄여나갑니다.

서울시청의 경우 '부동산' 키워드 검색 시 개인 공인중개사, 거래질서, 가격정보 등 연관검색어가 검색창 하단에서 제공됩니다.

검색 절차 줄이기 원칙 5. 검색 결과가 많은 경우 재검색 기능이 제공되어야 합니다.

티몬의 경우 노트북 검색 후 '케으스'와 '15인치' 등 기능을 가진 노트북을 검색해달라고 재검색 옵션이 제공되어 편합니다.

티몬. 상단 검색창 영역에 결과내 재검색 기능이 제공되고 있다

반면, 11번가의 경우 삼성노트북 검색 후 좀 더 검색의 폭을 좁힐 수 있도록 노트북 상품명은 제공되고 있으나, 제품 품목에 맞는 노트북을 찾을 수 있도록 도와주는 옵션이 제공되지 않아 상품 재검색에 어려움이 있습니다.

11번가. 겸색어와 관련된 옵션 재검색 기능이 없다

검색 절차 줄이기 원칙 6. 검색 결과를 빠르게 검색할 수 있도록 편의성을 높입니다

PC 버전의 경우 검색 결과 목록에 페이지네이션이 제공되어 검색 결과를 조회할 수 있도록 편의를 제공하고 있지만, 모바일은 작은 브라우저 화면 내 한정된 정보를 보여줄 수밖에 없어 PC 버전처럼 페이지네이션 형태의 검색 결과를 보여주기는 어렸습니다. 그렇다면 모바일에서 검색 결과를 보다 빠르게 검색할 수 있는 방법은 뭐가 있을까요? 대표적인 사례로 '더보기' 방식과 '무한 스크롤' 방식 등이 있습니다. '더보기' 방식은 버튼을 누르기 전까지는 다음 검색 결과를 보여주지 않습니다. 반면에 '무한 스크롤' 방식은 사용자가 스크롤만 하더라도 시스템이 자동으로 다음 검색 결과를 불러옵니다.

예를 들면 벅스의 경우가 무한 스크롤 방식의 대표적 사례죠. 페이지 하단에서 스크롤할 때마다 시스템이 자동으로 곡을 계속 불러와서 곡 탐색하기 편합니다.

반면, 멜론의 경우 곡 검색 시, 페이지 하단으로 이동하면 'V' 버튼이 생성되는데, 버튼을 누르기 전까지는 시스템이 다음 곡을 불러오지 않아 않아 사용자가 다음 곡을 더 듣기 위해 귀찮게 버튼을 매번 눌러야 하는 번거로움이 있습니다. 음악 어플의 경우 자신의 성향에 맞는 곡을 찾고자 하여 다양한 곡을 검색하는 경우가 많기 때문에 더보기 버튼보다는 무한 스크롤 방식이 더 나을 듯합니다.