좌절감을 줄이는 오류 메시지를 디자인하는 방법
사람들이 복구할 수 있는 오류 상태를 설계하는 방법: 유용성 연구를 기반으로 배치, 타이밍, 표현, 입력 보존, 접근성 및 동작.
핵심 포인트
좋은 오류 메시지는 문제 옆에 표시되며 일반 언어로 작성되어 문제 해결 방법을 알려주고 사용자가 이미 입력한 내용을 유지하며 절대로 비난하지 않습니다. 아직 입력 중이 아닌, 필드 작업을 완료하거나 제출할 때 이를 표시하고 화면 판독기가 이를 알리도록 하세요.
지침
Nielsen Norman Group는 효과적인 오류 메시지를 가시성이 높고 건설적이며 사용자 노력을 존중하는 것으로 요약합니다. 실제로 이는 다음을 의미합니다.
- 문제가 있는 필드나 요소 옆에 메시지를 배치하세요.
- "잘못된 입력"이 아닌 "이 숫자는 한 자리가 부족합니다."와 같이 명확하고 구체적인 언어를 사용하세요.
- 수정 사항 제공: 어떤 형식이 예상되는지, 다음에 무엇을 시도할지.
- 사람들이 다시 시작하는 대신 편집할 수 있도록 입력한 내용을 보관하세요.
- 비난하지 마십시오. 유효하지 않음, 불법적 또는 잘못됨과 같은 단어를 피하십시오.
타이밍
누군가가 완료하기 전에 오류를 표시하는 것은 가장 일반적인 실수 중 하나입니다. NN/g는 조기 오류를 학생이 완료하기 전에 시험을 채점하는 것과 같은 적대적인 패턴이라고 부릅니다. 사용자가 양식을 떠나거나 양식을 제출할 때 필드를 확인한 다음, 수정하는 동안 메시지를 실시간으로 업데이트하세요.
양식과 관련되지 않은 오류
저장 실패 또는 연결 끊김과 같은 시스템 오류의 경우 무슨 일이 일어났는지, 무엇이 보관되었는지, 사용자가 무엇을 할 수 있는지(재시도, 오프라인 작업, 지원 문의 등) 설명하세요. 오류 코드 자체를 피하십시오. 지원이 필요한 경우 사람의 설명과 함께 표시하세요.
접근성
빨간색에만 의존하지 마세요. 아이콘과 텍스트를 추가하세요. 화면 판독기가 필드와 함께 메시지를 읽을 수 있도록 해당 필드에 메시지를 연결하고 제출 실패 후 첫 번째 오류 또는 오류 요약으로 초점을 이동합니다.
오류 상태의 모션
짧은 흔들림이나 색상 변경으로 문제가 있는 현장에 주의를 끌 수 있지만 짧게 유지하고 키를 누를 때마다 반복하지 말고 움직임 감소가 켜져 있을 때 움직임을 색상이나 아이콘 변경으로 바꾸십시오. 메시지 자체가 애니메이션보다 더 중요합니다.
기억할 핵심 원칙
- 문제 옆에 오류를 간단히 말해서 수정 사항과 함께 배치합니다.
- 사람들이 입력한 내용 유지
- 입력하는 동안이 아니라 필드가 완료된 후에 유효성을 검사합니다.
- 색상에만 의존하지 마십시오. 스크린 리더용 메시지 연결
- 오류 동작을 간략하게 유지하고 감소된 동작을 존중합니다.
자주 묻는 질문
출처
- Error-Message Guidelines — Nielsen Norman Group
- Indicators, Validations, and Notifications — Nielsen Norman Group