마이크로인터랙션을 통한 더 나은 UX

제품을 디자인할 때 페르소나 정의, 잘 구조화된 정보 아키텍처, 신중하게 작성된 콘텐츠를 포함하여 사용자 경험을 개선할 수 있는 여러 가지 방법이 있습니다. 그러나 이 높은 수준의 구조가 설정된 후에는 사용자에게 더 작은 상호 작용 디자인 세부 정보 가 제공됩니다.

마이크로인터랙션 이라고 하는 이러한 세부 사항은 단일 작업을 수행하면서 자연스러운 제품 흐름을 향상시키도록 설계된 제품의 개별 순간입니다. 데이터를 새로 고치기 위해 위로 스와이프하거나 콘텐츠에 좋아요 표시를 하거나 설정을 변경하는 것은 모두 마이크로 인터랙션입니다. 여기에는 탭할 때 메뉴가 미끄러지는 방식이나 스와이프할 때 카드가 화면에서 미끄러지는 방식과 같은 간단한 UI 애니메이션도 포함될 수 있습니다.

종종 마이크로인터랙션은 사용자가 의식적으로 알아차리지 못하지만 미세한 세부사항은 제품을 더욱 즐겁고 사용하기 쉽게 만들어 사용자 경험을 향상시킵니다.

마이크로인터랙션의 이점

마이크로인터랙션과 UI 애니메이션은 디자인을 만들거나 깨뜨릴 수 있을 정도로 매우 중요합니다. 또는 가구 디자인과 건축으로 유명한 Charles Eames는 다음과 같이 말했습니다.

디테일은 디테일이 아니다. 그들은 디자인을 만듭니다.

마이크로인터랙션을 제품에 통합함으로써 얻을 수 있는 몇 가지 주요 이점은 다음과 같습니다.

• 더 부드러운 UI 상호 작용으로 사용자에게 긍정적인 감정적 효과 생성
• 사용자가 취한 조치를 기반으로 사용자에게 즉각적인 피드백 제공
• 보다 유동적이고 직관적인 방식으로 앱을 통해 사용자 안내
• 알림에 응답하거나 콘텐츠를 공유할 때 사용자가 앱과 상호 작용하도록 권장
• 사용자 오류 방지

마이크로인터랙션 디자인 모범 사례

마이크로인터랙션이 하는 일에 대한 정의와 컨텍스트를 설정하고 마이크로인터랙션이 사용자 경험을 개선하는 방법에 대한 예를 들었으므로 마이크로인터랙션 생성을 위한 모범 사례에 대해 논의해 보겠습니다.

사용자의 문제 식별 및 이해

모든 사용자 경험 디자인의 첫 번째 규칙은 사용자 문제를 발견하고 이해하는 것입니다. 이는 마이크로인터랙션에서도 마찬가지입니다. 사용자에게 필요한 것이 무엇인지 이해하는 가장 좋은 방법은 설문조사나 인터뷰를 수행하거나 사용자 조사를 통해 행동을 관찰하는 것입니다. Toptal 디자이너 Ivan Annikov는 "Going Guerrilla: Affordable UX Research Tips And Alternatives"에서 사용자 요구를 이해하는 방법에 대해 자세히 설명합니다.

마이크로 인터랙션을 자연스럽게 유지

목표는 직관적이고 자연스러운 방식으로 사용자와 제품 사이의 간격을 메우는 것이므로 로드하는 데 너무 오래 걸리거나 사용자의 주의를 산만하게 할 수 있는 이상한 애니메이션을 피하십시오. 대신 제품과 매끄럽게 연결되는 디자인을 만드십시오. 미묘함은 마이크로 인터랙션의 핵심입니다. 사용자가 "그게 뭐였지?"

사용자 테스트 결과 테스트 및 반복

경험 많은 디자이너라도 첫 번째 시도에서 완전히 올바른 디자인을 얻는 경우는 거의 없습니다. 그렇기 때문에 사용자 테스트 및 반복적인 디자인 프로세스를 사용하는 것은 제품 출시 전에 사용성 결함을 줄이는 간단한 방법입니다.

사용자 테스트 단계에서 마이크로인터랙션은 사용성 테스트 및 분석을 거쳐 다음 설계 단계에서 수정됩니다. 이 프로세스는 사용성 문제와 문제점이 수정될 때까지 반복됩니다.

마이크로 인터랙션의 구조를 따르십시오

Twitter의 선임 직원 제품 디자이너이자 "Microinteractions: Designing with Details"의 저자인 Dan Saffer에 따르면 마이크로인터랙션에는 네 부분이 있습니다.

1. 트리거 — 트리거는 미세 상호 작용을 시작합니다. 한 가지 유형의 트리거는 기능을 켜고 끄는 토글 스위치입니다.
2. 규칙 — 규칙은 미세 상호 작용이 트리거에 응답하는 방식을 결정하고 상호 작용 중에 발생하는 일을 정의합니다. 예를 들어, 손전등 앱은 조명을 켜고 끄는 트리거로 버튼을 사용합니다.
3. 피드백 — 피드백은 사용자에게 마이크로 인터랙션 중에 일어나는 일을 알려줍니다. 피드백의 예는 인라인 유효성 검사가 포함된 가입 양식입니다. 필드가 올바르게 채워지면 테두리 색상이 녹색으로 바뀌고 잘못된 것이 있으면 빨간색으로 바뀝니다. 이런 식으로 사용자는 무언가가 옳고 그름을 즉시 알 수 있습니다.
4. 루프 및 모드 — 루프 및 모드는 마이크로인터랙션의 메타 규칙과 마이크로인터랙션이 반복적으로 사용될 때 어떻게 변경되는지 정의합니다. 예를 들어 전자 상거래에서 사용자가 이전에 항목을 구매한 경우 "지금 구매" 버튼이 "다른 구매"로 변경될 수 있습니다.

마이크로인터랙션 디자인 해체하기

마이크로인터랙션 디자인 이면의 사고 과정을 보여주기 위해 Google의 마이크로인터랙션을 분해해 보겠습니다. Google 문서의 파일 이름 제안 마이크로인터랙션입니다.

이 마이크로인터랙션은 문서의 첫 번째 줄을 가져와서 해당 텍스트를 문서 이름으로 제안하여 이름 생성 프로세스를 보다 직관적으로 만듭니다.

마이크로 인터랙션을 디자인하는 프로세스는 모든 디자인 작업과 동일합니다. 즉, 사용자의 고충을 식별하고 수정합니다. 이전 모범 사례를 염두에 두고 문제를 식별해 보겠습니다.

사용자 문제

문서를 정리하는 쉽고 직관적인 방법은 문서의 이름을 쉽게 설명하는 것입니다. 대부분의 텍스트 편집기에서 "문서 이름 지정" 필드는 파일 이름이 문서 내용과 결국 상관 관계가 있을 가능성이 높더라도 공백으로 남아 있습니다. 이것은 마이크로 인터랙션으로 해결할 가치가 있는 프로세스입니다.

구글의 솔루션

Google 문서도구는 사용자의 선택에 따라 두 가지 방식으로 이를 처리합니다. 1) 사용자는 이름 필드를 클릭하고 콘텐츠를 입력하기 전에 문서 이름을 즉시 변경할 수 있으며 "제목 없는 문서"를 원하는 이름으로 변경할 수 있습니다. ) 사용자가 텍스트의 첫 번째 줄을 입력하면 Google에서 이를 문서 이름으로 자동 채웁니다. 사용자는 이것을 그대로 유지하거나 변경할 수 있습니다.

세부 사항을 살펴보겠습니다.

트리거

파일 > 다른 이름으로 저장 메뉴 기능을 사용하거나 데스크탑 애플리케이션에서와 같이 키보드에서 cmd+s (Windows의 경우 ctrl+s )를 누르거나, 문서 이름을 지정하는 몇 가지 가능한 트리거가 있을 수 있습니다. 그러나 이들 중 어느 것도 웹의 대화형 특성을 활용하지 않으며 특히 사용자 흐름을 향상시키지 않습니다.

대신 Google 문서도구의 주요 트리거는 문서 이름 필드를 클릭하는 것입니다. 필드의 호버 상태는 "이름 바꾸기" 도구 설명을 표시합니다. 두 번째 트리거는 이름 입력 필드를 강조 표시하는 파일 > 이름 바꾸기 입니다.

규칙

규칙은 트리거를 클릭한 후 발생하는 일을 정의합니다. 이 경우 텍스트의 첫 번째 줄이 문서 이름으로 나타납니다. 그러나 사용자가 텍스트의 첫 줄을 이름으로 사용하는 것을 원하지 않는다면 어떻게 될까요? 사용자가 이름 입력 필드를 클릭하면 모든 텍스트가 선택되고 키 입력으로 삭제되므로 사용자가 새 이름을 쉽게 만들 수 있습니다.

피드백

입력 필드 테두리의 색상을 변경하는 것은 일반적인 상호 작용 패턴이며 Google 문서에서 사용자에게 즉각적인 피드백을 제공하기 위해 사용하는 것입니다.

루프 및 모드

사용자가 문서 이름을 성공적으로 생성했으며 트리거는 한 가지 주요 차이점이 있는 그대로 유지됩니다. 문서에 이름이 지정되었습니다.

이 시점에서 사용자는 이전에 정의한 전체 이름을 변경하는 대신 몇 글자만 변경하거나 이름에 날짜를 추가하기를 원할 수 있습니다. 이 경우 이전 규칙과 달리 전체 문서 이름을 강조 표시하는 규칙이 비활성화됩니다.

결과

문제를 정의하고 마이크로인터랙션의 네 부분 모두에 초점을 맞춘 후 결과는 보다 자연스럽고 사용자 친화적인 경험입니다. Google 문서도구 파일 이름 지정 솔루션은 사용자가 적절한 이름을 가진 파일로 정리하는 데 도움이 되며 문서 이름 지정 프로세스를 간소화합니다.

작동 중인 마이크로인터랙션: 실제 사례

작업 목록 재정렬

Apple iOS 미리 알림은 사용자가 목록 항목을 탭하고 길게 누르고 끌어 목록 순서에서 위치를 변경할 수 있도록 함으로써 사용자가 정리를 유지하고 여러 단계를 제거하는 데 도움이 됩니다.

소셜 미디어 게시물에 반응하기

좋아요 버튼이나 아이콘을 클릭하여 콘텐츠를 "좋아요"하는 것은 많은 앱과 웹사이트에서 일반적인 UX 디자인 패턴이 되었습니다. Facebook은 미묘한 미세 상호 작용을 통해 "좋아요"를 넘어 여러 옵션을 추가하여 이러한 상호 작용을 기반으로 합니다.

브랜드 텍스트 강조

대부분의 브라우저에서 기본 텍스트 선택 색상을 재정의할 수 있습니다. IKEA는 이 상호작용 패턴을 사용하여 상징적인 노란색과 파란색으로 텍스트를 강조 표시하여 미묘한 브랜딩 디테일을 추가합니다.

위치 공유

Google 행아웃은 사용자가 자신의 위치를 ​​공유하고 싶어할 수 있는 경우 중 하나가 누군가 "당신은 어디에 있습니까?"라고 문자를 보낼 때라고 가정합니다.

사용자가 이 메시지를 볼 때 "내 위치 공유" 버튼이 상황별 옵션으로 표시됩니다. 그런 다음 해당 버튼을 탭하여 다른 사용자에게 위치 지도를 자동으로 보낼 수 있습니다.

스와이프하여 선택

마이크로인터랙션은 앱에서 간단한 예 또는 아니오 질문에 대답하는 데 사용할 수 있습니다. Tinder는 가능한 일치 여부에 따라 사용자가 왼쪽이나 오른쪽으로 스와이프(아니요/예)하도록 하여 이를 수행합니다.

검색 확장

Google Inbox 앱은 메일을 번들로 지능적으로 그룹화할 뿐만 아니라 음성으로 검색하거나 탭 한 번으로 가장 최근 연락처에서 선택할 수 있도록 설계되었습니다.

친구의 연락처 정보를 빠르게 추가하기

SeatGeek은 "연락처에서 추가" 버튼을 탭하여 사용자 연락처의 정보를 자동으로 입력하여 양식 작성 프로세스를 단순화합니다.

마이크로인터랙션에 대해 자세히 알아보기

마이크로인터랙션은 사용자 경험 개선의 핵심 요소이며 마이크로인터랙션에 대해 자세히 알아볼 수 있는 많은 리소스가 있으며 그 중 몇 가지가 아래에 나열되어 있습니다.

일반적으로 마이크로인터랙션에 대해 자세히 알아보려면 이전에 언급한 Dan Saffer의 "마이크로인터랙션: 세부사항으로 디자인하기" 책의 동반자로 제작된 웹사이트인 Microinteractions를 방문하십시오. 이 사이트에는 자동 수정, 자동 완성, 잘라내기 및 붙여넣기와 같은 잘 알려진 미세 상호 작용의 기원에 대한 정보뿐만 아니라 미세 상호 작용에 대한 자세한 설명이 있습니다. 책의 첫 번째 장은 무료로 다운로드할 수도 있습니다.

마이크로인터랙션에 대한 영감을 얻으려면 디지털 제품의 마이크로인터랙션을 선별한 컬렉션인 Little Big Details를 방문하세요. Apple, Trello 및 Stack Overflow와 같은 회사에서 마이크로인터랙션 및 UI 애니메이션을 구현하는 방법의 예를 보여줍니다.

Framer에서 마이크로인터랙션을 생성하는 방법을 배우려면 Toptal Designer, Wojciech Dobry의 기사 Framer Tutorial: 7 Simple Microinteractions to Improve Your Prototypes를 읽으십시오.

당신의 생각을 알려주세요! 아래에 귀하의 생각, 의견 및 피드백을 남겨주세요.

• • •

Toptal Design 블로그에 대한 추가 정보:

• 디자인 원칙과 중요성
• 최고의 UX 디자이너 포트폴리오 – 영감을 주는 사례 연구 및 사례
• 디자인의 게슈탈트 원리 탐구
• Adobe XD vs. Sketch – 어떤 UX 도구가 당신에게 적합합니까?
• 최고의 디자이너가 사용하는 10가지 UX 결과물