더 나은 사용자 경험 : 오류를 강조 표시하거나 잘못된 키 입력을 차단합니까?
텍스트 상자에 입력해야 할 정보가 있습니다. 데이터가 구조화되고 일부 시퀀스 만 유효합니다. 예를 들어 전화 번호의 경우 A와 같은 문자는 유효하지 않습니다.
키보드 이벤트를 가로 채고 입력 한 글자가 텍스트 상자에 닿지 않도록해야합니까, 아니면 글자가 허용되지 않는다는 것을 사용자에게 알리기 위해 붉은 구불 구불 한 선 (또는 다른 시각적 신호)을 그려야합니까? 더 나은 사용자 경험은 무엇입니까?
자신의 컴퓨터에 대한 사용자의 제어 권한을 재정의하는 것은 항상 방해가되며 종종 해당 사용자의 워크 플로에 대한 침입으로 인식됩니다. 웹 사이트는 "컴퓨터를 제어해서는 안된다"고해서 그러한 제어를하는 것은 최소한의 경고입니다.
즉, 사용자는 필드 전체를 채우고 제출하기 전에 입력 항목이 유효하지 않다는 사실을 사용자에게 알리는 것이 중요하다는 매우 중요한 주제를 깨뜨 렸습니다.
내가 저 지르지 않았지만 가장 빠른 처리 응답을 제공하는 접근법은 아래의 흐름입니다.
기본적으로 첫 번째 필드를 채울 때까지 기다린 다음 새 필드 (또는 무효화 된 필드)를 클릭/탭할 때 방금 완료된 필드를 확인하십시오. 방금 완료된 필드가 유효하면 옆에 눈에 잘 띄지 않는 "양호한"아이콘을 인쇄하십시오 (녹색, 체크 표시, 행복한 얼굴, 아이디어가 나타납니다). 유효성 검사 규칙에 실패하면 "잘못된"아이콘 (빨간색, "X"등)과 실패한 것에 대한 짧은 줄을 신중하게 인쇄하십시오.
그러나 워크 플로를 중단하지 마십시오.
- 팝업 없음
- 오버레이 없음
이동 한 필드를 모두 마치면 유효하지 않은 필드로 돌아가거나 나중에 다시 이동합니다. 어느 쪽이든, 그들은 편집 할 수 있지만 자신의 시간에 할 수 있음을 알 수 있습니다.
결국 제출하기 전에 완전히 유효한 양식을 갖게됩니다. 즉,
- 한 번만 제출하면됩니다.
- 그들은 제출이 "실패"할 때 화가 나거나 좌절하는 데 시간을 소비하지 않습니다.
- 그들은 당신의 사이트를 더 좋아할 것입니다
- 모두가 케이크를 먹을 것입니다
양식 사용의 양쪽 끝에있는 다음은 내가 선호하는 몇 가지 지침입니다.
- 사용자 입력을 막을 수는 없습니다. 전화 번호 필드에 문자 'A'를 입력하면 'A'가 표시됩니다.
onBlur()이벤트에서 텍스트 필드 유효성 검사를 시작합니다. 이렇게하면 오류 메시지가 표시되기 전에 잘못 입력 된 'A'를 수정할 수 있습니다. 입력 필드에있는 동안 사용자가 오류를 정정 할 수있게하면 눈에 거슬리는 "이봐, 엉망으로, 친구"종류의 메시지가 발생할 가능성이 줄어 듭니다.
입력하는 동안 유효하지 않은 문자를 방지하면 키보드가 제대로 작동하지 않는다고 생각할 수 있습니다. 사용자는 예상대로 작동하는 것을 좋아합니다. 키를 누를 때 특정 문자를 방지하려면 최소한 입력 근처에 동시에 오류 메시지를 표시해야합니다. 이렇게하면 입력하지 않는 이유를 알 수 있습니다.
성가신 문제가 될 수있는 또 다른 방법은 긴 양식을 작성하고 사이트에서 서버 측 유효성 검사를 사용하므로 잘못된 양식을 찾으려면 해당 양식을 다시 살펴 봐야합니다. 클라이언트 쪽 유효성 검사를 주로 사용하고 싶지만 서버쪽으로 돌아갑니다. 입력 할 때 또는 입력에 포커스가없는 경우 오류가 표시됩니다. 그렇게하면 사용자는 문제가 있음을 즉시 알고 문제가 무엇인지 정확히 알고 있습니다.
사용자가 실수를 저지르는 것을 방지하는 것이 원래 생각했던 것보다 항상 10 배 더 어렵다는 것을 알았습니다. 예 : 누군가의 전화 번호는 x2333과 같은 내선 번호를 가질 수 있습니다. 신용 카드에 jQuery 입력 마스크 플러그인 을 사용했는데 제대로 작동했습니다. 가능하면 자동 제안을 사용합니다.
복잡한 시스템의 경우 인라인을 탐지하는 데 비용이 많이 드는 상황이 발생하므로 사실 후에 알려야합니다. 나에게 답은 사례마다 다르며 모든 Edge 사례를 다루어야합니다.
전화 번호 (SSN, 우편 번호 등 ...(must 숫자로 정의해야 함)와 같이 엄격하게 검증 된 필드에만 두 가지 방법을 혼합하여 제안합니다.
각 키 입력을 추적하고 사용자가 유효하지 않은 문자를 입력하면이를 표시하지만 문제가 있음을 즉시 알립니다. 입력 필드를 빨간색으로 바꾸고 필드 오른쪽에 "숫자 만 입력하십시오"가 표시 될 수 있습니다.
차단 입력은 사용자가 잘못 해석 할 수 있기 때문에 아니오입니다. 숫자 입력 상자에 문자를 입력해서는 안된다는 것이 아니라 기계 나 입력 장치에 문제가 있다고 가정 할 수 있습니다.
유효성 검사 after 입력이 완료되면 성 가실 수 있습니다. 특히 비밀번호 작성에 사용되는 것과 같은 필드가 있습니다. 일부 사이트에는 영숫자 만 사용하는 6 자 암호가 필요합니다. 다른 사람은 9 자 암호가 필요하고 모든 문자 (! @ # $ % 등 포함)를 허용합니다. 암호를 입력하고 알아내는 것만 after 입력 한 것은 내가 찾은 가장 성가신 양식이며 실제로 여러 서비스에서 멀어졌습니다.
사용자가 데이터를 입력 할 때 동적 피드백 제공
- 필드에있는 동안 오류가 발생한 필드를 확인하십시오.
- 데이터를 제출하기 전에 입력 오류를 사전에 정정
- 그들이가는 경험에서 배우십시오
세 계정 모두에서 차단 입력이 실패합니다. 텍스트 상자가 채워진 후 강조 표시 오류 강조 표시도 3에서 모두 실패합니다.
경우에 따라 다릅니다. 가능하면 자동 제안을 사용하십시오. 사용자의 입력을 가로 채면 즉각적인 피드백이 중요합니다. 가능한 해결책 중 하나는 키를 가로 챈 직후에 나타나는 "단서"입니다. Windows 로그인 화면에서 볼 수 있습니다. 예를 들어 $ 기호를 누르면 팝업이 나타납니다.
대부분의 것들과 마찬가지로 상황에 따라 다릅니다. 주제에 대해 더 전문적으로 설명합니다. 본인 또는 그룹이 작업하는 대부분의 응용 프로그램은 사실상 기술적 인 것이며 합리적으로 훈련 된 사람 만 사용합니다. 따라서 일반 대중보다 더 많은 책임과 자유를 사용자에게 제공 할 수 있습니다. 간단히 말해서 우리가 사용하는 지침 중 일부는 ...
- 유효하지 않은 항목은 무시하십시오.
- 대조 및 색상 *으로 불가능해야하는 상태 인 유효하지 않은 필드를 나타냅니다.
- 초점은 항상 사용자가 제어합니다. 사용자를 잡거나 초점 변경을 막지 마십시오.
- 모달 경고/오류 상자를 버리지 마십시오. 이제까지.
- 사용자에게 질문하지 마십시오. 소프트웨어는 사람이 아닌 도구입니다. 응 확신 해.
- Enter/Return 키는 항상 다음을 의미합니다. 변경 사항을 수락하고 계속 진행합니다. Enter의 기본값으로 취소/나가기 버튼에 초점을 두어이를 변경하지 마십시오.
- Esc 키는 항상 다음을 의미합니다 : 폐기 및 종료.
- 가능할 때마다 자동 완성 기능을 제공하십시오.
- 최소/최대 제한이있는 숫자에 대한 바로 가기 항목을 제공하십시오. 예 : 유효한 값이 0.12와 100.387 사이이면 999와 같이 100.387보다 큰 항목은 100.387 등으로 간주됩니다.
- 행동에 대해 매우 명확한 흑백 규칙을 설정하십시오. 사용자가 이해할 수있는 규칙. 이것이 지나치게 복잡해지면 다시 생각하십시오.
거의 모든 예제는 사용자가 요청한 것입니다. 그렇습니다. 구현은 때때로 실제 곰/악몽/킬러이지만 거의 불가능합니다.
주의 사항 : 다시 말하면,이 예제는 기술 사용자 기반이있는 수직 시스템의 맥락에서 제공됩니다 .... 웹 일반 공개 양식 등이 아닙니다. 마일리지가 다릅니다.
* 빨간색 제외. 우리의 사업에서 빨간색은 다음과 같은 의미입니다.