UX 디자인 (모션으로 프로토타이핑하기)

어떻게 해야 하는가?

프로토타입 제작은 제품이 사용자를 어떻게 돕는지에 대한 스토리를 들려주는 과정

모션을 사용하면 해당 스토리를 더 잘 전달할 수 있고 인터랙션은 본래 다이나믹하며 정적인 요소(스케치, 목업)로 이를 설명하려고 애쓰는 것은 사용자의 상상력을 복잡하게 하므로 좋지 않음

프로토타입을 제작할 때 모션과 시간을 자유롭게 컨트롤할 수 있는 툴을 사용하여 이점을 얻을 수 있음

---

{ 😎프로토타이핑에서 모션의 역할 } - 여기부터!

일반적으로 앱에는 움직이는 부분이 많음 ex) 버튼을 클릭할 때 등장하는 패널 간의 전환효과, 터치 제스처에 반응하는 애니메이션과 이미지 그 외 많은 부분이 존재함

각각의 요소가 움직이는 방법을 결정하는 것은 숙고해야 하는 중요한 디자인 결정 사항 / 프로토타이핑할 때 목표 달성을 위해 모션을 사용하기 위한 다양한 접근법을 탐색 가능

 

(1) 모션은 설명하는데 도움을 준다.

정보 체계를 명확히 하거나 방향성 힌트를 제공하는 것은 글보다 모션을 통해 직관적으로 전달할 때 더 효과적 / 요소의 움직임을 디자인할 때, 반드시 해당 움직임 속에 일관성을 갖도록 해야 한다.

ex) 목록 스크롤 동작에서의 저항은 목록의 끝에 도착했음을 사용자에게 전달하기 위해 사용됨

 

(2) 모션은 톤을 정한다.

커뮤니케이션을 할 때, 손동작을 포함한 모든 몸짓 언어는 메시지가 어떻게 받아들여지는지에 영향을 미친다. 이와 마찬가지로, 전환 효과의 속도는 앱에 다양한 톤을 부여한다. 

ex) 구성 요소를 통통 튀게 만드는 동작은 장난기 많은 톤을 전달함

 

(3) 모션은 변화를 더 자연스럽게 만들어 준다.

뇌는 기본적인 물리법칙을 직관적으로 이해하도록 프로그래밍 되어 있음 

ex) 목록에서 1가지 항목을 제거할 때, 구성 요소가 갑자기 사라지기보다는 점차 사라지면서 빈자리가 좁아지는 편이 훨씬 더 잘 전달 됨

 

(4) 모션은 관심을 사로잡는다.

구성 요소가 움직이는 동작 or 그룹에 새로 추가된 신규 요소와 같은 관련 요소로 사용자의 관심을 끌 수 있음 ex) 로딩 인디케이터는 기다림을 덜 지루하게 만들 수 있음 

모션은 적절하게 적용하여야 하며 사용자를 귀찮게 만들지 않도록 남용을 피해야 함

적절한 툴을 사용하여 다양한 유형의 모션을 컨트롤하고, 사용자 니즈에 더 잘 맞는 접근법을 탐색하여야 함

😎여기까지!

---

실용적으로 진행하기

미리보기를 자주 하라.

프로토타입은 기능을 만드는 것이 아닌 사용자 경험을 새롭게 만드는 작업

프로토타입 개발이 진행됨에 따라 해당 경험을 확인할 필요가 있다. 프로토타입을 자주 미리 보기하는 과정은 상세 조정이 필요한 내용을 더 잘 알아내고, 가장 중요한 측면을 다듬는데 집중할 수 있게 해줌

경험을 미리 보는 것은 수정할 수 있는 무수히 많은 측면 중에 어떤 것이 실제로 프로토타입을 개선할 수 있을지를 결정하는 데 도움을 주곤한다.