검색 기능 설계 사례모음 by UX BOOTH (번역)

검색 기능 설계 사례모음 by UX BOOTH (번역)

Summary:

원문은 Best Practices for Search에서 확인할 수 있습니다.


검색창은 사용자와 앱 또는 사용자와 웹사이트 사이의 대화와 같다. 사용자는 그들의 요구사항을 검색 쿼리로 표현하고 앱이나 웹사이트는 응답을 일련의 결과 목록으로 표현한다. 사용자는 검색 시 원활한 경험을 기대하며, 서비스의 가치를 한 두가지의 검색결과를 기반으로 판단해버린다.

검색창과 검색결과창 UI를 디자인 할 때 고려해야 할 사항이 많다. 앱 및 웹사이트 유형에 따라 주관적일 수 있지만 몇 가지 일반적인 팁을 알아보자.

검색창으로 고객과 대화하기

전자상거래 사이트는 검색을 활용하는 가장 일반적인 사례다. 대형 이커머스 사이트에서 검색 막대는 페이지 최상단 가운데에 위치하여 UI에서 중심 역할을 한다. 찾는 상품이 명확한 고객들은 접속하자마자 검색창을 찾을 것이고 이들은 방문자의 30% 가까이 된다.

pic1


검색창을 어떻게 넣을까

검색창은 입력 필드와 제출 버튼의 조합으로 구성된다. 이 두 가지는 콘텐츠가 많은 웹 사이트에서 가장 자주 사용되는 디자인 요소 중 하나이므로 사용성이 매우 중요하다. 검색창 디자인에서 가장 중요한 규칙은 쉽게 눈에 띄어야 한다 는 것이다.

검색어 입력 필드를 검색 버튼 혹은 아이콘 뒤에 숨겨놓는다면 부정적인 결과를 낳는다. 열린 입력 텍스트 필드가 없다면 시각적으로 덜 눈에 띈다. 또 사용자가 검색차에 접근하기 위해 입력필드를 로드하는 추가 작업을 수행해야 한다.

pic2

제출 버튼은 돋보기 아이콘을 이용하는 것이 사용자에게 보편적으로 인식된다. 사용자는 돋보기 아이콘을 텍스트 레이블이 없어도 ‘검색’을 의미하는 것으로 생각한다. 이 때 팁은 최대한 단순한 돋보기 아이콘을 넣는 것이다. 그래야 그래픽 정보가 적어 인식 속도가 빨라진다.

pic3



검색창을 어디에 넣을까

검색창 위치를 어디에 둘 것인가도 이슈다. 유튜브, 아마존 등 인기있는 웹사이트는 검색상자를 페이지 상단 중앙이나 오른쪽에 배치하고 있다. A. Dawn Shaikh와 Keisi Lenz의 연구에 따르면 사용자가 가장 편리하게 생각하는 검색 양식의 위치는 오른쪽 상단(17%) 또는 왼쪽 상단(13%)이다. 이 외의 구역에 검색 창을 배치한다면 사용자가 검색창을 찾기 위해 추가적으로 노력해야 함을 의미한다.

pic4



검색어 제안하기

검색 가능한 항목을 명확히 하는 것이 중요하다. 입력 필드에 샘플 검색 쿼리를 포함시켜 사용자가 어떤 쿼리를 사용할 수 있는지 제안하는 것이다. 인지 부하가 생기지 않을 정도의 몇 개 단어로 입력 힌트를 주어 사용자가 무엇을 찾아야 하는지에 대한 단서를 제공하는 것이 좋다.

pic5


검색어 자동추천방식

자동 제안 기능은 데이터 입력을 줄이는 강력한 도구다. 아래 구글의 자동 제안 매커니즘 예시처럼 검색어를 자동으로 추천해주면 사용자가 더 나은 검색어를 명확하게 입력할 수 있다. 사용자의 데이터 입력 속도가 빨라짐은 덤이다.

pic6

단, 자동 제안을 잘못 설계한다면 오히려 사용자를 혼동시킬 수 있음에 유의해야 한다. 맞춤법을 자동으로 교정해주고 사용자가 입력한 단어를 보고 입력 의도를 예측할 수 있도록 설계하여 검색어 제안 도구를 개선해야 한다. 추천 목록이 너무 많으면 UI 균형을 깨진다. 스크롤바를 이용하여 목록 노출도를 줄일 수 있지만 10개 미만으로 추천항목을 표시하는 것이 보다 효율적이다. 텍스트 설명과 함께 추천검색어 항목의 이미지 미리보기를 추가하는 것도 사용자의 검색 편의성 증진에 도움을 준다.

pic7

pic8


검색결과 레이아웃

가장 정확한 검색 결과를 읽기 쉽게 구성하여 제공해야 한다. 검색 결과 페이지는 검색 경험에서 중요한 부분을 차지한다. 사용자의 정보 요구에 적절하게 안내할 수 있는 기회가 되기 때문이다.

사용자가 입력한 검색어는 검색 버튼을 누른 후에도 사라지지 않아야 한다. 원본 텍스트를 유지함으로써 사용자가 원하는 정보를 찾지 못했을 경우에도 약간 수정된 쿼리를 이용하여 재검색할 수 있게 유도할 수 있다. 전체 검색어를 다시 입력할 필요가 없도록 초기 검색어를 남겨두는 것이 좋다.

검색 결과를 표시할 때는 콘텐츠의 유형을 고려하여 레이아웃을 설정한다. 기본적인 레이아웃은 목록보기와 격자보기다. 목록보기는 제품 요약과 같이 사용자가 필요로 하는 정보량을 많이 보여줄 수 있어 제품 간 비교에 용이하다. 모델 번호, 등급 및 치수와 같은 세부 정보로 사용자의 의사 결정을 돕자 할 때 목록보기가 가장 적합하다.

pic9

항목 사이에 제품 정보가 많이 필요하지 않을 땐 격자보기를 이용할 수 있다. 텍스트 설명보다는 제품의 사진 또는 모양이 사용자의 의사결정에 영향을 끼칠 경우, 즉 의류 제품과 같이 시각적 차이가 중요한 변수일 때 유용하다. 목록보기 및 제품 세부 정보 페이지를 반복적으로 전환하는 것 보다는 하나의 긴 페이지를 스크롤하게 하는 것이 좋다.

pic10

이베이처럼 사용자가 목록보기 또는 격자보기를 직접 선택하게 할 수도 있다. 이렇게 하면 사용자가 선호하는 방식으로 결과를 볼 수 있다.

pic11


검색결과없음은 금지

사용자가 결과가 없는 페이지를 만나는 것은 특시 사용자가 여러 번에 걸쳐 검색했을 경우 큰 실망을 줄 가능성이 크다. 결과없음 페이지에 단순히 “일치하는 항목이 없습니다.”(HP 예시)라는 코멘트를 표시하여 좌절감을 주기 보단 다음 2가지 지침을 따라 사용자가 이탈하지 않도록 해야 한다(아마존 예시). 첫 번째는 일치하는 결과가 없다고 분명하게 설명하는 것이다. 두 번째는 대안을 제시하는 것이다. 유사한 카테고리의 대체 제품을 제안하거나 사용자 의도에 맞는 다른 검색어를 제안한다면 사용자의 부정적인 감정을 누그러뜨릴 수 있다.

pic12


필터, 분류옵션 제공

검색 결과가 겉으로 보기에 부적합하거나 결과가 너무 많은 경우 사용자는 당황한다. 이 때 필터링, 정렬 옵션을 주면 사용자가 데이터의 범위를 좁히는 데 도움이 된다. 필터링 기능은 사용자에게 표시되는 내용을 걸러내는 것인 반면 정렬 기능은 표시된 결과의 순서를 많은 판매순, 인기순 등으로 재정렬하는 것이다. 이 두 기능은 동일한 작업이 아니다.

필터링 옵션이 너무 많을 경우 사용자는 압도당한다. 일반적으로 7개 또는 그 이하로 옵션을 제공해야 한다. 또 고객들이 자주 사용하는 필터를 우선순위로 배치하여 사용자가 필터를 파악하는 데 낭비하는 시간을 최소화할 수 있다.

pic13


Good Search is Good UX

검색은 다량의 콘텐츠를 보유한 사이트를 운영하는 데 있어 중요한 요소다. 입력 필드의 적절한 크기, 검색 필드에서 어떤 정보가 표시되는지와 같은 사소한 변경조차도 검색 유용성을 상당히 증가시켜 결과적으로 UX를 향상시킨다. 더 알아보고 싶다면 ola search에서 검색 경험 설계에 대한 세부사항을 점검해보자.


Hyeyeon

A Blog about E-Commerce and Product Management

comments powered by Disqus

    rss facebook twitter github youtube mail spotify instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora