[UI/UX 원칙 #3] 마이크로인터랙션 6가지 UX 원칙 가이드라인

마이크로인터랙션 6원칙

닉 바비치의 [마이크로인터랙션 6원칙] 소개하고자 합니다.

디자이너들은 큰 그림을 제대로 그리고 싶어 하지만 디테일을 제대로 만들지 않은 솔루션은 실패할 수 밖에 없습니다. 마이크로인터랙션을 적용하여 디테일을 살릴 수 있는 경우를 다음의 사례를 통해 하나씩 살펴보고자 합니다. 

원칙1. 시스템 상태 보여준다

시스템 상태를 유저에게 알려주는 것은 제이콥 닐슨이 얘기한 첫 번째 휴리스틱 평가 지침입니다. 예를 들어 데이터 업로드나 다운로드 프로세스, 아래로 당겨서 새로고침 등에서 애니메이션을 활용하면 어떤 일이 발생하고 있는지 사용자가 빠르게 이해할 수 있습니다. 

원칙2. 버튼과 컨트롤을 분명해 보이게 만든다

버튼이나 컨트롤을 만들 때는 사용자가 인풋을 주면 비주얼이나 모션 반응을 통해 명료성을 높여줄 수 있습니다. 사용자는 답신에 대한 본능적인 욕구를 가지고 있기 때문입니다. 

원칙3. 의미 있는 전환 효과를 만든다

마이크로인터랙션을 이용하면 페이지 사이에 시각적 연결 고리를 만들 수 있고 UI에 명료성을 부여합니다. 모션 디자인은 즐거움과 정보를 동시에 전달하면서 사용자의 이목을 효과적으로 끌어줄 수 있는데, 이는 특히 많은 정보를 스크린 상에 담아 보여줘야 하는 스마트와치나 모바일 기기에서 중요합니다.   

첫 번째 사례는 모핑 되는 아이콘으로, 상황이 바뀌면 모양을 바꾸어 두 가지 기능을 수행할 수 있습니다.  

두 번째 사례는 애플 iOS의 UI도 의미 있는 전환 효과의 좋은 사례입니다. 

마지막 사례는 다음과 같이 색상과 고정 요소를 적절히 활용하여 시각적으로 연결해주는 애니메이션입니다. 

원칙4. 사용자가 시작할 수 있도록 도와준다

마이크로인터랙션은 정보를 보여주고 사용자가 효율적으로 자신의 목표에 도달할 수 있도록 도와줍니다. 예를 들어 온보딩에서 활용하면 매우 도움이 됩니다. 온보딩에서 가장 중요한 기능과 컨트롤을 강조하여 유저를 가이드하고 교육시킬 수 있기 때문입니다.  

원칙5. UI상의 변화를 강조한다

마이크로인터랙션은 사용자의 이목을 끌 수 있기 때문에 알림과 같은 중요한 디테일에 사용되지만, 애니메이션이 기능적인 목적을 가지고 있으면서 사용자에게 적절한지 반드시 확인해야 할 때도 사용할 수 있습니다. 

원칙6. 즐거운 디테일을 추가한다

마이크로인터랙션은 기본적으로 전환될 때 사용하지만, 사용자에게 즐거움을 주는 데도 사용할 수 있습니다. 

마이크로인터랙션을 디자인할 때 고려할 사항

- 마이크로인터랙션을 눈에 거슬리지 않으면서 제대로 기능하게 만든다. 
- 오래 지속되어야 함을 염두하고 만든다. 
- KISS(Keepit simple, Stupid) 원칙을 따른다. 
- 타깃 사용지와 콘텍스트에 대해 알고 있는 지식을 활용해서 보다 정교하고 효과적으로 만든다.
- 다른 UI 요소들과 시각적 하모니를 이루게 만든다. 

마이크로 인터랙션은 ‘작은 디테일에 집중하는 것이 크고 강력한 결과를 가져다줄 수 있음’을 보여줍니다. 물론 훌륭한 디자인은 기능적인 부분부터 시작해서 마이크로 인터랙션에 이르기까지 풀 스택으로 이뤄져야 합니다.