마이크로인터랙션 6원칙
UX 디자인 배우기 #04
UX 아티클
SmashingMagazine에 게재된 Nick Babich 의 글 ExperienceDesign Essentials: Animated Microinteractions In Mobile Apps을 소개하고자 합니다.
디자이너들은 큰 그림을 제대로 그리고 싶어 하지만 디테일을 제대로 만들지 않은 솔루션은 실패하게 된다고 합니다. Nick Babich는 마이크로인터랙션을 적용하여 디테일을 살릴 수 있는 경우를 사례를 들어 설명합니다.
시스템 상태 보여준다
시스템 상태를 유저에게 알려주는 것은 제이콥 닐슨이 얘기한 첫 번째 휴리스틱 평가 지침입니다. 예를 들어 데이터 업로드나 다운로드 프로세스, 아래로 당겨서 새로고침 등에서 애니메이션을 활용하면 어떤 일이 발생하고 있는지 유저가 빠르게 이해할 수 있다고 합니다.
데이터 다운로딩 애니메이션 (Image: Nick Buturishvili)버튼과 컨트롤을 분명해 보이게 만든다
버튼이나 컨트롤을 만들 때는 유저가 인풋을 주면 비주얼이나 모션 반응을 통해 명료성을 높여줘야 한다고 합니다. 유저는 답신에 대한 본능적인 욕구를 가지고 있기 때문이라고 합니다.
새로고침을 위해 아래로 내린다 (Image: Toma Reznichenko)의미 있는 전환 효과를 만든다
마이크로인터랙션을 이용하면 페이지 사이에 시각적 연결 고리를 만들 수 있고 UI에 명료성을 부여해준다고 합니다. 모션 디자인은 즐거움과 정보를 동시에 전달하면서 유저의 이목을 효과적으로 끌어줄 수 있는데, 이는 특히 많은 정보를 스크린 상에 담아 보여줘야 하는 스마트와치나 모바일 기기에서 중요하다고 합니다. 필자는 세 가지 사례를 들어서 설명하고 있습니다.
첫 번째 사례는 모핑 되는 아이콘으로, 상황이 바뀌면 모양을 바꾸어 두 가지 기능을 수행할 수 있다고 합니다.
두 번째 사례는 애플 iOS의 UI도 의미 있는 전환 효과의 좋은 예라고 합니다.
마지막 사례는 다음과 같이 색상과 고정 요소를 적절히 활용하여 시각적으로 연결해주는 애니메이션입니다.
유저가 시작할 수 있도록 도와준다
마이크로인터랙션은 정보를 보여주고 유저가 효율적으로 자신의 목표에 도달할 수 있도록 도와준다고 합니다. 예를 들어 온보딩에서 활용하면 매우 도움이 된다고 합니다. 온보딩에서 가장 중요한 기능과 컨트롤을 강조하여 유저를 가이드하고 교육시킬 수 있기 때문이라고 합니다.
매끄러운 온보딩 (Image: Ramotion)UI상의 변화를 강조한다
마이크로인터랙션은 유저의 이목을 끌 수 있기 때문에 알림과 같은 중요한 디테일에 사용되지만, 애니메이션이 기능적인 목적을 가지고 있으면서 유저에게 적절한지 반드시 확인해야 할 때도 사용한다고 합니다.
알림(Image: Arjun Kani)즐거운 디테일을 추가한다
마이크로인터랙션은 기본적으로 전환될 때 사용하지만, 유저에게 즐거움을 주는 데도 사용할 수 있다고 합니다.
마이크로인터랙션을 디자인할 때 고려할 사항
마이크로인터랙션을 눈에 거슬리지 않으면서 제대로 기능하게 만든다.
오래 지속되어야 함을 염두하고 만든다.
KISS(Keepit simple, Stupid) 원칙을 따른다.
타깃 유저와 콘텍스트에 대해 알고 있는 지식을 활용해서 보다 정교하고 효과적으로 만든다.
다른 UI 요소들과 시각적 하모니를 이루게 만든다.
마이크로 인터랙션은 ‘작은 디테일에 집중하는 것이 크고 강력한 결과를 가져다줄 수 있음’을 보여준다고 합니다. 물론 훌륭한 디자인은 기능적인 부분부터 시작해서 마이크로 인터랙션에 이르기까지 풀 스택으로 이뤄져야 함도 강조하고 있습니다.
전민수 UX 컨설턴트 소개
https://brunch.co.kr/@ebprux/1332
줌 Live 강의 수강생 모집 중
(매월 Live 3-4개 강좌 오픈하고 있습니다)
인프런 20개 UX 인터넷(VOD) 강좌 수강생 모집 중
(평생 수강)
https://www.inflearn.com/users/196290
