개발자-디자이너 협업을 통해 마이크로 인터랙션 및 UI 애니메이션 구현

마이크로 인터랙션과 UI 애니메이션을 통해 사용자에게 즐거운 경험을 제공 할 수 있습니다!

안녕하세요. 저는 Kyo Kim이고 Capital One에서 약 2 년 동안 제품 디자이너로 일하고 있습니다. 본인은 본인이 사용한 일부 모바일 프로젝트를 포함하여 작업 내내 마이크로 상호 작용 및 애니메이션을 사용하고 있습니다. 기술 분야에서 일을 시작하기 전에 제 배경은 영화에있었습니다. 영화에서 초점은 스토리 텔링과 편집에 관한 것입니다. 그 중 많은 부분이 전환을 사용하여 수행됩니다. 디지털 도구에 대한 경험과 이야기를 만들면서 오늘날 이러한 기술이 유용하다는 것을 알게되었습니다.

디자인 할 때 전환과 스토리 텔링에 대해 사용자에게 즐겁고 즐거운 경험을 제공하는 요소에 대해 생각합니다.

제품이 사용자에게 즐거운 경험을 제공하려면 미적으로 만족스러운 디자인과 인상적인 애니메이션 효과 이상의 것을 제공해야합니다.

제품이 앱 기반, 웹 기반 또는 기타 다른 형태의 디지털 제품인지 여부에 관계없이 사용자를 끌어 들여서 사용하기 쉽고, 직접적이고 의미있는 방식으로 제품을 이용할 수있는 기회를 제공해야합니다. 방법.

마이크로 인터랙션은 많은 디자인 요소가 할 수없는 방식으로 사용자가 즐겁고 만족스러운 경험을 할 수있는 힘을 가지고 있습니다. 제품 디자인의 맥락에서 마이크로 인터랙션을 시작하기 전에 기본 사항부터 시작하겠습니다.

그들은 무엇인가? 사용자 경험에 좋은 이유는 무엇입니까? 왜 디자이너와 개발자가이를 작업에 통합해야합니까? 제품 디자인 팀이 어떻게 협력하여 팀을 개선 할 수 있습니까?

마이크로 상호 작용이란 무엇이며 왜 우리가 관심을 가져야합니까?

마이크로 인터랙션 또는 UI 애니메이션이란 무엇입니까? 사람들은 종종 예쁜 애니메이션, 모션 그래픽 또는 동영상 디자인이라고 말합니다. 그러나 그것들은 그 이상입니다.

움직임의 환영을 만들기 위해 존재하는 다른 형태의 애니메이션과 달리, 마이크로 인터랙션은 사용자를 직접 참여시켜 다양한 작업을 수행하고 직관적이고 효과적인 방식으로 제품과 상호 작용할 수 있도록합니다.

우리가 이것을 우수한 시스템 설계 원칙과 연계 시키려면, 이는 사용자의 시스템 피드백을 향상시키고 가능하게합니다. 올바르게 수행되면 사용자는 사용자 (시스템)가 사용자의 요구에 응답하여 수행해야하는 작업을 수행한다는 메시지를 사용자로부터 메시지로받습니다.

마이크로 상호 작용이 무엇인지 모르더라도 정기적으로 참여합니다. 앱이나 웹 기반 제품을 사용하여 뉴스 읽기, 구매, 게임, 프로필 만들기, 설정 및 알림 기본 설정 조정 등 특정 작업을 수행 할 때마다 모든 개별 작업이 구성됩니다. 마이크로 상호 작용. 마이크로 인터랙션은 제품 플랫폼에 매끄럽게 연결되어 기능을 투명하고 액세스 가능하게하여 사용자의 전반적인 경험을 효과적으로 개선합니다.

이러한 "작업"은 여러 가지 다른 형태를 취하지 만 몇 가지 일반적인 예는 다음과 같습니다.

  • 품목을 가상 장바구니로“이동”할 때.
  • CTA와 유사한 토글 버튼에서 두 가지 옵션을 선택할 때
  • 뉴스 피드를 새로 고치고 최신 업데이트를보기 위해 "풀다운"할 때
  • 긴 피드 또는 페이지에서 "스크롤 업 / 다운"할 때.

마이크로 인터랙션을 설계 할 때 사용자 경험에 꼭 필요한지 여부를 조사해야합니다. 그렇지 않으면 제품을 사용하여 사용자 양식을 효과적으로 산만하게하거나 시각적 소음이 발생할 수 있습니다.

마이크로 상호 작용의 원리

마이크로 인터랙션을 설계 할 때 항상 고려해야 할 세 가지 원칙이 있습니다.

  1. 연속성 (및 미묘함)

마이크로 상호 작용 요소는 사용자가 행동을 할 때 경험에 지속적인 흐름이 있도록 미묘해야합니다. 예를 들어, 긴 피드에서 스크롤 애니메이션을 만드는 경우 사용자는 스크롤 애니메이션 자체가 아니라 페이지의 내용에 초점을 맞출 수 있어야합니다.

2. 예측 가능성

양질의 마이크로 인터랙션에는 사용자가 제품을 효과적이고 효율적으로 탐색 할 수있는 예측 가능성 요소가 있습니다. 사용자는 자신의 행동의 영향을 정확하게 예측하고, 역전을 편안하게 느끼며, 예상대로 수행 할 수있는 능력을 확신 할 수 있습니다.

3. 변형성

여러 화면 사이의 유체 전환과 그 안에있는 다양한 객체의 잘 정의 된 변환은 품질 미세 상호 작용의 핵심 측면입니다. 이를 통해 사용자는 화면과 화면 내 요소 간의 관계를 직관적으로 이해할 수 있습니다.

이러한 원칙에 따라 설계 될 때 마이크로 상호 작용은 사용자가 설계와 상호 작용하는 방법을 알도록 도와줌으로써 설계의 맥락을 제공합니다. 마이크로 인터랙션은 단일 작업을 완료하는 순간적인 이벤트입니다. 웹 사이트 또는 앱 디자인에서 가장 작은 대화 형 요소 인 마이크로 상호 작용은 다양한 핵심 기능을 제공하기 때문에 가장 중요합니다.

트리거 (탭, 스 와이프, 드래그 등)는 위 섹션에 나열된 모든 작업 (연속성, 예측 가능성 및 변형 가능성)을 시작합니다. 사용자는 웹 사이트 또는 앱에서 작업을 수행하여 프로세스를 시작합니다 (초기 단계 후에도 계속됨). 이는 사용자의 클릭 유도 문안, 인터페이스에 의해 결정되는 참여 규칙 (어떻게되며 어떻게 발생하는지), 사용자의 피드백 (작동 여부), 패턴 또는 루프 (작업 수행)를 따릅니다. 한 번 발생하거나 일정에 따라 반복).

-개발자와 디자이너가 협력하여 마이크로 상호 작용을 실현하는 방법

보다시피, 마이크로 인터랙션은 사용자 경험을 형성하는 데 중요한 역할을합니다. 이로 인해 제품 디자이너로서의 작업에서 점점 더 중요한 부분이되었습니다. 여러 플랫폼에서 다양한 프로젝트를 수행하고 사용하면서 모든 사람들이 이러한 요소의 가치 또는 효과적으로 만드는 방법을 인식하는 것은 아닙니다. 더 중요한 것은 종종 팀원들이 전환 및 미세 상호 작용 설계와 관련하여 아이디어를 서로에게 표현하는 방법을 모른다는 것입니다.

나는 모든 것이 커뮤니케이션으로 요약되었다는 것을 깨달았습니다. 디자인 아이디어를 개발자에게 설명 할 때 번역에서 잃어버린 부분이있었습니다. 공자로부터이 인용문을 들어 본 적이있을 것입니다.“저에게 알려주십시오. 보여주십시오, 나는 기억할 것입니다. 저를 참여 시키면 이해하겠습니다.”그리고 디자이너와 개발자로 구성된 팀이 훌륭한 경험을 창출하는 것은 참여를 통해 이루어집니다.

먼저 디자인 프로세스에 대한 간단한 설명을 살펴 보겠습니다.

이상적인 상황에서 디자이너가 마이크로 상호 작용에 대한 아이디어를 제시하면 전통적인 워크 플로는 다음 순서로 진행됩니다.

  1. 디자이너는 자신의 아이디어를 실현하는 데 필요한 시각적 요소와 애니메이션 효과를 개발합니다.
  2. 디자이너는 최종 모델과 기본 개념을 다른 팀 구성원에게 제시합니다.

그러나 이론적으로 디자인 프로세스가 실제로 실행되지 않으면 어떻게 될까요? 스토리 보드 또는 불완전한 모델을 제시하면 어떻게 되나요? 아니면 다른 팀원이 모델을 설계하고 있습니까?

이런 일이 발생하면 프리젠 테이션이나 개발에 문제가 발생할 수 있습니다. 이러한 문제는 일반적으로 세 가지 범주 중 하나에 속합니다.

  1. 애니메이션 아이디어가 명확하게 전달되지 않았습니다.

단어 나 정지 이미지로 애니메이션 개념을 설명하려는 경우 잠재 고객의 얼굴에 찡그린 얼굴이 나타날 수 있습니다. 이것은 그들이 당신의 아이디어를 이해하기 위해 최선을 다하고 있지만 실제로는 그것을 얻지 못한다는 것을 의미합니다. 기본 개념을 이해하더라도 마음에 떠오르는 그림은 사용자가 생각한 것과 일치하지 않을 수 있습니다. 사람들은 움직이는 이미지, 정지 이미지 및 구두 설명을 다른 방식으로 인식하는 경향이 있기 때문에 애니메이션 아이디어를 전달하기 위해 단어 나 이미지에 의존하면 의사 소통의 여지가 생길 수 있으며 팀 구성원들 사이에 불필요한 긴장이 생길 수 있습니다.

2. 디자이너는 개발자의 프로토 타입을 확인하고 테스트 할 때까지 애니메이션이 제대로 작동하는지 알 수 없습니다.

디자이너가 프로토 타이핑 기술이없는 경우 스토리 보드를 통해 개발자에게 아이디어를 제공하는 것으로 제한됩니다. 설계자가 마이크로 인터랙션 모델을 강하게 믿고 있다고해도 개발자가 프로토 타입을 완성 할 때까지 자신의 잠재력을 최대한 발휘하고 있는지 말할 수 없습니다. 이것은 여러 가지 이유로 문제가되는데, 주된 이유는 그러한 접근 방식이 프로세스에 도입 될 가능성이 높은 의사 소통 가능성입니다. 또한 팀 구성원들로부터 의심의 여지가 생기고 아이디어의 실현 가능성에 대한 질문으로 이어집니다. 개발 관점에서 볼 때 시간이 오래 걸릴 수 있습니다.

3. 디자이너와 개발자가 같은 페이지에 있지 않습니다

디자이너가 UI 애니메이션이나 마이크로 인터랙션을 만들 때 사용자 정의 편의성, 스크립트, 표현 및 기타 효과와 같은 복잡한 디자인 세부 정보를 포함하려고합니다. 이러한 아이디어를 개발자에게 제시 할 때 "타임 라인에서이 작업을 수행 할 수 없습니다"또는 "정확하게 동일하게 만들 수는 없지만 시도해 볼 것"이라고들을 수 있습니다.이 시점에서 해시를 시도 할 수 있습니다. 개발자와 관련된 다양한 세부 정보 및 기술 문제. 그러나 디자이너가 개발자가 사용하는 도구 나 언어에 대한 실무 지식이 없으면 이러한 논의는 결실을 맺을 수 있습니다. 아이디어를 공식화하고 논의 할 때 이러한 요소를 고려하여 마이크로 상호 작용이 개발자의 기본 설정과 호환되므로 최종 제품이 디자이너 (및 기타 모든 사람) 표준을 충족 할 가능성이 높아집니다.

이 문제에 대한 해결책은 무엇입니까?

모든 디자이너와 개발자는 자신의 애니메이션 개념에 대해 의사 소통하는 방법을 가지고 있지만 팀에서 사용하는 방법 중 하나를 공유하고 싶습니다. 이 방법은 매우 성공적이었으며 회의 수가 줄어들 었으며 팀의 커뮤니케이션이 크게 향상되었습니다.

이제 더 이상 마이크로 상호 작용을 포함할지 여부에 대해 논쟁하지 않고 더 나은 상호 작용을위한 방법을 모색하고 있습니다.

스켈레톤 인터랙션 컨셉 및 인터랙션 가이드

"스켈레톤 인터랙션 컨셉과 인터랙션 가이드는 해석 할 여지를 남기지 않아서 즉시 작업을 시작하고 디자이너의 비전을 맞출 수 있습니다."–Jesse M Majcher / 수석 IOS 엔지니어

UX 디자인에 대한 의사 소통에 사용하는 표준 프로세스는 UI 애니메이션에 적합하지 않습니다. 우선, UX ​​디자인 및 플로우는 여전히 화면별로 디자인되며 정적입니다. UI 애니메이션 자체는 흐름이며 유동적이며 타이밍을 기반으로합니다. 정적 디자인을 만들 때 아이디어를 이해하고 흐름을 논의 할 수 있도록 거친 와이어 프레임을 만듭니다. 이를 통해 최종 버전을 만들기 전에 디자인을 쉽게 수정하고 미세 조정할 수 있습니다. 모든 팀 구성원이 디자인이 개발자에게 전달 될 준비가되면 디자이너는 디자이너에게 세부 정보, 사양 및 디자인에 대한 기타 중요한 정보가 포함 된 스타일 가이드 및 레드 라인을 제공합니다.

애니메이션에 비슷한 프로세스를 사용하면 프로세스 속도가 훨씬 빨라질 수 있습니다.

  1. 스켈레톤 인터랙션 컨셉 (모션 스터디)

스켈레톤 인터랙션 컨셉은 플로우를 디자인 할 때 생성 할 와이어 프레임과 유사하지만, 주요 차이점은 재생 가능한 / 클릭 가능한 프로토 타입 데모입니다. 이것을 회의에 가져 오면 팀원들은 개념을 이해하기 위해 상상력을 사용할 필요가 없습니다. 디자이너는 재생 가능한 / 클릭 가능한 데모 또는 정적 스토리 보드를 사용하여 디자인의 시각적 및 애니메이션 요소를 직접 참조 할 수 있습니다. 이를 통해 모든 사람은 자신의 아이디어를 명확하고 정확하게 이해할 수 있습니다. 결과적으로 파트너는 매우 구체적이고 따라서 디자이너에게 매우 유용한 피드백을 제공 할 수 있습니다. 동시에 제품 관리 및 개발 팀은 프로젝트의 내부 커뮤니케이션 및 시간 추정을 개선 할 수있는 정보를 얻습니다.

2. 상호 작용 안내서

팀이 개념에 동의하면 디자이너는 상호 작용 가이드를 만듭니다. 이것은 요소의 위치, 회전, 스케일 및 타이밍을 개략적으로 설명한다는 점에서 스타일 가이드와 유사합니다. 우리는 애니메이션에 대한 모든 세부 사항을 추가하여 파트너가이를 명확하게 이해하는 데 도움이됩니다. 디자이너가 파트너에게 상호 작용 가이드를 보여 주면 애니메이션 개념의 움직임과 측정에 대해 더 명확하게 알 수 있습니다. 협업을 통해 작업을 마무리하는 데 매우 유용합니다. 또한 디자이너가 애니메이션 / 마이크로 인터랙션 디자인에 더 깊이 신경 쓰도록 도와줍니다.

3. 디자이너를위한 프로토 타입 기술

내 경험상 성공적인 디자인 협업을 위해 제품 디자이너는 애니메이션의 드라이버가되어야하고 개발자는 지원을 제공해야합니다. 이는 제품 디자이너가 파트너쉽에 대한 책임을진다는 것을 의미합니다. 그들은 자신의 아이디어를 매우 명확하게 설명 할 책임이있을뿐만 아니라 개념 증명을 제공하여 실현 가능성을 보여 주어야합니다. 또한 제품 디자이너는 자체 애니메이션 프로토 타입을 제작할 수 있어야합니다. 제품 디자이너가 회의 중에 프로토 타입을 만들어 프레젠테이션을 발표 할 수 있다면, 다음과 같은 논의가보다 명확하고 시간이 덜 소요되어 전반적인 커뮤니케이션 프로세스가 더욱 효과적입니다.

그렇다면 디자이너는 어떤 종류의 프로토 타입 도구를 숙지해야합니까? 많은 도구가 있지만 모든 사람들이 특정 마이크로 상호 작용 작업에 가장 적합한 것을 알고있는 것은 아닙니다. 다음은 이러한 요소를 디자인하는 개인적인 경험을 바탕으로 한 권장 사항입니다.

코딩에 익숙하다면 :

  • 모바일 : Xcode, Android 스튜디오
  • 모바일 또는 웹 : 프레이머
  • 웹 : CSS 애니메이션

스크린과 같은 푸시와 모듈 간의 상호 작용을 디자인하려는 경우 :

  • 비전과 마벨

보다 자세한 상호 작용을 작성하려면 다음을 수행하십시오.

  • 원칙, Adobe CC, 종이 접기 스튜디오 및 Pixate

자세한 상호 작용 + 애니메이션을 만들려면

  • 후 효과

현재 프로토 타입 제작에 After Effects를 사용하는 팬입니다. 대화식이 아니더라도 (예 : 클릭 가능) 애니메이션 개념을 제시하는 가장 좋은 방법입니다. 또한 효과의 제한이 없으며 디테일의 움직임을 제어 할 수 있습니다. AR 및 VR과 같이 3D 공간에서 상호 작용을하는 데 사용할 수도 있습니다.

유쾌한 팀 상호 작용으로 유쾌한 제품 만들기

웹, 모바일 디자인 등의 요소는 마이크로 상호 작용이 점점 중요 해지고 있습니다. 디자이너와 개발자 모두 UI 애니메이션의 가치를 인식하고이를 만들려는 동기가 있어도 효율적이고 효과적인 방식으로 공동 작업을 수행하는 데 어려움을 겪습니다. 제 시간에 훌륭한 마이크로 상호 작용을 제공하려면 강력한 팀이 필요합니다. 이러한 팀은 명확한 역할 묘사, 효과적인 의사 소통 기술 및 당면한 작업에 적합한 프로토 타이핑 도구가 필요합니다.

마이크로 인터랙션을 성공으로 이끄려면 팀이 이러한 특성을 가지고 있고 이러한 프로세스에 참여해야합니다. 그리고 당신 자신의 마이크로 인터랙션 여행과 함께 행운을 빌어 요!

공개 성명서 :이 의견은 저자의 의견입니다. 이 게시물에서 달리 언급되지 않는 한 Capital One은 언급 된 회사와 제휴하거나 보증하지 않습니다. 사용되거나 표시된 모든 상표 및 기타 지적 재산은 해당 소유자의 소유권입니다. 이 기사는 © 2017 Capital One입니다.

Capital One의 API, 오픈 소스, 커뮤니티 이벤트 및 개발자 문화에 대한 자세한 내용은 원 스톱 개발자 포털 인 developer.capitalone.com 인 DevExchange를 방문하십시오.