[디독] 💁닐슨 노먼 사용성 휴리스틱 1. 시스템 상태 시인성

읽는 디자인 디독

닐슨 노먼 사용성 휴리스틱 1. 시스템 상태 시인성

아는 것이 힘이다.
적절한 피드백
유저가 액션하게 만들기
신뢰를 구축하는 커뮤니케이션

요약 : 유저가 시스템을 컨트롤하고 있다고 느낄 수 있게, 현 상태를 커뮤니케이션 하는 것은 그들이 목적에 도달 할 수 있게 적절한 액션을 제시하고, 궁극적으로는 브랜드를 신뢰하게 만든다.

Jakob Nielsen의 10가지 휴리스틱 중 첫 번째ㅡ시스템 상태 시인성ㅡ는 단순한 유저 인터페이스 디자인이 아니다. 이는 본질적으로는, 삶의 다양한 양상들에서 중요하게 여겨지는, 커뮤니케이션과 투명성에 관한 것이다. 사람들은 예측 가능성과 통제력을 얻기 위해 애쓰고, 일반적으로, 많은 정보는 더 좋은 의사 결정을 제공하기 마련이다.

당신이 언제, 무엇을 하든 당신 주변에 있는 시스템의 종류에 대해 써보는 시간을 가져보자. 그리고 어떻게 그들이 '현 상태'에 대해 커뮤니케이션하고 있는지 생각해보자. 폰과 노트북은 배터리가 얼마나 남았는지를 표시하고, 이메일 앱은 읽지 않은 이메일이 몇 개나 있는지 말해주고, 지하철에 있는 화면은 다음 역에 대해 이야기해준다.(혹은, 마지막 열차를 놓쳤을 때 다음 열차가 언제 오는지 알려주기도 한다.) 이 모든 정보 덩어리들은 당신이 상호작용하고 있는 시스템의 현 상태에 정확하게 접근하도록 도와준다.

정의 : 시스템 상태 시인성은 시스템의 상태가 유저에게 얼마나 잘 전달되고 있는지를 의미한다. 이상적으로는, 시스템은 적당한 타이밍에 정확한 피드백으로, 언제나 유저에게 지금 무슨 일이 일어나고 있는지를 전달해야 한다.

1. 아는 것이 힘이다

시스템의 현 상태를 아는 것만으로도 많은 것이 바뀔 수 있다. 즉, Gulf of evaluation을 극복할 수 있고, 목적을 달성하기 위해 다음 스텝으로 무엇을 해야 하는지 알 수 있다.

차를 운전한다고 가정했을 때, 더 빨리 갈지, 느리게 갈지 결정하기 위해 현재 차량 속도를 계속해서 볼 수 있어야 한다. 속도계가 고장난 차를 운전해본 사람은, 그게 좀 어렵다는 것을 경험적으로 알 것이다. 내가 이 일을 겪었을 적에, 나는 주변 자동차들이 적당한 속도를 지키고 갈 것이라 그들에게 속도를 맞추며 감사할 수밖에 없었다. 정보의 부재는, 종종 통제의 부재를 의미하기도 한다.

*(역자 주) Gulf of evaluation

구현하고자 하는 것과 구현한 것에 차이가 있음을 의미하는 용어.

ex) 휴대폰 프로그램의 GUI(graphical user interface)를 컴퓨터에서 만든 후 실제 휴대폰에 올렸더니 기대했던 화면과 차이가 있었다.

출처: https://thekiterunner.tistory.com/entry/gulf-of-evaluation-gulf-of-execution

2. 적절한 피드백

유저가 시스템과 상호작용할 때, 그들이 가한 인터랙션이 성공적으로 작동하는지 확인할 수 있어야 한다. 시스템이 내가 버튼 누른 것을 인식했나? 아님 너무 바빠서 무시했나? 제품이 장바구니에 담겼나? 요청이 접수된건가? (유저들이 이러한 질문을 갖는 한 가지 이유는, 이전에 제대로 작동하지 않는 기술 때문에 지친 경험이 있기 때문이다. 하지만, 먼 미래에 버그가 전혀 없는 기술이 나타나더라도, 사람들은 여전히 그들이 클릭을 했는지, 탭을 했는지 알고 싶어 할 것이다.)

유저 액션에 대한 적절한 피드백은 유저 인터페이스 디자인의 가장 기본이 되는 가이드라인일 것이다. 이는 유저에게 현 상태에 대해 지속적으로 알리고, 괜히 힘빼지 않고 올바른 방향으로 인터랙션을 조종하도록 돕는다.

몇몇 피드백은 유저가 클릭했을 때 컬러를 바꾸거나 프로세스가 시간이 좀 걸릴 때 프로그레스 인디케이터를 삽입하는 등의 단순한 방식으로 구성된다. 이러한 표시들은 시스템이 작동하고 있다는 것을 알려주고, 불확실함(유저가 처음 했던 행동이 적용된 건지 확실하지 않아서, 같은 버튼을 여러 번 누르는 등의)을 줄여준다.

*(역자 주)프로그레스 인디케이터: 로딩 시 화면에서 진행 상태를 보여주는 컴포넌트. 직선형과 원형이 자주 사용된다.

선택 시 버튼의 컬러를 바꾸고 체크 표시를 추가하는 것은 시스템이 유저의 선택을 반영했다는 것을 전달하는 방식이다. 프로그레스 인디케이터는 이러한 대기 시간이 정상적이며, 시스템이 제대로 작동하고 있음을 알림으로써 유저를 안심시킨다.

https://media.nngroup.com/media/editor/2018/05/22/mobileet_sf2017_p99_nofeedbackpageloading.mp4

모바일 아이트래킹 스터디 중인 이 영상에서, 유저는 버튼을 클릭하고 나서,별도의 피드백이 없어 새로운 페이지가 로딩되고 있는지 아닌지 확신이 없는 상태이다. 빨간 원 부분은 유저가 화면에서 쳐다보고 있는 부분이다. 그녀는 무슨 일이 일어나고 있는 것인지 확인하기 위해 통상적으로 프로그레스 인디케이터가 나타나는 화면 상단부와 버튼 사이에서 시선을 왔다갔다했다.

인터랙티브한 이벤트에 대해 즉각적인 피드백을 제공하는 것은 유저가 오류의 원인을 빨리 파악하고 해결할 수 있도록 도와준다. 사실, 즉각적인 피드백은 유저가 다른 UI 오브젝트에 직접 반응할 수 있는 직접 조작(인터랙션 방식)의 주된 장점 중 하나이다. UI 직접 조작과는 반대로, 커맨드-라인 인터페이스는 시스템의 현 상태를 표시하지 못할 뿐 아니라, 즉각적인 피드백도 줄 수 없다.

개발자는 즉각적인 피드백이 없는 인터페이스에서 오류의 원인을 찾는 게 얼마나 어려운 일인지 안다. 그들은 종종 그들의 코드에서 정의되는 각 액션마다 시스템의 상황이 어떻게 변경되는지 이해하기 위해, 브레이크 포인트와 스테퍼 같은 툴들에 의존해야만 한다.

유저가 DOS나 Unix를 쓰는 것처럼 느끼게 하고 싶은가? 구식 커맨드-라인 UI와 현대의 GUI 디자인의 가장 큰 차이점은 컬러풀한 아이콘 유무가 아니다. 시스템 상태의 시인성이다.

iOS 아마존 뮤직앱은 유저가 즉각적으로 플레이리스트 내 항목들의 순서를 수정할 수 있게 도와준다. 유저는 언제나 시스템 상태에 대해 인지할 수 있고, 에러를 알아차리고 해결할 수 있다.

시스템이 화면을 갖고 있지 않아서(아마존 에코, 구글 홈과 같은 음성 전용 디바이스의 경우) 유저가 액션의 이펙트를 볼 수 없더라도, 유저의 명령이 입력됐다는 것을 알려주는 최소한의 피드백은 필요하다. 아마존의 에코는 명령 상태에서 현재 듣고 있다거나, 작동하고 있다는 사실을 알리기 위해 디바이스에다 빛나는 링 표시를 한다. 이러한 on/off타입의 인디케이터는 러닝 타이머에는 좋지 않지만, 적어도 유저는 시스템이 명령을 듣고 동작이 시작되었음을 알 수는 있다.

3. 유저가 액션하게 만들기

현대 시스템은 종종 복잡하고, 유저에게 전달될 수 있는 시스템 상태를 묘사하는 모든 변수를 커버하기에는 불완전하다. 유저는 자바 스크립트 파일이 사이트를 작동하기 위해 다운로드하고 실행하는 것과 같은 백단(backstage)의 컴포넌트에 별로 관심이 없다. 하지만, 가끔 백단의 양상들이 프론트의 중요한 역할을 해내기도 한다.

인벤토리 사이즈를 예로 들어보자. 제품의 재고량은 일반적으로 유저와 상관 없으므로, 화면에 표시되어서는 안 된다. 하지만, 거기엔 두 가지 예외가 있다. :

재고가 얼마 남지 않았을 때: 사람들이 재고가 얼마 남지 않았다는 것을 알면, 그들은 결핍과 사회적 증거 이론에 따라 더 빠르게 반응하게 될 것이다.
재고가 남지 않았을 때: 이 정보는 유저가 더 이상 판매가 불가능한 제품을 장바구니에 넣으려고 시도하는 시간 낭비를 줄일 수 있다. (즉각적인 주문이 불가할 경우, 미래의 주문에 있어 신뢰도를 잃어버리게 되고, 결국 당신에 대한 신뢰까지 잃어버리게 만든다.)

J.Crew 사이트는 유저가 재고가 얼마 남지 않은 제품 위에 마우스를 올릴 경우 "조금밖에 안 남았어요!"라는 알림을 제공한다. 몇몇 사이즈는 이미 품절이므로, 옅은 회색 선을 그어두었다.

무료 배송 혹은 특가 등을 표시해주는 것도 추가적인 구매를 유도할 수 있다.

NatureBox.com: 페이지 상단에 붙어있는 배너가 유저가 무료 배송을 받기 위해 얼마나 더 써야 하는지를 알려주고 있다.

유저에게 영향을 줄 수 있는 뒷단의 이벤트를 전달하기 위해, 알림이나 인디케이터를 사용할 수 있다. 모달 다이얼로그는 유저들에게 심각한 영향을 줄 수 있는 상태 변화 내역들을 알려주는 역할을 한다.

4. 신뢰를 구축하는 커뮤니케이션

실제 세상에서 우리에게 정보를 주지 않거나 일방적으로 결정을 내려버리는 사람들과 관계를 맺을 때, 우리는 신뢰를 잃고 이 관계가 동등하게 이루어지지 않을 것이라 느낀다. 이런 일은 시스템 인터랙션에서도 일어난다.

우리가 시스템 상태를 이해할 때, 우리는 그것이 우리의 통제 하에 있다고 느끼게 된다. 우리는 시스템에 의존하여 우리가 기대하는 모든 상황을 컨트롤할 수 있게 된다. 인터랙션의 예측 가능성은 사이트나 앱의 매커니즘 뿐만 아니라, 브랜드 자체에 대한 신뢰를 구축하기도 한다.

사이트와 앱은 시스템의 상태가 어떠한지 유저에게 명확하게 전달해야만 한다. 유저에게 알리지 않고 결과에 영향을 끼치는 어떤 액션도 수행해서는 안 된다. 시스템의 상태가 변경됨으로써 발생하는 별도의 이벤트나 대기 시간이 있을 때, 간단하고 이해하기 쉬운 말들로 설명해주자.

예를 들어, 유저가 이전에 만든 위시 리스트에 담겨있는 아이템이 품절되었을 경우에는? 최악의 UX는 이유에 대한 아무 설명도 없이 그 제품이 리스트에서 사라지는 것이다. 화면 상단의 알림은 어떨까? 이는 유저가 적절한 대안을 찾기 위해서 이전에 남겨뒀던 모든 리스트 항목을 기억할 필요가 없기 때문에 그보다는 좀 낫다. 하지만 두 방법 모두 유저에게서 통제권을 빼앗고 신뢰를 잃게 만드는 것이다.

신뢰를 쌓기에 더 좋은 방법은 현 시스템 상태에 대해 명쾌하게 전달하는 것이다. -더 이상 판매하지 않는 제품들에 대해서- 그러고 나서 유저가 그 제품들을 삭제할지, 나중에 쇼핑할 때 레퍼런스로 참고할 용으로 리스트에 남겨둘지 스스로 선택할 수 있게 만드는 것이다.