brunch

You can make anything
by writing

C.S.Lewis

by eric May 02. 2020

UX디자인과 인간심리 - 3편. 대응의 원리

논리적인 UX디자이너 되기 프로젝트

작은 디자인 차이 하나가 사업의 성패를 좌우할 수 있습니다. 앞서서 게슈탈트 유사성과 근접성의 원리를 이야기하면서 UX디자인은 논리싸움이라고 이야기한 바 있습니다. 이런 논리 싸움에서 우위를 점하기 위해서 필요한 디자인 원칙들을 이야기하는 'UX디자인과 인간심리' 시리즈 3편인 대응에 대해서 이야기해보겠습니다.


'UX디자인과 인간심리 - 1편. 유사성의 원리'

'UX디자인과 인간심리 - 2편. 근접성의 원리'



UX디자이너는 사용자로 하여금 쉽고 편하게 제품이나 서비스를 사용하도록 하는 것을 목표로 합니다. 얼마전 저의 5살된 딸이 아이패드의 설명서를 보지 않고 앱을 켜고 검색을 하는 것을 보았는데요. 아이패드를 너무 쉽게 써서 걱정이 되기도 했지만, 어쨌든 이는 사용자의 관점에서 잘 디자인 된 제품이라고 볼 수 있겠습니다.


오늘 소개하고자 하는 대응의 개념 역시 사용자가 깊이 고민하지 않고 직관적으로 기능을 사용할 수 있는 제품을 만들기 위해 디자이너가 알아야 하는 부분입니다.


대응(Mapping)은 도널드 노먼의 책 디자인과 인간심리에서 소개된 개념으로 두 요소간의 관계성을 뜻합니다. 두 요소로는 특히 작동을 하는 통제장치(Controller)와 작동으로 인한 결과물(Interface 또는 Display)의 관계라고 보면 됩니다. 여기서 핵심은 무언가를 작동할 때에 그로 인한 결과가 어떻게 될지 쉽게 예측이 가능하도록 해주는 것이라고 할 수 있겠습니다.


예를 들어, 자동차의 운전대를 잡았다고 가정해봅시다. 운전대를 오른쪽으로 돌리면 우회전이 되고, 왼쪽으로 돌리면 좌회전이 됩니다. 만약 이것이 반대로 작동한다면 어떨까요? 모르긴 몰라도 자동차 사고건수가 엄청나게 올라갈 거라고 생각됩니다. 이렇게 통제 장치가 제시하는 방향, 위치 등이 실제로 작동하는 그것들과 일치하는 것을 대응입니다.


아래는 자동차에서 볼 수 있는 좌석 기울기 컨트롤러입니다. 컨트롤러가 좌석의 모양과 동일하게 보이도록 만들어져서 어떤 부분을 만지면 목부분이 움직이고, 어디를 건드리면 허리 부분이 움직일 지 쉽게 예측할 수 있습니다,

출처: http://blogs.evergreen.edu/


한가지 질문을 드리겠습니다. 아래에 두 가지 다른 디자인의 가스레인지가 있습니다. 어떤 게 잘 된 디자인이라고 할 수 있을까요?



'대응(Mapping)'의 관점에서 보면 오른 쪽의 디자인이 더 좋은 사용자 경험을 제공해주고 있습니다. 불을 켜는 스위치의 위치와 실제로 불이 나올 가스 포인트의 위치가 일치해 있기 때문입니다. 그에 반해 왼쪽의 디자인은 그런 부분이 잘 안 되어 있습니다. 맨 왼쪽의 스위치가 좌측 상단에 불을 켤지, 좌측 하단에 불을 켤지 명확하지가 않습니다.




그러면 이제 이것이 디지털 경험에서는 어떻게 적용될 수 있을지 살펴보겠습니다. 아래는 제가 사용하고 있는 구글 포토 웹 버전입니다. 우측 스크롤러 부분에는 연도와 날짜에 대한 정보가 있는데요. 위쪽은 최근, 아래쪽으로 갈 수록 과거입니다. 스크롤바와 날짜를 대응시켜 놓아서 내가 스크롤을 아래로 내려보낼 수록 과거의 사진이 나올 것이라는 것을 예상하기 쉽게 해 놓았습니다.



아래는 우버 앱인데요. 우버가 세상에 알려졌을 때 와우 포인트로 자주 이야기가 되었던 것은 지도상에 지금 택시가 어디까지 왔나 표시되어 있다는 점이었습니다. 사용자로 하여금 지금 택시의 위치가 어디라서 어느 정도 시간이 걸릴지 예상이 가능하도록 했다는 점입니다. 저 역시 우버 앱을 사용할 때 제일 많이 체크를 하는 것이 자동차의 위치입니다.

출처: http://simonpan.com/work/uber/


그리고 우버가 대응의 관점에서 특별하게 잘했다고 생각되는 부분은 자동차의 위치를 표시하는 데 있어서 자동차의 아이콘을 사용했고, 심지어 아이콘을 통해 자동차의 위치를 알 수 있게끔 했다는 점입니다. 아래 보시면 아시겠지만 차 아이콘을 통해 어디가 차의 앞쪽이고 어디가 뒤쪽인지 알 수 있습니다. 그렇기 때문에 이 차가 어느 방향으로 오고 있는지 알 수 있는 것입니다. 만약, 아래 예시에서 자동차가 왼쪽이 아니라 오른 쪽을 향하고 있었다면 어땠을까요? 직관성이 떨어졌을 겁니다.



정리하며. 쉬워보이지만 쉽지 않은 대응의 원리

이제 대응의 원리가 어떤 것인지 이해하셨을 겁니다. 이 대응의 원리는 매우 상식적이고 쉬운 개념처럼 들릴 수 있지만, 간과한다면 사용자에게 불편함을 제공할 뿐 아니라 버그처럼 보여지도록 할수도 있습니다.




글쓴이 '에릭'을 소개합니다.

5년 전 유학을 와서 지금은 뉴욕의 테크 Scene에서 프로덕 디자이너로 일을 하고 있습니다. 두 아이의 아빠이며 육아와 요리, 교육에 관심이 많습니다.


'비전공자/입문자를 위한, 쉽게 이해하는 UX디자인 개론' 강의를 하고 있습니다.

UX를 전공하지 않은 분들, 학교에서 UX를 막 공부하기 시작한 분들이 쉽고 재미있게 UX분야에 입문할 수 있도록 첫 걸음을 안내해 드립니다. UX와 UX디자인의 본질에 대해서, 10년 동안 이 업계에 있으면서 기업, 스타트업, 테크 회사, 프리랜서 등 다양한 곳에서 실무를 하며 얻은 노하우를 알려드리고 있습니다. UX디자이너가 어떻게 사용자에 대해서 배우고, 문제를 발견하며 솔루션을 만들어나가는지, 개발자, PM과는 어떻게 협업을 하는지 경험들을 대방출합니다.

"UX디자인 개론" 인터넷 강의 보기>>


탈잉에서는 위의 UX디자인 개론 강의를 1:1로 과외를 진행하고 있습니다.

UX디자인 1:1 튜터링 받기>> 


SNS를 통해 UX, UI 공부를 위한 정보를 공유하고 있으며, 오픈 1:1 채팅을 통해 상담 문의를 받고 있어요.

인스타그램 / 페이스북 1:1 카톡 오픈채팅  

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari