실시간 검증의 문제점과 대신 사용할 수 있는 방법

2009년, 저는 Argos.co.uk에 새로운 디자인의 폼을 구현하는 작업을 맡았습니다. 여러 요구사항 중 하나는 사용자가 각 질문에 답할 때마다 검증하는 것이었습니다. 하지만, 사용자가 입력하는 순간 실시간으로 검증할지, 아니면 입력 필드를 벗어나는 순간에 검증할 지는 명확히 정해지지 않았습니다. 결국, 사용자가 질문에 답하기 전부터 오류 메시지를 보는 상황을 피하기 위해 필드를 벗어나는 순간 검증하는 방향으로 결정했습니다. 실시간 검증을 여러번 구현해본 경험을 토대로 저는 9가지의 문제점을 여러분께 공유하고 싶습니다. 그리고 복잡한 검증 패턴 없이도 폼 입력 오류를 줄일 수 있는 4가지 방법도 같이 공유하도록 하겠습니다.

문제점 #1: 사용자가 답변을 완전히 입력하기 전에 방해할 수 있다

특정 문자 수를 채워야 하는 필드의 경우, 첫 번째 키 입력이 들어오자마자 오류로 간주되어 사용자를 방해할 수 있습니다.
<본문 이미지 참고>

문제점 #2: 질문에 답하는 도중에 사용자를 방해할 수 있다

사용자가 다음 필드로 이동할 때 오류를 표시하면 이전 필드의 오류 때문에 사용자의 주의가 분산될 수 있습니다.

사용자가 이전 필드의 오류를 수정하려고 하면, 다시 아래 필드에서 오류가 발생하게 됩니다.
<본문 이미지 참고>

마찬가지로, 사용자가 비밀번호 관리자(1Password 같은)를 사용하는 경우, 블러 이벤트가 발생하여 오류가 값을 입력하기도 전에 표시될 수 있습니다.

문제점 #3: 페이지가 흔들릴 수 있다

입력 값이 유효하지 않거나 유효할 때마다 오류 메시지가 나타났다, 사라졌다하며 페이지내 내용들의 위치기가 흔들리면서 사용자에게 혼란을 주고, 실수를 유발할 수 있습니다.
<본문 이미지 참고>

문제점 #4: 다중 입력 필드에는 사용할 수 없다

여러번 입력이 필요한 필드의 경우 전체적으로 입력이 끝난 후 전체적으로 검증되어야 합니다. 예를 들어, 최소 하나 이상의 체크박스가 선택되어야 하는 경우, 탭을 이용해 첫번째 체크박스를 넘어 두 번째 체크박스에 포커스가 되었을 때 오류를 표시하기에는 이른감이 있습니다. 마지막 체크박스의 포커스를 벗어나는 후에 검증하는 것도 적절하지 않습니다. 사용자가 단지 옵션을 탐색하거나, 이전 옵션으로 돌아가는 것일 수 있기 때문입니다. 일, 월, 년 입력으로 구성된 날짜 필드에도 똑같이 적용됩니다. 사용자가 특정 순서대로 입력을 하지 않을 수 있기 때문입니다. 만약 특정 순서대로 입력을 하도록 강제한다면 사용자 경험이 더욱 더 나빠질 것입니다. 이러한 유형의 필드는 폼 제출을 할 때 검증할 수 있지만, 이른 다른 실시간으로 검증하는 필드들과 일관되지 않은 행동입니다.
<본문 이미지 참고>

문제점 #5: 유효하지 않은 답변을 유효하다고 착각하게 만들 수 있다

예를 들어, 로그인 인증 여부는 서버에서만 검증할 수 있습니다. 사용자가 올바른 형식의 이메일 주소를 입력하더라도, 해당 이메일 주소에 대한 계정이 존재하지 않을 수 있습니다.

Luke Wroblewsk의 연구에도 유사한 결과가 나왔습니다:

참가자들은 우리가 그들의 우편번호를 정확히 알 수 없다는 것을 알고 있었기 때문에, 녹색 체크 표시가 "실제로 올바른 우편번호"를 의미하지 않는다는 것을 알고 있었습니다. 하지만 여전히 녹색 체크 표시가 단순히 형식이 맞다는 의미인지, 실제로 올바른 우편번호라는 의미인지 혼란스러워 했습니다.

문제점 #6: 서로 다른 필드는 서로 다른 시점에 검증이 필요할 수 있다

일부 숫자만 입력할 수 있는 필드에 문자를 입력하는 경우 사용자가 입력하는 즉시 검증할 수 있습니다. 하지만 다른 필드의 경우에는 입력을 마친 후 검증이 필요할 수 있기 때문에, 이는 또 검증 방식에 일관성이 없어집니다.

문제점 #7: 질문에 답하고 오류를 수정하는 일을 계속 반복하는 것은 피곤하게 만든다

사용자가 질문에 답을 하는 도중에 오류가 표시되면, 사용자는 답변 모드와 오류 수정 모드를 계속적으로 전환해야 하기 때문에 피로감을 느낄 수 있습니다.

문제점 #8: 스크린 리더 알림이 짧은 시간동안 여러번 발생할 수 있다

일부 스크린 리더를 사용하는 사용자는 전체 폼을 탭을 사용해 어떤 내용이 있는지 파악합니다. 그런데 탭 이동 시마다 오류 알림이 발생해 사용자에게 번거로움을 줄 수 있습니다.

문제점 #9: 오류가 나타나도 사용자가 알아차리지 못할 수 있다

많은 사용자들이 입력하는 동안 화면을 보지 않기 때문에, 오류가 나타나도 이를 알아차리지 못할 수 있습니다.

사용자가 불편함 없이 오류를 피할 수 있는 4가지 방법

복잡한 검증 패턴을 사용해 문제를 해결하려다 오히려 더 많은 문제를 일으킬 수 있습니다. 그 대신 다음과 같은 방법을 사용해보세요:

1. 질문을 쉽게 만들어 사용자가 실수하지 않도록 합니다.
2. 페이지당 한 종류의 질문만 포함해 사용자가 질문을 이해하는 데 부담을 덜어줍니다.
3. 약간의 공백 같은 작은 실수는 허용합니다.
4. 사용자가 질문에 답할 충분한 시간을 갖고 제출 시 검증합니다.

이 방법들은 사용자 연구에서 반복적으로 효과가 있는 것을 확인했습니다.