빈 상태

시안은 거의 언제나 내용이 채워진 모습으로 그려집니다. 문서 목록 화면이라면 제목이 열두 개 들어간 상태입니다.

그런데 사용자가 처음 만나는 화면은 비어 있습니다. 가입하고 들어온 사람에게는 문서가 하나도 없고, 필터를 좁게 걸어 본 사람에게도 결과가 0건인 순간이 옵니다. 이 자리를 설계하지 않으면 아무것도 없는 흰 화면이 남습니다.

그 화면을 본 사람은 고장 났다고 생각해 새로 고치거나, 무엇을 해야 할지 몰라 그대로 나갑니다. 가입 직후 첫 화면이 "문서가 없습니다" 한 줄뿐인 제품이 첫날 이탈로 사람을 잃는 이유입니다.

비어 있는 이유가 둘이므로 두 종류로 나눠 각각 다른 문구와 다른 버튼을 붙입니다.

첫째는 아직 아무것도 만들지 않은 경우입니다. 새 사용자의 화면이 여기 해당하고, 들어가야 하는 것은 무엇을 만들면 되는지와 그 자리에서 만들 수 있는 버튼입니다. "첫 문서를 만들어 팀과 함께 써 보세요" 와 만들기 버튼이 한 화면에 있으면 다음 동작이 끊기지 않습니다.

둘째는 조건에 맞는 것이 없는 경우입니다. 검색이나 필터 결과가 0건인 화면이고, 들어가야 하는 것은 조건을 어떻게 바꾸면 되는지와 필터를 푸는 버튼입니다.

둘에 같은 문구를 쓰면 한쪽은 반드시 어긋납니다. 문서가 하나도 없는 사람에게 검색어를 바꿔 보라고 하거나, 검색 결과가 0건인 사람에게 첫 문서를 만들어 보라고 하는 화면이 그렇게 나옵니다. 어느 쪽이든 빈 상태 문구는 왜 비어 있는지 한 줄과 다음 행동 하나로 짜는 편이 낫습니다. 권하는 행동을 둘 이상 늘어놓으면 고르는 일이 생겨 아무것도 하지 않게 됩니다.

앞뒤 상태와 겹치지 않게 두는 것도 이 화면의 일입니다. 가져오는 중에 이 화면을 먼저 띄우면 잠깐 없음이 번쩍이므로 로딩 상태를 앞에 둡니다. 실패한 경우에도 이 화면을 쓰면 사용자는 데이터가 없다고 믿고 돌아가지 않습니다.

"빈 상태 시안이 없는데요. 가입 직후 첫 화면이 이겁니다."

새 사용자가 처음 보는 화면이 이 상태라는 점을 짚는 말입니다.

"검색 0건에 첫 문서 만들기 버튼이 떠요. 두 경우를 한 화면으로 쓰고 있습니다."

두 종류를 나누지 않은 탓에 문구가 상황과 어긋났다는 지적입니다.

"여기는 실패인데 빈 상태로 떨어지고 있어요. 다시 시도 버튼이 나와야 합니다."

오류를 빈 상태로 처리하면 사용자가 재시도할 길이 없어진다는 뜻입니다.

페이지덱에서는 민서가 목록 화면마다 빈 상태를 두 벌씩 그립니다. 지현은 그중 새 사용자용 화면만 따로 떼어 첫 주 이탈과 함께 봅니다.