brunch

You can make anything
by writing

- C.S.Lewis -

by UX 컨설턴트 전민수 Aug 16. 2016

마이크로인터랙션 6원칙

UX 디자인 배우기 #04

안녕하세요. UX 컨설턴트 전민수입니다.  

지난 20년간 UI/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 요소들과 시각적 하모니를 이루게 만든다. 


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


감사합니다. 





UI/UX 교육 안내


저는 한국인터넷전문가협회에서 UX 디렉터 등 다수의 UI/UX 강좌를 강의하고 있습니다. 

 http://www.kipfa.or.kr/Education/InternetProEduCenter.aspx


기업 방문 맞춤형 UI/UX 교육 안내  


기업 담당자의 교육 요구 사항에 맞춰 UI/UX 강좌 커리큘럼을 구성합니다. 

아래는 제가 강의하는 UI/UX 강좌 목록입니다. 

아래 강좌를 선택하면, 세부 커리큘럼 및 강의 교재를 미리보기 형태로 엿볼 수 있습니다. 


UX란 무엇인가

콘텐츠/UI/디자인 전략

UX 방법론

스토리라인 / WOM 분석

데스크 리서치

UX 리서치 / 인뎁스 인터뷰 방법론

FGI 방법론

서베이 조사 방법론

퍼소나

여정지도

UX 컨셉

UX 설계

휴리스틱 평가

사용성 모형 18가지 원칙

사용성 테스트

UI/UX 디자인 트랜드 


UI/UX 강의 후기


삼성전자 무선사업부/한국인터넷전문가협회/비즈델리 등 최근 강의했던 교육기관별 강의 후기를 공유합니다. 

바로가기 >  https://brunch.co.kr/magazine/edui

매거진의 이전글 메인페이지 UX 전략

매거진 선택

키워드 선택 0 / 3 0
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari