UI/UX를 위한 마이크로인터랙션

마이크로인터랙션(Microinteraction)이란?

마이크로인터랙션(Microinteraction)은 장치와의 다른 상호 작용과 유사하며, 사용자는 작업이 수행될 때 어떤 일이 발생하는지 지속적으로 알아야 하기 때문에 사용자에게 의미 있는 피드백을 전달하는 데 사용된다. 어떤 일이 일어나기를 기대하는 것은 인간의 경향이기 때문이다. 버튼을 클릭하면 페이지를 스크롤하고 장바구니에 항목을 추가하고 카드를 왼쪽으로 스와이프 하는 것을 생각해 보자.

아래의 애니메이션은 3 가지 중요한 기능을 수행하기 때문에 마이크로인터랙션의 좋은 예이다.

• 상태를 전달하고, 피드백을 제공한다.
• 직접 조작감을 향상시킨다.
• 사용자가 행동의 결과를 볼 수 있도록 돕는다.

마이크로인터랙션의 3 가지 필수 요소

사용자 행동에 대한 피드백은 주로 3 가지 기본 사항을 해결해야 한다. 그것들을 잘 조율하고 매우 매혹적인 사용자 경험을 만들고 추측을 덜 할 수 있다.

• 일어날 수 있는 일 – 조치가 취해질 경우 발생할 수 있는 일을 사용자에게 명확하게 전달해야 한다.
• 일어나고 있는 일 – 사용자에게 자신의 행동에 대한 정보를 제공하는 것이다.
• 일어난 일 – 확인 또는 사용자 작업 결과를 보여준다. 이 경우 트위터의 “팔로우”버튼이 훌륭한 예이다.

마이크로인터랙션의 4 가지 구조

효과적인 마이크로인터랙션(Microinteraction)은 다음 4 단계 프로세스를 따른다.

Dan Saffer (Interaction Designer)
출판 자료는 여기를 참고하세요.

방아쇠(Triggers)

트리거는 마이크로인터랙션을 활성화하는 조치이다. 사용자 시작 또는 시스템 시작의 두 그룹으로 분류할 수 있다.

사용자가 시작한 트리거가 가장 일반적이며 버튼, 텍스트 링크, 드롭 다운 등의 형태로 어디에서나 찾을 수 있다. 간단한 예는 사용자가 버튼 (트리거)을 클릭하여 다른 페이지로 이동하는 것이다.

시스템 시작 트리거는 자동이므로 특정 조건이 충족되면 트리거 되므로 조금 더 복잡하다. 한 가지 예는 알림 기능이다. 누군가 Instagram에서 사진을 좋아하면 알림이 전송된다.

규칙(Rules)

따라서 방아쇠를 당긴 후 다음에 일어날 일에 대한 후속 조치가 필요하다. 

사용자가 이 버튼을 클릭하면 어떻게 하면 될까? 그것은 새 페이지로 이동할까? 장바구니에 제품을 추가할까? 계정이 삭제될까?

시스템 시작 트리거도 마찬가지이다. 모든 조건이 충족되면 어떻게 될까? 사용자가 30분 동안 활동이 없으면 (조건) 계정에서 로그 아웃된다 (규칙).

피드백(Feedback)

이것이 프로세스의 창의적인 부분이다. 작업이 수행되었거나 변경이 발생했음을 사용자에게 알리는 데 사용된다. 로딩 화면, 호버 효과, 애니메이션, gif, 진동 등의 형태 일 수 있다. 마이크로 인터랙션을 설계하는 방법에는 여러 가지 예가 있다.

루프와 모드(Loops & Modes)

루프는 반복 여부 또는 시간이 지남에 따라 변경되는지에 따라 마이크로인터랙션의 길이를 결정한다. 제품을 마지막으로 사용한 시간을 생각하십시오. 처음 사용한 제품과 10번의 경험이 다른가요? 대부분의 제품은 처음 사용자에게 온 보딩 프로세스와 시각적 정보만 표시하므로 시간이 지남에 따라 미세한 상호 작용이 변경된다.

모드를 사용하여 피드백 수신 방법을 변경할 수 있다. 예를 들어 휴대폰에서 문자 메시지를 받을 때 휴대폰이 기본 모드와 비교하여 자동 모드에 있을 때 어떤 피드백이 있습니까?

4 단계 마이크로인터랙션 요약

1. 트리거(Triggers)는 미세 상호 작용을 시작한다. 트리거는 사용자 시작 또는 시스템 시작일 수 있다.
2. 사용자 시작 트리거에서 사용자는 작업을 시작해야 한다.
3. 시스템 시작 트리거에서 소프트웨어는 특정 자격이 충족되고 있음을 감지하고 작업을 시작한다.
4. 미세 상호 작용이 트리거 되면 규칙(Rules)에 따라 결정된다.
5. 피드백(Feedback)은 사람들에게 무슨 일이 일어나고 있는지 알려준다. 미세 상호 작용이 발생하는 동안 사용자가 보고 듣거나 느끼는 것은 피드백이다.
6. 루프 및 모드(Loops and Modes)는 미세 상호 작용의 메타 규칙(meta rules)을 결정한다. 조건이 변할 때 미세 상호 작용은 어떻게 될까?

감성을 위한 모션(Motion)

1. 웹/앱의 탐색을 향상시킨다.
2. 사용자가 웹 사이트와 더 쉽게 상호 작용할 수 있도록 한다.
3. 완료된 작업에 대한 즉각적이고 관련 피드백을 사용자에게 제공한다.
4. 사용자에게 팁을 제공한다.
5. 대화식 여부와 같은 특정 요소에 대한 정보를 전달한다.
6. 사용자 경험을 훨씬 더 보람 있게 만든다.
7. 귀하의 콘텐츠를 공유하고, 좋아하고, 댓글을 달도록 권장한다.
8. 사용자의 관심을 유도한다.
9. 마지막으로, 제공자의 사이트를 더 감성적으로 느끼게 된다.

그렇다면 언제 사용하는가?

몇 가지 예시

1. Swipe – 여러 방향의 스와이프 액션
   Swipe 동작은 탭 보다 훨씬 더 인터랙티브하고 부드럽다. 사용자가 탭 사이를 빠르게 전환하고 제품에 대한 추가 정보를 얻을 수 있도록 도와준다. 또한 스와이핑은 매우 일반적인 제스처이며 사용자가 생각하지 않고 무의식적으로 반응하게 한다. 우리가 ‘사용자를 생각하게 만들지 마십시오!’를 읽은 것처럼 재미있고 중독성이 있다.
2. Data Input – 데이터 입력
   우리는 비밀번호를 설정하거나 계정을 만드는 데 어려움을 겪는다는 사실을 알고 있다. 이 작업은 쉽게 해킹을 일으킬 수 있으며, 패스워드 사용 시 사전 제안을 통해 사용자가 더 쉽게 진행할 수 있지만 데이터 입력 시 일부 인터랙티브한 표기는 사용자가 프로세스에 계속 참여하게 하고 목표를 달성하는 데 도움이 된다.
3. Animations – 단순한 애니메이션
   애니메이션은 단순히 마이크로인터랙션을 활성화하고 향상시킨다. 그것은 좋은 디자인을 구체화하며, 그것의 존재는 눈에 띄지 않을 수 있지만 없다면 사용자에게 피해를 줄 수 있다. 디자이너가 가장 단순한 프로세스를 흥미롭고 중독성 있게 만드는 데 도움이 되는 접착제 역할을 한다고 볼 수 있다. 그러나 사용자의 참여를 유도하고 주의를 산만하게 하거나 흥미를 잃지 않기 위해 매우 주의해야 한다. 처리가 지연되거나 웹사이트에 새로운 스타일을 도입하면 혼동을 일으킬 수 있기 때문이다.
4. Current System Status – 현재 시스템 상태
   사이트 또는 앱에서 발생하는 현재 상태에 대해 사용자에게 알리는 것이 필수적이다. 사용자에게 알리지 않으면 짜증이 나서 사이트나 앱을 닫을 가능성이 매우 높기 때문이다. 마이크로인터랙션을 통해 사용자는 현재 진행 중인 상황, 프로세스를 완료하는 데 걸리는 시간 등을 정확히 알 수 있다. 실패 메시지도 유머러스하면서도 사용자의 신뢰를 유지하는 데 효과적일 수 있다.
5. Make Tutorials Interesting – 튜토리얼을 흥미롭게 만들기
   우리는 끊임없이 정보를 찾고 있다. 마이크로인터랙션이 잘 되어 있는 튜토리얼은 사용자가 쉽게 이해할 수 있도록 기본 기능과 주요 컨트롤을 단순화하고 강조하여 보여줌으로써 사용자가 애플리케이션을 더 쉽게 쓸 수 있도록 안내한다.
6. Call to Action – 클릭 유도 문안
   마이크로인터랙션은 기본적으로 사용자가 애플리케이션이나 웹사이트와 상호작용하도록 유도한다. CTA는 사용자 행동에 성취감과 공감 요소를 심어주므로 사용자가 CTA와 상호작용하도록 하는 가장 좋은 방법은 사용자의 관심을 끌 수 있도록 참여시키는 것이다.
7. Animated Buttons – 애니메이션 버튼
   사용자에게 앱이나 사이트를 통해 자신의 길을 알려줌으로써 정보 관리자의 역할을 한다. 사용자 경험을 매끄럽게 만들기 위해 색상(color), 모양(shape), 특수 효과(special effects), 애니메이션(animations), 배치(placement) 및 질감(texture)에 주의를 기울여야 합니다.

마이크로인터랙션 디자인 방법

1. 모든 것을 사용자에게 맡겨라 – 앱 사용 방법을 알아내기 위해 필요한 모든 것을 사용하라.
2. 기능적인 애니메이션 만든다 – 미적인 부분뿐만 아니라 사용자 경험을 향상시킬 수 있는 애니메이션 활용
3. 사용자에게 흥미롭고 즐겁게 하라 – 사용자가 앱을 사용할 때 느끼는 것은 앱을 계속 사용한다는 사실의 이유이다. 사용자가 경험을 즐기면서 기분이 좋으면 돌아온다.
4. 귀찮게 하지 마라 – 애니메이션이 너무 많으면 사용자에게 반대 효과가 있다. 성가신 사용자는 앱에서 멀리 떠나버린다.
5. 비언어적인(non-technical) 인간 언어(human language)를 사용하라 – 재미있고 아이러니 한 사본을 사용하면 앱의 빈 페이지가 얼마나 실망스러운지 잠시 잊을 수 있다.

슬라이드 자료