20 . 도움말 텍스트를 숨기지 마세요
도움말 텍스트는 라벨 이상의 지침이나 추가적인 안내입니다. 예를 들어 "비밀번호는 8자리 이상이어야 합니다." 라는 내용입니다. 도움말 텍스트를 사용하고 있다면, 물음표 아이콘이나 툴팁 뒤에 숨기지 말고 화면에 표시하세요.
21. 필수 입력 양식을 명확하게 표시하세요
검증 코드, 전화번호 또는 신용카드 정보와 같은 데이터를 입력할 때, 사용자들은 괄호, 공백, 대시와 같은 텍스트를 포함해야 하는지 불확실 할 수 있습니다. 도움말 텍스트에서 필수 입력 내용을 명확하게 표시하세요. 예를 들어 "카드 번호를 공백 없이 입력하세요." 이렇게 하면 사용자의 판단 부담을 줄이고 인지적 부담을 줄일 수 있습니다.
22. 필수적인 내용을 빠뜨리지 않는 한 짧은 것이 긴 것보다 나은 경우가 많습니다
우리는 이미 언급했지만, 다시 강조해야 합니다. 더 적은 양식 필드가 더 많은 양식 필드보다 선호됩니다. 그러나, 양식이 너무 짧아서 필요한 정보를 수집하지 못하는 것은 역생산적입니다. 알버트 아인슈타인에게 종종 귀속되는 역설적인 속담에서처럼 "가능한 한 단순하게 만들되, 필요한 것만큼은 놓치지 마십시오."
23. 적절한 경우 확인 메시지를 사용하세요
사용자가 "제출" 버튼을 클릭하더라도, 확인 대화 상자를 표시하는 것이 적절할 수 있습니다. 다시 말해, 작업이 중요한 상황이거나 사용자가 입력한 내용을 다시 확인해야 하는 상황(예: 취업 지원서 제출)에서는 적절할 수 있습니다.
24. 성공 상태를 사용하세요
사용자가 양식을 제출한 후, 제출이 성공적으로 이루어졌음을 표시하는 것이 중요합니다. 이를 표시하지 않으면 사용자는 완료감을 느끼지 못할 수 있습니다. 최악의 경우, 중복 주문을 할 수 있으므로 반드시 성공 메시지를 표시해야 합니다.
25. 높은 x-높이를 가진 산세리프 글꼴을 사용하세요
조심스럽게 선택된 새리프 글꼴은 양식에서 잘 작동할 수 있지만, 일반적으로 산세리프 글꼴이 더 안전한 선택입니다. 많은 최신 산세리프 글꼴-예: 로보토, 샌프란시스코, 프록시마 노바-는 화면에서 사용하기 위해 특별히 설계되었습니다. 이러한 글꼴의 중요한 특징은 x-높이가 크다는 것입니다. 이것은 소문자 글자가 상대적으로 크다는 것을 의미합니다.
26. 제출 유효성 검사 대신 인라인 유효성 검사를 사용하세요
사용자의 데이터 입력을 검증할 때, 양식을 제출하거나 다음 화면으로 이동할 때 모든 검증을 수행하는 것보다, 발생하는 즉시 검증하는 것이 좋습니다. 이것은 사용자가 이미 정보를 생각하고 있기 때문에 오류를 처리하는 것이 더 합리적이며, 또한 양식을 제출할 때 오류 메시지를 표시하면 사용자의 진행을 방해하고 오류를 수정하는 대신 사용자가 포기할 가능성이 더 높아질 수 있기 때문입니다.
필요한 경우, 시스템은 사용자가 오류의 정확한 성격을 파악할 수 있도록 도움이 되는 정보를 제공해야합니다. 예를 들어 "그건 충분한 숫자가 아닌 것 같아요." 또는 "당신은 ... 을 의미하셨나요?"와 같이 말이죠.
27 . 필요한 경우가 아니면 캡차를 사용하지 마세요
캡차란 흐릿한 이미지에 표시된 숫자를 입력해야 하는 작은 상자입니다. 캡차는 진행률 완료에 심각한 영향을 미친다는 것이 입증되어 있으므로, 전환율이 중요한 곳에서는 캡차를 사용하지 않아야 합니다.
28 . 인라인 검증을 사용하여 사용자 진행 상황 확인하기
사용자가 진행하고 있는 것을 확인하기 위해 인라인 검증을 사용하세요. 이것은 올바르게 작성된 경우 "확인" 아이콘이 필드 옆에 표시되는 것을 의미할 수 있습니다.
29 . 오류 메시지가 사용자가 오류를 수정할 수 있도록 도와주는지 확인하세요
오류 메시지가 스스로 설명되지 않는다고 가정하지 마세요. 예를 들어, 신용 카드 번호 옆에 "유효하지 않은 데이터"라고 적혀 있으면 사용자가 무엇이 잘못되었는지 알아내기 어렵습니다. 대신, "숫자를 빠뜨리신 것 같습니다"와 같은 메시지를 사용하세요.
30 . 검증이 통과될 때까지 "다음" 또는 "제출" 버튼을 비활성화하세요
이렇게 하면 사용자에게 데이터 입력이 제출 준비가 된 것인지를 명확히 알려줄 수 있습니다.
'UX' 카테고리의 다른 글
UI/UX 디자이너가 잘 잊어버리는 6가지 디자인 포인트 (0) | 2023.08.23 |
---|---|
Ux tips 36 & Best Practices (5) (0) | 2023.08.22 |
Ux tips 36 & Best Practices (3) (0) | 2023.08.22 |
Ux tips 36 & Best Practices (2) (0) | 2023.08.22 |
Ux tips 36 & Best Practices (1) (0) | 2023.08.21 |