Web Guide빈 화면로딩 화면엠티 스테이트
로딩·빈 화면 (Empty State) 디자인
아무것도 없는 화면을 그냥 비워 두면 고장 난 것처럼 보입니다.
게시물이 없을 때, 검색 결과가 없을 때, 로딩 중일 때. 이 화면들이 사이트의 완성도를 드러냅니다.
01빈 화면이 생기는 순간
새로 만든 사이트는 대부분의 목록이 비어 있습니다. 운영을 시작하면 채워지지만, 오픈 직후에는 빈 화면이 여러 개 있습니다.
또 검색 결과가 없거나, 필터를 걸어 아무것도 안 남거나, 사용자가 아직 아무것도 등록하지 않은 경우에도 생깁니다.
1
오픈 직후
게시판, 사례, 자료실이 비어 있습니다.
2
검색 결과 없음
찾는 것이 없는 경우.
3
필터 결과 없음
조건이 너무 좁은 경우.
4
마이페이지
아직 신청 내역이나 관심 목록이 없는 경우.
5
오류
데이터를 불러오지 못한 경우.
02빈 화면에 무엇을 넣을까
'등록된 게시물이 없습니다'만 있으면 막다른 길입니다. 왜 비었는지 알려주고 다음에 무엇을 할 수 있는지 제시해야 합니다.
상황마다 적절한 안내가 다릅니다.
오픈 직후 빈 목록'곧 콘텐츠가 등록될 예정입니다' + 다른 메뉴 안내
검색 결과 없음검색어 확인 안내 + 추천 검색어 + 문의 버튼
필터 결과 없음'조건에 맞는 항목이 없습니다' + 필터 해제 버튼
마이페이지 빈 목록'아직 신청 내역이 없습니다' + 신청하러 가기 버튼
오류'일시적인 문제입니다' + 다시 시도 버튼 + 연락처
03로딩 중에도 무언가 보여준다
데이터를 불러오는 동안 빈 화면이면 방문자는 고장 났다고 생각합니다. 무언가 진행되고 있음을 보여줘야 합니다.
회전하는 표시보다 실제 레이아웃 모양의 회색 블록을 보여주는 방식이 체감 속도가 빠릅니다.
빈 화면 또는 회전 표시
무엇이 나올지 알 수 없음 · 기다리는 느낌이 큼 · 오래 걸리면 고장으로 오해
레이아웃 모양 블록
곧 무엇이 나올지 예상됨 · 체감 속도가 빠름 · 화면이 갑자기 튀지 않음
04작은 배려가 인상을 만든다
빈 화면과 로딩 화면은 대충 만들어도 기능에는 문제가 없습니다. 그래서 자주 생략됩니다.
그런데 이런 화면이 잘 만들어져 있으면 '꼼꼼하게 만든 사이트'라는 인상을 줍니다. 비용 대비 효과가 큰 부분입니다.
화면설계서에 포함 빈 화면과 로딩 화면을 문서에 정의합니다. 없으면 개발자 임의 처리.
일관된 스타일 모든 빈 화면이 같은 형식이면 완성도가 올라갑니다.
간단한 그래픽 아이콘이나 일러스트 하나로 충분합니다. 과하지 않게.
항상 다음 행동 어떤 빈 화면이든 버튼이나 링크를 하나 둡니다.
CHECK POINT
□ 화면설계서에 빈 화면이 정의되어 있는가
□ 각 빈 화면에 상황에 맞는 안내가 있는가
□ 빈 화면에 다음 행동 버튼이 있는가
□ 필터 결과가 없을 때 해제 버튼이 있는가
□ 로딩 중에 진행 표시가 있는가
□ 레이아웃 모양 블록 방식을 검토했는가
□ 모든 빈 화면의 스타일이 일관된가
#빈 화면#로딩 화면#엠티 스테이트#스켈레톤 UI#예외 처리#사용성#화면설계서#홈페이지 디자인#웹비스타#홈페이지 제작