UI 디자인 가이드 : Search & browsing
검색 결과를 위한 사이트와 컨텐츠 사이트를 디자인할 때 사용자가 '어떤 모드'의 행동을 하려고 하는지를 염두에 두어야 합니다. 사용자는 '검색 모드'을 하려고 하나요? 아니면 '탐색 모드' 작업을 하려고하나요?
이는 사용자 여정(Customer Journey Map) 을 가장 잘 지원하도록 플랫폼을 설계하는 방법을 결정하는 데 도움이 됩니다.
페이지 요약
검색 모드(Search)와 브라우징 모드(Browsing)의 차이
탐색/브라우징이란?
검색이란?
각 모드는 UI에 어떤 영향을 줄까요?
탐색 및 검색 모드가 함께 작동하는 경우?
마무리
참고
1. 검색 모드와 브라우징 모드의 차이
사용자가 검색 창에 무언가를 입력할 때에는 아마도 다음 두 가지 시나리오 중 하나의 이유일 것입니다.
| 시나리오 1 : 사용자가 Google에 "dentist"를 입력합니다. >> Search
| 시나리오 2 : 사용자가 Pinterest에 "bucket list"을 입력합니다. >> Search or Discover
시나리오 1의 사용자는 유용한 결과를 찾고 있으며 질문에 대한 답변을 찾는 것을 원합니다.
'찾는다'는 행동을 하고 있기 때문에 사용자는 결과의 이름과 설명을 보는 경향이 있습니다. 그리고 결과를 비교하기도 합니다. > 검색하는 행위
시나리오 2의 사용자는 자신을 즐겁게 하거나 영감을 얻거나 혹은 단순한 조사를 하는 중입니다. 그들은 '그레이트 배리어 리프'에서 스쿠버 다이빙을 할 수도 있지만(그 때까지 주변에 있다면) 한 가지 답만을 찾고 있지는 않습니다. 그들은 여러 제안을 찾거나 온라인에서 즐거움을 찾고 있습니다. 그들은 '탐색'하고 있습니다.
> 발견을 위한 탐색 행위
TLDR : 검색 행동에는 두 가지 유형이 있습니다. 하나는 목표 중심(검색 모드)이고 다른 하나는 연구 또는 영감 중심(탐색 모드)입니다.
*TL;DR - too long; didn't read, 너무 길어서 읽지 않았다. 생략.. 혹은 요약 정도로 쓰입니다.
| 두 동작의 주요 차이?
검색 모드에서는 '찾고 있고(Search)' , 브라우징 모드에서는 '보고 있습니다(Browsing)'.
검색 모드에서는 특정 정해진 결과를 찾고, 탐색 모드에서는 일반적인 아이디어나 여러 답변을 찾습니다.
검색 모드에서는 작업을 완료하고자 하고, 탐색 모드에서는 영감/오락 또는 더 많은 정보를 찾길 원합니다.
검색 모드에서는 적극적으로 솔루션을 찾고, 탐색 모드에서는 수동적으로 결과를 보고 있습니다.
여기서 이야기하고 싶은 또 다른 것은 이러한 사용자를 "검색자/탐색자"가 아닌 "검색/탐색 모드에 있는 것"으로 지칭한다는 것입니다. 그 이유는 사용자가 이 두 가지 의도 사이에서 어디로든 향할 수 있으며 꼭 둘 중 하나만은 아니라는 점 때문입니다.
2. 브라우징 모드
오프라인에서 만일 당신이 친구와 함께 옷을 사러 갔을 때에 친구가 탈의실에서 옷을 갈아 입고 있는 경우, 당신은 단지 통로 사이를 둘러보고 있을 뿐이겠지만, 점원은 당신에게 혹시 당신이 찾고 있는 것이 무엇인지 물을거고, 당신은 말할겁니. "둘러보는 중이예요." 라고 — 이것이 브라우징 행동의 본질입니다. 특정한 것을 찾는 것과는 대조적으로 그저 자신의 즐거움을 위한 탐색 행위를 하고 있을 뿐인거죠.
그렇다면 이 상황은 온라인 경험으로 어떻게 전환될까요?
사용자는 특정한 것을 찾는 것 뿐 아니라 많은 제안에 열려 있습니다. 아마도 그들의 검색어는 'Ubud, Bali(발리 우붓)'과 같은 특정 단어보다는 '저렴한 휴양지' 와 같은 포괄적 단어에 더 가까울 것입니다.
사용자들은 여러가지 답변이나 제안을 찾고 있을 수도 있고, 그렇지 않을 수도 있습니다.
브라우징 행동의 예:
결혼이 예정되지 않은 상태에서도 Pinterest에서 결혼에 대한 영감들을 살펴보기도 합니다.
온라인 쇼핑에서 '신발'을 보고 있습니다. 하지만 신발이 꼭 필요하다기보다, 할인되는 상품이 무엇인지 보고 싶을 뿐입니다.
뉴스 사이트의 헤드라인을 확인합니다.
Instagram을 탐색하며 친구들이 무엇을 하고 있는지(혹은 하지 않는지) 그리고 좋아하는 브랜드가 무엇을 하고 있는지 근황을 확인합니다.
인도네시아, 태국, 베트남에서 숙박할 곳을 찾고 있으며, 비용이 얼마인지 알아봅니다. 날짜는 정해지지도 않았는데 말이죠.
탐색 행동은 검색 행동보다 훨씬 더 일반적으로 일어납니다. 사용자는 일반적으로 엔터테인먼트 또는 막연한 연구 모임을 찾고 있습니다. 단지 재미(흥미)를 위한 브라우징은 트위터와 인스타그램을 스크롤할 수도 있지만, 아무것도 살 생각 없이 온라인에서 윈도우 쇼핑을 하는 경우도 있습니다.
이처럼 연구 수집은 모호하고 구체적이지 않은 특별한 목적없는 행동일 수도 있습니다.
3. 검색 모드
Google검색의 초기 목표 중 하나는 당시 대부분의 다른 사이트 철학과 달리 '가능한 한 빨리 사용자를 사이트에서 벗어나게' 하는 것이었습니다. Google의 목표는 알고리즘을 매우 정확하게 만들어 사용자가 자신이 찾고 있는 답변을 보기 위해 세 번째 결과를 지나칠 필요가 없도록 하는 것이었습니다.
이것은 검색 모드에 있는 모든 사람의 이상적 상태입니다. "가능한 한 가장 빠른 방법으로 알아야 할 정보를 알려주세요". 사용자는 바로 조치를 취할 수 있거나 최소한 조치를 고려할 수 있을 구체적인 답변을 원합니다.
사용자는 '탐색'보다 '검색'의 사용 빈도가 훨씬 낫습니다. 왜냐하면, 우리는 이러한 종류의 작업을 매일 처리할 필요는 없기 때문입니다.
예를 들어 저는 지난 번 검색 모드에 있었을 때 '어떤 특정한 전구'를 찾고 있었습니다. 집주인이 달아놓은 전구가 별로였거든요. 개인적으로 그 행동은 재미를 위한 경험이 아니었습니다. 생각해 보면 검색 경험의 많은 부분은 재미보다 스트레스가 많은 편이었습니다. 필요에 의한 검색경험이 많았거든요.
휴가를 위한 항공편 검색조차 저에게는 가벼운 스트레스로 다가오는 것처럼요.
검색(sesrch) 행동의 예:
지역에서 잘 진료해주는 치과 의사를 찾고 있습니다.
오래 신던 신발이 망가져서 그걸 대체할 적당한 새 신발을 찾고 있습니다.
정원을 가꿔줄 가드너를 찾고있습니다.
2022년 9월 18일에서 20일 사이에 Ubud에서 머물 곳을 찾고 있습니다. 마을과 너무 가깝지는 않지만 걷기에는 충분해야하고, 요가 스튜디오도 근처에 있었으면 좋겠고, 다른 관광객과 는 조금 거리가 있었으면 좋겠는 곳으로요.
검색과 관련해선 약간의 문제가 있습니다. 사실 우리는 검색을 어려워합니다. 감기 증상을 구글링 해보신 적 있으신가요? 아니면 어떤 다이어트를 해야하는지? 또는 심각한 질병이 있는 경우에는 어떻게 해야하는지 검색하거나요... 우리는 세상에 있는 모든 잘못된 정보와 검색 결과들을 완전히 피할 수 없으며, 원하는 결과를 찾기 위해 무엇을 입력해야하는지 부터 고민하게 됩니다.
결과적으로 아주 적절하며 합법적인 정보만을 찾는 건 정말 어려운 행동입니다.
“그래도 사용 가능한 데이터의 대략적인 추정치는 분명 합니다. 사용자가 검색 전략을 변경하는 경우는 1%에 불과합니다 . 99%의 시간 동안 그들은 흔들리지 않는 단일 경로를 따라 걸었습니다. 실제 수치가 2%이든 0.5%이든 큰 그림의 결론은 동일합니다. 사용자는 웹에서 문제를 해결할 때 매우 부적절한 연구 기술 을 가지고 있다는 것입니다.”
- 사용자의 문제 해결을 억제 하는 무능한 연구 기술의 Jakob Nielsen
행동 비교(Comparing behaviour)
사용자가 무언가를 검색할 때, 그것은 매우 구체적이고 그들이 찾고 있는 것에 대해 여러 계층이 있을 가능성이 있습니다. 단순히 "치과의사"를 말하는 것이 아니라 a) 해당 지역에 있고 b) 토요일에 문을 여는 치과의사를 의미합니다. 사용자가 원하는 것이 무엇인지 명확할수록 검색 요청에 더 많은 레이어가 포함됩니다.
사용자가 찾고 있는 것에 따라 디자인, 위치, 리뷰, 별점 및/또는 브랜드를 비교한 다음 이 모든 것을 가격과 조정해야 할 수도 있습니다. 사용자에게 중요한 것이 무엇인지 알아내는 것은 사용자가 최선의 결정을 내리는데에 도움을 줍니다.
4. 각 모드는 UI에 어떤 영향을 줍니까?
사용자가 검색 모드인지 탐색 모드인지를 확인하면 탐색 및 검색 결과 페이지를 디자인하는 몇 가지 주요 방법을 결정하는 데 도움이 될겁니다.
1) 내비게이션 UI에 어떤 영향을 주나요?
사이트가 탐색이나 검색에 더 중점을 두고 있다는 사실을 알고 있다면, 내비게이션(navigation)은 어떻게 보여야 할까요?
| 탐색만 위한 경우(Browsing only)
: 대표적인 탐색 사이트인 Pinterest에는 다양한 관심 분야를 탐색할 수 있는 카탈로그가 있었지만 이후에는 사라졌습니다. 인스타그램에는 살펴볼 수 있는 카탈로그도 없습니다. 둘 다 해시태그로 잘 지정된 콘텐츠가 많기 때문에 사용자가 가장 관심 있는 주제를 단순히 검색할 수 있도록 하는 것이 합리적이라고 생각한겁니다. 그리고 더 좋은 점은 이러한 플랫폼이 제공되어야 한다는 것입니다. 사용자는 홈 피드에서 아무 작업도 하지 않고도 이러한 관심사에 액세스할 수 있습니다.
이 모드를 설계할 때 다음 사항을 유의하세요.
모든 페이지에서 검색(search bar)을 사용할 수 있는지.
사용자를 돕기 위해 검색(search bar)기능에 자동제안 기능이 있는지.
검색 엔진이 맞춤법 오류를 찾아내고 원하는 결과를 제안할 수 있는지.
고정 메뉴(sticky menu)를 사용하면 탐색 속도가 22% 빨라집니다.(바로가기)
사용자가 상호 작용하는 결과와 비슷한 검색 결과를 함께 표시합니다.(예, 혹시 ooo은 어떠세요?)
| 검색(Searching)과 탐색(browsing)이 모두 지원하는 경우
검색 및 탐색 동작을 지원하는 경우 카탈로그 탐색과 검색 옵션이 있는지 확인하세요.
두 가지 동작을 모두 원활하게 하려면 내비게이션이 더 많은 작업을 수행해야 합니다. 여기에는 다음이 포함될 수 있습니다.
모든 페이지에서 검색(search bar)을 사용할 수 있는지.
검색 속도를 높이기 위해 검색(search bar)에 자동 완성 기능이 있는지.
사용자를 돕기 위해 검색 표시줄에 자동 제안 기능이 있는지.
검색 엔진이 맞춤법 오류를 찾아내고 원하는 결과를 제안할 수 있는지.
탐색 경로(breadcrumbs)를 사용하여 사용자 탐색을 도울 수 있는지.
사용자가 원하는 것을 찾지 못한 경우 유사한 결과를 사용자에게 제안하는지.
분석을 수행하여 사용자가 검색하고 클릭하는 내용을 확인합니다. 이렇게 하면 탐색 및 콘텐츠에서 무엇에 중점을 둘지 결정하는 데 도움이 됩니다.
고정 메뉴(sticky menu)를 사용하면 탐색 속도가 22% 빨라집니다.
카탈로그와 아이템이 제대로 갖추어져 있는지 확인합니다.
2) 각각의 검색 결과(Result list) 항목에 어떤 영향을 줄까요?
사용자가 검색을 클릭하거나 카탈로그로 이동했다고 가정하면 사용자는 무엇을 봐야 할까요?
두 가지 다른 모드의 결과는 어떻게 보여져야 할까요?
|탐색(browsing) 모드
일반적으로 100% 탐색 모드에 있는 사람은 흥미로운 콘텐츠를 찾고 있습니다. 그렇다면 재미있는 것은 무엇일까요? 이미지는 일반적이기도 하지만, 가장 매력적인 헤드라인이기도 합니다. 온라인 쇼핑사이트를 탐색하는 경우 제품 이미지와 가격에 가장 관심이 있을 것입니다.특히 SALE 상품인 경우엔 더욱요.
브라우징 모드를 디자인할 때는 사용자들이 무엇을 보기 위해 사이트에 오는 건지를 결정해야 합니다.
만약 인스타그램의 사진이 작고 설명이 크기의 두 배라고 상상해 보세요. Pinterest가 이미지 아래에 모든 댓글을 표시하거나 또는 커머스사이트에서 이미지 없이 각 항목 옆에 모든 제품 세부 정보를 나열한 경우.
사용자들이 원하는 정보가 무엇인지에 포커스를 둡니다.
TLDR: 사용자가 보고 싶어하는 모든 것에 중점을 둡니다.
| 검색(Serarch) 모드
검색 모드의 사용자는 가능한 한 쉽게 결과를 비교할 수 있어야 합니다.
서비스(의사, 미용사 등)를 찾고 있다면 아마도 위치, 가격 및 Google 평점을 볼 것입니다. 뉴스 기사에 대한 업데이트를 찾고 있다면 날짜와 작성자를 볼 것입니다. 실제 제품을 찾고 있다면 리뷰, 가격, 디자인 등을 볼 겁니다. 이런 것에서 아이디어를 찾을 수 있습니다.
따라서 콘텐츠 검색 결과를 작성할 때 사용자가 결과를 비교할 때 어떤 요소를 먼저 보게할 것인지 구분해야 합니다. 사용자가 두 제품을 나란히 놓고 사양을 검토할 수 있도록 하는 '제품 비교' 구성 요소를 고려할 수도 있습니다. (모바일 계약이나 신용 카드와 같은 서비스에만 권장합니다.)
TLDR: 항목을 더 쉽게 비교할 수 있는 정보를 표시해줍니다.
3) 사용자가 한번 봤던 컨텐츠(or 상품)를 다시 찾을 수 있도록 해줄 것
사용자가 이미 본 콘텐츠를 참조할 수 있는 가장 좋은 방법은 무엇일까요?
그리고 두 가지 동작은 사용자에게 어떻게 도움을 줄까요?
| 브라우징 모드
실제로 브라우징할 때 사용자는 일반적으로 "좋아요"를 클릭하게됩니다.
이 방법은 니중에 해당 컨텐츠를 찾기 위한 행동은 아닙니다. 대신 나중에 읽을 수 있도록 책갈피에 추가할 수 있습니다. 미디엄, 뉴스 사이트, 핀터레스트 등 입니다.
"북마크", "나중에 읽기", "목록에 추가", "저장" 등은 레이블만 다를 뿐 실제로는 모두 유사한 행동을 위한 작업입니다. 이 기능의 이름을 정할 때 사용자 어떻게 이해시키고 행동을 유도할지 고려해야합니다.
| 검색 모드
온라인 쇼핑의 경우에는 "위시리스트 추가(Wishlist)"는 "구매(Checkout)" 버튼만큼 중요한 버튼입니다.
이 방식은 사용자가 나중에 볼 수 있도록 콘텐츠를 저장할 수 있을 뿐아니라, 해당 아이템이 계속 판매 중인 경우 사용자에게 적절한 알림을 줄 수 있어서 사용자를 구매행동으로 유도하는 데 도움을 줍니다.
사용자가 나중에 결과를 비교하는 데 필요한 정보를 가장 잘 표시하기 위해 저장된 항목을 표시하는 방법을 고민하세요. 잘 아용하는 방법중에는 해당 상품이 얼마나 남았는지를 표시하거나, 같은 상품을 보고있는 다른 구매자의 수를 표시하는 방법도 있습니다. 예를 들어 부킹닷컴의 “방이 3개밖에 남지 않았다!” 같이 넛지를 줄 수 있습니다.
5. 브라우징 모드와 검색 모드가 함께 작동하는 방법
앞서 언급했듯이, 검색 및 탐색 모드는 서로 상호작용하는 것으로 보여집니다.
사용자는 Pinterest에서 탐색하다가 태국의 해변을 보고 해변 휴가를 가고 싶다고 결정할 수 있습니다. 그런 다음 다른 목적지를 검색하고 비교한 다음 결국 여행을 예약하게 되겠죠.
인간은 자신이 원하는 것에 관해서는 변덕스럽기로 악명이 높습니다. 그리고 가능한 한 쉽게 결정을 내릴 수 있도록 하는 동시에 작은 "체크아웃" 버튼을 클릭하도록 하는 것이 UX 또는 UI 디자이너로서의 일입니다.
탐색과 검색 사이의 이러한 흐름에서 브라우징 모드는 다양하며 탐색적인 반면, 검색 모드는 사용자가 최종적으로 결정할 때까지 더 수렴적이고, 집중적인 행동으로 나타납니다.
6. 마무리
다양한 정보를 종합하다보니, 사용자들의 이 두 가지 행동에 대한 패턴의 중요성을 알게되었습니다. 그럼 이제 플랫폼을 설계할 때 꼭 이 항목들을 염두해두세요.
7. 참고
Tucker FitzGerald의 '검색자와 브라우저: UX의 성격 유형'
John Ferrara의 '검색 행동 패턴'
Ross Johnson의 '웹사이트 탐색 행동 패턴'
* 원본 자료의 글을 번역 및 가공한 글입니다. 일부 표현은 수정된 내용이 있을 수 있습니다.
