오류는 어디에나 있고 오류 메시지도 마찬가지입니다. 물론 이는 웹 양식에서 흔히 발생하지만 복잡한 테이블, 모순되는 필터 및 실패한 상호 작용에서도 발생합니다. 작은 오류 메모일 수도 있고 큰 오류 요약일 수도 있습니다. 짧은 툴팁 과 긴 토스트 메시지. 그렇다면 올바른 것을 어떻게 선택합니까? 기본부터 시작해 보겠습니다.
이것은 UX 디자이너와 인터페이스 디자이너를 위해 성장하고 있는 라이브러리인 스마트 인터페이스 디자인 패턴 ????의 다음 장입니다( 친절한 15% 할인을 받으려면 MEDIUM 코드를 사용하세요 ).
1. 색상에만 의존하지 마세요
오류 메시지를 보면 우리는 거의 무의식적으로 굵은 빨간색 텍스트를 떠올립니다 . 이는 실제로 일반적이지만 사용자에게 문제가 있음을 알리기에는 충분하지 않은 경우가 많습니다.
Gov.uk의 오류 메시지 구성 요소는 크게 개선될 수 없습니다. 메시지는 명확하고 공정하며 메시지에 주의를 기울이는 아이콘이 있습니다.
색각 장애로 인해 항상 오류 메시지 옆이나 입력 필드 내에 빨간색 배경에 흰색 느낌표와 같은 아이콘을 사용하여 오류 메시지를 보완하는 것이 좋습니다 .
IBM Carbon Design System 의 오류 메시지 . 탭/클릭 시 버튼 위에 오류 메시지가 나타납니다.
첫 번째 예에서 볼 수 있듯이 필드, 레이블, 힌트, 오류 메시지 및 입력 필드와 함께 전체 섹션을 강조 표시 할 수 있습니다. 예를 들어 옆에 두꺼운 수직선이 표시됩니다. 또한 페이지 상단에 양식의 문제 영역에 대한 링크와 함께 오류 요약을 표시할 수도 있습니다.
2. 사용자의 입력을 절대 가리지 마세요
오류 메시지를 표시할 때 사용자에게 문제가 있음을 전달하는 동시에 사용자에게 해결 방법을 안내하려고 노력합니다. 그러나 이를 위해서는 오류가 수정되는 동안 오류를 참조할 수 있는 기능이 필요합니다 . 즉, 사용자는 제공된 오류 메시지를 검토하면서 입력 필드를 편집할 수 있습니다.
인라인 검증이 오류 복구를 충족하는 경우. 메시지가 내용을 다루는 일반적인 예입니다. UX 디자인 월드 를 통해
여태까지는 그런대로 잘됐다. 그러나 툴팁도 사용하면 상황이 상당히 복잡해집니다. 도구 설명이 열려 있으면 사용자는 오류 메시지와 입력을 모두 보지 못할 수 있습니다. 세 가지 정보를 동시에 모두 볼 수 있기를 원한다면 운이 없을 것입니다.
툴팁이 콘텐츠를 차단하는 경우 Carbon Design System 의 예입니다 .
비교적 쉽게 고칠 수 있습니다. 우선, 마우스를 올리면 열리는 툴팁을 피하고 탭하거나 클릭한 후에만 툴팁 텍스트를 표시합니다 . 즉, 도구 설명 텍스트는 자동으로 사라지지 않으며 수동으로 닫아야 합니다.
그런 다음 툴팁 대신 세부 구성 요소 와 인라인 아코디언을 사용합니다 . 따라서 도구 설명 내용이 레이블과 다른 내용 사이에 확장될 수 있도록 공간을 만들어 아무것도 다루지 않도록 합니다. 오류 메시지는 입력 필드 옆에도 항상 나타납니다.
탭/클릭 시 세부정보가 표시되는 세부 정보 구성요소입니다 .
이런 방식으로 우리는 동시에 3가지 정보를 모두 표시하며 사용자는 항상 자신이 보고 싶은 정보를 정확하게 선택할 수 있습니다. 너무 많은가요? 아마도. 하지만 이는 명심해야 할 훌륭한 옵션입니다. 최소한 입력 필드와 오류가 툴팁으로 겹치지 않고 항상 동시에 표시된다는 것입니다.
3. 양식에서 입력 위에 오류 메시지 표시
이제 처음에는 약간 혼란스럽게 들릴 수도 있습니다. 일반적으로 오류 메시지는 입력 필드 아래 편리하게 표시되거나 입력 필드 오른쪽에 표시됩니다. 결과적으로 이러한 규칙의 비용으로 인해 발생하는 몇 가지 접근성 문제가 있습니다.
돋보기 소프트웨어 사용자는 오른쪽에 있는 오류 메시지를 놓칠 수 있습니다.
모바일에서는 가상 키보드로 입력이 가려지기 때문에 사용자가 입력 아래의 오류 메시지를 보지 못할 수도 있습니다 .
입력을 편집할 때 오류 메시지는 브라우저의 자동 완성 또는 입력의 자동 완성 제안으로 처리될 수 있습니다.
입력 필드 위에 오류 메시지를 표시하면 일반적으로 위에 나열된 접근성 문제를 방지하는 데 도움이 됩니다. 하지만 그 대가는 레이아웃 변경 입니다 . 모든 새로운 오류가 동적으로 표시되면 오류 메시지가 표시될 공간을 확보해야 하므로 전체 양식이 수직으로 이동해야 합니다. 그러나 때로는 그만한 가치가 있을 수도 있습니다.
4. 표에 오류 메시지를 인라인으로 표시
테이블에 오류 메시지를 표시할 때 대체 접근 방식을 고려하는 것이 좋습니다. 그렇지 않으면 각 행에 대해 많은 레이아웃 변경이 발생하게 됩니다.
더 간단한 패턴 중 하나는 콘텐츠가 있는 동일한 행에 오류 메시지를 표시하는 것입니다 . 이 경우 오류 메시지는 입력 필드 위가 아닌 입력 필드 아래에 표시될 가능성이 높습니다. 긴 오류 메시지는 아코디언을 사용하여 축소하거나 확장할 수 있습니다.
오류 메시지는 잘못된 콘텐츠가 있는 동일한 행에 있을 수 있습니다. 이미지 출처: UX 디자인 월드 .
동일한 오류가 여러 행에 영향을 미치는 경우 오류가 포함된 행을 강조표시 하고 오류와 이를 해결하기 위해 수행해야 할 작업을 설명하는 오류 메시지를 페이지 맨 위에 표시할 수 있습니다 .
오류가 여러 번 나타나고 설명이 간단한 경우 페이지 맨 위에 오류를 표시하는 것이 좋습니다. 이미지 출처: UX 디자인 월드 .
5. 토스트 오류 메시지에 의존하지 마세요
하지만 좋은 토스트 오류 메시지는 어떻습니까 ? 애니메이션 알림은 부동 메시지를 통해 사용자에게 시스템 상태 변경을 알려줍니다. 양식에서는 흔하지 않을 수 있지만 테이블과 기업 대시보드에는 자주 나타납니다.
토스트 오류 메시지에는 몇 가지 일반적인 사용성 문제가 있습니다 .
오류 메시지 가 사라지기 전에 사용자는 오류 메시지를 완전히 읽거나 이해할 기회를 얻지 못하는 경우가 많으며 오류 메시지를 복원하거나 계속 떠 있게 유지할 방법이 없습니다.
토스트 메시지는 일반적으로 화면 가장자리에 나타나며 일반적 으로 잘못된 입력과는 상당히 거리가 멀습니다 . 오류 메시지와 입력 사이에 연결이 끊어져 오류 메시지를 읽고 동시에 실수를 수정하는 것은 거의 불가능합니다.
긴 토스트 메시지는 일반적으로 사용자가 의존할 수 있는 넓은 콘텐츠 영역을 차단하며 잠재적으로는 오류를 일으킨 입력까지도 차단합니다.
화면 판독기 사용자에게 토스트 메시지를 알리는 동시에 오류 메시지와 잘못된 입력 사이에 초점을 맞출 수 있도록 해야 합니다 .
토스트의 경우 일반적으로 이미지나 비디오를 사용하여 자세한 도움말을 제공할 공간이 충분하지 않으며 일반 텍스트와 외부 도움말 페이지 링크에 의존해야 합니다.
이는 이상적이지 않을 수 있습니다. 복잡한 UI에서 오류 메시지가 토스트로 표시됩니다.
조치를 취할 수 있는 정보를 표시하는 경우 토스트 메시지는 지속적으로 표시되어야 하며 사용자는 알림을 수동으로 해제할 수 있어야 합니다.
개인적으로 저는 오류 메시지가 지속되더라도 토스트 메시지로 표시되는 것을 확실히 피하고 싶습니다. 오류와 그 원인을 더 많이 연결할수록 오류를 간과할 가능성이 줄어듭니다. 그리고 오류의 원인과 함께 오류를 해결하는 방법을 더 잘 설명할수록 사용자는 수행해야 할 작업을 더 빨리 이해할 수 있습니다.
6. 사용자가 오류 메시지를 무시하도록 허용
단일 검증 라이브러리는 모든 극단적인 경우에 대해 안정성이 뛰어나고 완벽하게 보호되지 않으므로 결국 일부 고객은 숲속에 남겨져 다음 단계로 진행하기 위해 무엇을 해야 할지 파악하려고 노력하게 될 것입니다. 그것은 매우 차선책입니다.
공격적인 검증인은 비용이 듭니다 . 특히 문제를 해결하기 위해 정확히 무엇을 해야 하는지 알려주지 않고 말 그대로 사용자를 차단하는 비활성화된 버튼과 함께 제공되는 경우에는 더욱 그렇습니다.
주소 유효성 검사기를 재정의하는 것은 매우 좋은 생각일 수 있습니다.
검증인이 너무 제한적인 경우 고객이 검증인의 경고를 무시하도록 허용할 수 있습니다 . 그 결과 잘못된 주소를 얻게 됩니다. 그러나 기업으로서 우리는 서비스 데스크 문의 증가로 인해 손실되는 비용과 인터페이스가 작동하지 않더라도 사람들이 계속 진행할 수 있는 방법을 찾을 수 있도록 함으로써 얻는 비용을 측정해야 합니다. . 종종 그만한 가치가 있습니다.
이 패턴은 주소 입력 및 전화 입력에는 완벽하게 작동하지만 IBAN 번호 또는 신용 카드 번호의 길이 및 체크섬과 같은 특정 규칙을 따라야 하는 입력에는 작동하지 않을 수 있습니다. 여기서는 고객에게 일방적인 선택권을 주는 대신 입력 내용을 꼼꼼하게 검토 하고 문제가 정확히 무엇인지 안내 해야 합니다 . 그리고 그들이 문제를 해결하도록 도와주세요.
마무리
언뜻 보면 오류 메시지를 처리하는 것이 별 문제처럼 들리지 않을 수 있습니다. 그러나 세부적인 내용을 살펴보면 이탈률이 높거나 문제를 신속하게 해결하는 데 도움이 될 수 있는 고려 사항이 많이 있습니다 .
이러한 지침을 사용하면 오류 메시지 UX를 강화할 때 더 나은 결과를 얻을 수 있습니다. 그리고 제품에 오류가 표시되는 방식에 대해 실제로 많은 작업을 수행할 수 없는 경우 일반적인 오류 메시지를 유용한 오류 메시지로 대체하기 위해 수행할 수 있는 작업을 살펴보세요 . 이는 결국 대기업 KPI 대시보드에 표시될 큰 영향을 미치는 작은 변화일 수 있습니다.
예정: 인터페이스 디자인 라이브 UX 교육
스마트 인터페이스 디자인 패턴(Smart Interface Design Patterns) , UX 및 디자인 패턴에 대한 친숙한 비디오 코스입니다.
이 섹션 은 라이브 세션, 실제 UX 과제, 개인 1:1 피드백 및 UX 인증이 포함된 친숙한 비디오 코스인 스마트 인터페이스 디자인 패턴 의 다음 부분입니다 .
여러분의 지원에 진심으로 감사드립니다. 모두들 즐거운 디자인 되세요! ????
