brunch

You can make anything
by writing

C.S.Lewis

by Mino Mar 09. 2022

검색과 탐색 UX의 차이점

오늘은 웹툰이 아닌 공통적인 UX 디자인에 대해 이야기하고자 합니다.
콘텐츠 서비스를 디자인하다보면 검색과 탐색에 대한 고민을 안 할 수가 없습니다.

새로운 기능을 검색에 넣어야할지 탐색에 넣어야할지 기준이 명확하다면 우리가 의도한 사용자 경험을 정확하게 구현하는데 도움이 될 것 같아서 이렇게 정리해 봅니다.


검색과 탐색의 근본적인 차이점

검색과 탐색을 구분하는 가장 결정적인 차이점은 사용자가 구체적으로 원하는 정보가 있는지에 대한 여부 입니다.


사용자가 구체적으로 원하는 정보가 있다면 그 사용자에겐 검색이 필요하고,

사용자가 뭔가 원하는 정보가 있지만 추상적이라면 그 사용에겐 필요한 건 탐색이 되겠죠.


배달 서비스를 예로들면,

저녁 메뉴로 '갈릭치킨'이 먹고 싶은 사용자에게는 검색 기능을 제공하는 것이 중요할 것이고,

저녁 메뉴로 '뭘 먹을까?' 고민하는 사용자에게는 어떤 메뉴들이 있는지 탐색 기능을 제공하는 것이 중요한 것처럼요.


그럼 각 검색과 탐색 경험에 영향을 미치는 요소들을 살펴보도록 할까요?




검색 기능을 제작할 때 고려해야하는 요소들    

  

검색하려는 정보에 대한 이해도

모든 검색 사용자들이 본인이 검색하려고 했던 정보를 정확히 기억하지는 못 합니다.

영화 '신비한 동물들과 그린델왈드의 범죄'라는 제목을 정확하게 기억하는 사용자가 있겠지만 영화제목을 '일부'만 기억하는 사용자도 있을 수 있고 영화의 이미지는 알겠는데 영화제목을 '전혀' 모르는 사용자도 있을 수 있습니다. 그래서 검색 페이지를 기획할 때는 위의 예시처럼 정보를 정확하게 아는 사용자부터 정보를 잘 모르는 사용자까지 고려해서 설계해야합니다. 이런 맥락에서 '추천 검색어'는 검색 정보를 잘 모르는 사용자들에게 무엇을 검색하면 될 지, 어떤 검색결과를 얻을 수 있는지 힌트를 주어서 도움이 될 수 있습니다.


검색어 입력에 대한 난이도

영화 '옥자' 처럼 검색어를 입력하기 쉬운 정보도 있지만  '신비한 동물들과 그린델왈드의 범죄'처럼 검색어를 입력하기가 어려운 정보도 있습니다. 이 과정에서 사용자는 본인이 입력하려는 검색어에 대해서 깊이 생각하는 인터랙션 비용을 사용하거나, 오타 같은 실수로 어려움을 겪을 수 있습니다. 그 과정에서 잘못된 검색 결과가 나온다면 사용자는 바로 서비스를 이탈할 확률이 높고요. 이런 맥락에서 자동완성 검색, 오타수정 등의 기능은 사용자들이 검색어 입력과정에서 얻는 스트레스를 줄여주고 정확한 검색결과를 얻는데 도움이 될 수 있습니다.   


검색결과 페이지 내에서의 탐색능력  

사용자가 원하는 검색결과가 딱 1개만 나오면 아주 이상적이겠지만 대부분의 검색결과는 2개 이상 나오는 경우가 많습니다. 이 경우 사용자는 많은 검색결과 중에서도 자신이 원하는 정보와 연관성이 많은 정보를 찾아내는데 많은 인터랙션 비용을 사용합니다. 텍스트 정보 읽기, 이미지 정보 파악하기, 다른 아이템 정보와 비교하기, 내가 원하는 정보와 일치하는기 고민하기, 다음 화면으로 스크롤하기 등 모든 것이 검색결과 내에서 필요한 인터랙션 비용입니다. 이런맥락에서 필터, 정렬 기능은 사용자가 원하는 정보를 탐색하는데 필요한 인터랙션 비용을 줄일 수 있습니다.  


검색 기능의 접근성  

사용자가 앱에 진입한 후 어디서 검색할 수 있는지 빠르게 인지하는 것도 중요합니다. 다양한 앱 서비스를 사용해 본 사용자라면 대부분의 검색 기능이 어디에 위치했는지 학습이 되어있겠지만 앱 사용이 익숙하지 않은 사용자라면 앱 어디에서 검색을 할 수 있는지 파악하는데 어려움을 겪을 수도 있습니다. 닐슨노먼그룹에 의하면 검색기능 디자인에는 어느정도 일반화된 패턴이 있다고 합니다. 돋보기 아이콘을 네비게이션 오른쪽 상단에넣는 것이 대표적인 패턴인데요. 이것 이외에도 사용자들이 빠르게 검색 기능을 찾을 수 있도록 설계를 한다면 사용자의 검색 사용률이 더 오를 것 입니다.




탐색 기능을 제작할 때 고려해야하는 사용자 특징


탐색정보에 대한 이해도  

원하는 정보를 가진 채 플로우가 시작되는 검색 사용자와는 다르게 탐색 사용자들은 본인이 사용 중인 서비스가 무엇인지, 본인이 어떤 정보를 원하는지 모르는 경우가 많습니다. 이런 상태에서 사용자들은 우리 앱정보구조가 어떤 메뉴들로 구성되어있는지 파악해야하고, 본인이 현재 앱에서 어디에 있으며 원하는 메뉴로 어떻게 이동해야하는지까지도 파악을 해야합니다. 탐색 사용자들은 앱에 진입하자마자 해당 앱에 대해서 학습해야할게 많습니다. 이런 어려움을 줄이기 위해서 탐색경험은 직관적이고 예상하기 쉽게 만드는 것이 매우 중요합니다. 이런 맥락에서 직관적인 네비게이션 디자인, 간결하고 명확한 IA 정보구조 설계, 서비스 사용자들의 심성모형 파악 그리고 서비스가 속한 업계의 UX 패턴을 최대한 활용하는 것은 탐색 경험초반의 학습내용을 줄이는데 큰 도움이 될 수 있습니다.


정보 인지능력  

우리의 뇌는 정보를 인지할 때 두 가지 모드로 인지합니다. 첫번째는 정보를 빠르게 반사적으로 인지하는 시스템 1 모드 (ex: 2X5 = 10), 두번째는 정보를 오랫동안 깊게 생각하여 인지하는 시스템 2 모드(ex: 36X87 = ??? ) 이렇게 2가지인데요. 사용자들이 서비스 안에서 정보를 탐색할 때는 최대한 시스템 1모드만 사용할 수 있도록 설계해야합니다. 생각을 깊이 생각하는 것은 많은 인터랙션 비용을 요구하기 때문입니다. 실제로 닐슨노먼그룹의 연구에 의하면 정보 파악하는데 오랫동안 심사숙고 할수록 사용자들은 해당정보를 경계하고 의심한다고 하는데요, 이는 구매전환률에 좋은 현상이 아닙니다. 이런 맥락에서 명확하고 쉬운 ux writing, 명확한 정보의 위계 그리고 가독성 높은 UI 디자인 등은 사용자들이 정보를 깊이 생각하지않고 파악하는데 도움이 될 수 있습니다.  


탐색정보와 사용자 니즈의 연관성

사용자들은 서비스를 탐색하면서 발견하는 정보들이 자신이 원하는 것과 연관이 있는지 항상 판단합니다. 그리고 특정 정보가 자신이 원하는 것과 관련이 있다고 판단할 때에만 스크롤이나 페이지 이동 등의 추가 탐색을 합니다. 그렇다고 사용자를 붙잡기 위해서 거짓 정보나 애매한 표현을 사용해서는 안 됩니다. 자세한 정보를 얻기 위해서 이동한 페이지에 사용자가 기대한 정보가 없거나 잘못된 정보가 있을 경우 사용자는 그 즉시 서비스를 이탈하고 두 번 다시 방문하지 않을 확률이 높기 때문입니다. 탐색과정에서 사용자에게 신뢰를 주었을 때 추가탐색과 재방문이 일어날 것입니다. 이런 맥락에서 이전에 언급한 명확하고 쉬운 ux writing, 추가탐색 페이지에 대한 간략한 설명 제공 혹은 썸네일 이미지 제공 등은 해당정보가 사용자 자신이 원하는 것과 연관이 있는지 판단하는데 도움이 될 수 있습니다.   


노출하는 정보의 양  

앱 페이지 내에서 정보를 얼마나 보여줄지도 사용자가 직관적인 탐색을 하는데 중요합니다. 다양한 카테고리의 정보를 보여줘야하는 페이지의 경우, 각 카테고리 별로 썸네일 이미지와 자세한 설명을 함께 제공하는 방법이 있고 혹은 각 카테고리 메뉴만 보여주고 자세한 내용은 하위 메뉴에서 제공하는 방법도 있는데요, 첫 번째 방법을 쓰면 사용자가 카테고리 하나의 정보를 빠르게 파악할 수 있지만 나머지 카테고리들의 정보까지 파악하기 위해서는 스크롤 같은 추가 인터랙션 비용이 들 수 있습니다. 반면에 두 번째 방법을 쓰면 사용자가 카테고리 하나의 정보를 파악하는데 시간은 걸려도 이 서비스에서 어떤 카테고리들의 정보를 제공하는지 스크롤 없이 파악이 가능합니다. 사이트 맵처럼 말이죠.

게다가 정보를 노출하는 기기의 스크린 사이즈도 노출하는 정보의 양에 영향을 미칩니다. 같은 정보의 양이라도 사이즈가 작은 모바일 스크린에서는 정보의 양이 많아 보이지만 사이즈가 큰 데스크탑 모니터에서는 정보의 양이 적게 느껴질 수 있죠.

이렇듯 정보의 양을 얼만큼 보여줄 것인지 그리고 다양한 스크린에서는 어떻게 대응할지에 대한 결정은 사용자가 우리 서비스에서 정보를 빠르게 탐색하는데 영향을 미칩니다. 이런 맥락에서 페이지에서 제공하는 정보의 목적정의, 사용자 심성모형과 일치하는 카테고리 정보의 구조설계 그리고 기기별 스크린에 적합한 정보의 양 파악은 사용자가 부담없는 양의 정보를 빠르게 탐색하는데 도움이 됩니다.  




이제까지 검색과 탐색 UX 설계에서 고려해야하는 요소들을 알아봤습니다.

마지막으로 간단하게 정리하자면 아래의 두 줄로 요약할 수 있을 것 같습니다.


무엇을 원하는지 명확하게 알고 있는 검색 사용자들에겐 원하는 정보로 이동할 수 있는 '숏컷'을 제공하고,

무엇을 원하는지 모르는 탐색 사용자들에겐 잠재된 니즈를 깨달을 수 있는 '큐레이션'을 제공하자


위와 관련되서 다른 의견이 있다면 언제나 환영입니다. 더 좋은 글로 다음에 찾아봽겠습니다. 감사합니다!


*퍼블리에서 위 내용을 넷플릭스와 스포티파이의 예시를 들어 이해하기 더 쉽게 설명했습니다. 관심있으신 분들은 아래의 글도 읽어보세요 :)


넷플릭스와 스포티파이로 알아보는 검색과 탐색 ux 비교분석



[ 참고자료 ]


1. Search Is Not Enough: Synergy Between Navigation and Search. (2014, September 7). Nielsen Norman Group. https://www.nngroup.com/articles/search-not-enough/


2. The State of Ecommerce Search. (2018, June 24). Nielsen Norman Group. https://www.nngroup.com/articles/state-ecommerce-search/?lm=search-box-vs-navigation&pt=youtubevideo


3. Site Search Suggestions. (2018, May 20). Nielsen Norman Group. https://www.nngroup.com/articles/site-search-suggestions/?lm=search-box-vs-navigation&pt=youtubevideo


4. Is Navigation Useful?. (2000, January 8). Nielsen Norman Group. https://www.nngroup.com/articles/is-navigation-useful/


5. Four Dangerous Navigation Approaches that Can Increase Cognitive Strain. (2013, September 28). Nielsen Norman Group. https://www.nngroup.com/articles/navigation-cognitive-strain/


6. No More Pogo Sticking: Protect Users from Wasted Clicks. (2015, April 12). Nielsen Norman Group. https://www.nngroup.com/articles/pogo-sticking/


7. Navigation: You Are Here. (2015, October 25). Nielsen Norman Group. https://www.nngroup.com/articles/navigation-you-are-here/


8. Flat vs. Deep Website Hierarchies. (2013, November 10). Nielsen Norman Group. https://www.nngroup.com/articles/flat-vs-deep-hierarchy/


9. Mobile Navigation: Image Grids or Text Lists?. (2014, March 30). Nielsen Norman Group. https://www.nngroup.com/articles/image-vs-list-mobile-navigation/


10. Information Scent. (2020, Nov 27). Nielsen Norman Group. https://www.nngroup.com/videos/information-scent/


11. Do People Scroll? What Information Foraging Says (2019, Jul 27). Nielsen Norman Group.  https://www.youtube.com/watch?v=-0VkrTNSNgg

작가의 이전글 마블 코믹스 앱이 한국 웹툰에 시사하는 3가지 인사이트

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari