[오아챌/마이크로 인터렉션] 마이크로 인터렉션으로 UX향상

🎁 8일차 주제: 마이크로 인터랙션

- UI에서 마이크로 인터랙션은 감성/심미성을 위해서도 사용되지만, 사용자의 인지 과정을 돕기 위해서도 사용됩니다.
- 예를 들어, 추가 정보를 보여 주지 않아도 비밀번호 창이 흔들린다면 ‘틀렸다는 뜻이구나’, 클릭 시 무언가 돌거나 반짝인다면 ‘로딩 중이구나’라는 사실을 곧바로 인지할 수 있습니다.
- 마이크로 인터랙션을 이렇게 유용한 인디케이터로 사용할 수 있는 다른 구체적인 방법들이 있을까요?
- 그 외에도 마이크로 인터랙션이 UX 개선이 기여할 수 있는 방향이 있다면?
- 기타 등등, 마이크로 인터랙션에 관한 아티클이라면 무엇이든 좋습니다!

 

오아챌 기록 보기 >

---

나의 챌린지 : 마이크로 인터렉션으로 UX향상

https://le-penseur.tistory.com/16

마이크로 인터랙션으로 UX 향상

 

해당 아티클을 읽고 정리

 

- 디자이너로서 인터렉션의 효과를 인식하는 것은 디자인 하는 것 만큼 중요하다.

 

1. 마이크로 인터렉션이란?

- 피드백 또는 조치 결과를 전달할 수 있다

- 개별 작업을 수행할 수 있다

- 직접 조작 감각을 향상시킨다

- 사용자가 작업 결과를 시각화 하고 오류를 방지하도록 도와준다

-> 이 4가지를 필수 기능으로 수행하는 이벤트이다

-> 대부분 앱에서 쉽게 찾을 수 있다.

Ex) 핸드폰을 음소거로 전환할 때 진동 알림과 자동 모드 아이콘이 함께 표시되는 등

 

 

2. 마이크로 인터렉션의 4가지 구성

- 트리거

- 규칙

- 피드백

- 루프 그리고 모드

 

1) 트리거

마이크로 인터렉션을 활성화 하는 작업이다

사용자 시작 또는 시스템 시작의 두 그룹으로 분류한다

 

- 사용자 시작 트리거가 가장 흔하며 버튼, 텍스트 링크, 드롭다운 등의 형태로 모든 곳에서 볼 수 있다.

- 시스템 시작 트리거는 자동화 되고 특정 조건이 충족될 때 트리거가 되기 때문에 약간 더 복잡하다. (Ex 좋아요 누르면 상대방에게 알림이 가는 등)

 

2) 규칙

트리거를 실행 시킨 후 다음 일에 대한 후속 조치가 필요하다.

Ex) 사용자가 이 버튼을 클릭하면 어떻게 됩니까? -> 그들은 새로운 페이지로 안내되는가? -> 쇼핑 카트에 상품이 추가될까요? 

 

시스템 트리거도 마찬가지이다.

Ex) 모든 조건이 충족되면 어떻게 됩니까? -> 사용자가 (조건) 동안 비활성 상태인 경우 사용자는 (규칙)에서 로그아웃 됩니다

 

3) 피드백

마이크로 인터렉션의 과정의 크리에이티브한 파트이다

사용자들에게 작업이 수행 되었거나 변경 되었음을 알리는데 사용된다.

Ex) 로딩화면, hover효과, 애니메이션, gif, 진동 등

 

4) 루프 그리고 모드

루프는 마이크로 인터렉션의 길이, 반복 or 시간이 지남에 따른 변경 여부를 결정한다.

-> 대부분의 제품은 처음 보는 사용자에게 온보드 프로세스와 비주얼만 보여주므로 시간이 지남에 따라 미세한 상호 작용이 변경된다

 

모드를 사용하여 피드백을 수신하는 방법을 변경할 수 있다.

Ex) 휴대폰에서 문자 메시지를 수신할 때 기본 모드와 비교하여 전화기가 자동 모드일 때의 피드백

 

 

3. 마이크로 인터렉션이 중요한가요?

- 상호 작용하는지 아닌지와 같은 특정 요소에 대한 정보를 전달한다.

- 사용자들이 무슨 일이 일어나고 있는지 알 수 있다

- 사용자가 목표에 도달할 수 있도록 도와준다

- 사이트를 더 감성적으로 만든다

-> 마이크로 인터렉션은 사용자의 자연스러운 인정 욕구에 호소하기 때문에 작동한다. 사용자는 자신의 행동이 받아들여졌다는 것을 즉시 알고 시각적 보상에 만족하기를 원한다.

 

4. 원 아티클 작성자의 소견

세심하게 디자인 해야한다. 사용자의 플랫폼 사용과 상호 작용 방법에 대해 생각한 뒤, 사용자와의 상호 작용에 적합한 상호 작용을 설계한다. 디자이너로서, 마이크로 인터렉션을 효과적으로 사용하는 것이 중요하다. 마이크로 인터렉션은 우리의 제품을 한 단계 끌어올릴 수 있기 때문이다. 마이크로 인터렉션을 통해 새로운 설계 솔루션을 실험하고 사용자를 놀라게 하는 새로운 방법을 찾을 수 있다.

 

---

해당 아티클을 읽고 느낀점

마이크로 인터렉션을 어떻게 하면 UX를 향상시킬 수 있는지 구체적으로 나와있지 않아서 아쉬웠다. 하지만 반대로 포인트만 딱딱 찝어준 아티클이라고 생각된다. 단순히 화려한 액션이 아닌, 인터렉션을 설계할 때 어떠한 목적성을 가지고 설계해야하는 지에 대해 알 수 있었다. 막연하게 애니메이션이라고 생각했던 개념을 좀 더 구체화할 수 있었던 아티클이었다.

 

---

멤버들 공유 아티클

 

1. 마이크로 인터렉션 용어를 처음 소개한 Dan Saffer의 글

https://microinteractions.com/the-origins-of-famous-microinteractions/

Microinteractions 라는 용어를 처음으로 소개한 Dan Saffer의 글을 하나 읽었어요. 페이스북 "좋아요", 구글 "자동완성", 텍스트 편집기의 "잘라서 붙이기cut and paste" 등 유명한 마이크로인터랙션의 유래들을 짧게 소개하는 글이에요.