brunch

매거진 디자인 뉴스레터 디독

라이킷 160 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 김자유 Jan 22. 2019

더 나은 UX를 위한 마이크로 인터랙션

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

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

하단의 인터랙션을 보자.

좋아요- 페이스북

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

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

직접 조작 감각을 높인다.

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

2. 단계별 요약

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

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

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

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

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

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

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

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

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

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

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

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

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

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

사용자에게 팁을 준다.

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

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

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

사용자 관심을 끈다.

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

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

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

4.언제 사용할까?

몇 가지 예시

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

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

2.데이터 입력 우리는 모두 계정을 만들거나 비밀번호를 설정하는 것에 대한 불만이 있다. 이건 쉽게 우리를 분노하게끔 한다. 패스워드 강도에 따라 반응하는 인터랙티브 한 정보 표기는 유저들이 적절한 목표치까지 패스워드를 입력하도록 하는데 도움이 된다.

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

4. 현재 시스템 상태 사이트나 앱에서 발생하는 현재 상태를 사용자에게 계속 알리는 것이 중요하다. 만약 사용자가 변화를 알지 못하면, 짜증을 느끼고 앱이나 사이트를 닫을 것이다. 마이크로 인터랙션은 정확히 무슨 일이 일어나고 있는지, 프로세스를 완료하려면 얼마나 더 걸리는지 등을 알려준다. 실패한 메시지도 유머러스하게 만든다면 사용자 신뢰를 유지하는데 효과적일 수도 있다.

5. 튜토리얼을 재미있게 만들기 우리 모두 정보를 계속 탐색하고 있다. 마이크로 인터랙션이 잘 되어 있는 튜토리얼은 기본 기능 및 중요 컨트롤에 대해 단순화하고 강조하여 보여줌으로써 유저들이 어플리케이션을 더 쉽게 쓸 수 있도록 한다.

6. Call to Action 마이크로 인터랙션은 사용자가 어플리케이션이나 웹사이트에서 상호작용하도록 유도한다. Call to Action은 성취감을 주고, 사용자의 행동에 공감을 하게 하고, 사용자가 CTA와 상호작용 할 수 있는 가장 좋은 방법은 사용자의 관심을 끄는 것이다.

7. 애니메이션 버튼 사용자가 앱이나 사이트에서 자신의 방식을 알려줘서 정보 관리자 역할을 한다. 색상, 모양, 특수효과, 애니메이션, 배치, 질감에 주의해서 사용자 경험을 원활하게 해야 한다.

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