오류 메시지는 쉽게 찾을 수 있어야 하지만 도움이 될 필요도 있습니다. 오류 메시지가 입력 필드 위에 저장되어야 할 때와 토스트 오류 메시지가 일반적으로 그다지 좋은 생각이 아닌 이유에 대해 알아보겠습니다.
우리는 인터페이스를 설계할 때 오류 메시지에 대해 먼저 생각하는 경우가 거의 없습니다. 어쨌든, 설계하려면 얼마의 비용이 들까요? 우리는 오류를 강조 표시하고, 메시지를 표시하고, 올바른 입력을 향해 사용자를 넛지(nudge)합니다. 밝혀진 바에 따르면, 이러한 메시지의 전략적이고 철저한 설계는 특히 높은 포기로 어려움을 겪는 기업들에게 매우 중요할 수 있습니다. 오류 메시지는 일이 진행되는 상황에서 경험을 만들거나 깨뜨릴 수 있습니다.
오류는 어디에나 존재하며, 오류 메시지 또한 마찬가지입니다. 물론 웹 형식뿐만 아니라 복잡한 테이블, 호환되지 않는 필터, 검색 질의 및 실패한 상호 작용에도 흔합니다. 오류 메모와 큰 오류 요약, 짧은 도구 설명 및 긴 토스트 메시지일 수 있습니다. 그럼, 우리는 어디서부터 시작해야 할까요? 처음부터.
모든 오류 메시지가 동일한 것은 아니다
모든 오류가 동일한 것은 아닙니다. 페이지 라우브하이머(Page Laubheimer)가 언급했듯이 실제로 두 가지 유형의 오류가 있습니다. 슬립은 사용자가 하나의 동작을 수행하려고 하지만 다른 동작을 수행하려고 할 때 발생합니다(예: 자동 조종 장치의 양식을 작성할 때). 실수는 사용자의 정신 모델과 시스템 사이에 불일치가 있을 때 발생합니다. 우리의 인터페이스는 두 가지 유형의 오류를 모두 지원해야 하며, 슬립은 일반적으로 실수보다 훨씬 해결하기 쉽습니다.
슬립의 경우 유용한 제약 조건(예: 텍스트 상자의 적절한 너비, 접두사 및 접미사)을 포함하고 복구 제안(예: 자동 완성)을 제공하며 합리적인 기본값을 선택하고 형식을 부여하는 데 사용할 수 있습니다.
실수를 방지하기 위해서는 파괴적인 행동(사용자가 이전 페이지로 돌아갈 때)을 확인하고, 초기에 기대치를 설정하고(암호 요구사항이나 파일 크기), 사용자가 마음을 바꿀 수 있도록(이메일이나 결제 방법 변경), 일반적으로 항상 탈출구를 제공해야 합니다.
빨간색에만 의존하지 않기
우리는 오류 메시지를 생각할 때 거의 무의식적으로 굵은 빨간색 텍스트 오류를 생각합니다. 이는 실제로 매우 확립된 패턴이지만 종종 모든 사용자에게 무언가가 잘못되었음을 나타내기에는 충분하지 않습니다.
색각 부족으로 인해 오류 메시지는 항상 오류 메시지 바로 옆에 빨간색 배경에 큰 느낌표와 같은 아이콘으로 보완하는 것이 좋습니다. 필드, 레이블, 힌트, 오류 메시지 및 입력 필드와 함께 전체 섹션을 강조 표시할 수도 있습니다. 예를 들어, 오류 메시지 옆에 있는 두꺼운 빨간색 수직 선은 Gov.uk 에서 오류 메시지의 일반적인 패턴입니다.
입력 필드 내부, 오른쪽 또는 텍스트 상자의 왼쪽 가장자리에 아이콘이 표시되는 경우가 있습니다. 오른쪽에 아이콘을 표시할 때 확대/축소하는 사용자가 아이콘을 표시하는 데 어려움이 있을 수 있습니다. 그렇기 때문에 아이콘을 왼쪽 가장자리에 배치하는 것이 조금 더 신뢰할 수 있는 것 같습니다.
자동 스크롤 및 자동 점프 방지
일단 사용자가 제출 버튼을 클릭하면 첫 번째 오류까지 자동으로 스크롤해야 하나요? 그 질문에 대한 명확한 답은 없습니다. 개인적으로 이 패턴은 일부 사용자에게는 매우 잘 작동하지만 다른 사용자에게는 비참하게 실패하는 것을 보았습니다.
페이지의 임의의 갑작스러운 움직임은 적어도 일부 사용자들에게 좌절감을 일으킬 가능성이 있습니다. 후자가 적어도 변화의 방향을 전달하고 사용자들이 어디로 이동했는지를 더 잘 암시하기 때문에, 사용자들은 자동 스크롤링보다 자동 점프를 더 성가시게 여기는 경향이 있습니다.
간단한 대답? 자동 스크롤 없이 시작해서 오류 요약만 링크와 함께 표시하세요. 너무 느리거나 예상대로 작동하지 않으면 자동 스크롤을 추가하는 것을 고려해 보세요. 그리고 뚜렷한 이유 없이 사용자들을 페이지를 위아래로 움직이는 것은 결코 아닙니다. 그것이 완료 시간을 늘리고 필요하지 않을 때 혼란을 야기하는 안전한 방법입니다.
표에서 인라인으로 오류 메시지 표시
표에 오류 메시지를 표시할 때 각 행에 대한 레이아웃 시프트가 많이 발생하기 때문에 대안적인 접근 방식을 고려하는 것이 좋습니다.
더 간단한 패턴 중 하나는 콘텐츠가 있는 같은 행에 오류 메시지를 표시하는 것입니다. 그 경우 오류 메시지는 입력 필드의 위가 아니라 아래에 있을 가능성이 더 높습니다. 긴 오류 메시지는 행 전체를 탭/클릭하면 축소되고 확장될 수 있습니다.
동일한 오류가 여러 행에 영향을 미치는 경우 오류가 포함된 행을 강조 표시하고 오류를 설명하는 오류 메시지를 페이지 맨 위에 표시할 수 있습니다.
올바른 입력 예시 제공
단어의 선택에 대해 이야기하면서, 어떻게 하면 더 도움이 될까요? 그리고 일반적으로, 무엇이 오류 메시지를 더 도움이 되게 만드는 것일까요? 예를 들어, 정확한 입력이 무엇인지에 대한 명확한 지침을 제공합니다. 그것은 라벨 아래에 힌트를 추가하고 올바른 입력의 예를 제공한다는 것을 의미하므로, 사용자들은 경로를 다시 지정하는 방법과 그들로부터 무엇이 기대되는지 이해할 수 있습니다.
물론, 때때로 예제를 추가하는 것은 불필요하게 느껴질 수도 있고 디자인의 공간을 차지하기도 합니다. 저는 여러분이 잘 만들어진 코런트 입력 예제를 통해 변환 문제를 해결해 보시기 바랍니다. 사용자가 다른 방법으로 무언가를 작동시킬 방법을 찾을 수 없는 경우가 종종 있기 때문에, 변환을 향상시키는 가장 쉬운 방법입니다. 예를 들어, 비록 이것이 여분의 빈 공간만큼 간단할지라도 말입니다.