[UX Report] 3. 인터랙션 디자인 -인터랙션 디자인의 요소와 정의-

안녕하세요.

소셜 미디어 포럼의 김현태 입니다.

이번주에도 어김없이 찾아오는 UX관련 이야기입니다.

1편과 2편은 어떻게 읽으셨는지요?

물론 UX를 전공하고 있지는 않지만 UI개발자로써 개인적을 공부한 자료를 공유하는 포스트입니다.

많은 도움은 안되시더라도 조금의 개념을 잡는 정도의 도움이 되셨으면 더이상 바랄것이 없을 것 같습니다.

감사합니다.

* 지난 회 보기 : 01 인터랙션 디자인 정의  /   02 인터랙션 디자인 접근법

 

Interaction Design                                                                                              

03 인터랙션 디자인의 요소와 법칙 

 

지난 리포트에서 인터랙션 디자인 접근법에 대해서 언급했는데, 디자이너가 어떤 접근법을 적용하던지 간에 인터랙션 문제 해결법을 찾는데 영향을 주는 기본 요소는 움직임(motion), 공간(space), 시간(time)이다. 그리고 이 요소들을 조합해서 제품이나 서비스를 만들어 내기 위한 몇 가지 원칙들이 있다.

이번에는 인터랙션 디자인의 기본 요소와 인터랙션 디자인에 적용되는 법칙들에 대해 알아보기로 한다

 

인터랙션 디자인 요소

커뮤니케이션 디자이너들은 ‘선’과 같은 기초 요소를, 산업 디자이너들은 ‘원통, 원뿔’ 등의 기본적인 입체 형태들을 이용하는 것처럼 대부분의 디자인 원칙들은 원초적인 요소들을 사용한다. 반면 인터랙션 디자이너에게 기초 요소들이란 좀 더 개념적이다.

 

1. 움직임 (Motion)

사람이 대화를 할 때는 성대가 진동하고, 악수를 할 때는 팔과 손이 움직인다. 상호작용이란 특정한 방식의 커뮤니케이션이며 이는 움직임을 통해 만들어진다.

 

우리는 다양한 제품들을 통해 다양한 방식으로 커뮤니케이션 한다. 제품과 사용자들은 그에 맞는 ‘행동’을 만들어 내게 되는데, 인터랙션 디자이너는 이 행동을 주의 깊게 설계한다. 제품이 행동하는 방식에 따라 사용자들이 행동하며 모든 행동은 움직임이다. 움직임은 태도, 문화, 개인적 특성과 상황에 따라 다르게 나타난다. 디자이너들은 이런 다양성을 충분히 이해하고 계산해야 한다.

 

웹사이트의 링크를 클릭하면 페이지가 이동하고, 팝업 창의 닫기 버튼을 누르면 창이 사라지는 것처럼, 움직임은 특정한 동작을 위한 시작점이며, 이렇게 촉발된 동작이나 그 동작에 대한 피드백 또한 움직임의 형태로 나타난다.

 

2. 공간 (Space)

움직임은 아주 미세한 단위라 하더라도 어쨌든 일정한 공간 안에서 일어난다. 인터랙션 디자이너는 2차원이든 3차원이든, 디지털이든 아날로그이든 우리가 사는 물리적 공간이든 간에 이런 공간을 기반으로 작업한다.

Mp3플레이어의 스위치를 켜서 기기를 작동시키는 것, 컴퓨터를 통해 다운 받은 음악이 스피커를 통해 물리적인 공간에 울려 퍼지는 것, 이런 것들처럼 인터랙션 디자인은 물리적 공간과 디지털 공간을 넘나든다.

 

대부분 인터랙션 디자이너들은 모니터나 스크린에서 3차원 공간을 충분히 활용하고 못하고 있다. 우리가 이용하는 모니터와 디스플레이 스크린의 평면적인 모양새는 ‘원근’에 대한 개념을 무시하게 한다. 대부분의 웹사이트는 그 안에서 3차원의 Z축(깊이)을 이용한 공간 표현에 인색하다.

 

3. 시간 (Time)

모든 인터랙션은 공간에서 시간을 들여 일어나며, 공간을 이동하는 데는 시간이 걸린다. 웹사이트 상의 버튼을 클릭하기 위해 마우스나 키보드를 누를 때도 순간적이지만 시간이 필요하다.

인터랙션 디자이너는 항상 시간을 염두에 둬야 한다. 인터넷 쇼핑몰에서 물건을 구매하려 할 때, 페이지가 이동할 때 마다 한참씩 시간이 걸리고, 쇼핑하는 동안 몇 번이고 로그인을 다시 해야 한다면, 그 쇼핑몰에서 물건을 사는 것은 힘들 것이다. 디지털 시간은 인간의 시간과는 다르게 1000분의 1초인 millisecond단위로 측정되지만, 사람들은 컴퓨터를 작동하면서 이런 미세한 시간상의 변화를 감지 할 수 있고, 반응이 몇 millisecond씩 지연된다면 짜증나게 되고 사용하지 않게 된다.

 

4. 외관 (Appearance)

물건의 생김새는 그 물건이 어떻게 기능하고 사람이 그 물건과 어떻게 인터랙션 할 수 있는지 힌트를 준다

 

그림3-1 문고리의 모양은 이것을 돌려서

문을 열 수 있을 것이라는 예측을

하게 해준다.

 

 

 

 

 

 

외관은 심리학자 제임스 깁슨(James Gibson)이 1966년 ‘어포던스(Affordance)-대상이 주는 감각적이고 기능적인 특이’라고 불렀던 중요한 요소 중 하나다. 어포던스란 물건과 어떻게 상호작용할 지를 알려주는 개별 사물의 속성이다. 의자는 앉을 수 있는 형태의, 버튼은 누를 수 있는 모양의, 컵은 무엇인가를 담을 수 있는 형태의 어포던스를 가지고 있다.

다만, 어포던스는 환경적이고 문화적이다. 의자에 앉아본 적이 없거나 버튼을 눌러 본적이 없는 사람의 경우 이것을 보며 무엇을 해야 할지 예측 불가능 할 것이다.

 

외관을 구성하는 다양한 특성들 있는데, 이러한 것들은 외관에 반영되고, 단순한 명령어 한 줄 일지라도 어떤 형태로든

생김새를 가지고 있다.

- 외관 구성하는 특성

* 균형(Proportion)        * 구성(Structure)         * 크기(Size)

* 형태(Shape)             * 무게(Weight)           *컬러-색조, 색상, 명도(Color-hue,value,saturation)

 

5. 질감 (Texture)

질감은 감성을 함께 전달한다.

디자이너들은 진동이나 온도 같은 다양한 질감 정보도 다루게 된다. 휴대폰의 메시지 알림을 위한 진동기능도 이에 해당한다. 어떠한 질감으로 정보를 전달하는 것이 유용한지도 놓쳐서는 안 되는 요소이다.

 

6. 소리 (Sound)

소리는 인터랙션 디자인에서 차지하는 비중이 작은 부분이지만 대단히 중요한 부분이 될 수 있다. 소리를 다양하게 변형하면 매우 많은 정보를 담을 수 있기 때문이다.

소리는 다음과 같은 세 가지의 중요한 요소로 이뤄지며, 각 요소는 디자이너가 결정한다

* 음높이, 높낮이(Pitch)        * 크기(Volume)       * 음색 혹은 음질(Timbre or tone quality)

 

 

인터랙션 디자인의 법칙

사실 인터랙션 디자인은 견고한 규칙이나 법칙이라고 할 만 한 것이 없다. 하지만 몇 가지 유용한 법칙들이 있으며, 이들은 작업을 할 때 길잡이가 되어 준다.

 

1. 피츠의 법칙 (Fitts’ Law)

피츠의 법칙(Fitts' Law)은 사용성 분야에서 인간의 행동에서 대해 속도와 정확성간의 관계를 설명하는 기본적인 법칙이다. 시작점에서 최종 타겟 지역에 얼마나 빠르게 닿을 수 있을지를 예측하고자 하는 것이다. 이는 타겟 영역의 크기와 타겟까지의 거리에 따라 결정 된다. 이 법칙은 폴 피츠(Paul Fitts)에 의해 1954년에 발표되었다.

 

이를테면, 웹페이지에서 링크가 걸린 버튼이 너무 작으면 클릭하기 힘든 이유를 설명하는 것이다.

 

이 법칙은 인터랙션 디자이너에게 세가지 중요한 의미가 있다. 타겟의 크기가 중요하기 때문에 버튼처럼 클릭할 수 있는 오브젝트는 적정한 크기여야 하며, 화면의 끝이나 모서리가 버튼을 배치하기에 적당한 장소라는 것이다.(그림3-2) 그리고 팝업 메뉴는 사용자가 현재 작업하고 있는 오브젝트 바로 옆에 있는 것이 좋다는 것이다.(그림 3-3)

 

     

그림3-2 피츠의 법칙이 적용된 버튼의 위치(네이버 카페 게시판 부분 화면)   그림3-3 오른 클릭 팝업 메뉴

 

2. 힉의 법칙(Hick’s Law)

힉의 법칙(혹은 힉-하이만 법칙, Hick-Hymann law)은 인지심리학 및 인터랙션 디자인 분야에서 사용자에게 주어진 선택 가능한 선택지의 숫자에 따라 사용자가 결정하는 데 소요되는 시간이 결정된다는 법칙이다. 이는 일반적으로 사람들이 가능한 선택지의 묶음을 한번에 하나씩 고려하지 않는다는 데에서 기인한다. 그 대신 사람들은 선택지들을 분류로 나누어 사고하며 결정에 있어 각 단계마다 남아있는 부분의 선택지를 제거하는 방향으로 사고한다. 이에 따라 힉의 법칙은 5개의 선택지 밑에 있는 각각 2개의 선택지를 선택할 때 보다 보다 10개의 선택지가 모두 하나의 메뉴 밑에 있는 것이 더 빨리 선택 될 수 있다고 주장한다.

 

그러나 힉의 법칙에는 논쟁의 여지가 있다 이 법칙에 따르면 선택 가능한 메뉴들을 분류로 다층화하여 드롭다운 메뉴로 만드는 것보다 동시에 보여주는 것이 더 효율적 일수 있다는 것인데, 네이버와 같이 컨텐츠가 풍부한 사이트들이 모든 메뉴를 메인 페이지에 한꺼번에 띄운다면 얼마나 끔찍한 디자인이 될지 상상해보라

 

힉의 법칙에 따르면 결정에 걸리는 시간은 두 가지 주요 요소에 의해 결정되는데 첫째는 선택지에 대한 사용자의 친숙도 이고 또 다른 하나는 선택지의 형식이다. (예, 비디오,단어,소리..)

 

3. 마법의 숫자 7 (The Magic Number Seven)

1956년 프린스턴 대학의 심리학과 교수였던 조지밀러(George Miller)는 인간의 마음이 7개(±2개)의 아이템에 대한 정보를 가장 잘 기억한다고 규정했다. 5개에서 9개 사이의 정보를 넘어가면 그게 정보검색 단위거나 개별요소 목록이거나 숫자의 조합이거나 간에 두뇌는 실수를 하기 시작한다. 이보다 많은 양의 정보는 짧은 시간 안에 기억하는 사람의 단기 기억 메모리의 한도를 넘어서는 것 같다, 이 법칙은 힉의 법칙과 배치 되는 것 같다.

 

밀러는 이 법칙을 인간이 짧은 시간에 기억하거나 시각화할 수 있는 정보량에 한정해서 이야기한 것이므로, 무조건 7이라는 숫자를 지킬 필요는 없어 보인다.

정보가 화면에 표시될 때 사람들은 그 정보를 굳이 단기 기억으로 저장하지 않는다. 단지 훑어 볼 뿐이다.

그러나 제품을 디자인 할 때 이 법칙을 무시해서 사용자의 인식에 과부하를 일으키는 일은 없어야 한다. 예를 들어 사용자가 익숙하지 않은 아이템들을 화면이나 창에서 기억하지 않아도 되게 디자인 해야 한다.

새 전화번호를 입력하기 위해 휴대폰에서 새 창을 여러 번 띄워야 한다면 머릿속의 단기 메모리에 저장한 새 전화번호 정보는 사라질 수 있기 때문이다.

 

4. 테슬러의 복잡성 보존의 법칙 (Tesler’s law of the Conservation of Complexity)

래리 테슬러(Larry Tesler)가 만들어낸 복잡성 보존의 법칙은 개별 프로세스에서의 복잡성은 지속된다는 것이다. 개별 프로세스에서의 복잡성은 더 이상 단순화 시킬 수 없는 지점이 있으며, 거기서의 복잡성은 더는 줄어들지 않고 다른 곳으로 옮겨 간다는 것이다.

 

예를 들면 이메일 작성시 수신자 주소는 필수입력정보이지만 매번 이것들을 입력하는 것은 사용자에게는 귀찮은 일이다. 이것이 필요한 복잡성이다. 그러나 수신자 주소 자동완성 기능을 구현하여 매번 전체주소를 직접 입력하지 않아도 된다면 복잡성의 일부가 소프트웨어로 전가된 것이다.

 

테슬러의 법칙은 두 가지 의미로 고려 되어야 한다. 하나는 디자이너가 아무리 땜질 한다 해도 더는 단순화 시킬 수 없는 기본요소들에 대한 지식이 있어야 한다는 것이다. 또 하나는 만드는 제품에서 이런 복잡함을 대신 해결해 줄 적당한 방법을 찾아야 할 필요가 있다는 것이다. 복잡한 일들은 인터랙션 디자이어들이 만들어내는 제품/서비스이 가능한 많이 나눠 맡아야 한다.

 

4. 포카 요케의 법칙 (The Poka-Yoke Principle)

포카 요케(ポカヨケ)는 원래 일본어로 “실수를 피하는”이란 뜻이다. 이 법칙은 도요타의 시게오 싱고(Shigeo Shingo)에 의해 만들어진 것으로, 품질 관리 측면에서 실수를 방지하도록 행동을 제한하거나 정확한 동작을 수행하도록 강제하는 여러 가지 제한 점을 만들어 실패를 방지하고 사용자들이 제품을 조작할 때 올바른 방식으로 실행하도록 하는 것이다

 

예를 들어 자동차에서 기어를 주차 상태 위치인 “P”로 놓지 않으면 시동이 걸리지 않도록 만들어 운전자가 자동차를 안전하지 않은 상태로 놔두고 나가는 것을 방지하도록 한다. 또한 컴퓨터는 USB 장치의 플러그를 꼽을 때 뒤집어진 상태로 꼽으려고 하면 안 되도록 디자인 되어 있다. 인지 심리학 및 인간과 컴퓨터 상호작용 분야에서도 이를 이용하여 여러 가지 실수를 방지하는 디자인 원리의 하나로 받아들여져서 이용하고 있다.

 

포카 요케는 초기에 일어날 수 있는 문제를 방지함으로써 어떤 프로세스가 시작되기 전에 적절한 상태를 만들어낸다.

인터랙션 디자이너들은 포카 요케 법칙을 쓸 수 있는 많은 가능성을 살펴봐야 한다.

 

 그림3-4 포카 요케 애플리케이션의 예

 : USB나 파이어와이어, 전원 등 전자 기기에 이용되는 코드가 모두 특정한

부분에 특정한 방식으로만 맞게 디자인되어있어 다른 단자에 꽂는 실수를

막는다

 

 

 

 

 

 

5. 직접조작과 간접조작 (Direct and Indirect Manipulation)

디지털 오브젝트는 직접적인 방식과 간접적인 방식, 두 가지 방식으로 조작된다.

 

직접조작은 1980년대 초 메릴랜드 대학의 벤 슈나이더만(Ben Shneiderman)에 만들어낸 개념으로 손가락이나 마우스, 혹은 손과 연결된 다른 확장자를 이용해서 특정한 디지털 오브젝트를 선택함으로써 시작되는 프로세스다.그리고 나서 이 오브젝트를 움직이거나, 휴지통으로 드래그 하거나, 바꾸는 등 다른 행동을 할 수 있다. 예를 들어 오브젝트의 크기를 키우려면 오브젝트를 선택한 후 가장 자리를 드래그한다. 직접 조작은 우리의 심리적인 경험의 방식과 맞닿기 때문에 쉽게 배우고 이용할 수 있다.

 

간접 조작에서는 명령어나 메뉴, 혹은 그 오브젝트의 일부를 직접 바꾸지 않고 다른 방법을 이용한다. 애플리케이션 인터페이스에서 ‘모두 선택’ 명령을 선택한 후 키보드의 삭제 키를 누르는 것이 간접 조작의 한 예라고 할 수 있다. 과거에, 특히 매킨토시가 GUI를 일반화하기 이전에는 모든 컴퓨터의 명령이 간접 조작이었다.

 

6. 피드백과 피드포워드 (Feedback and Feedforward)

피드백(feedback)은 무엇인가 일어났다는 것에 대한 인지작용이다. 사용자가 제품 작동 시 오류를 일으킨 경우 즉각적이고 명백하게 피드백이 주어지지 않는 다면 사용자는 자신의 잘못된 동작을 몇 번이고 반복하여 심각한 문제를 일으킬 수 있다.

적절한 피드백을 디자인하는 일은 아주 중요하다. 얼마나 빠르게, 어떤 피드백이 주어질지를 결정해야 한다.

 

피드백에 관련된 다른 요소로는 디자이너 톰 쟈쟈디닝랏(Tom Djajadiningrat)이 ‘피드포워드(feedforward)’라고 정의한 것이 있다. 피드포워드란 본인이 동작을 하기 전에 무슨 일이 벌어질 것인지 아는 것이다

피드포워드는 앞으로 무슨 일이 벌어질지 예측할 수 있게 함으로써 사용자가 확신을 갖고 동작을 하게 만든다. 이는 제품/서비스에 넣어 디자인하기가 피드백보다는 어렵지만 이를 이용함으로써 얻을 수 있는 장점은 항상 염두에 두고 있어야 한다.

 

지금까지 인터랙션 디자인의 요소와 법칙에 대해 알아보았다.

인터랙션 디자이너들은 앞에서 먼저 언급한 인터랙션 디자인의 요소를 작업에 잘 활용해야 한다. 이 모든 요소를 직접 다루지 못할지라도 이것들이 인터랙션 디자인을 이루는 기초 재료임을 기억하고 있어야 한다. 또한 인터랙션 디자인의 법칙은 절대적이지는 않지만 보다 만족스러운 제품/서비스를 만들어낼 수 있도록 도와주는 좋은 길잡이가 되어 줄 것이다.