더 나은 사용자 경험을 위한 디테일

_마이크로 인터랙션

1. 마이크로 인터랙션이 무엇인가?
2. 단계별 요약  Breaking it down
3. 왜 중요할까? 감정 모션
4. 언제 사용할까?
5. 마이크로 인터랙션 디자인은 어떻게 할까?
6. 마이크로 인터랙션 디자인 툴은 무엇이 있을까?
7. 내가 만든 몇 가지 인터랙션

1. 마이크로 인터랙션이 무엇인가?

마이크로 인터랙션은 한 가지 주요 목표 (한 가지 목적)가 있는 이벤트로 당신의 디바이스에 있는 모든 앱들에서 찾아볼 수 있다. 목적은 사용자를 즐겁게 하는 것이다. 매력적이고, 마음을 끌고, 말하려고 하는 순간을 만들어야 한다. 인간적으로 느껴지도록.

예를 들어 아래 인터랙션을 보자

이 애니메이션은 세가지 중요한 기능을 수행했기 때문에 마이크로 인터랙션의 좋은 사례다.

• 상태를 전달하고, 피드백을 준다.

• 직접 조작 감각을 높인다.

• 사람들이 자신이 행한 액션의 결과를 볼 수 있도록 돕는다.  

마이크로 인터랙션은 네가지 파트로 구성되어있다.

• 트리거는 마이크로 인터랙션을 시작한다. 트리거는 사용자가 시작하거나 (user-initiated)이나 시스템이 시작할 수 있다.

• 사용자가 시작한 트리거에서 사용자가 무언가 액션을 시작해야한다.

• 시스템이 시작한 트리거에서 소프트웨어가 어떤 특정한 상태에 다다른 것이 확인되면 그에 따라 액션이 시작된다.

• 규칙은 마이크로 인터랙션이 한번 트리거되었을 때 발생하는 상황을 결정한다.

• 피드백은 사람들에게 무슨 일이 일어난지 알려준다. 마이크로인터랙션이 일어나는 동안 사용자가 보고, 듣고, 느낀 모든 것은 피드백이다.

• Loops and Modes 는 마이크로 인터랙션의 메타 규칙(meta rules)을 결정한다. 상태가 바뀌면 마이크로 인터랙션에 무슨 일이 일어나는가?
  
  
   

3. 왜 중요할까? 감정 모션

만약 마이크로 인터랙션이 아주 작은 디자인 요소라면, 왜 그걸 신경 써야 할까?

마이크로 인터랙션을 무시하면 그들의 클라이언트에게 많은 비용이 들 수 있는데도 안타깝게도 많은 웹 개발자들과 디자이너들은 아직도 묻고 있다.

마이크로 인터랙션이 일어나는 이유를 알아보자.

• 웹사이트 네비게이션을 개선시킨다.

• 사용자가 당신의 웹사이트에서 인터랙션을 더 쉽게 할 수 있도록 도와준다

• 사용자가 액션을 끝내면 즉각적으로 관련있는 피드백을 준다.

• 사용자에게 팁을 준다.

• 상호작용 하는지 아닌지 같은 확실한 요소의 정보를 준다.

• 사용자 경험을 훨씬 더 보람차게 만들어 준다.

• 당신의 컨텐츠를 공유하고, 좋아하고, 코멘트하는 것에 도움이 된다.

• 사용자 관심을 끈다.

• 그리고 마침내 당신의 사이트를 더 감성적으로 만든다.

디자인이 잘 된 마이크로 인터랙션은 사용자를 배려하는 확실한 신호다. 이것이 왜 그렇게 가치 있는지에 대한 이유다. 사용자는 무엇을 해야 하는지, 행동이 맞는지 아닌지, 시스템에서 정확하게 승인되었는지를 알 수 있다.  앱이나 웹사이트에서 즉각적으로 시각적인 피드백을 제공하고, 사용자에게 시스템과 어떻게 상호작용하는지를 자연스럽게 학습시킨다.
 

마이크로인터랙션이 잘 작동할 때, 사람들이 인지하지 못하는 사이에 당신의 브랜드에 대해 긍정적인 느낌을 주고, 사용자의 행동에도 영향을 미칠 수 있다. 만약 제품의 한 측면이 마음에 들거나 들지 않는다면, 그것을 일반화시켜 그 제품에 긍정적이거나 부정적인 느낌을 가질 수 있다. Hallo Effect라고 불리는 이것은 당신에게 유리하게 혹은 불리하게 작용할 수 있다. 이 지식은 사이트에서 사용자 피드백을 향상시키는데 도움이 될 것이다. 사소한 것에서 주의를 기울이면 사용자를 계속 만족시킬 수 있다.

4.언제 사용할까?

몇 가지 예시

비록 적은 부분이지만, UX,UI 세계에서 마이크로 인터랙션은 사용자와 커뮤니케이션 할 때 강해진다. 아래는 상위  7개의 마이크로인터랙션과 사용자 경험에 미치는 영향이다.

1. Swipe Swipe를 하면 탭핑을 없애고 훨씬 더 인터렉티브하고 부드럽다.  사용자가 탭 사이를 빨리 전환하고, 제품에 대한 더 많은 정보를 얻도록 도와준다. 뿐만 아니라 스와이핑은 매우 일반적인 제스처이고 사용자가 생각하지 않고 반 무의식적으로 안내한다. : ‘사용자를 생각하게 하지 마’에서 읽은 것처럼 재미있고 중독성 있다.

3. 애니메이션 애니메이션은 마이크로 인터랙션을 간단하게 하고 향상시킨다. 좋은 디자인을 나타낸다.  있을 때는 인지하지 못했더라도 없다면 모두에게 타격이 있을 것이다. 애니메이션은 디자이너들이 재미있고 중독성 있는 가장 간단한 프로세스를 만드는데 도움을 주는 접착제 같은 역할을 한다. 하지만 사용자에게 집중이 안되게 하거나 방해하지 않도록 아주 조심해야 한다. : 버퍼링이 걸리거나 새로운 스타일을 소개하면 혼란을 일으킬 수 있다.

우리 인간은 즉각적인 만족감을 추구하도록 타고났다. 그리고 전체에서 마이크로 인터랙션을 간과하는 것이 일반적이긴 하지만 사용자를 끌어들이기 위해서는 아주 중요한 부분이다. 모든 사람이 이야기하듯, 디테일은 정말 중요하다. 스크린 사이의 토글이나 기능 강조, 새 알림 같은 작은 경험과 디자인 특징은 사용자 환경을 향상하는데 큰 차이를 줄 수 있다.

5. 마이크로 인터랙션 디자인은 어떻게 할까?

마이크로 인터랙션을 만드는 것은 새로운 디자인 해결책에 대해 실험해보고 사용자를 놀라게 하는 새로운 방법을 찾을 수 있기 때문에 디자이너들은 흥미를 가진다. 하지만 다음 몇 가지를 주의하면서 사용하자.

• 사용자 입장에서 생각해서 당신의 앱을 어떻게 사용하는지를 알아내기 위해 모든 것을 이용해라.

• 실용적인 애니메이션을 만들자. 애니메이션은 심미적인 것 뿐만 아니라 사용자 경험을 향상시킬 수 있어야 한다.

• 사용자를 재미있고 즐겁게 해주자. 앱을 사용할 때 사용자가 느끼는 것은 앱을 계속 사용하는 이유다.  만약 사용자가 즐거운 경험을 하고 재미를 찾았다면, 다시 돌아올 것이다.

• 짜증나게 하지 말자. 너무 많은 애니메이션은 역효과를 준다. 짜증난 사용자들은 앱을 빨리 떠난다.

• 인간적인 언어와 비 기술적인 언어를 사용하자. 재미있고 아이러니한 문구는 앱에서 빈 페이지에서 느낄 불만을 잠깐 잊게 한다.

6. 마이크로 인터랙션 디자인 툴은 무엇이 있을까?

그래서 어떤 종류의 프로토타이핑 툴을 디자이너들이 익숙하게 느껴야 할까? 이미 많은 툴들이 있지만 많은 사람들이 어떤 것이 적합한 툴인지는 알지 못한다. 내 경험에 근거해서 몇 가지 추천 안을 제시한다.

코딩을 조금 안다면 :

• 모바일 :  Xcode, Android studio

• 모바일이나 웹 : Framer

• 웹 : CSS animation

모듈화된 디자인과 간단한 화면 트랜지션이 있는 인터랙션 디자인을 원한다면:

• Invision and Marvel

더 디테일한 인터랙션을 원한다면 :

• Principle, Adobe CC, origami Studio and Protopie

디테일한 인터랙션과 애니메이션을 원한다면 :

• After Effects

7. 내가 만든 몇 가지 인터랙션

당신의 마이크로 인터랙션을 성공시키기 위해, 당신의 팀이 위에서 언급한 특성을 가진  UX 프로세스를 가지고 있는지 확인하고 UX프로세스에 잘 맞는지 확인해라. 당신만의 마이크로 인터랙션 여정에 행운이 있길 바란다

아래는 내가 썼던  UX관련 아티클이다.

• Linkedin User Experience Reimagined

• 10 tips on how to conduct a perfect Heuristic evaluation

• 5 Navigation Tips to Improve UX of your Product and Business