UX의 마이크로인터랙션: 지속적인 사용자 참여 및 유지를 위한 비밀 무기

YouTube에서 동영상을 실행할 때 무엇을 보나요? 동영상 재생이 시작되기 전에 콘텐츠를 스트리밍하는 데 일정 시간이 걸립니다. 그때까지 버퍼링 아이콘이 화면에 표시됩니다. 이것은 Microinteraction의 완벽한 예입니다.

기본적으로 특정 프로세스의 시각적 표현은 MIcrointeraction이라고 할 수 있습니다. 결국 UX를 향상시키는 빌딩 블록 역할을 합니다. UX가 세포라면 마이크로인터랙션은 DNA입니다.

분해해 보겠습니다.

Microinteraction - 정확히 무엇입니까?

UX의 필수적인 부분인 마이크로인터랙션은 사용자의 지시에 따라 앱/소프트웨어가 수행하는 기능을 전달하는 프로세스입니다. 예에는 로딩, 버퍼링 등이 포함됩니다.

또한 작은 기능과 관련된 시각적 요소를 향상시킵니다. 클릭하기 전에 좋아요 버튼이 어떻게 빛나는지 알고 있습니다. 그리고 마침내 그것을 클릭했을 때 어떻게 반응하는지. 댓글 섹션, 공유 버튼, 구독 버튼 등에 동일하게 적용할 수 있습니다.

더 물리적인 예를 원한다면 엘리베이터보다 더 좋은 예는 없습니다. 무엇을 볼 수 있습니까? 일련의 버튼? 예. 그러나 하나를 누르면 어떻게됩니까? 좋아요! 빛난다. 이것은 마이크로 인터랙션입니다.

당신은 깨닫지 못할 수도 있지만 이 단순한 발광 행위는 엘리베이터 사용자에게 즐거운 경험을 선사합니다. 그것이 빛나지 않았다면 상상해보십시오. 비주얼적으로 너무 만족스럽지 않나요? 또한 프로세스가 엘리베이터에서 수행되고 있는지 여부를 알 수 없습니다.

만족스러운 UX를 만들기 위해 앱/웹 인터페이스에서도 마찬가지입니다.

의심을 없애기 위한 몇 가지 예

예는 개념을 정의할 때 항상 더 유익한 것으로 입증되었습니다. 마이크로인터랙션이 무엇인지 제대로 이해하려면 다음 사례를 살펴보세요.

• 좋아요를 누르려고 하면 버튼이 파란색으로 켜집니다. 마지막으로 버튼을 누르면 살짝 눌러지겠죠? 이는 조치가 수행되었음을 나타내는 표시 역할을 합니다.
• 웹 사이트를 방문하면 About Us, Services, Blog, Contact Us 등이 표시됩니다. 그 중 하나에 커서를 가져가면 색상이 지정됩니다(일반적으로 선명한 대조를 피하기 위해 웹 사이트의 색상과 정렬됨). 커서를 좌우로 움직이면 개별 섹션이 별도로 강조 표시됩니다. 이것 역시 마이크로 인터랙션의 한 예입니다.
• 기능을 켜거나 끌 때 버튼이 두 옵션 사이에서 어떻게 이동하는지 확인할 수 있습니다. OFF를 클릭하면 작은 막대(흰색/검정색/기타)가 OFF로 이동합니다. ON 부분과 동일합니다. 이것은 기능 기반 마이크로 인터랙션입니다.

• 요즘 특히 TechCrunch와 같은 뉴스 사이트에서 볼 수 있는 또 다른 사실은 위아래로 스크롤할 때마다 탐색할 때 움직임을 따라가는 특정 원형 아이콘이 표시된다는 것입니다.

  그것은 당신이 덮은 페이지의 양을 나타내는 가장자리를 따라 설정된 특정 동작 색상을 가지고 있습니다. 페이지가 꽤 길다고 가정하면 독자가 페이지에서 현재 위치를 알 수 있습니다. 또한 사용자가 사이트를 떠나지 않고 기사를 종료할 수 있도록 십자 버튼이 내장되어 있습니다.

  기사가 닫히고 사용자는 홈 페이지에서 흥미롭다고 생각하는 다른 주제로 이동할 수 있습니다.

따라서 마이크로 인터랙션이 궁극적으로 향상된 UX로 이어지는 작은 단계를 만드는 데 어떻게 도움이 되는지 알 수 있습니다. 정보 아키텍처가 강력한 UX를 위한 기본 프레임워크를 형성함과 동시에 마이크로인터랙션이 UX 개선 프로세스를 향상시키거나 촉매한다는 점은 부인할 수 없습니다.

정보 아키텍처가 골격이라면 마이크로 인터랙션은 기능을 트리거하고 그에 따라 사용자에게 응답하는 신경입니다.

그렇다면 UX 디자인에 왜 중요한가요?

위에서 언급했듯이 기본적으로 좋은 UX로 이어지는 두 가지 요소, 즉 정보 아키텍처와 MIcrointeraction 요소가 있습니다. 사람들은 IA의 중요성을 인정하지만 프로세스로서의 마이크로 인터랙션은 종종 눈에 띄지 않습니다. 그러나 우리가 깨닫지 못하는 것은 그것이 없으면 전자는 불완전한 채로 남아 있다는 것입니다. 마이크로인터랙션 프로세스가 어떻게 편리한지 확인하세요.

• IA의 도움으로 아키텍처와 기본 워크플로를 만들지만 사용자가 모든 단계와 관련된 작은 세부 사항에 푹 빠지지 않으면 아무 소용이 없습니다. 마이크로인터랙션은 이러한 사소한 세부사항을 채우는 데 도움이 됩니다.
• 고객은 사용 중인 인터페이스를 제어하는 ​​것을 좋아합니다. IA는 원활한 탐색 및 프로세스 흐름에 도움이 되는 반면 MI는 수행되는 개별 프로세스를 시각적으로 묘사하여 제어하는 ​​느낌을 줍니다.
• 뿐만 아니라 MI는 사용자가 접근하는 각 섹션을 개별적으로 강조 표시하여 매우 본능적인 수준의 시각적 만족을 제공합니다.
• 이것은 차례로 사용자의 마음 사다리에서 특정 섹션의 가치를 높이는 동시에 사용자의 끝에서 관심 수준을 높여 자신감과 만족을 가지고 클릭하도록 유도합니다.

마이크로 인터랙션은 앱/웹사이트의 브랜드 가치를 높이는 데 도움이 됩니다. IA와 협업하여 올바른 UX를 제공하는 토탈 패키지를 만드는 데 도움이 됩니다.

마이크로인터랙션을 가장 잘 정의하는 네 가지 기본 단계는 무엇입니까?

마이크로인터랙션 전문가 Dan Saffer가 만든 이 4단계를 거치지 않고는 마이크로인터랙션에 대해 글을 쓸 수 없습니다. Saffer는 그의 책 "MIcrointeraction"에서 전체 프로세스를 다음 단계로 분류합니다.

• 트리거 요소 : 마이크로 인터랙션 프로세스를 트리거하는 모든 작업은 트리거 요소로 계산됩니다. 예를 들어, 프로세스를 트리거하는 버튼을 클릭합니다.
• 규칙 요소 : 기능 자체를 결정합니다. 예를 들어 버튼을 누르면 해당 페이지로 이동합니다.
• 피드백 요소 : 프로세스가 수행되었음을 사용자에게 알립니다. 예를 들어, 무언가를 클릭하면 누르거나 강조 표시됩니다.
• 루프 요소 : 마이크로 인터랙션의 영향을 받는 사용자는 특정 기능을 반복적으로 사용하는 경향이 있습니다. 마이크로 인터랙션은 사용자 정신이 그것에 빠져들도록 구현됩니다. 사용자가 더 자주 다시 오도록 합니다. 이것은 사용자가 반복적인 상호작용의 행동 루프에 빠지는 루프 요소입니다.

그렇다면 인터페이스를 위한 좋은 마이크로인터랙션 환경을 구축하려면 어떻게 해야 할까요?

앱을 구축할 계획이라고 가정해 보겠습니다. 아니면 이미 개발 단계에 있을 수도 있습니다. 그러나 아직까지는 마이크로인터랙션을 포함할 계획이 없습니다. 당신은 이 기사를 읽고 같은 내용을 기꺼이 통합할 것입니다. 하지만 어떻게 합니까? IA 단계에 있다고 가정하면 다음과 같이 할 수 있습니다.

• 예를 들어, About Us 섹션과 같은 인터페이스의 특정 섹션을 개발할 때 개발자에게 해당 요소의 커서 위치를 인식하고 더 나은 시각적 매력을 위해 자동으로 강조 표시할 수 있는 코드(프로그래밍)를 제안하도록 개발자에게 요청하십시오. 또한 클릭하면 살짝 누른 것처럼 나타나야 합니다.

• 그 다음은 탐색 부분입니다. 사용자가 섹션을 클릭하면 다음 설정으로 안내하도록 프로그래밍됩니다. 당신이 할 수 있는 것은 진행 중인 프로세스를 묘사하는 기능과 같은 버퍼링을 도입하는 것입니다.

  이렇게 하면 사용자가 인터넷 연결 속도가 느리거나 페이지 로드가 예상보다 오래 걸리는 경우 사용자의 참여를 유지하는 데 도움이 됩니다. 이것을 사용하지 않으면 어떤 일이 일어날지 상상해보십시오.

  사용자는 단순히 앱/웹페이지가 작동하지 않는다고 느낄 것입니다. 그들은 문제가 브라우저의 끝에서 발생한다는 것을 결코 알지 못할 것입니다. 결과적으로 고객을 잃게 됩니다. 대신 이 기술을 사용하여 유사한 상황에 계속 참여하도록 하십시오.

• 오늘날 대부분의 대화형 앱이 공통적으로 갖고 있는 한 가지는 댓글 공유 섹션입니다. 개발 중인 앱이 사용자가 전 세계의 다양한 여행 위치를 탐색하고 즐겨찾기를 선택하는 데 도움이 된다고 가정합니다.

  유사한 버튼에 마이크로인터랙션 강조 기술을 사용하여 누군가 커서를 그 위에 놓을 때마다 좋은 UX를 생성합니다. 앞서 언급했듯이 클릭하면 누르는 효과가 표시되어야 합니다.

  공유 버튼으로 이동하면 Facebook, Twitter, WhatsApp 등과 같은 다양한 공유 옵션으로 구성된 일종의 드롭다운을 만들 수 있습니다. 이렇게 하면 이 섹션 위로 커서를 가져갈 때마다 특정 색상으로 강조 표시되고 드롭다운이 동시에 표시됩니다. .

  [참고: 세 섹션 모두에 사용된 색상은 시각적 대비가 너무 많이 나타나지 않도록 유사해야 합니다.]

• 다양한 종류의 웹사이트/애플리케이션에 대해 버퍼링 모델을 사용할 수도 있습니다. 버퍼링 모션 아이콘을 해당 플랫폼에 맞는 아이콘으로 교체하기만 하면 됩니다. 예를 들어, 결제 앱을 구축하는 경우 결제 프로세스가 수행될 때 동전 더미를 선형 동작으로 표시하거나 지폐를 섞는 것을 표시할 수 있습니다.

  또는 사용자가 개인 장바구니에 계속 다른 항목을 추가하는 전자 상거래 앱을 예로 들어 보겠습니다. 모션 카트 아이콘을 사용하여 선택한 항목이 추가 중임을 사용자에게 알릴 수 있습니다.

따라서 마이크로인터랙션을 사용할 수 있는 범위는 충분합니다. 전략적 사용은 장기적으로 사용자를 성공적으로 참여시켜 더 많은 브랜드 가치를 가져올 수 있습니다.

마이크로인터랙션은 사용자의 마음에 어떤 영향을 미치며 어떻게 반응합니까?

지금까지 다양한 유형의 마이크로인터랙션과 기업가로서 이를 통합할 수 있는 방법에 대해 알아보았습니다. 그러나 그것은 동전의 한 면일 뿐입니다. 상대방은 고객입니다. 서로 다른 종류의 마이크로인터랙션에 어떻게 반응하는지 이해하면 프로세스를 보다 효과적으로 준비하는 데 도움이 될 수 있습니다. 마이크로 인터랙션이 잠재 의식에 어떤 영향을 미치는지 확인하십시오.

• 사용자가 특정 마이크로 인터랙션과 접촉하면 신경계에 미묘한 신호를 유발하여 더 사용하고 싶게 만듭니다. 결과적으로 습관 루프가 발생합니다.
• 결과적으로 사용자는 제품과 상호 작용하기 위해 계속해서 다시 방문합니다. 따라서 무기한 동안 사용자/고객을 유지합니다.
• 비주얼은 모든 마케팅 전략가가 사용하는 것입니다. 비주얼과 함께 제공되는 엄청난 이점을 알고 있기 때문입니다. 그리고 시각적 요소로서의 마이크로인터랙션은 사용자의 심리를 조작하여 전환을 생성할 수 있습니다.
• 마이크로 인터랙션의 피드백 요소는 사용자의 마음에 편안함을 주며, 고객이 원하는 제품을 탐색할 때 독점적인 제어를 즐기는 방법을 알고 있습니다.
• 마이크로 인터랙션이 제공하는 바로 그 움직임은 본능적인 수준에서 사용자와 연결되는 편안한 느낌을 생성합니다. 이는 고객의 호소력과 사용자 기반의 급격한 증가로 이어집니다.

마지막 생각들

지금쯤이면 마이크로인터랙션의 핵심 기능이 IA에 생명을 불어넣는 것이라는 사실을 깨달았을 것입니다. 웹사이트/애플리케이션의 동적 특성을 향상시킵니다. 사람들은 마이크로 인터랙션의 중요성을 간과하는 경향이 있지만 이러한 기능이 작동하지 않을 때 위기를 느낍니다.

이 과정에서 발생하는 미세한 잠재의식적 변화가 아무리 작거나 사소해 보이더라도 해결하는 것이 중요합니다. 이러한 작은 효과가 결국 성공적인 UX로 이어집니다. 노자의 말에 따르면 “천리의 여행은 한 걸음부터 시작한다.”