이해의 용이성

보이고 눌리는 것까지 맞춰 놓아도 무슨 일이 벌어지는지 알 수 없으면 제품을 쓸 수 없습니다. 가입 화면에서 입력 칸 테두리만 빨갛게 바뀌고 아무 문구도 뜨지 않는 경우가 대표적입니다. 색을 구분하기 어려운 사람에게는 화면에 아무 변화가 없는 것과 같고, 색이 보이는 사람도 무엇이 왜 틀렸는지는 알 수 없습니다.

문서의 언어를 선언하지 않은 화면도 같은 문제를 냅니다. 화면을 소리로 읽어 주는 스크린 리더는 이 값을 보고 발음 규칙을 고르기 때문에, 선언이 빠지면 한국어 문장을 영어 발음으로 읽어 냅니다. 글자는 다 전달됐지만 뜻은 전달되지 않습니다.

그래서 지침은 볼 수 있는지와 조작할 수 있는지에 더해 알아들을 수 있는지를 원칙 하나로 따로 세웠습니다.

이 원칙 아래 항목은 세 갈래로 묶입니다.

1. 읽을 수 있게 만드는 항목입니다. 문서와 문단의 언어를 선언하고, 그 제품 안에서만 통하는 말이나 약어에는 뜻을 붙여 둡니다. 팀 안에서 쓰는 줄임말을 화면에 그대로 내보내면 처음 온 사람과 보조 기술 사용자가 함께 막힙니다.
2. 예측 가능하게 만드는 항목입니다. 같은 기능을 화면마다 같은 자리에 두고, 선택만 했을 때 화면이 저절로 바뀌지 않게 합니다. 목록에서 항목을 고르는 순간 다음 화면으로 넘어가 버리면 키보드로 훑어보는 사람은 지나가기만 해도 화면이 바뀝니다.
3. 입력을 돕는 항목입니다. 무엇을 넣는 칸인지 글로 적고, 오류가 났을 때 어느 칸이 왜 잘못됐는지 문장으로 알립니다. 비밀번호는 8자 이상이어야 한다는 한 줄이 빨간 테두리 하나가 못 하는 일을 합니다. 되돌릴 수 없는 제출에는 보내기 전에 검토하거나 되돌릴 기회를 줍니다.

지켰는지 확인하는 방법은 단순합니다. 화면에서 색과 모양을 빼고 글만 남겼을 때 무엇이 잘못됐고 무엇을 하면 되는지가 전해지는지 봅니다. 전해지지 않으면 그 정보가 색과 위치에만 실려 있었다는 뜻입니다.

"테두리만 빨간색이고 문구가 없어서 이해의 용이성에서 걸립니다."

정보가 색에만 실려 있다는 지적입니다.

"페이지 언어 선언 빠졌습니다. 스크린 리더가 영어로 읽습니다."

읽을 수 있게 만드는 항목이 빠졌다는 보고입니다.

"셀렉트에서 고르는 순간 화면이 넘어가면 안 됩니다. 확인 버튼을 두죠."

예측 가능성 쪽 항목을 지키려는 제안입니다.

페이지덱의 가입 화면이 이 항목에서 걸렸습니다. 비밀번호 칸이 조건에 맞지 않으면 테두리가 빨갛게 바뀌기만 했습니다. 민서가 칸 아래에 조건을 문장으로 적고, 입력하는 동안 어느 조건이 남았는지 보이게 고쳤습니다. 가입 화면에서 비밀번호 때문에 멈추는 비율이 절반으로 줄었고, 이 수정은 색을 구분하지 못하는 사용자만을 위한 것이 아니었습니다.