마음을 생각하는 디자인 - 심리학으로 바라보는 UI 가이드라인
2014. 10. 23. 01:00ㆍ리뷰
앞서 게재된 이재용님의 글(http://story.pxd.co.kr/949)에서 UI 가이드라인을 적용할 때의 고려사항 몇 가지를 짚었습니다. 그 중 '가이드라인이 나온 인지적/심리적 배경을 이해한다.' 라는 내용은, 가이드라인이 나오게 된 근본적인 이유를 인간의 심리적 측면에서 이해해야 함을 말하고 있습니다.
이 글에서는 이와 관련해 책에 언급된 내용 몇 가지와 제가 느낀점들을 정리해 보고자 합니다.
'마음을 생각하는 디자인'에서 더 다양한 내용을 다루고 있으니 더 많은 예시는 책을 읽어보시면 되겠습니다.
이 글에서는 이와 관련해 책에 언급된 내용 몇 가지와 제가 느낀점들을 정리해 보고자 합니다.
'마음을 생각하는 디자인'에서 더 다양한 내용을 다루고 있으니 더 많은 예시는 책을 읽어보시면 되겠습니다.
UI 디자인을 하면서 들었던 조언 중 하나는, 잘 만들어진 여러 UI 가이드라인 문서를 통해 인터페이스 기본 원칙, 컴포넌트의 종류와 패턴 등에 대한 기본기를 다지라는 말이었습니다.
업무상 UI 가이드라인을 작성하고 있는 요즘은 그 중요성을 더 크게 느끼고 있으며, 이재용님의 글을 읽으면서 가이드라인이 가지는 한계점이나 이를 잘 적용하기 위한 방법에 대해서도 공감가는 부분이 매우 많았습니다.
한편, 정작 UI 가이드라인을 작성하면서는 무의식적으로 '이런 원칙은 원래부터 써왔던 것이니까 언급해야 한다.', '당연히 이렇게 디자인하는 것이 더 좋으니까 다들 이렇게 쓰는 것일거다.' 라고 생각했던 일들이 떠올랐습니다. 그 가이드라인이 누구를 위한 것인지 망각하고, 가이드라인이라는 문서에만 매몰된 상태로 내용을 작성하고 있었던 것이죠. 그것이 오랫동안 지켜져 온 법칙이였더라도, ‘왜 사용자를 위한 인터페이스 디자인 원칙이 그래야만 하는지’에 대해서 더 많은 고민을 해야 했다는 생각이 들었습니다.
심리학에서는 지각 심리학, 인지 심리학, 신경 생리학적 이론 등을 바탕으로 이유를 설명합니다.
즉, 인간 행동의 이유를 인체 생리 구조로부터 접근하여, 표면적으로 드러난 부분보다는 실제 인간의 뇌와 신경계에서 어떤 처리 과정이 일어나는지로 이해하려 한다고 볼 수 있습니다.
1. 인간 지각과정의 편향 가능성을 예측하기
(참고 : Chapter 1. 우리는 기대하는 대로 지각한다.)책의 첫 번째 챕터에서는 인간의 지각이 다양한 요인에 영향받을 수 있음을 설명합니다.
실제 인간의 지각 과정은 자극이 전기 신호로 바뀌어 이를 인지하는 경험에 이르기까지 여러 단계로 진행됩니다. 처리가 아주 빠르고 의식하지 못 하는 뇌의 영역에서 진행되기 때문에 실제로 각 단계를 밟는다는 경험을 하기는 어렵습니다.
인간에게 사물은 모두 위와 같은 과정을 통해 인지되고 있습니다. 우리가 디자인 한 인터페이스 상의 여러 자극들 또한 사용자는 위와 같은 과정으로 지각하게 됩니다.
하지만 인간은 인지적으로 보다 복잡한 존재라서, 우리가 디자인한 바 대로 사용자가 경험할 수 있도록 하려면, 또는 사용자가 기대하는 바를 잘 녹여서 디자인 하고 싶다면 이런 과정에 대한 이해와 함께 지각의 편향 가능성에 대해서도 이해하고 있어야 합니다. 어떤 요인에 의해 지각 과정상에서 편향이 일어날 수 있는지를 예측하고, 그로 인해 사용자가 어떤 경험을 하게 될지 예상해 본 후 언급이 필요한 규칙은 UI 가이드라인에서 규정해 주어야 합니다.
책에서는 다양한 요인에 의해 영향을 받을 수 있는 인간의 지각에 대해 설명하고 있습니다. (1p~12p)
1) 지각은 경험에 따라 편향된다
사용자는 종종 유심히 살펴보지 않고 버튼이나 링크를 누르곤 합니다. 화면에 나타난 내용에 대한 사용자들의 지각은 실제로 화면에 제시된 내용보다는 과거의 경험으로부터 유발된 기대에 따라 더 많은 영향을 받게 됩니다. 또한, 만약 우리가 무언가를 찾고자 하는데 그 대상이 평소와 다른 위치에 있거나 평소와 다르게 보인다면 이를 놓칠 가능성이 있습니다. 왜냐하면, 그동안의 경험으로 인해 기대되는 장소에서 기대되는 모양을 찾도록 우리의 지각이 조율되기 때문입니다.
2) 지각은 맥락에 따라 편향된다
시지각은 상향식 처리과정(bottom-up processing) 뿐만 아니라 하향식 처리과정(top-down processing)도 개입됩니다. 예를 들어, 특정 알파벳이 어떤 단어 안에 들어 있는지에 따라 우리가 해당 알파벳을 어떻게 지각할지에 영향을 받을 수 있습니다. 맥락은 주변 사물이나 현재 발생하는 사건, 과거의 기억 재활성화까지도 포함합니다.
-상향식 처리(bottom-up processing): 눈에 보이는 자극을 우선으로 지각하는 처리 과정
-하향식 처리(top-down processing): 지식, 경험, 목표 등을 바탕으로 자극을 지각하는 처리과정
-위키피디아 : Top-down and bottom-up design > Neuroscience and psychology
3) 지각은 목표에 따라 편향된다
미래에 대한 목표에 부합하지 않는 사물들은 지각에 도달하기 전에 차단되곤 하는데, 이런 것들은 의식의 영역까지 도달하지 못합니다. 목표와 전략은 우리가 어디를 볼지에 영향을 주고, 특정한 자극에 더 민감하게 지각하도록 만들어 주기 때문입니다.
사용자는 종종 유심히 살펴보지 않고 버튼이나 링크를 누르곤 합니다. 화면에 나타난 내용에 대한 사용자들의 지각은 실제로 화면에 제시된 내용보다는 과거의 경험으로부터 유발된 기대에 따라 더 많은 영향을 받게 됩니다. 또한, 만약 우리가 무언가를 찾고자 하는데 그 대상이 평소와 다른 위치에 있거나 평소와 다르게 보인다면 이를 놓칠 가능성이 있습니다. 왜냐하면, 그동안의 경험으로 인해 기대되는 장소에서 기대되는 모양을 찾도록 우리의 지각이 조율되기 때문입니다.
2) 지각은 맥락에 따라 편향된다
시지각은 상향식 처리과정(bottom-up processing) 뿐만 아니라 하향식 처리과정(top-down processing)도 개입됩니다. 예를 들어, 특정 알파벳이 어떤 단어 안에 들어 있는지에 따라 우리가 해당 알파벳을 어떻게 지각할지에 영향을 받을 수 있습니다. 맥락은 주변 사물이나 현재 발생하는 사건, 과거의 기억 재활성화까지도 포함합니다.
-상향식 처리(bottom-up processing): 눈에 보이는 자극을 우선으로 지각하는 처리 과정
-하향식 처리(top-down processing): 지식, 경험, 목표 등을 바탕으로 자극을 지각하는 처리과정
-위키피디아 : Top-down and bottom-up design > Neuroscience and psychology
3) 지각은 목표에 따라 편향된다
미래에 대한 목표에 부합하지 않는 사물들은 지각에 도달하기 전에 차단되곤 하는데, 이런 것들은 의식의 영역까지 도달하지 못합니다. 목표와 전략은 우리가 어디를 볼지에 영향을 주고, 특정한 자극에 더 민감하게 지각하도록 만들어 주기 때문입니다.
지각 과정에서 인간의 의식 구조가 다양한 방식으로 편향될 수 있으므로 디자이너가 사용자의 경험과 사용 맥락, 사용목표를 잘 이해하고 디자인해야 합니다. 기본적인 이야기지만 가장 잊기 쉬운 이야기기도 합니다.
UI 가이드라인에서는 경험, 맥락, 목표 등을 고려하여 인터페이스를 디자인하도록 가이드를 제공합니다. 예를 들어 TV UI 가이드라인 서론에서는 TV를 보는 기본 환경이나 사용자 유형을 설명하는데 이것은 사용자가 어떤 환경, 어떤 맥락에서 TV 화면을 지각하게 되는지 이해하고 그 결과를 예측할 수 있도록 도와줍니다. TV는 다른 디바이스에 비해 큰 디스플레이를 가지기 때문에 먼 거리에서 시청하는 환경적 특성을 가진다거나, 남녀노소 관계없이 다양한 사람들과 함께 시청하는 모습이 일반적이고, TV를 통해 가장 우선으로 얻고자 하는 가치는 컨텐츠를 통한 즐거움이 될 수 있다는 점들이 있습니다. 이런 특성 때문에 인터페이스를 지각하는 방식이 달라지거나 사용 경험에 차이를 가질 수 있음을 이해하고, 그 배경에는 위와 같은 인간의 지각 원리가 있다는 점까지 함께 고려해 본다면 TV UI 가이드라인을 작성하거나 읽을 때 그 이해의 폭을 높일 수 있을 것입니다.
2. 주변시와 안구운동을 이해하여 사용자의 주의를 끌기
(참고 : Chapter 6. 우리의 주변시는 빈약하다)개인적으로 흥미롭게 생각하는 부분은 우리의 시각 구조와 이와 연관된 신경체계의 구성인데요. 책에서는 이와 관련된 챕터에서 ‘흐린 색상의 정적인 물체가 주변시에 있을 때 왜 사람들은 이를 잘 인식하지 못할까’ 와 같은 질문을 통해 왜 우리는 시야에 들어오는 모든 자극을 동등하게 처리하지 않는가에 대해 설명하고 있습니다. 그리고 그런 시각체계의 특성을 이해하고 디자인을 해야 한다고 말합니다.
중심와와 주변시 – 73p
인간의 두 눈은 중심와(Fovea)와 주변시(Peripheral area)로 나뉘어져 있는데, 중심와는 전체 망막(Retina)의 약 0.01%정도만 차지하지만, 뇌의 시각 피질(Visual cortex)중 약 8-10% 정도는 중심와로부터 받은 정보를 처리하는 일에 쓰입니다. 중심와의 추상체는 시각 데이터를 처리하고 전송하는 시작 단계인 신경절 세포(ganglia neuron cells)와 1:1로 맵핑 되어 있습니다. 반대로 주변시에서는 1:다수와 연결됩니다. 이 때문에 주변시의 정보는 정보 전달 시 데이터가 압축 및 손실되며 중심와의 정보는 압축되지 않고 그대로 전송됩니다.
중심와에는 추상체만 존재하기 때문에 빛을 잘 탐지하지 못하는 대신 세밀한 것을 잘 볼 수 있으며 색상 구분력도 뛰어납니다. 반면에 주변시에는 추상체보다 간상체가 더 많아서 빛의 밝기에 민감하고 색상 구분에는 취약합니다. 또 주변시는 움직임 감지에도 탁월한데, 이는 인류가 진화하는 데 있어 식량을 찾아내고 맹수를 피하는 능력이 얼마나 뛰어난가를 기준으로 자연선택 되어 왔기 때문입니다. 만약 주변시의 특정 지점에 흥미로운 무언가가 존재할 것이라고 기대할만한 어떠한 이유도 없고, 실제로 그 지점에서 우리의 주의를 끌만한 아무런 일도 일어나지 않는 상황이라면 결국 중심와가 그곳으로 아예 이동하지 않아서 거기에 무엇이 있는지 전혀 알아차리지 못할 수도 있습니다.
인간의 두 눈은 중심와(Fovea)와 주변시(Peripheral area)로 나뉘어져 있는데, 중심와는 전체 망막(Retina)의 약 0.01%정도만 차지하지만, 뇌의 시각 피질(Visual cortex)중 약 8-10% 정도는 중심와로부터 받은 정보를 처리하는 일에 쓰입니다. 중심와의 추상체는 시각 데이터를 처리하고 전송하는 시작 단계인 신경절 세포(ganglia neuron cells)와 1:1로 맵핑 되어 있습니다. 반대로 주변시에서는 1:다수와 연결됩니다. 이 때문에 주변시의 정보는 정보 전달 시 데이터가 압축 및 손실되며 중심와의 정보는 압축되지 않고 그대로 전송됩니다.
중심와에는 추상체만 존재하기 때문에 빛을 잘 탐지하지 못하는 대신 세밀한 것을 잘 볼 수 있으며 색상 구분력도 뛰어납니다. 반면에 주변시에는 추상체보다 간상체가 더 많아서 빛의 밝기에 민감하고 색상 구분에는 취약합니다. 또 주변시는 움직임 감지에도 탁월한데, 이는 인류가 진화하는 데 있어 식량을 찾아내고 맹수를 피하는 능력이 얼마나 뛰어난가를 기준으로 자연선택 되어 왔기 때문입니다. 만약 주변시의 특정 지점에 흥미로운 무언가가 존재할 것이라고 기대할만한 어떠한 이유도 없고, 실제로 그 지점에서 우리의 주의를 끌만한 아무런 일도 일어나지 않는 상황이라면 결국 중심와가 그곳으로 아예 이동하지 않아서 거기에 무엇이 있는지 전혀 알아차리지 못할 수도 있습니다.
추가로 다른 책에서 이야기하는 안구의 도약운동에 대해 알아보겠습니다. 중심와에 맺히는 상이 이와 같은 안구의 도약운동으로 선택되는데, 이 때 어떤 자극이 선택적 주의를 받을 수 있는가에 대해 설명하고 있습니다.
선택적 주의를 이끄는 도약운동(Saccade) – E. Bruce Goldstein. Sensation and Perception. 8th edition, 2009
우리 시선에서 선택적인 주의를 받는 장면은 안구의 도약운동(Saccade)을 통해 정보를 받아들인 것입니다. 이 도약운동 시 초점이 멈추는 곳을 응시(Fixation)라 부르는 데, 이는 우리가 가진 목적, 지식, 장면의 특성 등 여러 요인에 따라 고정될 수 있습니다. 특히 도약운동 시 하나의 응시점(Fixation)과 다른 응시점(Fixation) 사이에는 Suppression이 일어나기 때문에 움직이는 사이에 있는 장면은 정보처리가 불가능하다는 특성이 있습니다.
선택적인 주의를 받는 장면을 결정하는 요인은 세 가지가 있습니다.
1) Stimulus salience : 색상, 대조, 방향 등이 현저히 눈에 띌 때 눈 운동을 이끌 수 있습니다. 밝기 차이, 색 대비가 크거나 지배적인 방향성을 가졌을 경우를 말합니다.
2) Knowledge about the scenes : 우리가 가진 배경지식이 현재 나타나는 장면을 해석하고 이해하는 데 영향을 줍니다.
3) Nature of the observer's task : 내가 지금 하려는 과제가 무엇인지에 따라 눈 운동이 달라질 수 있습니다.
우리 시선에서 선택적인 주의를 받는 장면은 안구의 도약운동(Saccade)을 통해 정보를 받아들인 것입니다. 이 도약운동 시 초점이 멈추는 곳을 응시(Fixation)라 부르는 데, 이는 우리가 가진 목적, 지식, 장면의 특성 등 여러 요인에 따라 고정될 수 있습니다. 특히 도약운동 시 하나의 응시점(Fixation)과 다른 응시점(Fixation) 사이에는 Suppression이 일어나기 때문에 움직이는 사이에 있는 장면은 정보처리가 불가능하다는 특성이 있습니다.
선택적인 주의를 받는 장면을 결정하는 요인은 세 가지가 있습니다.
1) Stimulus salience : 색상, 대조, 방향 등이 현저히 눈에 띌 때 눈 운동을 이끌 수 있습니다. 밝기 차이, 색 대비가 크거나 지배적인 방향성을 가졌을 경우를 말합니다.
2) Knowledge about the scenes : 우리가 가진 배경지식이 현재 나타나는 장면을 해석하고 이해하는 데 영향을 줍니다.
3) Nature of the observer's task : 내가 지금 하려는 과제가 무엇인지에 따라 눈 운동이 달라질 수 있습니다.
가이드라인에서도 위와 같은 시각 원리를 고려한 정책들을 찾아볼 수 있습니다.
UI의 Interaction을 정의해 주는 부분에서 예를 찾아보면, 사용자에게 경고나 알림을 제공하는 Notification rule에서는 사용자의 주의를 끌고 싶다면 충분히 주의를 끌 수 있는 요소를 사용하라고 합니다. 충분한 주의를 끌지 못하면 선택적 주의나 도약운동을 유도할 수 없고, 결국 사용자의 주변시에서 알림이 무시될 수도 있기 때문입니다. 빨간색과 같은 색상을 쓰도록 하는 이유도 주변시가 색상 구분에 취약하기 때문에 충분히 지각할 수 있도록 하는 것이고요. 움직임에 민감한 주변시를 이용한다면 화면의 좌우 모서리에서 움직임을 가진 알림을 제공하도록 하기도 합니다.
Fixation의 결정 요인 중 Stimulus salience의 원리를 통해서도 이 원칙을 이해할 수 있습니다. 우리 시선에서 응시점을 가지려면, 자극이 현저히 눈에 띄어야만 합니다. 그래서 화면 안에 너무 많은 강조를 주어 응시점을 어디에 둬야 할지 모르게 해서도 안 되고, 반대로 강조된 부분이 없어서 모든 내용을 다 봐야만 하도록 해서도 안 되는 것입니다.
주의란 결국, 인간은 제한된 정신적 자원을 가지기 때문에 목표에 부합하는 정보만을 효율적으로 받아들이도록 하는 현상이기 때문입니다. 만약 모든 감각정보를 다 받아들인다면 뇌는 과부하에 걸려 버릴지도 모릅니다.
글을 마치며
이 글에서 설명하고자 하는 디자인 과정은 아래와 같습니다.
UI 가이드라인을 다루는 많은 분들이 있지만, UX 디자이너에게는 UI 가이드라인을 학습하거나 직접 작성하기 전에, 심리학적 측면에서 사용자를 고려해 보고 가이드라인의 정책과 규정에 대한 이해의 폭을 넓혀 보려는 시도가 필요할 것 같습니다. 또한, 가이드라인이 ‘왜’ 이렇게 되어야만 하는지에 의문을 지속해서 품는 과정이 필요하며 그랬을 때 더 나은 결과물이 나올 것이라 생각합니다.
[참고##가이드라인##]