인터랙션을 사용할 때 기억해야 할 질문 5가지

갓 태어난 아기가 움직이는 모빌에 자연스럽게 시선을 두는 것처럼, 사람들은 자연스레 움직이는 것에 시선을 두게 됩니다. ‘움직임’이라는 것은 생명력을 나타내고 시선을 몰입시키는 효과를 가지고 있습니다. 각 개체에 ‘motion’을 적절하게 사용한다면 효과적으로 사용자의 시선을 유도할 수 있고, 생명력을 느낄 수 있게 해줍니다. 이런 motion을 이용한 UX 요소로 “인터랙션 디자인”이 있습니다. 이번 글에서는 인터랙션을 디자인할 때 반드시 질문해보아야 하는 것들에 대해 이야기해보려고 합니다.

 

 

(출처 : bahns.net)

 

 

인터페이스가 서비스의 정적인 큰 틀을 말한다면, 인터랙션은 서비스 안에서 사용자와 인터페이스 간의 관계를 형성하는데 필요한 동적인 요소입니다. 인터페이스 안에는 사용자가 서비스를 이용하면서 사용하게 되는 버튼, 얼럿, 토스트 팝업, 입력 폼, 메뉴, 슬라이더 등의 요소가 다양하게 구성되어 있습니다. 이것들을 사용하기 위해 ‘액션’을 취했을 때, 각각의 요소들이 또 다른 ‘액션’을 통해 적절하게 ‘반응’하는 것이 바로 인터랙션의 핵심적인 부분입니다.

 

사용자에게 효과적인 인터페이스를 전달하기 위한 인터랙션은 자칫 무계획적으로 이곳저곳에 분산되어 버릴 위험이 있습니다. 하나의 서비스 안에서 인터페이스를 사용하는 사용자에게는 동일한 UX를 느낄 수 있도록 명확한 의도와 계획이 필요합니다. 아래에서 이야기하는 몇 가지 질문들은 인터랙션을 적용할 때 방향성을 놓치지 않도록 도와줍니다.

 

 

 

1. 정체성이 충분히 구현되었는가?

우리가 UI 디자인을 기획하고 의도할 때 대표적인 요소로 생각하는 타이포그래피, 레이아웃, 컬러, 이미지는 각각의 요소가 모여 하나의 서비스의 정체성을 구분되게 됩니다. 여기서 고려해야 할 사항이 하나 더 있습니다. 바로 인터랙션입니다. 움직임은 그 자체로 더 많은 의미를 내포하고 있습니다. 부드럽거나, 통통 튀거나, 빠르거나, 뒤집히거나 등등 각각의 움직임은 저마다 다른 성격의 정체성을 담고 있습니다. 서비스를 구상할 때 인터랙션에 대한 고민이 충분히 이루어지지 않는다면 의도했던 정체성과는 다른 방향의 결과물이 나올 수 있습니다.

 

(출처 : Swipe to Travel App)

 

Swipe to Travel App에서는 카드 레이아웃에 스와이프 효과를 주어 명확한 인터랙션을 확립하였습니다. 여행지의 엽서를 보는 듯한 오브젝트에 사진을 한 장씩 넘기는 듯한 인터랙션을 주어 여행이라는 느낌을 더욱 잘 느낄 수 있도록 돕습니다. 또한 텍스트 객체가 이동할 때도 밝기 변화와 확장 효과를 통해 부드럽고 유연한 느낌을 주었고, 다른 화면으로 이동할 때도 이 효과를 공통적으로 적용하여 부드럽고 서정적인 느낌의 정체성을 보여줍니다.

 

 

 

2. 피드백은 적절한가?

사용자가 행동을 한 이후 일어난 변화를 적절하게 피드백해 줄 수 있어야 합니다. 메뉴 탭을 터치했을 때 팝업으로, 혹은 슬라이딩으로, 혹은 밝기 변화 등으로 의도에 맞는 피드백 인터랙션이 노출되어야 사용자는 변화를 인지하게 됩니다. 또한 적절한 피드백은 사용자가 수행중인 테스크의 중반 이탈을 막을 수 있는 순기능이 있습니다.

 

(출처 : 네이버 항공권)

 

네이버 항공권 서비스의 경우 항공권 검색 이후 적절한 피드백 화면을 제공하여 “검색을 하고 있다는 것”을 명확하게 인지시켜 줍니다. 또한 중간의 로딩 시간 또한 공백 없이 채워 이탈을 막고 지루함을 덜어주는 역할까지 포함하고 있습니다. 이처럼 콘셉트에 맞는 명확한 피드백은 사용자에게 몰입감과 유지력을 부여해 줍니다.

 

 

 

3. 행동 유도성을 내재하고 있는가?

인터랙션은 대부분의 사람들에게 익숙한 방향으로 설계되어야 합니다. 사용자가 특별한 설명이나 부가적인 도움이 없더라도 대상의 기능을 쉽게 떠올릴 수 있어야 좋은 인터랙션이라고 할 수 있습니다.

 

(출처 : Minh Pham)

 

Minh Pham의 카드 스와이프 인터랙션을 살펴보면 사용자가 자연스럽게 넘기고 싶은 행동을 유도합니다. “넘기세요”라는 직접적인 카피나 인포그래픽 요소 없이도 사용자는 스와이프 기능을 인식하고 행동하게 만듭니다. 이런 직관적인 인터랙션은 결국 편리함으로 연결됩니다.

 

 

 

4. 사용하기 편안한 영역에 배치되어 있는가?

사람의 행동을 연구해야 하는 숙명을 지닌 UX 디자인 분야에서는 ‘사용하기 편리한가?’라는 논제가 어떠한 순간에서든 대두됩니다. 이때, 충분히 고려되어야 할 부분은 다양한 디바이스 안에서 편안하게 사용할 수 있는 영역에 대한 것입니다. 다양한 디바이스 타입과 화면 크기로 인해 제한적인 영역이 존재하기 때문입니다.

 

 

(출처 : Rosenfeld Media, Creative Commons 2.0)

 

위의 사진의 영역처럼 사용자가 편하게 사용할 수 있는 영역안에 인터랙션 요소가 배치되어야 합니다. 물론 기획자가 원하지 않는 방향의 행동(종료 및 취소 등)일 경우, 의도적으로 사용하기 어려운 영역에 배치할 수도 있을 것입니다. 그런 경우를 제외하고 항목들은 대부분 좌측보다는 우측에 배열이 되어 있습니다. 한 손으로도 충분히 조작이 가능하도록 고려가 된 것입니다.

 

 

(출처 : 에어비앤비)

 

에어비앤비의 어플의 필터 영역을 살펴보면 이런 부분이 충분히 고려되었음을 알 수 있습니다. 전반적으로 우측 정렬과 하단 배치로 이루어져 있고 이러한 인터랙션 배치는 어떤 값이든 오른손만으로 조작이 가능하도록 해줍니다. 결국 가장 중요한 것은 사람이 사용하기에 편한 것인지 여부에 달려있습니다.

 

 

 

 

5. 과도하지 않은 인터랙션인가?

화려하고 시선을 몰입시키는 큰 장점을 가진 UI 요소인 인터랙션은 자칫 과하거나 정체성에 맞지 않게 사용될 때가 있습니다. 명확한 인터랙션은 사용자가 원하고 예상할 수 있는 범위 내에서 재생되는 것을 목표로 해야 합니다.

 

 

(출처 : 좌 – G9 / 우 – 구글 드라이브)

 

좌측의 G9의 인터랙션의 경우 서브 화면에서 제품에 하트 버튼을 누르면 바로 하트 모양이 팝업으로 리액션 됩니다. 군더더기 없이 사용자가 입력한 행동의 결과 값이 노출되기에 사용자 또한 예상이 가능하며 적절하다는 느낌을 받을 수 있습니다. 반면, 우측의 구글 드라이브의 경우 항목을 선택할 때마다 항목이 날아가는 효과를 적용했습니다. 단순히 선택에 대한 반응이라고 하기에는 과한 인터랙션으로 사용자의 목적에 오히려 방해가 될 수 있습니다.

 

 

 

인터랙션 디자이너의 역할

1. 정체성이 충분히 구현되었는가?
2. 피드백은 적절한가?
3. 행동 유도성을 내재하고 있는가?
4. 사용하기 편안한 영역에 배치되어 있는가?
5. 과도하지 않은 인터랙션인가?

 

앞서 이야기했던 5가지 질문들을 통해 UI 디자이너들은 보다 나은 UX 경험을 제공할 수 있습니다. 이외에도 사람을 위한 디자인을 하려면 더욱 세심하고 디테일한 접근이 필요합니다. 디자이너와 기획자들은 이론적으로 사람을 연구하는 것에 그치지 않고 실제 사람들이 생활하는 모습, 서비스나 제품을 사용하는 과정, 환경등을 보다 진정성있게 관찰하고 더 자연스럽고 인간친화적인 인터랙션을 연구해야 합니다.

 

사용자는 화려하고 멋진 인터랙션을 원하는 것이 아닙니다. 그저 현실과 같이 개체를 눌렀을 때 누른 느낌이 들고, 페이지를 넘기면 넘기는 느낌이 났으면 할 뿐입니다. 이렇듯 인터랙션의 방향은 판타지가 아닌 지극히 현실주의 적이어야 합니다. 이런 인터랙션을 더 잘 만들어 내기 위해서 해야 할 일은 ‘관찰’입니다.

 

만지고, 누르고, 잡고, 흔드는 일반적인 행동 뒤에 따라오는 반작용에 대한 움직임을 끊임없이 바라보고 탐구하는 자세가 필요합니다. 최대한 자연스러우면서 확실한 반응을 인터랙션에 녹일 수 있다면 정말 뛰어난 UI를 구현할 수 있을 것이라 생각합니다.

 

 

https://brunch.co.kr/@ultra0034/57

https://brunch.co.kr/@bundi/14

https://uxdesign.cc/motion-in-ux-design-9-points-to-get-started-e891974dc7ee

UX 디자인이란? – UI, UX, 인터랙션 디자인의 정의

http://blog.rightbrain.co.kr/?p=2241

https://slowalk.com/2246

https://brunch.co.kr/@ebprux/174

https://brunch.co.kr/@plusx/26

Recent Posts

Leave a Comment

Be the emotionist!

Career