검색 결과가 없을 때 보여줄 화면
웹사이트 만들기를 하면서 상품 검색을 붙였습니다. “머그컵”을 검색하면 목록이 잘 나옵니다. 그런데 아직 등록하지 않은 상품을 검색하니, 하얀 화면만 남네요. 손님은 상품이 없는 건지 검색이 고장 난 건지 알 수 없습니다.
비어 있는 이유부터 나눠봅니다
처음부터 상품이 하나도 없는 경우, 검색어와 맞는 상품이 없는 경우, 필터 때문에 결과가 사라진 경우는 서로 다릅니다. 정보를 불러오는 중이거나 요청에 실패한 경우도 빈 목록처럼 보일 수 있어요.
같은 “상품이 없습니다”로 처리하면 다음 행동이 어색해집니다. 요청에 실패했는데 상품이 없는 것으로 안내할 수는 없겠죠. 목록 데이터와 함께 현재 상태를 구분해 보여줍니다.
검색 결과가 없다면 검색어를 남겨요
“접시로 검색한 결과가 없습니다”처럼 무엇을 찾았는지 보여줄 수 있습니다. 검색어를 고치거나 전체 상품으로 돌아갈 방법도 함께 둡니다. 사용자가 쓴 검색어를 지워버리면 무엇을 바꿔야 할지 다시 생각해야 하니까요.
필터로 결과가 없어진 상황에는 적용 중인 조건을 보여주고, 조건을 해제할 수 있게 합니다. 아직 상품을 등록하지 않은 관리자에게는 상품 등록으로 안내할 수 있고요. 손님에게 관리자용 등록 버튼을 보여주지는 않습니다.
실패 화면에는 다시 시도할 방법이 필요합니다
검색 요청이 실패했다면 불러오지 못했다는 사실과 재시도 버튼을 보여줍니다. 입력한 검색어와 조건은 남겨두고요. 내부 오류 정보나 비밀 설정값을 손님에게 그대로 출력하지는 않습니다.
확인할 때는 정상 결과, 결과 없음, 필터로 결과 없음, 불러오는 중, 요청 실패를 각각 만들어봅니다. 목록이 나오는 장면 하나만 보는 것보다 빠진 화면을 찾기 쉽습니다.
컴윗에서 검색 화면을 만든다면 상품이 나오는 경우와 안 나오는 경우를 함께 설명해보세요. “검색어를 남겨두고, 결과가 없으면 조건을 고치거나 전체 목록으로 돌아가게 해줘”라는 요청부터 시작할 수 있어요.
