1. 마이크로 인터렉티브는 무엇인가?
💡 제품 이용 시 하나하나의 사사로운 피드백을 세밀하게 제공하는 것.
웹사이트(또는 웹앱)나 모바일앱에서 제품(또는 서비스)을 사용하면서 매우 매력적으로 느껴지는 웹사이트를 볼 수 있는데 이런 사이트(또는 앱)의 특징은 두 가지를 잘한다는 것입니다.
1. 기능 : 사용자를 끌어들인다. 2. 디테일 : 사용자를 계속 이용(남아있게)하게 한다.
마이크로인터렉티브는 바로 디테일 영역에서 역할을 하는 것입니다.
2. 왜 사용하는가?
1) 향상된 사용성
2) 더 나은 브랜딩
3) 행위 결과를 피드백으로 제공
4) 사용자에게 조작감 제공
5) 사용자의 행위에 시각화된 결과 제공
6) 사용자에게 에러방지를 위한 시각화된 결과 제공
3. 언제 사용할까?
가장 많이 사용되는 인터렉션 예시 8가지를 알아보고 필요한 상황에 맞게 사용하도록 하자.
1) Swipe
모바일에서 화면 터치를 없애고 탭 사이를 빠르게 전환하고 제품에 대한 더 많은 정보를 얻도록 안내합니다.
2) 데이터입력
패스워드 보안정도를 직관적으로 보여주어 적절한 목표치까지 입력하도록 하는데 도움을 주기도하며 약간의 위트가 추가된다면 사용자에게 사소한 재미를 제공하고 깊은 인상을 남기기도 한다.
3) 애니메이션
애니메이션은 마이크로인터렉티브를 향상시킨다. 하지만 사용자에게 집중이 안되게 하거나 방해하지 않도록 아주 조심해야 한다. 즉 과유불급이다.
4) 현재 시스템 상태
사이트나 앱에서 발생하는 현재 상태를 사용자에게 계속 알리는 것이 중요합니다. 만약 사용자가 변화를 알지 못하면, 짜증을 느끼고 앱이나 사이트를 닫을지도 모른다.
5) 튜토리얼
마이크로인터렉티브가 잘 되어 있는 튜토리얼은 기본 기능 및 중요 컨트롤에 대해 단순화하고 강조하여 보여줌으로써 사용자가 앱이나 사이트를 더 쉽게 쓸 수 있도록 한다.
6) Call to Action
사용자의 반응을 유도하는 행위, 행동유도버튼이라고도 한다.
7) 애니메이션 버튼
마이크로 인터렉티브가 적용된 버튼은 사용자로 하여금 변화되는 상태를 직관적으로 전달해줄 수 있다.
8) 사운드 효과
비주얼 효과뿐만 아니라 사용자 혹은 제품에 따라 사운드 효과로도 충분한
4. 그 외 기타 마이크로인터렉티브
※ 마이크로인터렉션 예제 사이트
추가적으로 아래의 사이트에서 더 많은 예제를 살펴볼 수 있다.
5. 마치며
마이크로인터렉티브는 전체 UI/UX에서 굉장히 사소하게 여길 수 있는 작은 영역이지만 이런 사소한 차이가 사용자의 경험의 차이를 만들게 되고 더 많은 사용자를 자신의 사이트에 유입 시키기도 하며 더 오래 머무르며 사이트 구석구석을 살펴 보게 하는 계기가 되기도 한다.