11. 폼에서 에러 표시 10가지 디자인 가이드라인
[2. 폼 앤 위자드]
https://www.nngroup.com/articles/design-pattern-guidelines/#Input%20Controls
폼은 많은 애플리케이션과 웹사이트에서 필수적인 컴포넌트이다. 우리는 로그인, 아이템 구매, 피드백 보내기, 개인정보 입력 등에 폼디자인을 사용하고 있다. 당신이 얼마나 많이 자주 정보를 입력했는지 생각해 봐라. 얼마나 자주 에러가 발생하는가? 그 에러들에 대해서 알아보는 것이 얼마나 답답했는가?
에러 메시지는 시스템 상태를 알려준다. 그것들은 사용자에게 문제가 뭔지 그리고 문제를 해결하기 위한 해결책이 무엇인지 알려준다. 그러나 에러메시지가 효과적이기 위해서는 사람들이 볼 수 있어야 하고 이해할 수 있어야 하고 액션을 쉽게 취할 수 있도록 해야 한다. 시스템 상태의 가시성은 10가지 사용성 휴리스트틱스 제이콥 닐슨의 주제에서 다뤄져 있다. 여기에 얼마나 시스템 상태가 사용자에게 잘 전달되는지에 대해 적혀있다. 이상적으로 시스템은 항상 사용자에게 어떤 일이 벌어졌는지 합리적인 시간 안에 적절한 피드백을 줌으로 알려줘야 한다.
사람은 실수를 한다. 사람들은 소프트웨어를 사용할 때 실수 할 것이다. 오류의 흐름은 사용자가 반드시 에러를 고치기 위해 겪어야 하는 단계이다. 사려 깊은 오류 흐름은 사용자가 쉽게 그들의 실수를 고칠 수 있도록 하고 다시 그들이 하고자 하는 일을 진행할 수 있도록 해준다.
아래는 오류 해결 흐름을 디자인할 때 따라야 하는 3가지 메인 원칙이다.
1. 에러 메시지는 반드시 쉽게 알아차릴 수 있어야 하고 이해할 수 있어야 한다.
2. 입력필드 안의 에러는 쉽게 찾을 수 있어야 한다.
3. 사용자는 에러를 고치지 위한 지시사항을 기억할 필요가 없어야 한다.
1. 가능하다면 즉시 검증하는 것을 목표로 해라
이상적으로 모든 검증은 즉시 되어야 한다. 사용자가 필드 채우는 것을 끝내자마자 검증된 내용이 보여야 하는데 만약 필드에 적힌 내용에 에러가 있다면 바로 보여야 한다. 이런 타입의 에러 메시지는 쉽게 알아볼 수 있어야 할 뿐 아니라 에러를 즉시 필드를 채우자마자 고칠 수 있도록 하여 불필요한 인터렉션 낭비가 최소화되어야 한다. 사용자들은 에러 메시지들을 찾거나 에러메시지가 표시되는 필드가 어딨는지 탐색할 필요도 없고 사용자들이 성공적으로 입력했다고 생각했던 이전 필드로 돌아가기 위해 새로운 필드에 다른 내용을 적어볼 필요도 없다.
물론, 즉시 검증이 불가능하고 사용자가 입력한 데이터를 서버로 전송하여 검증하는 상황이 발생하기도 한다.
2. 복잡한 필드를 성공적으로 채울 수 있도록 안내해라
즉시 검증은 성공적으로 필드 작성을 완료할 수 있도록 안내할 수 있다. 예를 들어 만약 당신의 사용자가 반드시 특정한 사용자이름을 만들어야만 한다면 초록색 체크 마크와 메시지로 사용자이름이 사용가능한지 사용자에게 알려줄 수 있고 이를 통해 사용자는 다음 단계로 넘어갈 수 있게 된다. 오류 방지가이드라인에 따르면 필드 값 제안을 하고 적합한 값으로 제약을 걸고 약어 또는 다양한 입력 형식을 유연하게 허용하면 오류를 방지할 수 있다고 알려주고 있다.
복잡한 인풋을 위해서 예를 들어 새로운 비밀번호를 만약 사용자가 입력할 때마다 세팅된 시스템 가이드라인에 의해서 즉시 검증되면 (입력필드의 값이 타이핑할 때마다 검증 내용이 보이는) 사용자는 추측하며 입력하거나 여러 번 확인하며 입력하지 않아도 된다. 밑의 예시를 보면 강력한 비밀번호 안내표시는 사용자가 타이핑할 때마다 변하고 사용자가 입력하면서 입력한 비밀번호가 충분히 강력한지 또는 더 글자를 타이핑해야 하는지 알 수 있다
그러나 너무 값성공여부를 나타내는 표시에 대해서 치중하지 않아야 한다. 값성공여부를 나타내는 안내 표시는 사용자가 폼을 입력할 때 방해하는 요소가 되면 안 되고 추가적으로 맥락적인 이해를 도와 폼을 빠르고 더 정확하게 입력하는 데 사용되어야만 한다. 예를 들어 디자인할 때 성공여부를 나타내야 한 하는 필드에만 성공여부 메시지를 보여주면 되지 모든 값에 다 성공여부를 보여줄 필요는 없다. 다 보여주게 되면 사용자에게 너무 많은 추가 정보가 노출되기에 오히려 방해가 된다.
3. 에러 메시지는 꼭 필드 옆에 둬라
즉시 검증이 되는 입력필드에서는 에러 메시지가 자연스럽게 에러가 발생될 때 입력필드 옆에 위치하게 된다. 그러나 입력필드가 즉시검증이 안될 경우에도 사용자가 오류를 수정하는데 도움이 되도록 오류메시지를 밑이나 옆에 표시해야 한다. 이 메시지는 오류 메시지 가이드라인에서 안내되는 대로 내용이 명확해야 하고 사람이 읽을 수 있는 내용으로 적혀야 하면 (오류 코드만 보여주는 식으로 표현되면 안 된다), 정중하고, 자세하고 문제를 해결할 수 있는 조언이 담겨있어야 한다.
4. 일반 필드 상태와 구분이 되는 에러 메시지 컬러를 사용해라
빨간색 컬러는 에러 메시지 표기 컬러로 자주 사용되고 있고 주황색 또는 노란색은 경고를 나타내는 색으로 초록과 블루는 성공을 의미하는 컬러로 자주 사용된다. 분명하게 결과를 나타내는 텍스트가 나머지 폼의 색상보다 눈에 띄는 컬러로 적용해서 사용자가 빨리 알아차릴 수 있도록 해라. 많은 폼을 채워야 하는 긴 페이지의 에러 필드 부분에는 반불투명의 백그라운드를 추가해서 에러 필드를 빨리 찾아낼 수 있도록 해라.
5. 아이코노그래피 또는 약간의 애니메이션을 추가해서 쉽게 보이도록 해라
컬러, 아이콘을 에러메시지 또는 검증내용 요약 옆에 함께 보여준다면 색약의 사용자들에게도 주의를 끄는데 도움이 될 것이다. 사용자가 폼을 살필 때 고쳐야 하지만 하는 필드 영역 부분에 아이콘을 눈에 띄게 넣으면 시선을 끌 수 있다.
약간의 진동 또는 움직이는 애니메이션을 아이콘에 넣는다면 에러메시지로 사용자의 주목을 더 끌 수 있다. 그러나 애니메이션을 남용하지 않는다. 만약 여러 개의 에러가 있다면 애니메이션이 적용된 많은 아이콘들 때문에 정신이 없을 것이다. 그리고 텍스트에는 읽기 어렵게 되기 때문에 애니메이션 효과를 주지 않는다.
6. 모달 또는 결과 확인 메시지는 되도록 사용하지 말아라
당신이 더 강한 주목을 앞으로 발생할 에러메시지에 끌어야 할 때 당신은 모달 또는 확인 메시지 팝업으로 사용자가 해결해야 하는 이슈에 대해 자세하게 설명하고 해결할 수 있도록 도울 수 있다. 하지만 두 가지 불리한 점 (1. 이런 팝업이나 모달뷰는 사용자의 작업을 방해할 수 있다. 2. 이런 에러메시지들은 팝업창안에서 보이기 때문에 팝업창 메시지 안에 있는 내용을 외우고 창을 닫은 다음 오류를 수정해야 해서 사용자의 인지에 과부하가 생긴다. 기억을 못 하게 되면 다시 창을 띄워줘야 하는데 이 또한 비효율적이다.) 때문에 이런 모달 또는 팝업 메시지를 사용하는 것을 최소화한다. 그러나 만약 에러 메시지가 간단하고 에러가 있는 상태로 제출이 될 수도 있는 상태라면 모달 또는 팝업을 이용해도 된다.
7. 인풋 내용이 작성완료 되기 전에 유효성을 평가하지 말아라
대부분의 케이스는 사용자가 필드의 내용을 채울 때까지 그리고 다음 필드로 넘어가기 전까지 에러메시지를 보여주지 않는다. 타이핑을 다 끝내기도 전에 에러메시지가 보인다면 성가시다.
8. 단 한 개의 에러에 대한 지시내용으로 검증내용 요약에 적용하지 말아라
유효성 검사 요약은 폼의 최상단에 표시되며 사용자는 해당 페이지에 수정해야 할 어류가 있음을 알 수 있다. 오류가 어디에 있는지 여부에 관계없이 전제적으로 부적절함을 알려주는 것이다. 이 유효성 검증 요약 내용은 사용자가 이 폼에 대한 전체적인 이해를 도울 수 있도록 해야 한다. 이 요약은 한 개의 입력필드에 대한 내용에 해당하는 내용을 보여주는 것으로 사용되면 안 된다. 왜냐하면 이 요약은 사용자들이 에러가 있는 필드를 찾도록 강요하는 것이 주된 목적이기 때문이다. 유효성 검증 요약 메시지는 사용자들이 에러메시지에 도달해서 수정하는 동안 보이지 않기 때문에 보였을 때의 내용을 기억해서 고치게 된다. 기억해서 고치게 하지 말고 고칠 내용은 필드 옆에 바로 에러 메시지로 보여주고 유요성 검증 요약 메시지는 폼 리스트에서 유효성 검증에 유효하지 않는 부분을 잘 찾아내도록 돕는 요소로 사용한다. 둘을 혼돈하지 않는다.
9. 툴팁을 에러 메시지를 보여주는 용도로 사용하지 말아라
툴팁은 가끔 에러를 보여주는 것으로 사용하기도 한다. 에러가 있는 필드에는 경고 아이콘이 자주 적용되는데 사용자가 경고 아이콘에 호버를 하거나 경고 아이콘이 있는 필드로 이동을 했을 때 툴팁 또는 에러메시지가 포함된 토스트가 나타날 때가 있다.
일반적으로 우리는 이런 에러 표시 방법에 대해서 찬성하지 않는다. 먼저 몇몇의 경고 아이콘을 알아보기가 어렵고 두 번째로 사용자가 해당 필드가 무엇 때문에 에러가 발생했는지 궁금한 부분을 알아내기 위해 호버 또는 클릭을 해야 하는 추가 단계가 필요하기 때문이다. 만약 사용자가 호버나 클릭을 해야 하는지 모른다면 에러 내용을 알 방법이 없다. 세 번째로 왜 사용자가 에러 메시지를 보기 위해 더 많은 작업을 해야는지.. 합리적인 이유가 없다.
10. 반복되는 에러에 대해서 추가 도움을 제공해라
만약 같은 오류가 반복해서 (반복의 기준은 3번 또는 그 이상 한 개의 폼을 작성하는 시도를 하는 것을 말한다) 발생한다면 이것은 사용자 인터페이스에 심각한 문제가 있다는 징후이다. 당신이 제공하는 에러메시지가 문제를 해결하기에는 불충분하거나 사용자의 니즈와 디자인이 맞지 않는 것일 수도 있다. 계속 이야기했듯 사용자가 에러를 발생시켰을대 이것은 그들의 잘못이 아니다. 에러를 부르는 디자인을 만든 디자인 잘못이다.
우리는 데이터 분석을 반복적인 에러에 대해서 분석하는 것을 추천하고 그 후 개선하기 위해 디자인은 검토하도록 권장한다. 에러메시지를 다시 써보는 것을 먼저 시도해 볼 수 있고 이는 자주 사용되는 방법 중에 하나 일 것이다.
응급처치 방법으로는 사용자가 같은 실수를 너무 많이 반복하면 당신은 도움말 정보 또는 문서에 관련된 링크를 보여줄 수도 있다.
결론
에러 흐름 디자인은 사용자가 실수를 고치고 실수를 더 이상 하지 않도록 돕도록 디자인돼야 한다. 사용자가 쉽게 에러를 감지하고 그들을 고칠 방법을 일해 할 수 있고 에러를 고치는 동안 어떤 에러를 고쳐야 하는지 알도록 확실하게 안내한다. 사용자가 추측해서 하는 작업을 없애고 사용자가 스스로 작업을 계속할 수 있도록 해라.
*저는 전문번역가가 아니기 때문에 정확한 내용은 원문을 확인하시기 바랍니다*
