검색 결과 없음 화면은 어떻게 설계해야 할까
먼저 던질 질문
결과가 없다는 사실만 알려주면 충분할까
핵심 관점
검색 결과 없음 화면은 실패 화면이 아니라 탐색을 재구성하는 화면이다. 사용자는 결과가 없다는 사실보다 무엇을 바꾸면 다시 찾을 수 있는지를 알고 싶어 한다.
상태가 잘 읽히는 장면
검색어 오타 가능성을 감지해 비슷한 검색어를 추천한다.
사용자는 입력 실수를 빠르게 고칠 수 있다.
적용된 필터가 많을 때 필터 초기화 버튼을 제공한다.
결과 없음의 원인을 사용자가 바로 확인할 수 있다.
검색 결과 없음 화면은 사용자의 검색 의도가 완전히 끝났다고 단정하지 않고, 조건 수정이나 대체 탐색으로 이어져야 한다.
사용자를 막는 상태
검색 결과가 없습니다만 보여주고 검색창을 다시 찾게 만든다.
사용자는 무엇을 바꿔야 할지 알 수 없다. 이 경우 사용자는 화면의 의도를 스스로 추측해야 한다.
UX가 나빠지는 순간은 대개 사용자가 다음 행동을 알 수 없을 때다.
광범위한 추천 상품만 보여줘 원래 검색 의도와 멀어진다.
상태 피드백 사례와 근거
결과 없음은 탐색 실패가 아니라 다음 검색의 시작이다
Baymard의 검색 UX 연구는 사용자가 제품명뿐 아니라 속성, 문제, 호환성, 주관적 표현으로 검색한다는 점을 보여준다. 결과 없음 화면이 단순히 결과가 없다고만 말하면 사용자는 검색을 고칠 단서를 얻지 못한다.
좋은 결과 없음 화면은 오타 제안, 필터 해제, 더 넓은 카테고리, 인기 검색어, 고객지원 연결처럼 복구 경로를 제공한다. 전자상거래에서는 검색어와 필터가 함께 결과를 없앤 경우가 많으므로 적용된 조건을 함께 보여줘야 한다.
실무 해석
접근성 관점에서는 결과 수 변화가 명확히 전달되어야 한다. 검색 결과 목록이 갱신되었는데 스크린 리더가 변화를 알지 못하면 보조 기술 사용자는 검색이 작동했는지 판단하기 어렵다.
피드백 설계 기준
- 검색어 문제인지 필터 문제인지 분리한다
- 현재 조건을 화면에 남긴다
- 수정, 초기화, 대체 결과 중 가장 적절한 회복 경로를 제공한다
자주 빠지는 함정
추천 결과를 많이 보여주는 것이 항상 도움이 되지는 않는다. 원래 의도와 먼 추천은 탐색을 회복시키기보다 사용자를 다른 길로 밀어낸다.
추가로 비교할 상태
- 범용 검색, 커머스 검색, 문서 검색의 결과 없음 화면을 비교한다
- 필터가 많이 적용된 상태에서 결과 없음이 발생하는 커머스 사례를 본다
- 오타 교정과 추천 검색어가 유용한 사례를 모은다
상태 설계 질문
- 검색어 문제와 필터 문제를 분리했는가
- 대체 결과 추천이 원래 의도를 침범하는 경우를 다뤘는가
출처
- Baymard Institute, Ecommerce Search UX Best Practices: https://baymard.com/blog/ecommerce-search-query-types
- Nielsen Norman Group, 10 Usability Heuristics for User Interface Design: https://www.nngroup.com/articles/ten-usability-heuristics/
- W3C, Web Content Accessibility Guidelines WCAG 2.2: https://www.w3.org/TR/WCAG22/
- MDN Web Docs, ARIA live regions: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions