좋아 보이는 UX Writing의 비결 6
시스템 상태의 가시성
제이콥 닐슨의 사용성 휴리스틱 중 첫 번째 원칙은 시스템 상태의 가시성, Visibility of System Status 이다.
원문 출처)
10 Usability Heuristics for User Interface Design
Visibility of System Status (Usability Heuristic #1)
시스템이 현재 하는 일, 또는 사용자가 하고 있는 일을 눈으로 볼 수 있어야 한다는 말인데, 제이콥 닐슨의 정의를 빌어보자.
디자인은 인터페이스에서 어떤 일이 벌어지고 있는지
납득할 만한 시간 안에
적절한 방식으로
사용자에게 알려야 한다.
The design should always keep users informed about
what is going on,
through appropriate feedback
within a reasonable amount of time.
UX 라이팅에서 개성있는 글을 쓰는 것이나 쉽고 짧은 글을 쓰는 것만큼이나 중요한 것이 사용성을 높이는 일이다. 라이터 앞에 UX 가 붙어 있는 이유이기도 하다. 상태 가시성 측면에서 UX 라이터가 고려할 만한 실무 팁들을 위의 글, 10 Usability Heuristics for User Interface Design와 User Experience for Mobile Applications and Websites를 참고하여 정리해 보았다.
시스템 상태 가시성을 높이기 위한 UX 라이팅 실전 가이드
현 상태를 알려주기
단계가 많다면 전체 단계와 현재 단계를 알려주기
오래 걸리는 동작은 시간 알려주기
선택을 되돌리게 하기
동작의 결과를 알려주기
사례를 보자. 에어비앤비의 여행 검색 절차이다.
여행 검색 단계 하나가 화면 하나이다.
전체 단계가 보이지 않지만 순서가 직관적이고 자연스러워 어렵지 않다.
현재 내가 어떤 단계인지 잘 보인다.
각 단계의 상단에 사용자가 전에 선택한 내용이 보인다.
검색 완료 화면에는 내가 선택한 예약 옵션과 함께 결과물이 나온다.
아래는 1회 이체 한도를 넘어설 때 여러 차례에 걸쳐 송금되는 모습을 보여주는 토스의 화면이다.
얼마를 보내는지, 몇 번의 송금을 거치는지 알 수 있다.
현재 몇 번째 단계인지 알 수 있다.
쉽게 할 수 있는 실수에 대한 주의문이 담겼다(지금 앱을 끄면 송금이 안된다는 점)
송금 결과를 알 수 있다.
재밌다.
스타벅스의 사이렌 오더는 여타 커피 브랜드 온라인 오더에 비해 매우 훌륭하다고 생각하지만 상태 가시성 측면에서 아쉬운 점이 보인다.
음료를 선택하고 상세 옵션을 선택한다. 바리스타에게 요구하는 커스터마이징 옵션이 대부분 담겨있다는 게 참 놀랍다.
뒤로 돌아가기가 없다.
정확히 없는 것은 아니고 화면을 아래로 내리면 음료 선택으로 돌아갈 수 있다.
다만 일반적인 되돌아가기 액션이 아니라 없는 것처럼 느껴진다.
옵션을 모두 선택하고 결제할 차례이다.
내가 선택한 옵션이 보이지 않는다.
사실은 화살표 안에 숨겨져 있다.
수령 매장은 주문 요약에 안보인다. 매장을 옮겨가며 주문하는 사람들은 매장 선택이 잘 됬는지 확인하기 위해 뒤로 돌아가 다시 확인해야 한다.
이것은 한 증권사 HTS로 환전을 하던 화면이다.
달러로 바꾸고 싶었기 때문에 1번이 체크된 것을 확인했다.
2번으로 옮겨 달러를 선택했다.
3번에서 환율갱신 버튼을 눌러 현재 환율을 확인했다. 그러자 환전 가능한 금액이 자동으로 입력된다.
잔액 전부를 달러로 바꿀 생각이니 바로 환전을 하러 4번으로 넘어갔다.
환전조회? 환전처리? 버튼의 의미가 이해되지 않는다.
환전처리가 환전인 것 같으니 환전처리를 눌렀다.
그러자 환전조회를 먼저 하라고 한다.
하라는 대로 환전 조회를 하니 외화신청금액을 입력하라고 한다.
여기까지 입력하고 나서야 환전이 되었다.
환전이 잘 되었는지 결과가 나오지 않아 외화 계좌에 들어가서 확인했다.
내가 여기에서 환전할 때 이용한 순서는 다음과 같다.
다른 개선할 부분도 많지만 시스템 상태의 가시성 측면에서 보자면,
현실의 환전 순서와 인터페이스의 환전 순서가 일치하지 않는다.
인터페이스 환전도 순서대로 보이지 않는다.
내가 현재 무엇을 하고, 앞으로 무엇을 어떻게 해야 하는지 알지 못한다.
최종 결과를 알 수 없다.
실시간 환율로, 환전 가능한 모든 금액을 자동으로 환전해 준다면 10초면 끝날 일을 10분 가까이 걸려서야 마쳤다.
시스템 상태의 가시성을 높이는 것이 중요한 이유는
태스크를 더 빨리, 더 효율적으로, 정확히 할 수 있다.
사용자의 시간을 절약할 수 있다.
시스템에 신뢰를 갖는다.
요약해 보면 시스템 가시성을 높이기 위해 UX 라이터, UX 디자이너가 실무적으로 적용할 수 있는 내용은
현재 무엇을 하는지 알려주어라.
전체의 단계와, 그 안에 내가 속한 단계를 보여주어라.
선택을 되돌리게 하라.
오래 걸리는 동작은 예상 시간을 알려주어라.
동작의 결과를 제시하라.
