brunch

You can make anything
by writing

C.S.Lewis

by UX DAYS SEOUL May 01. 2022

폼 사용성 : 유효성 체크 vs 경고

UX/UI

항상 UX DAYS SEOUL에 관심을 가져주시고 기사를 읽어 주셔서 감사합니다.
적합한 기사 제공을 위해 구독자 여러분들의 의견을 얻고자 합니다.
잠깐 시간을 내주셔서 답변해주시면 감사드리겠습니다.

예상 소요 시간 : 30초

설문조사 URL

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

폼 유효성 체크와 경고에는 큰 차이가 있습니다. 폼 유효성 검사는 일련의 규칙을 적용하고 사용자가 계속 진행하는 것을 허용하지 않는 반면 경고는 사용자에게 가능한 문제에 대해 경고하지만 계속 진행하도록 허용합니다.

전자 상거래 사이트는 두 가지 전략을 모두 채택할 수 있지만 불행히도 경고를 사용하는 곳이 적다는 것을 알 수 있습니다(64%에 '주소 경고'가 없는 것으로 확인됨). 게다가 구매의 완료로 이어지지 못하도록 지나치게 폼을 차단하는 제한적인 사이트도 자주 관찰할 수 있습니다.

유효성 체크 : 잘못된 이메일! (장애물)

폼 유효성 체크의 문제는 사용자의 진행을 효과적으로 차단한다는 것입니다. 물론 이것이 목적이지만 유효성 체크 규칙이 100% 완벽하게 구현되지 않는 한 의도하지 않은 장애물에 부딪힐 수 있습니다.

❌ 여기에서 이메일 유효성 체크는 '+' 문자가 포함된 모든 입력을 거부합니다. 이것은 이메일 주소에서 흔하지 않은 문자일 수 있지만 확실히 잘못된 것은 아닙니다. 이 유효성 체크는 불행히도 이런 메일을 가진 모든 사용자를 거부하게 됩니다(경고가 더 나은 옵션이었을 것입니다).

사용성 테스트 중에 우리가 관찰하는 가장 일반적인 예중 하나는 체크아웃 프로세스 중 이메일 유효성 체크입니다. 여기에서 비정형(그러나 실제적이고 완전히 유효한) 이메일 주소를 가진 사용자는 지나치게 민감한 이메일 유효성 체크에 의해 차단되어 사용자가 결제를 완료하지 못하게 합니다(단순히 구매를 위해 완전히 새로운 이메일 계정을 생성하지 않는 한).

물론 그렇다고 해서 유효성 체크에 장점이 없는 것은 아닙니다. 예를 들어 필수 필드가 비어 있지 않은지, 숫자 입력이 실제로 숫자이고 날짜가 필수 범위 내에 있는지 확인하는 것이 좋습니다. 여기서 핵심은 이러한 유형의 규칙이 완벽하게 구현될 수 있다는 것입니다. 입력 필드가 비어 있는지, 숫자 입력에 숫자만 포함되어 있는지, 신용 카드가 만료되지 않았는지 확인하는 시스템을 구현하는 것은 호출 없이 모두 가능합니다.

이메일 유효성 체크도 훌륭합니다만 단지 훨씬 더 관대해야 합니다. 왜냐하면 거짓 부정을 유발하지 않고 세심하게 유효성을 체크하기가 극히 어렵기 때문입니다. 이것은 대부분의 개방형 텍스트 입력에 해당됩니다. 예를 들어 '+' 및 '_'와 같은 문자를 포함하면 사용자가 철자가 틀렸음을 나타내는 경우가 많지만 이메일 주소에서는 유효한 문자이므로 해당 문자에 대해 유효성 체크를 호출하면 막혀 있기 때문에 최악의 상황이 될 것입니다. 이메일 주소에 해당 문자가 있는 모든 사용자는 사이트를 사용하지 못하게 됩니다.

따라서 모든 유효성 체크는 사용자를 막는 위험이 없도록 매우 기본적이고 관대해야 합니다.

그러나 엄격한 검증 없이 어떻게 사이트가 최소한의 오타와 오류로 고품질 고객 데이터를 보장할 수 있습니까? 그 정답은 경 고을 제시하는 것입니다.

경고 : 확실합니까? (확인)

폼 경고는 잠재적인 문제에 대해서만 사용자에게 경고하지만 진행을 막지는 않는다는 점에서 유효성 체크와 근본적으로 다릅니다. 따라서 경고는 특정 패턴을 따르는 경향이 있지만 유효성을 체크가 어려운 입력에 있어서 이상적입니다.

그럼 이메일 유효성 체크의 예를 살펴보겠습니다. 가장 기본적인 규칙만 시행되어야 하지만(예: @ 문자 뒤에 도메인이 있는지 확인) 입력된 이메일 주소가 다음과 같은지 여부를 결정하기 위해 일반적인 이메일 패턴의 전체 호스트를 확인할 수 있습니다.

철자가 틀린 경우(예: 흔하지 않은 문자의 포함 또는 일반적인 옵션과 일치하지 않는 최상위 도메인), 그렇다면 사용자에게 입력을 다시 확인하고 올바른지 확인하도록 요청하는 경고가 표시될 수 있습니다. 사용자는 오류 필드 전용 페이지의 확인 필드에 입력을 다시 입력하라는 요청을 받을 수도 있습니다.

⭕️ Walmart는 주소 조회 데이터베이스를 사용하여 인식할 수 없는 주소를 감지하고 이미 알려진 유사한 주소를 제안합니다.

사용자를 방해하지 않고 경고하는 것입니다. 사용자가 원할 경우 진행하지 못하도록 확인합니다.

실제로 사용자는 잘못된 입력의 잠재적인 결과에 대해 경고를 받고 "자신의 위험을 감수하고 진행"하라는 요청을 받을 수도 있습니다.

또한 이메일 주소에 결함이 있거나 전화번호가 잘못된 것 같으면 경고를 설정할 수 있습니다.

⭕️ 타깃은 사용자에게 진행을 거부하는 대신 잠재적으로 문제가 있는 주소를 확인하도록 요청합니다.

모바일 사용성 연구에 따르면 경고는 사용자가 오타, 자동 수정 및 잘못 해석된 필드(콘텍스트 부족으로 인해 발생)로 인해 잘못된 입력을 제공할 가능성이 훨씬 더 높다는 모바일 사이트에서 특히 유용할 수 있습니다.

이상적인 파트너

폼 유효성 체크는 거짓 부정을 생성하지 않고 확인할 수 있는 모든 패턴에 적합하지만 기술적으로 유효하더라도 틀릴 가능성이 있는 데이터를 처리하는 데는 부족합니다. 한편 폼 경고는 흔하지 않은 이메일 주소를 갖고 있거나, 거리 번호가 없는 곳에 거주하거나, 전화가 없는 국가에 거주하는 사용자에게 의도치 않게 뚫을 수 없는 장벽을 만들지 않고 잠재적인 철자 오류와 겉보기에 잘못된 입력을 포착할 수 있는 좋은 방법을 제공합니다.

이것은 체크 및 경고를 이상적인 "파트너"로 만듭니다. 두 가지 기준선을 결합하여 데이터 유효성의 기준선은 체크를 통해 보장할 수 있으며 철자 오류 및 기타 가능한 입력 오류도 경고를 통해 분류할 수 있습니다. 이는 희귀하거나 특이한 데이터로 사용자를 차단하지 않고 신뢰할 수 있는 고품질 고객 입력을 보장하는 것 사이에서 이상적인 균형을 유지합니다.

유효성 체크와 경고를 모두 구현하려면 기술 팀에 약간의 추가 작업이 필요할 수 있지만 매출 증가로 이어지는 결과를 고려하면 납득 가능한 작업이 될 수 있습니다.

keyword