프로그레스

아무 표시가 없는 기다림은 고장으로 읽힙니다. 저장 버튼을 눌렀는데 화면이 그대로면 사람은 2초에서 3초 안에 한 번 더 누릅니다. 눌린 것 같지 않으니 다시 누르는 것이고, 그래서 같은 문서가 두 번 저장되거나 같은 결제가 두 번 나갑니다.

더 큰 손실은 사용자가 떠나는 쪽입니다. 파일을 올리는 중인데 화면에 아무것도 없으면 새로고침을 누르고, 그러면 90퍼센트까지 올라간 업로드가 처음부터 다시 시작됩니다. 문의로 들어오는 문장도 정해져 있습니다. 느리다는 말이 아니라 안 된다는 말입니다. 실제로는 되고 있었는데 되고 있다는 신호가 없었던 것입니다.

사람이 기다림을 다르게 느끼는 구간은 대체로 셋으로 봅니다. 0.1초 안에 반응하면 즉시 반응한 것으로 느끼고, 1초 안이면 흐름이 끊기지 않고, 10초를 넘으면 다른 일을 하러 떠납니다. 이 구간마다 필요한 표시가 다르기 때문에 진행을 알리는 요소를 따로 이름 붙여 부품으로 관리하게 됐습니다.

전체 양을 아는지 모르는지로 두 종류가 갈립니다.

1. 총량을 아는 경우에는 막대로 보여 줍니다. 파일 8MB 가운데 3MB를 올렸으면 37퍼센트를 채운 막대를 그립니다. 내보내기처럼 건수가 있는 작업은 퍼센트보다 "100건 중 37건" 이 낫습니다. 남은 양을 사용자가 스스로 계산하지 않아도 되기 때문입니다.
2. 총량을 모르는 경우에는 끝이 없는 회전 표시를 씁니다. 서버가 언제 답할지 모르는 요청이 여기입니다.

고르는 기준은 취향이 아니라 총량을 아는지입니다. 모르는데 막대를 쓰면 90퍼센트에서 한참 멈춰 있는 화면이 나오고, 그것은 아무 표시도 없는 것보다 더 나쁩니다. 사용자가 이 제품의 퍼센트는 믿을 수 없다고 배우고 나면 다음부터는 막대를 보고도 기다리지 않습니다.

기다리는 길이에 따라 얹는 것이 달라집니다.

1. 0.1초 안에 끝나는 작업에는 아무것도 띄우지 않습니다. 회전 표시가 한 프레임 깜빡이고 사라지면 오히려 화면이 튄 것처럼 보입니다.
2. 1초 안이면 버튼 자체로 알립니다. 누른 버튼을 흐리게 하고 글자를 저장 중으로 바꾸는 정도면 두 번 누르는 일이 사라집니다.
3. 1초에서 10초 사이에는 회전 표시나 막대를 띄웁니다.
4. 10초를 넘기면 남은 건수와 함께 취소 버튼을 줍니다. 그리고 사용자가 다른 화면으로 가도 작업이 이어지게 만들고, 끝났을 때 알림으로 알립니다. 10초 넘게 한 화면에 붙잡아 두는 설계는 그 자체가 문제입니다.

규칙 셋이 더 붙습니다. 숫자는 뒤로 가지 않습니다. 60퍼센트에서 40퍼센트로 내려가면 남은 시간을 아무도 믿지 않습니다. 움직임은 멈추지 않습니다. 같은 자리에 30초 멈춰 있는 막대는 고장으로 읽힙니다. 그리고 실패했을 때 막대를 그냥 지우지 않고 어디서 멈췄는지를 남깁니다. 남은 시간을 초로 적을 때는 여유를 두는 편이 낫습니다. 20초라고 적고 35초가 걸리면 그 숫자를 다음부터 아무도 읽지 않습니다.

색만으로 알리지 않는 것도 여기 걸립니다. 접근성 쪽 요구인데, 진행률을 화면 낭독기가 읽을 수 있게 값으로 함께 내보내야 눈으로 막대를 볼 수 없는 사람에게도 전해집니다.

이 부품이 들어가는 자리는 넷입니다.

1. 파일을 올리거나 내려받는 자리입니다. 총량을 알 수 있어서 막대가 맞는 대표적인 경우입니다.
2. 여러 건을 한 번에 처리하는 자리입니다. 문서 200건을 내보내거나 계정 50개를 초대하는 작업이 여기 들어갑니다. 건수로 보여 주면 중간에 몇 건이 실패했는지도 같은 자리에 얹을 수 있습니다.
3. 버튼을 눌러 결과를 기다리는 자리입니다. 저장, 제출, 결제가 여기이고 대개 1초 안팎이라 버튼 안에서 처리합니다.
4. 화면을 처음 불러오는 자리입니다. 다만 이 자리에는 내용이 들어갈 칸을 회색 뼈대로 먼저 보여 주는 스켈레톤 UI가 더 나은 경우가 많습니다. 무엇이 어디에 나타날지 미리 보여 주기 때문입니다. 화면 전체를 도는 표시 하나로 덮어 두면 사용자는 무엇을 기다리는지 모른 채 멈춘 화면을 봅니다.

"이거 4분 걸리는데 도는 표시만 있어요. 남은 건수 보여 줄 수 있나요?"

총량을 아는 작업이니 막대로 바꾸자는 요청입니다.

"퍼센트를 지어내지 말고 그냥 도는 표시로 둡시다."

총량을 모르는 상태에서 만든 숫자는 신뢰를 깎는다는 판단입니다.

"저장 버튼에 아무 반응이 없어서 두 번 눌렸다는 문의입니다."

1초 안쪽 구간에 표시가 빠졌다는 보고입니다.

페이지덱이 문서 내보내기 기능을 낼 때 이 구분을 틀렸다가 고쳤습니다. 처음에는 회전 표시만 띄웠는데, 문서 200건을 내보내는 고객사에서 4분이 걸렸습니다. 문의가 열한 건 들어왔고 전부 같은 말이었습니다. 멈춘 것 같다는 것이었습니다.

민서가 막대로 바꾸고 남은 건수를 함께 띄웠습니다. 태오가 서버에서 진행 상황을 내려 주는 작업을 이틀 붙였고, 같은 4분인데 문의가 그달 한 건으로 줄었습니다. 걸리는 시간은 그대로였습니다.

표시를 넣으면 느린 것이 해결된다고 보는 경우가 많습니다. 문의가 줄어드니 고쳐진 것처럼 보이기 때문입니다. 하지만 줄어든 것은 불안이고 걸리는 시간은 그대로입니다. 4분이 4분인 채로 남아 있으면 그 고객사는 내보내기를 하루에 한 번만 쓰는 쪽으로 습관을 바꿉니다. 표시는 기다리는 동안 떠나지 않게 붙잡아 두는 장치이고, 시간을 줄이는 일은 따로 해야 합니다.

퍼센트를 보여 주는 쪽이 항상 낫다고 보는 것도 흔합니다. 숫자가 있으면 정보가 늘어난 것 같아서 그렇습니다. 하지만 총량을 모르는 상태에서 만든 퍼센트는 지어낸 숫자입니다. 서버 응답을 기다리면서 30퍼센트, 60퍼센트, 90퍼센트를 차례로 올려 두면 90에서 멈춘 채 1분이 갑니다. 그 화면을 한 번 본 사람은 다음부터 막대를 보고도 창을 닫습니다. 모를 때는 모르는 모양으로 보여 주는 편이 낫습니다.