오류 상태

실패는 반드시 생기는데 실패했을 때의 화면은 자주 빠집니다. 잘 되는 경우만 그려 놓으면 실패한 순간에 화면은 아무 말도 하지 않습니다.

페이지덱에서 문서 목록을 불러오는 요청이 몇 분 동안 실패한 적이 있습니다. 목록이 있던 자리는 그냥 비어 있었고 그 외에는 아무것도 없었습니다. 그 사이에 들어온 문의 열한 건 중 아홉 건이 문서가 다 사라졌다는 내용이었습니다. 데이터는 그대로 있었고 목록을 가져오지 못했을 뿐인데, 화면이 그 차이를 말해 주지 않아 사용자는 최악을 가정했습니다. 그 뒤로 실패한 상태의 화면을 따로 그려 두게 됐습니다.

세 가지를 한 화면에 담아야 이 상태가 제 역할을 합니다. 무엇이 실패했는지, 왜 그런지, 지금 무엇을 하면 되는지입니다.

1. 실패한 대상을 좁혀 말합니다. 문제가 발생했습니다라는 문장은 셋 중 하나도 알려 주지 않습니다. 문서 목록을 불러오지 못했습니다가 그 자리에 들어갈 문장입니다.
2. 원인은 사용자가 고칠 수 있는 것과 그렇지 않은 것으로 나눠 씁니다. 파일이 20메가를 넘은 것은 고칠 수 있고 서버 문제는 그렇지 않습니다. 뒤엣것에 사용자의 할 일을 적으면 애먼 곳을 고치게 됩니다.
3. 다음 행동을 버튼으로 둡니다. 다시 시도가 가장 흔하고, 그것으로 안 되면 문의로 가는 길을 함께 둡니다. 이 버튼이 있는 화면과 없는 화면은 같은 장애에서 문의 건수가 다릅니다.
4. 자리는 실패한 범위에 맞춥니다. 화면 전체가 실패하면 화면 가운데에, 목록 중 한 항목만 실패했으면 그 줄에, 입력값이 문제면 그 입력칸 바로 아래에 붙입니다.
5. 사용자가 쓰던 것을 지우지 않습니다. 저장에 실패했을 때 작성하던 내용을 비워 버리면 실패가 손실로 바뀝니다.
6. 색만으로 표시하지 않습니다. 빨간 테두리만 두르면 그 색을 구분하지 못하는 사람에게는 표시가 없는 화면입니다. 문구를 함께 씁니다.

"여기 오류 상태가 없어서 실패하면 빈 화면이 됩니다."

실패한 경우의 화면이 설계에서 빠졌다는 지적입니다.

"문제가 발생했습니다 말고 무엇이 실패했는지 적어 주세요."

문장이 대상을 좁혀 주지 않아 사용자가 다음 행동을 고를 수 없다는 뜻입니다.

"이건 오류가 아니라 결과가 0건인 거라 빈 상태로 가야 합니다."

실패와 내용 없음을 구분해 다른 화면으로 다루자는 말입니다.

태오가 장애 뒤에 목록 화면의 상태를 로딩 상태와 0건과 실패 셋으로 나눠 붙였습니다. 민서가 실패 화면에 넣은 것은 문장 한 줄과 버튼 하나였고, 문장에는 목록을 불러오지 못했다는 사실과 데이터는 그대로 있다는 사실을 함께 적었습니다. 두 달 뒤 같은 요청이 다시 실패했을 때 들어온 문의는 두 건이었고, 둘 다 문서가 사라졌다는 내용이 아니었습니다.