마이크로 인터렉션으로 UX를 개선합니다. (Improve your UX with micro-interactions )

이 글은 Jeremiah LamImprove your UX with micro-interactions글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다

디자인은 보편적인 문제를 해결하지만, 마이크로 인터렉션은 제품을 사용하는 동안 사용자가 누리는 즐거운 순간입니다.


최고의 제품은 특징과 디테일이라는 두 가지를 잘 해냅니다. 특징들이 사람들을 여러분의 제품에 끌어들이는 것입니다. 세세한 것은 그들을 그곳에 있게 하는 것입니다. 디테일은 특징이 쉽게 복사될 수 있기 때문에 실제로 경쟁업체와 차별화되는 것입니다. 예를 들어 Instagram 스토리를 예로 들 수 있습니다.
presentation
Thanks, Ouch!
사용자에게 발견되면 웰빙의 느낌을 만들어내는데 도움이 됩니다. 디자이너로서, 마이크로 인터렉션의 효과를 인식하는 것은 그것들을 설계하는 것만큼이나 중요합니다. 인간적인 느낌을 주는 것을 창조할 필요가 있고, 단지 그것을 갖기 위해서가 아니라 목적을 위한 것입니다.

마이크로 인터렉션이란 무엇입니까?

마이크로 상호 작용은 일반적으로 다음과 같은 중요한 기능을 수행하는 이벤트입니다.
  • 피드백을 전달하거나 작업 결과를 전달합니다.
  • 개별 작업을 수행합니다.
  • 직접 조작의 감각을 높입니다.
  • 사용자가 작업 결과를 시각화하고 오류를 방지할 수 있도록 도와줍니다.
대부분의 앱에서 모든 기기에서 쉽게 찾을 수 있습니다. 예를 들어 전화를 음소거로 전환할 때 자동 모드 아이콘과 함께 진동 알림이 표시됩니다.

마이크로 인터렉션의 4가지 구성 요소입니다.

presentation

The Trigger - 트리거

이 동작은 마이크로 인터렉션을 시작하는 동작입니다. 트리거는 사용자 시작 또는 시스템 시작의 두 그룹으로 나눌 수 있습니다.
사용자 시작(User-initiated) 트리거는 다른 사용자가 제품과 의도적으로 상호 작용할 때 발생합니다. 이것들은 스위치를 뒤집거나 버튼을 누르는 것과 같은 것입니다.
시스템 시작(System-initiated) 트리거는 자동으로 수행되며 특정 조건이 충족될 때 발생합니다. 토스트가 다 되었을 때 토스터가 울리거나 문자 메시지를 받았을 때 들리는 차임벨은 모두 시스템 트리거입니다.

The Rules - 규칙

이러한 파라미터는 마이크로 인터렉션이 따르는 파라미터입니다. 버튼을 누르면 어떻게 됩니까? 할 수 있거나 할 수 없는 것은 무엇입니까? 규칙은 트리거가 수행된 후 정확히 어떤 일이 발생하는지 정의합니다. 예를 들어 자동차 키를 사용하여 잠금 버튼을 누르면 자동차 문이 잠깁니다.

The Feedback - 피드백

이것은 마이크로 인터렉션의 확인입니다. 사용자에게 자신의 행동이 승인되었음을 알리는 신호입니다. 이것은 소리, 시각적 신호, 진동, 움직임 또는 다른 것일 수 있습니다.
presentation
클릭할 수 있는 기능을 보여주는 인터페이스 애니메이션은 피드백의 예입니다. | Malan Alankara

루프(Loops)와 모드(Modes)입니다.

루프(Loop)는 마이크로 인터렉션의 길이를 결정합니다. 상호 작용이 반복되는지 또는 시간이 지남에 따라 변경되는지 여부를 결정합니다. 빨래 한 짐을 다 쓰면 세탁기에서 소리가 나고, 세탁기 문을 열지 않으면 다시 반복해 상기시킵니다.
모드(Mode)는 사물들이 기능하고 작동하는 전형적인 방식을 바꿉니다. 예를 들어 날씨 앱의 위치를 변경하거나 전화기에서 '방해하지 않음' 모드를 설정하는 것이 있습니다.

마이크로 인터렉션이 중요합니까?

마이크로 인터렉션이 단지 작은 디자인 요소일 뿐이라면, 우리는 정말로 그것들을 신경 쓸 필요가 있을까요?
디테일에 주목하는 것은 기본적으로 일반적인 웹 사이트와 다른 점이 있습니다. 다음은 마이크로 인터렉션을 사용해야 하는 몇 가지 이유입니다.

1. 완료된 조치에 대한 즉각적인 관련 피드백을 제공합니다.

presentation
이 인터렉션은 사용자의 작업이 성공했음을 나타냅니다.| Colin

2. 그들은 어떤 요소들에 대한 정보를 전달합니다. 인터렉션을하든 아니든 말이죠.

presentation
호버(Hover) 인터렉션은 클릭 가능과 동의어입니다. | Harsh Vijay

3. 사용자들이 무슨 일이 일어나고 있는지 깨닫게 합니다.

presentation
로딩 바는 사용자에게 닌텐도 스위치를 시작하는 데 필요한 시간을 알려주는 데 도움이 됩니다. | Spencer Guerra

4. 사용자가 목표를 달성할 수 있도록 지원합니다.

presentation
사용자가 강력한 암호를 만들 수 있도록 지원하는 혁신적인 방법입니다. | Duylam

5. 마지막으로, 그들은 당신의 사이트를 더 감성적으로 만들어줍니다.

presentation
Zendesk 404 page | Sara Farnsworth
마이크로 인터렉션은 사용자의 자연적인 인정 욕구에 호소하기 때문에 작동합니다. 사용자는 자신의 행동이 받아들여졌다는 것을 즉시 알고 시각적 보상에 기뻐하고 싶어합니다.

마지막 생각

신중하게 디자인하세요. 사용자들이 어떻게 상호작용(인터렉션)하고 플랫폼을 사용하는지 생각해보세요. 그런 다음, 적절한 상호작용(인터렉션)을 설계해서 그 사람들과 함께 작업할 수 있도록 하세요. 디자이너로서, 마이크로 인터렉션을 효과적으로 사용하는 것이 중요합니다. 마이크로 인터렉션을 통해 제품을 한 단계 발전시킬 수 있기 때문입니다. 마이크로 인터렉션을 통해 새로운 설계 솔루션을 실험하고 사용자를 놀라게 할 새로운 방법을 찾을 수 있습니다.
공동 작업, UI/UX 설계에 대해 이야기하거나 대화하고 싶은 경우 LinkedIn 😁을 통해 연결하면 됩니다.

다음은 UX(사용자 경험)에 대한 몇 가지 글입니다.





이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp