디자이너 맥신, 성장일기

검색

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

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

검색 화면의 종류

1️⃣ 기본 검색 화면

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

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

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

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

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

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

로딩

로딩은 앱이나 웹에서 화면이 그려지는 동안 사용자가 잠깐 기다려야 할 때 보여주는 화면

💡 좋은 로딩 화면이란?
가능한 한 빨리 콘텐츠를 표시. 콘텐츠를 로드 중이고 완료하는 데 시간이 얼마나 걸릴지 명확하게 전달. 로딩 시간이 불가피하게 길어지면 사람들이 기다리는 동안 볼 수 있는 내용을 제공하는 것이 좋음

로딩의 종류

1️⃣  스피너 아이콘 혹은 애니메이션 활용 

• 데이터를 서버에서 불러오거나, 반대로 데이터를 보낼 때 앱과 사용자와의 상호작용을 돕는다.
• 연속적인 움직임을 통해 시스템이 정보를 처리하고 있음을 사용자에게 알려준다.
• 움직이는 모션이나 애니메이션은 로딩 지속 시간에 대한 사용자의 인식을 낮춰 기다리는 시간을 짧게 느끼게 한다.

2️⃣  프로그레스 바

• (상단 내비게이션이나 타이틀 아래에 붙어서) 현재 상황을 시각적으로 파악할 수 있는 로딩 바.
• 진행 상황을 유저에게 알려 주어야 하는 케이스에서 사용.

3️⃣  스켈레톤 

• 스켈레톤은 불러오는 화면의 빈 버전으로, 화면에서 가장 먼저 노출되어 사용자가 실제 페이지를 예측할 수 있도록 함.
• 단, 스켈레톤이 실제 화면의 로드를 방해하는 주객전도의 상황이 생기지 않도록 주의. 가능한 가장 단순한 모습의 회색 박스를 사용하여 불러오는 페이지를 예측할 수 있는 형태로 표현하는 것이 좋다.