실시간 검증, 양호 또는 불량 UX
그림에서 볼 수 있듯이 사용자가 입력을 시작할 때 실시간 확인을 한 가입 양식이 있습니다.
이것이 사용자 경험에 해를 끼치는 지 여부도 알 수 없으며 이러한 종류의 유효성 검사에 대한 리소스도 찾지 못했습니다.
답변
nngroup.com 에서 인용하려면 :
7. 입력이 완료되기 전에 필드의 유효성을 검사하지 마십시오
... 입력을 완료
할 기회가 주어지기 전에 오류 메시지를 보는 것은 성 가실 수 있습니다.
입력이 완료되기 전에 유효성 검사를 시작하면 안됩니다.
사용자가 올바른 값을 입력하기 시작하면 입력하는 동안 오류가 나타나지 않아야합니다. 입력은 다음과 같은 경우 완료된 것으로 간주됩니다.
- 입력 포커스가 손실됩니다 (다른 필드로 이동) 또는
- 양식을 제출 (예 : autosubmit Enter 키를 눌러 경우) 또는
- 일정 시간 동안 입력을받지 못한 후 (예 : 마지막 입력 이벤트 후 3 초).
입력하는 동안 입력 오류를 즉시 표시하는 것은 매우 산만 하며 (입력을 시작할 때 "최소 3 자 이상이어야 함 ") 거의 도움이되지 않습니다.
유효성 검사 오류는 즉시 제거해야합니다.
필드의 유효성이 검사되고 몇 가지 오류가 표시되면 사용자는 필드를 떠나거나 양식을 제출할 때가 아니라 편집 된 값이 정확하자마자 오류가 사라지기를 원합니다 (오류가있는 한 항상 비활성화 됨 표시됨).
다시 더러워 질 때 필드에서 모든 오류를 제거하거나 (그리고 나중에 제출하거나 포커스를 잃었을 때 다시 유효성을 검사하거나) 필드가 변경 될 때마다 자동으로 다시 유효성을 검사하여이를 수행 할 수 있습니다.
사용자가 필드의 요구 사항을 충족 하지 않았을 때 빨간색 유효성 검사 메시지를 계속 표시하는 대신 (1) 사용자에게 예상되는 사항을 알려주는 팁을 표시하고 (2) 다음과 같은 경우 녹색 "요구 사항 충족"메시지를 표시하는 것이 좋습니다. 사용자가 유효한 값을 입력했습니다. 입력이 정상이면 녹색으로 전환 할 수 있습니다.
입력 필드의 유형에 따라 다릅니다.
- 이메일 필드의 경우 :
당신은 너무 불안해하고 싶지 않습니다. 사용자가 이메일 주소 입력을 완료하도록합니다. 사용자가 입력을 시작하는 순간 입력 필드가 오류 텍스트와 함께 빨간색으로 바뀌면 사용자를 성가 시게합니다.
올바른 접근 방식은 사용자가 입력을 완료하고 사용자가 해당 필드에서 포커스를 옮길 때 확인하고 표시되는지 여부를 확인하고 표시하거나 예외 텍스트가있는 경우 예외 텍스트를 throw하는 것입니다.
- 사용자 이름 및 암호 필드 :
사용자 이름 및 암호 필드는 가장 엄격한 입력 요구 사항이 있으므로 제출 전에 유효성을 검사해야합니다. 따라서 사용자가 입력을 시작할 때 허용되는 항목과 허용되지 않는 항목을 실시간으로 명확하게 보여줍니다.
기사 링크 :
https://designmodo.com/ux-form-validation/
https://uxmovement.com/forms/why-users-make-more-errors-with-instant-inline-validation/
불완전한 응답을 올바르게 처리 하면 실시간 유효성 검사가 작동 합니다 .
주어진 예는 "reara"가 이메일 주소를 시작하는 유효한 방법이기 때문에 잘못된 UI입니다. 실시간 유효성 검사가 불완전한 응답을 거부 할 수있는 예는 "reara @@"입니다. 이 경우 실시간 유효성 검사는 완료를 기다리지 않고 거부 할 수 있습니다.
일반적으로 응답을 유효하게 할 수있는 추가 입력이없는 경우 오류 메시지를 표시해야합니다. 이를 감지하는 것이 얼마나 어려운지는 경우에 따라 다릅니다. 사전이 있다면 상당히 쉽습니다. 정규 표현식을 사용하면 덜 그렇습니다.
물론 불완전한 입력의 맥락에서 적절한 좋은 오류 메시지를 갖는 데 도움이됩니다. 예를 들어 "이메일 주소는 정확히 하나의 @ 기호를 포함해야합니다."
예를 들어 특정 필드를 합법적으로 만들기 위해 항상 접미사를 입력 할 수 있기 때문에 불완전한 응답을 처리 할 수없는 경우 다른 답변에서 제안한대로 완전한 입력을 기다려야합니다.
라이브로 확인하는 것이 좋습니다. 그러나 이러한 유효성 검사는 두 경우를 구분해야합니다.
- 끝에 항목을 추가하여 유효하게 만들 수있는 입력
- 마지막에 항목을 추가하여 유효화 할 수 없는 입력 .
후자의 경우 즉시 오류 메시지가 나타나야하며 전자는 입력이 완료 될 때까지 기다려야합니다.
그러나 어떻게 서로 구별 할 수 있습니까?
현재 도구를 고려할 때 약간 까다 롭지 만 고유 한 정규식 엔진 (또는 유효성 검사를위한 다른 종류의 유한 상태 머신)을 작성하는 경우 다음과 같이 수행 할 수 있습니다.
- 엔진이 정규 표현식 (목표 상태) 의 끝에 도달하면 일치하는 것입니다.
- 엔진이 도달하면 문자열의 끝을 ,이 수 후에 일치합니다.
- 엔진이 둘 중 하나에 도달하지 못하면 결코 일치하지 않을 것입니다.
문제는 대부분의 프로그래밍 언어가 문자열 끝에 도달한다는 표시를 제공하지 않는다는 것입니다. 또한 기존 regexp 엔진에 대한 사소한 변경이긴하지만 직접 롤링하는 것은 모든 사용자 인터페이스 디자인 프로젝트의 범위를 벗어납니다.
간단한 대답 나는 그것이 3-4 개의 필드가있는 로그인 페이지 인 경우 사용자가 제출을 클릭 할 때 유효성 검사를 추가하는 것이 완전히 괜찮을 것이라고 생각합니다.
긴 형식의 유효성 검사는 언급 된 필드를 제외한 다른 필드에 입력이있을 때 트리거되어야합니다.
이것은 Javascript에서 가능합니다.
라이브 유효성 검사 문제에 대한 기사를 작성했습니다 .
간단히 말해, 사용자가 답변을 입력하기 전에 너무 일찍 그리고 자주 피드백을 제공하거나 사용자가 답변을 입력하고 다음 질문에 대답하는 다음 필드에 집중하면 너무 늦게 제공합니다.
대신 다음 사항에 집중하십시오.
- 명확하고 간결한 레이블, 힌트 텍스트 및 오류 메시지
- 사소한 실수를 용서하다
- 사용자가 준비되면 양식을 제출하도록합니다.
이렇게하면 사용자는 오류 메시지를 거의 볼 수 없으며 볼 때 오류 메시지가 표시 될 것으로 예상 할 수 있습니다.