brunch

매거진 UX 디자인의 모든 것

라이킷 21 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by UX 컨설턴트 전민수 Aug 17. 2016

오류 상태를 표현하는 디자인 방법 4가지

UX 디자인 배우기 #06

Today UX 아티클

AdobeCreative Cloud에 게재된 Nick Babich 의 글 XDEssentials: How to Design Error States for Mobile Apps를 소개하고자 합니다.

이 글은 사용자 오류를 방지하도록 앱 디자인을 하는 방법, 유저의 인풋과 상관없이 오류가 발생한 경우에 효과적으로 오류 메시지를 전하는 방법, 오류 잘 처리하여 실패의 순간이 기쁨의 순간으로 바꾸는 방법에 대해 다루고 있습니다.

우선, 이글에서 말하는 오류 상태(error state)란 무언가 잘못되었을 때 스크린에 보이는 것이라고 합니다. 원인과 상관없이 모든 오류는 유저와 마찰을 일으키는 지점이 되며 유저가 서핑하는데 방해한다고 합니다.

예방이 치료보다 낫다

앱을 디자인할 때는 가장 흔하게 오류 상태로 연결될 수 있는 인터랙션을 잘 파악하고, 오류가 발생하는 것을 미리 예방하는 것이 문제가 생긴 후에 고치는 것보다 낫다고 합니다. 예를 들어 호텔 예약 앱에서 예약 시작일을 선택할 때 오늘 이전 날짜는 선택할 수 없게 만드는 것이 여기에 해당합니다.

Booking.com 앱의 날짜 선택지는 달력을 보여주지만 지난날짜는 선택할 수 없게 만들어 유저가 적정한 날짜를 선택하게 했다고 합니다.

양식 오류를 보여줄 때, 분리된 오류 화면을 이용하지 않는다

유저는 양식을 전부 채워서 제출한 후에 오류가 있었음을 인지하는 걸 싫어한다고 합니다. 유저가 해당란의 데이터를 입력한 직후에 성공 실패 여부를 알려주어 실시간으로 수정할 수 있게 하라고 합니다.

양식 오류는 실시간으로 알려준다

또한 오류 문구는 빨간색이나 오렌지 색 같은 따뜻한 색상을 이용하여 대조적으로 보여주고 에러가 일어난 인풋 영역 가까이에 메시지를 보여줘야 한다고 합니다.

오류 텍스트는 적절한 색상을 사용하고, 배경과 분명히 대조되게 만들어 읽기 쉽게 만들어야 한다.

명료한 오류 메시지를 쓴다

오류가 발생하면 무슨 일이 벌어진 것인지 여러분이 알고 있음을 유저에게 알려주고, 즉시 해결할 수 있는 방법을 제시해야 한다고 합니다. 오류 메시지는 유저에게 도움의 손길이 되어야 하기 때문에 다음과 같이 작성하면 안 된다고 합니다.

오류 코드를 그대로 보여주는 메시지

한다이 오류 메시지는 개발자를 위해, 개발자에의해 쓰여졌다

막다른 길을 보여주는 오류 메시지

스포티파이의 오류 스크린은 ‘오류 발생’이라고만 쓰여 있고 문제를 어떻게 해결해야 하는지 건설적인방법을 전혀 제시하지 않는다.

모호한 오류 메시지

버퍼는 오류 상태를 잘 보여주고 있지만, 유저에게 딱히 의미 있는 문구가 아니다.

유저가 오류 메시지를 보고 겁을 먹지 않게 하고 맥락을 이해할 수 있게 하려면 유저의 언어를 사용해야 한다고 합니다. 오류 메시지를 읽기 쉬우면서도 도움이 되게끔 만들려면 무엇이 잘못되었는지, 해당 오류를 복구하려면 유저가 어떻게 해야 하는지 명확히 보여줘야 한다고 합니다.

리모트(Remote) 앱은 왜 유저가 아무것도볼 수 없는지, 어떻게 해결해야 하는지 잘 설명하고 있다.

오류 상태를 보여줄 때 이미지를 넣는다

사람들은 밋밋한 텍스트보다는 시각적 정보에 더 잘 반응한다고 합니다.

Azendoo는 기억에 남을 만한 일러스트레이션과 유머러스한 카피를 활용하여 유저가 문제를 해결할 수 있도록 도우고 있다.

필자는 ‘최고의 오류 메시지는 절대 뜨지 않는 오류 메시지’라고 하면서 오류가 최대한 발생하지 않게 노력해야 한다고 합니다. 그래도 오류가 발생했을 때를 대비해 오류 상태 표시를 잘 디자인하면 유저에게 도움을 줄 수 있을 뿐만 아니라 유저가 무시당했다는 느낌을 받지 않게 할 수 있다고 합니다.

더 자세한 내용을 보고 싶으면 https://goo.gl/zChPVW를 클릭하세요.