이번 글은 <마이크로카피>의 "17장: 에러 및 기타 장애물 방지" 와 "7장: 에러 메시지"를 참고하여 작성하였다.
보기 싫은 에러 메시지 ...
에러는 애초에 생기지 않게 하는 것이 최고다.
그러기 위해서 프로세스 설계자인 우리는 다음 페이지나 다음 단계에서 어떤 일이 발생할지 알고 있으며,
즉 사용자에게 무엇이 필요한지 알리고 그들이 함정에 빠지지 않도록 방지할 책임이 있다.
우리는 폼과 프로세스를 점검하면서, 취약 포인트를 확인하고 의심되는 부분에 몇 마디를 추가하는 것으로 에러 혹은 기타 장애물을 방지할 수 있다. 사용자가 잘못하지 않도록 방지하는 것이 최우선이기 때문이다.
1. 필수 입력 필드 : 요구하는 정보가 적을수록 사용자가 폼을 완성할 가능성이 커진다. 무엇을 하든 모호함을 전부 제거해서 사용자가 당신이 만든 룰에 대해 스스로 결론을 내릴 필요가 없게 하라.
(좌) 마켓컬리 회원가입, (우) 네이버 회원가입
필수로 입력해야 하는 필드에 별표 혹은 '선택사항' 이라고 적어두는 등의 장치를 마련하는 것이다.
이럴 경우, 사용자가 "이 필드는 필수적입니다"라는 불필요한 오류 메시지를 보는 것을 피할 수 있다.
(물론, 요구하는 정보가 적을수록 사용자가 폼을 완성할 가능성이 커진다.)
Air BnB 회원가입
그러나, 요즘엔 사용자에게 "필수"인 항목을 최대한 줄여서 가입 절차를 최소화시키는 추세이다. 가입 시에 흔히보는 간편 SNS 로그인/회원가입이 이와 같은 사례이다.
2. 기호 또는 특수 포맷 : 시스템이 특정 포맷값만 허용한다면 에러를 막기 위해 입력을 시작하기 전에 사용자에게 이를 알려야 한다.
(좌) 트위터, (우) 애플
사용자는 자기가 맞다고 생각하는 대로 입력하기 때문에,
특수 기호 (ex. 대시(-), 슬래시(/), 문자와 숫자의 조합 등) 를 포함한 값을 입력 해야할 때
값을 입력하는 포맷이 여러가지 일 때 (ex. 날짜, 전화번호 등)
이와 같이 특정 포맷값만 허용할 때, 우리는 에러를 방지하기 위해 미리 인터페이스에서 그 해법을 해결할 수 있다.
날짜를 컴포넌트 필드로 나누거나, 필드 안을 클릭하면 특정 포맷에 맞게 작성할 수 있게 인터페이스가 방법을 안내해준다.
3. 크기, 범위 또는 길이 제한 : 사용자가 피할 수 있는 에러에 맞닥뜨리지 않고 옵션을 사용할 수 없는 이유를 이해할 수 있도록 제한 내용을 명시적으로 적어라.
허용되지 않는 값을 입력하지 못하게 하는 방법을 UX로 풀어낼 수 있는지 체크하라.
특정 범위의 숫자나 시간
제한된 문자 수
업로드할 수 있는 파일 형식
크기 제한
다만, 입력 필드라면 필드 안에 플레이스홀더로 제한 내용을 쓰지는 말자! (타이핑을 시작하면, 플레이스홀더가 사라져 필요한 경우 다시 확인할 수 없기 때문이다.)
(좌) Air BnB, (우) 인터파크 항공
위와 같이 달력 UI에서는 음영 처리된 날짜로 선택 불가한 날짜를 알려준다.
추가로 항공 캘린더의 경우에는 대략적인 가격대까지 미리 보여주어, 날짜를 선택했다가 가격에 놀라.. (!) 다시 이전 작업을 반복해야하는 불상사를 피할 수 있다.
Notion
노션에서는 일반 요금제 사용자의 경우, 최대 첨부 가능 파일 용량을 5MB로 제한해 두었기 때문에,
파일 첨부 시에 최대 업로드 가능 용량을 말해준다.
'당연한 것 아닌가?'라고 생각될 지 모르는 부분일 지 몰라도,
만약 이 마이크로카피가 없더라면 (일반적으로 파일 용량은 5MB를 가볍게 넘기 때문에..) 사용자는 파일 업로드 이후에 5MB를 넘어서 업로드할 수 없다는 오류 메시지를 마주하게 될 것이다.
4. 비밀번호 : 사용자가 비밀번호 입력을 마치는 즉시, 사용할 수 있다는 표시를 제공하는 것이 좋다. 아니면 사용자가 어긴 제한 사항마다 체크 표시를 하는 것이 더 나은 방법이다.
입력 필드 옆 또는 레이블 옆의 느낌표 아이콘
입력 필드에 포커스를 가져갔을 때 표시되는 툴팁 속 지침
그러나, <3. 크기, 범위 또는 길이 제한> 항목과 동일하게 입력 필드에는 제한 내용을 쓰지 않는 것이 좋다.
이 역시 사용자가 타이핑을 시작하자마자 단기 기억력은 사라짐에서 오는 이유에 있다.
<비밀번호용 마이크로카피를 작성할 때, 처한 상황에 따라 해결해야할 것들>
문자 수의 제한 (최솟값, 범위 또는 정확한 숫자)
비밀번호에 반드시 포함되는 문자 유형 (ex. 하나 이상의 대문자)
비밀번호에 포함할 수 없는 문자 (ex. ?, -, “와 같은 기호)
“문자와 숫자만 사용하세요.”와 같이 긍정적으로 작성한다.
대소문자 구분
Apple 회원가입
Apple의 경우, 입력 필드에 커서를 놓고 있는 내내 툴팁으로 비밀번호 규칙 및 안전한 정도가 막대+컬러로 표시된다.
규칙 중 하나가 충족되는 즉시 체크 표시가 보여진다.
이 방법은 국내 사례, 모바일에서는 흔히 볼 수 없는 방법같으나 확실하게 에러를 방지할 수 있는 듯 하다.
Coupang 회원가입
쿠팡의 경우에는, 필드 아래에 비밀번호 포함 조건을 명확하게 씀으로써 비밀번호 입력에 대한 에러를 방지하고 있다.
5. 실생활에서의 문제 : 실생활에서의 문제와 이루어진다면, 각 단계를 찬찬히 들여다보며 지금 당장 지적할 수 있고 예방할 수 있는 문제가 있는지 확인하라.
사용자 경험은 사용자가 디지털 제품을 떠난다고 해서 끝나지 않고, 오히려 고객이 브랜드와 접촉하는 모든 곳에서 계속되기 때문이다.
사용자가 실생활의 현실 프로세스에 직면하기 이전에 실생활(오프라인)에서 마주할 수도 있는 잠재적인 문제를 미리 알려준다면?
서비스에 대한 실망감은 줄고, 그들의 입장에서 모든 것을 헤아려 준다는 느낌까지 줄 수 있다.
QR코드 제너레이터
이 책 (마이크로카피) 에 나온 예시인데, 이 상황은 사용자가 자신이 만든 QR 코드에 여백을 넣을지 를 결정할 수 있다.
만약 사용자가 여백을 제거했을 때, 여백이 없는 QR코드는 밝은 배경에 인쇄해야 스캔할 수 있다는 추가 정보를 제공해 준다.
QR코드의 테두리에는 필수적으로 밝은(흰색) 배경이 있어야 제대로 리더기가 인식해야하는 것으로 보인다.
그러나 사용자가 QR코드에 여백을 제거하고, 컬러 배경에 인쇄를 한다면 사용자는 인식되지 않는 QR코드에 몹시 당황할 것이다.
이어서 직접 만든 QR코드가 잘못되었는지 생각하게 될 것이고 이는 곧 서비스에 대한 신뢰도의 하락으로 이어진다.
그러나
"QR코드 리더기가 QR 코드를 인식하려면 여백이 흰색이어야만 합니다. 따라서 QR 코드를 여백 대신 밝은 배경에 인쇄해야 합니다."
와 같은 마이크로카피로 실생활에서의 문제를 미리 해결해주고 있다.
고객이 사이트를 떠나더라도, QR코드를 어떻게 사용할지를 고민한 결과이다.
(좌) 배달의 민족, (우) 쿠팡이츠
국내 사례로는 우리의 실생활 중 식생활을 편리하게 해주는 배달의 민족과 쿠팡이츠의 사례이다.
서비스에서 일회용 수저, 포크 / 김치, 단무지 선택 옵션을 제공하며
가게 사장님과 배달 라이더님에게 보내는 메세지를 작성할 수 있다.
배달앱은 주문과 결제만을 담당하는 것이 아니라 주문 이후 배달받는 과정, 더 나아가 알레르기가 있는 경우에 가게와 소비자 간에 일어날 수 있는 문제를 방지해준다.
그러나 시스템에서는 어쩔 수 없이 에러가 생기기 마련이다.
그래서 우리는 사용자가 절대 보지를 않기를 바라면서 쓰게 되는 유일한 문장인 '에러 메시지'를 작성해야한다.
이는 사용자가 프로세스를 포기하게 만드는 최후의 결정타이며, 사용자가 완료하고자 하는 프로세스를 일시적으로 중단시키기 때문에 사용자의 심기를 건드리지 않게, 아주 '잘' 작성해야 한다.
어떻게 써야 할까?
에러 메시지에는 해결이 필요한 기술적 문제와 관련되어 있으므로, 명확성과 실용성이 강조되어야 한다.
그러나 사용자를 놀리듯한 느낌으로 가볍고 너무 재치있게는 말고.. (그렇다고 너무 냉랭해서도 안된다.)
고객 서비스 담당자가 직접 응대하는 것처럼, 마치 '사람의 목소리처럼' 자연스럽고 가능한 한 쉽게 작성해야 한다.
- 문제가 있다는 것과 그 문제가 무엇인지간단하고 명확하게 설명해야 한다. - 사용자가 중단됐던 곳으로 되돌아가 프로세스를 바로 끝낼 수 있도록 해결책을 제시해야 한다. - 지연되는 현재 상황을 가능한 한 즐거운 경험으로 바꿔야 한다.
좋은 에러 메시지를 쓰기 위해 알아야 할 네가지
1. 에러 발생 시 사용자는 무엇을 시도하는가? 2. 왜 시스템이 에러로 반응했는가? 3. 해당 프로세스를 계속 진행, 완료하기 위해 사용자가 할 수 있는 일은 무엇인가? 4. 해결 방안이 없다면 사용자에게 제안할 수 있는 대안(ex. 고객 지원으로 전환하는 방법 등)이 있는가?
위 사항들을 잘 기억하였다면, 실제로 에러 메시지에 대한 라이팅을 위해서 꼭 기억해야할 것들이 있다.
1. 딱딱하지 않게, 협박이나 명령조가 아니게, 전반적으로 변호사처럼 들리지 않게 써라.
이 입력 필드를 채우시오.
이 입력 필드는 필수 사항입니다.
진행할 수 없습니다. 다음 입력 필드를 잘못 입력하셨습니다.
휴대폰 번호를 제공해야 합니다.
고객님, 이 작업을 수행할 권한이 없습니다.
2. 에러 또는 실패와 같은 단어를 쓰지 마라.
에러! 해당 입력 필드를 고쳐 주세요.
하나 이상의 입력 필드에서 에러가 발생했습니다.
해당 작업이 실패했습니다. 다시 시도해 주세요.
3. 전문적인 기술 용어를 사용하지 말라.
치명적인 에러: Unhandled c0001du exception at 31c71014h
미디어 ID 검증에 실패했습니다.
XML 데이터 검색 실패: 정의되지 않은 오류
로그인 자격증명 무효
불법 이메일 주소
유효성 검사 에러
에러 5647GV
예시들을 보면, 우리가 평소 웹/모바일에서 에러 메시지를 마주했는데 기분이 확 나빠진 적..(!)이 있던 기억이 있을 것이다.
안그래도 에러에 맞닿아 있는데, 어떻게 해결해야할 지도 모르겠고 알 수 없고 딱딱한 문구를 보면 .. 진행 중이던 프로세스를 나가버리게 되고 그 서비스에 대한 인상조차 안좋아진다.
불가능한 것 대신 가능한 것을 말하자.
그렇기 때문에 우리는 에러메시지를 쓸 때에
위협적으로 쓰지 말고, 사용자를 비난하지 않으면서도 가장 서비스 지향적인 방법과유쾌한 대화체 말투로 문제를 간단히 설명해야한다.
그 후,문제에 대한 해결 방법을 제안해야 한다.
불가능을 언급함으로써 부정적인 방향을 택하기 보단, 긍정적인 방향에 약간의 유머도 곁들여보자.
물론 유머는 브랜드의 보이스앤톤에 맞으면 훌륭하지만, 꼭 필요한 것은 아니다.
이와 같이 인간적이고 서비스 지향적으로 에러 메시지를 작성해보는 것은 어떨까?
사용자가 기분이 상하지도 않으면서도 현재 에러가 난 원인을 말해주고, 이를 해결하기 위해 도와준다.
< (거의) 모든 디지털 제품에서 말로 표현되어야 하는 에러>
출처: 마이크로카피, 본인 정리
또한 위와 같은 경우에 꼭 에러 메시지를 알려줘야 한다고 하니, 프로덕트를 만들 때 참고하면 좋을 것 같다.
