Lilith Universe: 11월 2018

UX Study

구글 머티리얼 디자인 - 색상 | Google Material Design - Color

By Rose Sohee - 11월 21, 2018

0 Comments

Human Factors and UI

Bad Design #3- Boiler Controller [Conceptual Model #1, Visibility #2, Feedback #1]

By Rose Sohee - 11월 09, 2018

Bad Design #3 - Boiler Controller

이 보일러 조작기는 현재 내가 사용중인 보일러 조작기이다. 처음부터 나를 굉장히 당황스럽게 만들었고, 매뉴얼을 찾아봤지만 아직도 항상 헷갈리고 어렵다. 왜 이 보일러 조작기가 나쁜 디자인인가? 개념 모형과 가시성에 집중해서 살펴보도록 하겠다.

This Boiler Controller is what I am using in my house. At first, I was really embarrassed, and still now it is really confusing and difficult to use even though I had searched and read a manual. Why this boiler controller is a bad design? Let find out the reasons with concepts of 'conceptual model' and 'visibility'.

Conceptual Model #1

개념 모형(conceptual model)이란 어떤 시스템이 실제로 어떻게 작동될지에 대해서 어떤 사용자가 예상하는 사고 과정의 설명이다(2017, 나건, 조성주, 이경아). 디자이너의 개념 모형과 사용자의 개념 모형이 일치하면 그것이 좋은 디자인이다. 혹은, 시스템 이미지라는 매개를 통해 그 둘의 개념 모형이 쉽게 일치하게 된다면 좋은 디자인이라고 할 수 있다.

해당 보일러 조작기의 좌측 상단의 실내 온도 부분에는 사실 두 가지 기능이 혼재되어 있다.

(1) 실내온도의 온도를 조작하는 다이얼 기능과 (2) 오류 발생 시 어떤 오류가 발생했는지 알려주는 기능이다.

사진을 보면 다이얼이 30도에 맞춰져 있다. 30도라는 글자 위에는 기름이라는 글자와 함께 LED등이 있는 걸 볼 수 있다. 그런데 30도라는 글자와 기름LED는 전혀 관계가 없다. 즉, 다이얼을 돌린다고 해도 불빛이 밝혀지지 않는다.

정상적으로 작동하고 있다면 불빛은 다이얼 밑의 [운전]과 다이얼 맨 좌측의 [급수]에 밝혀진다. 정상적으로 작동하지 않는다면 보일러의 우측 하단에 있는 [재가동]에 불이 밝혀지고, 좌측 상단의 실내온도 부분에 있는 LED 등 중 [과열], [차단], [기름], [가스] 중 하나에 불이 밝혀진다.

나는 처음에 실내온도 부분에 왜 저런 과열, 차단, 기름, 가스가 있는지 이해하지 못했다. 그리고 다이얼과 저 메뉴들간에 무슨 관계가 있는지 혼란스러웠다.

또한 해당 보일러의 좌측 중간에 있는 예약 기능도 디자이너의 개념 모형과 사용자의 개념 모형 사이에 차이가 존재한다. 사용자는 이 예약 기능을 보고 다음과 같이 생각할 수 있다.

(1) n 시간 후 보일러가 작동하도록 예약된다.

(2) n 시간 후 보일러가 꺼지도록 예약된다.

전에 매뉴얼을 봤었는데 지금 다시 생각해보려해도 기억이 나지 않는다. 처음에는 한동안 보일러를 가지고 둘 중 무엇인지 알기 위해 실험해봤던 기억이 있다. (심지어 보일러가 너무 늦게 작동해서 실험에 실패했다ㅋㅋ)

이처럼 해당 보일러는 사용자로 하여금 제대로된 사용법을 찾게 해주는 Guessability가 부족하다. 그 이유를 좀 더 정리하자면 다음과 같다.

Visibility #2

시각적으로 정보를 제대로 전달하지 못했다. 좌측 상단에 [실내 온도]라고 쓰여져 있으므로 사용자들은 해당 다이얼과 그 주변 인터페이스가 실내 온도와 관련되어 있을 거라고 생각한다. 하지만 실제로는 실내온도 뿐만 아니라 오작동의 원인까지 함께 보여주고 있었다.

시각적으로 현재의 상태(운전중)를 나타내주는 LED 등은 있었지만, 배치가 잘못되어서 혼란을 준 경우라고 할 수 있다.

예약 기능도 마찬가지로 3시간 후 꺼짐인지, 3시간 후 켜짐인지 알려주면 좋았을 것이다. 글로 적을 수도 있고, 예약 기능을 On 했을 때 LED로 나타내줄 수도 있을 거 같다.

예시.

(1) n 시간 후 보일러가 작동하도록 예약되는 경우
예약 다이얼을 돌린다 -> [운전]LED가 점멸되고 [예약]LED가 켜진다. -> n 시간 후 운전 LED가 켜지고 예약 LED 는 점멸된다.
(2) n 시간 후 보일러가 꺼지도록 예약된다.

예약 다이얼을 돌린다 -> [운전]LED는 깜빡인 후 다시 켜지고 [예약]LED도 켜진다. -> n 시간 후 운전 LED와 예약 LED 는 점멸된다.

Feedback #1

지금까지 가시성을 살펴보았다면, 피드백을 한 번 살펴보도록 하겠다. 해당 보일러는 오작동 시 재가동 버튼이 깜빡거리고 좌측 상단에 위치한 5개의 LED 중 하나가 깜빡거리면서 오작동의 원인을 알려준다. 오작동된다는 상황과 원인을 알려준다는 점에서는 피드백을 주고 있다고 할 수 있다.

하지만, 실제 사용자인 나는 이것이 부족하다고 생각했다. 나는 다른 방에 있을 때 오작동된 사실을 전혀 알지 못한다. 왜냐하면 소리로 알려주지 않기 때문이다. 보일러는 오작동 시 생명과도 직결될 수 있기 때문에 소리로 피드백을 주어야한다고 생각한다.

두번째로 예약버튼에는 피드백이 없다는 것 또한 이 보일러 조작기의 단점이다. 예약 다이얼 위에도 LED 등이 있어서 제대로 예약이 된 건지 알려주는 피드백이 필요하다.

0 Comments

Human Factors and UI

Visibility #1~3 지하철, 자판기, 화장실 문

By Rose Sohee - 11월 09, 2018

Visibility

가시성(Visibility)이란 사용자가 중요한 정보와 행동의 결과 등을 쉽게 파악할 수 있도록 가시적이고 명백하게 나타내주는 것을 말한다(2017, 나건, 조성주, 이경아). 이러한 가시성의 예를 살펴보도록 하겠다.

#1 - 지하철 디스플레이

지하철 역에 디스플레이가 존재해서 어느 방면으로 가는 열차인지 알려주고 있다.

하지만 열차에 탄 사람은 어느 방면으로 가는 열차인지, 어느 역에 도착했는지 잘 알기 어렵다.

열차 창밖을 보아도 어느 역인지 표지판이 보이지 않는 경우가 많다.

1호선의 경우 열차 중앙에만 현재 위치, 어느 방면 지하철인지 디스플레이를 설치해놓았다.

하지만 이러한 디스플레이는 사람이 붐비거나 의자에 앉아있으면 보기 어렵다.

또한, 현재 도착한 역을 확인하고 싶은데 다른 정보가 출력되고 있을 경우,

원하는 정보를 실시간으로 확인할 수 없다.

이는 승차한 승객이 현재 도착한 역에 대해 피드백을 주어야하는 디스플레이의 피드백 역할이 좋지 않다라고 분석할 수 있다.

#2 - 자판기 디스플레이

1. 이 자판기는 동전투입구 옆에 위치한 디스플레이를 디자인함으로써 [판매중]이라고 현재 상태를 알려주고 있다.

2. 또한 카드리더기의 LED 가 [대기]상태에서 빛나고 있다. 이는 카드 리더기를 사용할 수 있다는 것을 사용자에게 보여주고 있는 가시성이다.

3. 제품을 선택하는 버튼에 파란색 불빛이 들어온다면 [재고 있음], 빨간색 불빛이나 X표시가 들어온다면 [재고 없음] 을 의미한다.

만약 자판기에 이런 디자인 요소가 없었다면 어땠을까? 자판기가 제대로 작동하고 있는지 우리는 알지 못했을 것이다. 돈을 투입하고 제품을 고를 때 재고가 없는 제품을 선택하고는 왜 작동하지 않는지 어리둥절했을 수도 있다.

이러한 자판기의 가시성은 사용자에게 편리함을 준다 :)

#3 - 화장실 문

이 사진은 공공화장실 문의 사진이다. 공공 화장실은 타인과 함께 쓰는 화장실이므로, 현재 다른 사람이 사용 중인지 인식하는 것이 중요하다. 위의 손잡이는 화장실을 사용중인 내부의 사용자가 손잡이를 돌리면 화장실문 밖에서 [비었음](파랑) 에서 [사용중](빨강)으로 바뀌게 된다. 이렇게 가시성을 디자인할 때 고려함으로써 사용자가 노크를 하지 않고도 해당 칸이 비었는지, 누군가가 사용중인지 알 수 있게 디자인한 사례이다.