적응형 메시지로 검증 오류 개선

Adaptive Messages

이 기사는 Baymard의 허가 아래 게재하고 있습니다.
(2015년 2월 10일의 기사입니다)

❌ 매우 나쁜 예입니다. 잘못된 이유, 수정할 수 있는 방법에 대한 힌트 없이 입력이 잘못되었다는 메시지만 표시됩니다.

이 기사에서는 유효성 검사 오류 메시지의 문구가 사용자의 오류 복구 경험을 어떻게 좌우하는지, 그리고 "적응형 오류 메시지"가 사용자의 오류 복구 시간을 크게 줄이는 것으로 나타난 방법에 대한 사용성 연구 결과를 살펴보겠습니다.

폼 유효성 검사 오류는 불가피한 사항입니다만, 최소화할 수 있습니다(그래야만 합니다).

그러나 유효성 검사 오류는 절대 제거되지 않습니다. 이는 복잡한 양식 및 사용자 데이터 입력의 자연스러운 부분입니다. 핵심은 폼 오류가 발생했을 때 사용자가 쉽게 복구할 수 있냐는 것입니다.

❌ 테스트 중에 유효성 검사 문제를 일으키는 것으로 자주 관찰되는 일반적인 필드에는 전화번호(형식), 상태 텍스트 필드('TX' 대 '텍사스'), 날짜(월 이름 또는 숫자), 금액(소수점 구분 기호, 천 단위, 구분 기호, 통화 등), 신용 카드 번호(공백이 허용됩니까?) 및 주소(주소 입력란 1 또는 2의 번지 번호)등을 포함합니다.

일반 오류 메시지

100개의 주요 전자 상거래 사이트의 체크아웃 프로세스를 벤치마킹했을 때 대부분의 폼 유효성 검사 오류 메시지가 매우 일반적이라는 것을 발견했습니다. 이것은 사용자가 오류가 무엇이며 수정하는 방법을 이해하는 데 도움이 되지 않기 때문에 큰 문제가 됩니다. 일반 오류 메시지는 도움이 되지 않는 것에서 완전히 쓸모없는 것 까지 있습니다. 예를 들어, 벤치마킹 중에 '전화번호' 필드에서 다음과 같은 오류 메시지가 생성되는 것을 보았습니다.

"유효하지 않은 전화번호입니다"

“유효한 미국 전화번호가 아닙니다”   

"유효한 10자리 미국 전화번호가 아닙니다(공백이나 특수 문자를 포함할 수 없음)" 

첫 번째 오류 메시지는 단지 사이트에서 “유효한”것으로 간주하지 않는다고만 명시되어 있어서 입력이 수락되지 않는 이유에 대해 전혀 도움을 제공하지 않기 때문에 최악의 메시지입니다.

두 번째 오류 메시지는 입력이 "유효한 미국 전화번호"가 아니라는 점에서 여전히 매우 나쁜 메시지입니다. 왜 그런 건지에 대한 이유에 대해서 암시하지 않습니다.

세 번째 오류 메시지는 미국 전화번호여야 할 뿐만 아니라 국가 코드, 공백 또는 기타 형식으로 인해 실제로 합법적인 미국 전화번호라도 유효성 검사가 실패할 수 있음을 나타내기 때문에 다른 오류 메시지보다는 낫습니다.

세 번째 오류 메시지가 일반 오류 메시지 중 가장 우수하지만 사용성 테스트를 통해 사용자에게 실제 문제가 무엇인지 보여주지 않기 때문에 여전히 이상적이지 않은 것으로 나타났습니다. 실제 오류가 무엇인지 표시하지 않으면 기본적으로 사용자가 모든 작업을 직접 수행해야 합니다.

❌ 모바일 상거래 테스트 중에 이 피험자는 먼저 전화번호를 입력했지만 유효성 검사 오류를 유발하는 공백을 포함했습니다. 이것이 유효성 검사 오류를 전혀 일으키지 않아야 하지만 오류 메시지 자체는 최소한 문제가 무엇인지 사용자에게 알려야 합니다. 이 경우 피험자는 국가 코드를 추가해야 할 수도 있다고 생각했지만 작동하지 않았습니다(가운데 이미지). 그런 다음 그녀는 국가 코드를 제거했지만 편집하는 동안 실수로 다른 숫자도 제거했습니다. 전화번호는 올바른 형식으로 작성되었지만 9자리만 있었습니다. 이 시점에서 피험자는 세 가지 입력 변형 모두에 대해 정확히 같은 것을 말했기 때문에 더 이상 오류 메시지를 신뢰하지 않았고 사이트에 오류가 있다고 생각하고 구매를 포기했습니다.

오류의 원인이 무엇인지 알아내야 하는 대부분의 시간은 사용자에게 지루할 뿐입니다. 사용성 테스트 동안 피험자는 특히 처음 두 유형의 오류를 수정하기 위해 과도한 시간을 소비하는 것이 관찰되었는데, 이는 세 번째 유형에서도 상당한 어려움을 겪었고 반복적인 유효성 검사 오류로 이어졌습니다. 피험자들 대부분이 몇 번의 시도를 통해 해결할 수 있었음에도 불구하고 분명히 이것은 좋지 않은 사용자 경험을 초래합니다.

그러나 상황이 정말 곤란해지는 경우는 입력이 유효하지 않은 것으로 간주되는 이유가 즉각적으로 명확하게 사용자에게 전해지지 않을 경우입니다. 이것은 사용자가 시행착오를 통해 입력을 수정하는 방법을 효과적으로 추측하도록 강요하거나 구매를 포기하게 만들기 때문에 굉장히 좋지 않은 케이스입니다.

적응형 오류 메시지

✅ 유효성 검사 오류 메시지의 카피라이팅을 최적화할 수 있지만 입력에서 식별된 특정 문제를 사용자에게 경고하기 때문에 일반 오류 메시지보다 몇 광년 앞서 있습니다. 이를 통해 사용자는 문제가 무엇이며 어떻게 해결할 수 있는지 즉시 알 수 있습니다.

사용자에게 실제 유효성 검사 실패를 경고하고 쉽게 수정할 수 있는 방법을 제공하기 때문에 일반 오류 메시지보다 훨씬 우수합니다. 이전 전화 오류 예제로 돌아가면 적응형 오류 메시지가 국가 코드와 함께 전화번호를 제출한 사용자에게 다음과 같이 알릴 수 있습니다. “허용하지 않는 형식입니다. 국가 코드, 공백 또는 특수 문자 없이 10자리 미국 전화번호를 입력하세요.”

사용자에게 유효성 검사가 실패한 이유를 알려주면 훨씬 쉽게 수정할 수 있습니다. 테스트하는 동안 오류 복구 시간 이 크게 향상되는 것을 관찰했으며 , 사용자의 입력 자체가 잘못된 것이 아니라 사이트에서 처리할 수 없는 형식으로 제공했다는 점을 사용자가 안심시키는 데 훨씬 더 큰 도움이 되었을 것입니다.

✅ 단순히 "잘못된 비밀번호" 또는 "비밀번호는 6자리를 포함해야 합니다.."를 읽는 대신 Symantec은 트리거 된 유효성 검사 규칙과 관련된 오류 메시지를 사용자에게 제공합니다. 여기에서 사용자는 이메일을 비밀번호로 입력했으며 이것이 허용되지 않는다는 메시지를 받았습니다. 오류 메시지는 훨씬 명확하고 수정하기 쉽습니다.

✅ 사용자가 필수 필드를 비워두고 폼의 다른 모든 항목을 채우는 경우 해당 정보를 제공하는 것이 불편하기 때문일 가능성이 큽니다. 여기에서 적응형 오류 메시지는 개인 정보 보호에 대한 이 사용자의 우려를 "식별"하고 전화번호가 필요한 이유에 대한 설명을 반환하고 사용자에게 전화번호가 어떻게 그리고 무엇에 사용될 것인지를 전하면서 안심시킵니다.

✅ 사용자에게 일반적인 "신용 카드를 사용할 수 없음" 메시지를 제공하는 대신, Toys'R'Us는 반환된 결제 오류의 일부를 반환합니다. 

지금은 표면상으로는 대부분의 사이트가 이렇게 하지 않는 이유가 어렵기 때문입니다. 그러나 검증 규칙이 이러한 유형의 오류를 식별할 수 있을 정도로 충분히 똑똑하다면 일반적인 오류 메시지를 전달하는 대신 식별된 정확한 문제에 대해 사용자에게 알릴 수 있어야 합니다. 검증 오류는 매우 광범위한 이유(즉, 입력의 내용, 길이, 형식 등)로 인해 발생할 수 있기 때문에 사용자가 입력이 실패한 이유를 정확하게 알려주는 것이 매우 중요합니다.

자, 이제 됐네요.

<적응형 검증 오류>

사용자가 문제의 원인과 해결 방법을 정확하게 알 수 있는 보다 스마트한 상황 인식 오류 메시지.

사용자가 쉽게 복구할 수 있는 훨씬 개선된 검증 오류 경험.

물론 애초에 검증 오류를 피하는 것이 이상적입니다. 검증 오류를 줄이는 가장 쉬운 방법은 일반적인 입력과 형식을 모두 수용하는 것입니다(그리고 백엔드에서 필요한 모든 데이터와 포맷 조화를 수행하는 것입니다). 다른 유용한 전략으로는 적절한 인라인 도움말 제공 및 서식 예제 제공, 필수 및 옵션 필드 표시, 유용한 필드 설명, 가능한 경우 콘텐츠 자동 검색 등이 있습니다. 또한 유효성 검사 경고가 유효성 검사 오류보다 더 의미 있는지도 고려하십시오.