본문 바로가기
UI&UX

[UI/UX] (2)시스템의 가시성 - Visibility of system status

by vurias 2019. 11. 27.
반응형

첫번째로 다룰 주제는 시스템의 가시성에 대해서다.

시스템은 적절한 시간 내에 적절한 피드백을 통해 사용자에게 진행 상황을 항상 알려 주어야 한다.

예를 들어 핸드폰이나 노트북에 배터리 잔량이 얼마나 남아 있는지 표시하거나, 읽지 않은 이메일 수를 알려주거나, 대중교통의 다음 정거장을 나타내는 표시, 다음 차가 언제 도착하는지 등 이러한 모든 정보를 통해 시스템의 현재 상태를 정확하게 인식할 수 있다.

 

내 시스템의 상태를 보여주는 Status Bar와 이메일이 얼마나 왔는지 알려주는 Feedback

 


1. 아는 것이 힘이다.

현재 시스템의 상태를 아는 것만으로도 더 나은 상황으로 나아갈 수 있다. 사용자는 시스템의 상태를 확인하면서 여러 시행착오를 극복하고 다음에 수행해야 할 작업을 파악할 수 있다.

예를 들어, 자동차를 운전할 때 속도계를 지속적으로 확인해야 속도를 더 올릴지 아니면 느리게 할지를 결정할 수 있다.

속도계가 고장난 자동차를 운전 해 본 사람들은 그 상황이 매우 어렵다는 사실을 알 수 있다.

이런 상황에서 운전자는 주변의 자동차들의 속도를 주시하며 눈치껏 속도를 유지하고 달려야한다.

 

정보 부족은 종종 사용자의 행동을 제한한다.


2. 적절한 피드백

사용자는 시스템과 상호 작용할 때마다 상호 작용이 성공했는지 알아야한다.

버튼을 눌렀을 때 시스템이 실제로 버튼에 대한 행동을 실행했는지 실패했는지 알 수 있어야한다.

상품이 장바구니에 추가 되었는지? 내가 입력한 양식이 제출되었는지?

(사용자가 이런 질문은 하는 이유는 '이전에 아무런 피드백을 못 받아본 경험이 있기 때문'이다. 하지만 모든 것이 완벽한 그 날이 오더라도 사람들은 내가 실행한 행동이 제대로 전달되었는지 궁금해 할 것이다.)

 

사용자 행동에 대한 적절한 피드백은 아마도 사용자 인터페이스 디자인의 가장 기본적인 지침일 것이다.

사용자에게 현재 상태를 알리면 노력을 낭비하지 않고 올바른 방향으로 가도록 상호 작용을 조정할 수 있다.

이러한 피드백은 사용자가 버튼을 클릭 한 후 색상을 변경하는 것 또는 프로세스를 완료하는 데 시간이 조금 더 필요한 경우 ProgressBar를 보여주는 것 처럼 간단하게 보여줄 수 있다.

이렇게 보낸 피드백은 시스템이 작동 중임을 알리면서 사용자가 동일한 버튼을 여러 번 누르는 것을 방지합니다.

버튼상태의 일부와 ProgressBar

 

시스템에 화면이 없어서 사용자가 작업의 효과를 볼 수 없는 경우 (Amazon Echo 및 Google Home과 같은 음성 전용 장치 의 경우와 같이), 기기가 명령을 듣고 있다는 최소한의 피드백이 필수적이다.

Amazon의 Echo는 장치에 빛의 고리를 표시하여 현재 명령을 듣고 있거나 작동하고 있음을 나타낸다.

이 on-off 유형의 표시는 최소한 사용자가 시스템이 명령을 듣고 실행했음을 알 수 있다.


3. 사용자가 행동하도록 강요

우리가 만드는 앱, 웹, 제품의 시스템은 매우 복잡하기 때문에 시스템 상태를 설명하는 모든 변수들이 사용자에게 전달되고 있다고 생각하는 것은 절대 합리적이지 않다.

또한 사이트 작동을 위해 JavaScript 파일을 다운로드하여 실행하는 것과 같은 백 스테이지 구성 요소는 사용자에게 그렇게 중요한 부분은 아닐 수 있다. (거의 대부분의 사용자들은 이런 구조에 관심조차 없다.)

 

그럼에도 불구하고 때때로 백 스테이지는 중요한 역할을 한다.

 

예를 들어 쇼핑을 할 때 재고를 파악하는 경우를 봐보자.

쇼핑몰에서 제품을 구매할 때 실제 보유하고 있는 전체 재고량은 일반적으로 회사에서 관리하기 위해서 파악을 하고있고 사용자와 관련이 없기 때문에 표시하지 않는다.

 

그러나 두 가지 예외의 경우가 있는데.

 

1. 재고가 부족한 경우

사람들이 몇 가지 품목 만 남았다는 사실을 알게되면 현재 내가 그 제품이 필요하거나, 사회적으로 이휴가 되고 있는 경우와 같은 상황에 따라 즉시 구매로 이어지게 행동 할 가능성이 높다.

 

남은 수량을 표시해서 재품의 재고 파악을 할 수 있게함

 

2. 재고가 없는 품목

이 정보를 통해 더 이상 사용할 수없는 장바구니 제품에 추가하려는 노력을 줄일 수 있다.

사용자가 제품을 선택하고 주문 완료까지 흘러간 후에 재고가 없어서 취소가 되는 것 보다.

애초에 주문이 불가능하도록 조치를 취해놓는다면 주문에 대한 신뢰도를 얻을 수 있다.

한 번의 주문 실패가 가져오는 여파는 매우 크다. 사용자가 주문을 포기하게 할 확률이 높기 때문이다.

 

품절 표시를 해줌으로써 사용자가 쓸 데없이 클릭하는 수고를 덜어줌

 

사용자에게 영향을 줄 수있는 백 스테이지 이벤트를 전달하기 위해서 보통 알림창을 사용하며, 모달 대화 상자 또한 사람들에게 상태 변경을 알리는 데 사용된다

 


커뮤니케이션은 신뢰를 만든다.

상대방과 나와의 인간 관계에서 비밀이 많거나 일방적으로 결정을 내릴 때, 우리는 상대방에게 신뢰를 잃기 시작하고 관계가 더 이상 동등하지 않다고 생각한다.

 

이는 시스템과 상호 작용할 때도 마찬가지다.

 

시스템이 어떤 상태인지 알게되면 내가 제대로 행동하고 있다고 생각하게 되고, 시스템이 내 예상대로 작동한다고 알 수 있다.

상호 작용을 예측 할 수 있다는 것은 사이트 또는 앱의 구조와 동작원리 뿐만 아니라 브랜드 자체에서도 신뢰를 만들어준다.

 

사이트와 앱은 사용자에게 시스템 상태를 명확하게 전달 해야하며, 사용자에게 결과를 알리지 않고 조치를 취하지 않아야 한다.

외부 사건이나 시간의 흐름으로 인해 시스템 상태가 변경되면 사용자에게 간단하게나마 이해가 가도록 설명을 해주어야한다.

 

쇼핑몰을 예로 들었으니 연장선상에서 보자면, 사용자가 예전에 담아두었던 위시리스트의 제품이 품절 되었거나 더 이상 판매되지 않았을때 위시리스트를 다시 방문하면 어떻게 되는가?

 

최악의 사용자 경험은 사용자가 모르게 해당 항목이 목록에서 사라지고 이유를 설명하지 않은 경우다.

이 방법은 사용자로부터 스스로 선택할 수 있는 권한을 빼앗아 신뢰를 떨어뜨린다.

그렇게 되면 사용자가 위시리스트라는 기능을 더 이상 사용하지 않을 수 있다.

 

신뢰를 구축 하는 더 좋은 방법 은 더 이상 사용할 수없는 항목을 현재 시스템 상태로 명시적으로 전달한 다음 사용자가 스스로 목록에서 해당 시스템을 제거하거나 나중에 볼 수 있도록 표시하는 것이다.

구매버튼의 비활성화와 'Sold Out'을 표시해줌으로써 사용자가 왜 구매할 수 없는지 이해하고 스스로 삭제 할 수 있도록 디자인되어있다.


결론

시스템 상태의 가시성은 훌륭한 사용자 경험의 기본 원칙이다.

이 휴리스틱의 핵심은 사람과 사람의 관계나 사람과 시스템의 관계와 상관없이 모든 관계의 기초가 되는 개방적이고 지속적인 커뮤니케이션을 장려한다.

시스템의 현재 상태에 대한 정보가 없는 사용자는 목표를 달성하기 위해 다음에 수행 할 작업을 결정할 수 없으며 자신의 행동이 효과적인지 또는 실수했는지를 알 수 없다.

 

그러니까! 사용자의 눈을 가리지말자!!

댓글