[UX/UI 디자인 패턴] 검색 화면의 종류

검색

사용자가 원하는 정보를 빠르게 찾을 수 있도록 키워드로 정보를 찾는 방법

💡 좋은 검색 화면이란?
키워드에 대해 사용자가 원하는 결과를 보여줄 수 없을 때는 다른 행동을 할 수 있도록 유도. 추천 콘텐츠를 보여주거나, 다른 키워드로 검색을 유도할 수 있습니다. 자동 완성 기능을 사용해 오타를 방지하고 연관된 내용을 함께 찾을 수 있도록 도와준다. 

 

검색 화면의 종류

 

유튜브, 구글, 네이버, 이마트몰

1️⃣ 기본 검색 화면

• • 제품에서 차지하는 검색의 중요도에 따라 검색 기능의 위계가 다른 것에 주목해 보자.
    - 유튜브는 검색을 바로 시작하는 것보다는 추천 컨텐츠를 보고 바로 탐색을 시작하는 게 더 중요한 제품 그래서 검색 버튼이 아이콘으로만 되어 있다. 그에 반면 구글이나 네이버는 '검색이 가장 핵심 기능'이기 때문에 홈화면 전면에 검색바를 두고 있다.
    - 이마트몰은 50:50 또는 30:70 정도로 비중을 가져가고 있다라고도 볼 수 있다. 왜냐하면 이 상품을 찾는 이커머스는 검색으로 찾는 것도 중요하고 제시된 리스트를 통해서 상품을 찾는 것도 중요하기 때문이다. 원하는 상품이 뚜렷한 사용자는 바로 검색을 할 수 있도록 검색바를 제공하고 있다. 그렇기 때문에 유튜브 보다는 조금 더 보이는 형태의 검색바를 사용하고 있다. 
    ✅ 이러한 위계의 차이가 있다는 것을 잘 알고 있자!
    
  • 돋보기 모양의 아이콘으로만 배치한 제품도 있지만, 화면에서 검색창을 아주 크게 전면에 표시한 제품도 있다.

오늘의집, 지그재그, 마이리얼트립

2️⃣  연관 상품 추천 / 연관 검색어 노출

네이버, 당근, 인스타그램

2️⃣  연관 상품 추천 / 연관 검색어 노출

• 검색 화면에서는 키워드 검색을 넘어 전반적인 정보의 탐색이 이뤄지는 공간.
• 탐색을 돕기 위한 요소에는 무엇이 있는지 살펴보기 
  - 연관 상품 추천 : 내가 어떤 상품을 검색하러 들어왔지만 생각하지 않고 바로 카테고리 별로 아니면 공간 별, 추천 키워들 별로, 다시 상품을 탐색할 수 있도록 도움
  - 지그재그 처럼 검색을 하지 않고 바로 최근 사용자가 본 것들을 다시 들어갈 수 있도록 게시
  - (이렇게 검색과 탐색이 함께 이루어질 수 있도록 화면을 구성하는 검색의 디자인 패턴을 참고하고 학습하자)
  - 사용자가 검색을 할 때 연관 키워드를 제시 → 정확한 글자가 떠오르지 않거나 실수로 사용자가 오타를 입력했을 때에도 정확한 정보로 다시 갈 수 있는 길을 제시해 줄 수 있다. (사용성을 높이는 검색 디자인 패턴)
  
  
  

무신사, 배달의민족,지그재그

3️⃣  Empty view: 검색 결과가 없을 때

• 사용자에게 결과를 보여줄 수 없을 때 빈 화면을 어떻게 채울지 고민하기.
• 추천 혹은 베스트 상품으로 이어지는 행동을 유도하는 것도 방법.
• 유저의 행동이 멈추는 것이 아니라 이어지도록, 다른 행동을 할 수 있도록 유도해 주는 것이 좋다.
• 무신사 : 추천 상품을 보여주며 '지금 당신이 검색한 결과로는 상품이 나오지 않았다'라는 것을 안내하고 혹시나 품절된 상품이어서 검색이 되지 않을 수도 있으니 이런 것들을 해보라고 여러 가지 옵션을 제공해주고 있다.
• 배민 : 빈 화면을 그냥 두는 게 아니라 재밌는 그래픽을 사용해서 '브랜드 아이덴티티'를 보여주고 있다. '다른 검색어를 입력해 보세요'라고 행동을 유도하고 있다.
• 다른 제품들은 어떻게 Empty view를 채우고 있는지 레퍼런스를 학습하면 사용성을 높이는 데 도움 됨