설득력 있고 감동적인 – 모션 디자인 원칙 가이드

모션은 디지털 제품의 사용자 경험에 지대한 영향을 미치지만 인터페이스 요소가 기본 모션 디자인 원칙을 나타내지 않으면 사용성이 훼손됩니다. 사용자 인터페이스의 맥락에서 모션은 시각적 장식 그 이상입니다. 이는 제품 참여를 강화하고 디자인 커뮤니케이션의 범위를 확장하는 강력한 힘입니다.

우리의 세계는 움직임의 세계입니다. 고요한 순간에도 나뭇잎이 떨리고 폐가 팽창합니다. 디지털 제품 디자인의 영역에서 움직임은 제2의 천성과 일상의 연장선으로 약간의 노력으로 활용되는 것처럼 보일 것입니다. 그것이 사실이라면.

애니메이션 UI 요소를 처음 사용하는 사람에게 물어보세요. 노력의 시간은 아마추어 결과를 낳습니다. 카드가 화면에 미끄러지는 것처럼 단순한 것이 어색해 보입니다. 왜 그런 겁니까?

이론적으로 UI 요소를 움직이는 것은 쉽습니다. 미리 결정된 경로에 점을 정의하면 소프트웨어가 간격을 트위닝합니다. 실제로는 그렇게 작동하지 않습니다. 도구와 기술은 필수적이지만 원칙에서 힘을 얻습니다. 모션이 디지털 제품의 사용성을 향상시키는 것이라면 무한한 사용 사례에 적용되는 불변의 행동 규칙에 기초해야 합니다.

모션 디자인의 기원

모션 디자인과 UX의 결합은 비교적 새로운 것이지만 그 뿌리는 디즈니에 있습니다. Frank Thomas와 Ollie Johnston은 월트 디즈니에서 가장 가치 있는 애니메이터이자 Pinnochio , Bambi 및 Fantasia 와 같은 고전의 주요 기여자 중 한 명입니다. 그들의 12가지 애니메이션 기본 원칙은 영화, 텔레비전 및 디지털 콘텐츠의 모션 그래픽에 여전히 영향력이 있습니다.

디즈니 원칙은 애니메이션 스토리텔링을 위해 물리적 움직임의 필수 법칙을 추출합니다. 그들은 그려진 캐릭터가 움직이고 감정을 표현할 수 있도록 하지만 현대 사용자 인터페이스의 대화형 모션 요구 사항을 적절하게 해결하지 못합니다.

현대 디자이너들은 이 간극을 메우려고 시도했습니다. 더 실증적인 예 중 하나는 애니메이션 전문가 Jorge R. Canedo Estrada가 디즈니에서 각색한 10가지 모션 디자인 원칙입니다 . 그럼에도 불구하고 디지털 제품 디자인에 전체적으로 적용하려면 번역이 필요합니다.

인터랙티브 UI 요소(및 UX의 중요성)를 중심으로 모션 원칙의 방향을 조정하려는 가장 야심찬 시도는 Issara Willenskomer의 UX in Motion Manifesto 입니다. 그 깊이는 놀랍지 만 가벼운 독서는 아닙니다.

Willenskomer 는 UX in Motion의 12가지 원칙을 수립하면서 다음과 같이 말했습니다.

• UI 애니메이션과 모션 디자인 구별
• 모션이 사용성을 어떻게 지원하는지 명확하게 설명합니다.
• 코어 모션 동작의 내부 작동 풀기

모션 디자인과 UX: 중요한 차이점

모션 디자인의 원칙을 다루기 전에 Willenskomer의 선언문 전체에 나타나는 주요 차이점을 강조하는 것이 중요합니다.

움직임은 장식 그 이상입니다

모션 디자인은 UI 애니메이션과 동의어가 아닙니다. 이것은 UI 애니메이션이 거의 항상 UX와 관련이 없는 미학적인 사후 고려로 취급되기 때문에 중요합니다(매력 추가 제외). 동작은 장식이 아니라 동작이며 동작은 사용자 경험을 돕거나 방해할 수 있습니다.

두 가지 상호 작용 유형: 실시간 vs. 비실시간

모션 디자인은 실시간 및 비실시간이라는 두 가지 기본 상호 작용과 관련이 있습니다.

• 실시간 상호 작용은 사용자가 화면에서 UI 요소를 조작할 때 즉각적인 피드백을 제공합니다. 즉, 모션 동작은 사용자 입력에 즉시 반응합니다.
• 비실시간 상호작용은 사용자 입력 후에 발생합니다. 즉, 사용자는 계속하기 전에 결과 동작 동작을 잠시 멈추고 관찰해야 합니다.

모션 지원 사용성

모션 디자인은 4가지 뚜렷한 방식으로 사용성을 지원해야 합니다.

• 기대치: 사용자가 UI 요소와 상호 작용할 때 어떤 동작 동작을 볼 것으로 예상합니까? 움직임이 기대에 부응하거나 혼란을 야기합니까?
• 연속성: 상호 작용이 사용자 경험 전반에 걸쳐 일관된 모션 동작을 생성합니까?
• 내러티브: 상호 작용 및 이들이 트리거하는 모션 동작은 사용자 의도를 충족시키는 이벤트의 논리적 진행과 연결되어 있습니까?
• 관계: UI 요소의 공간적, 미적 및 계층적 속성은 서로 어떻게 관련되고 사용자 의사 결정에 영향을 줍니까? 모션은 존재하는 다양한 요소 관계에 어떤 영향을 줍니까?

디지털 제품을 위한 12가지 모션 디자인 원칙

1. 완화

이징은 실제 개체가 시간이 지남에 따라 가속 및 감속되는 방식을 모방합니다. 모션을 나타내는 모든 UI 요소에 적용됩니다.

완화의 반대는 선형 운동입니다. 선형 모션을 표시하는 UI 요소는 정지 상태에서 전속력으로, 전속력에서 정지 상태로 순간적으로 이동합니다. 이러한 행동은 물리적 세계 어디에도 존재하지 않으며 사용자에게 정지된 것처럼 보입니다.

2. 오프셋 및 지연

여러 UI 요소가 동시에 그리고 속도로 이동할 때 사용자는 그룹화하고 각 요소에 고유한 기능이 있을 수 있다는 가능성을 간과하는 경향이 있습니다.

오프셋과 지연은 동시에 움직이는 UI 요소 사이에 계층을 생성하고 서로 관련이 있으면서도 별개임을 전달합니다. 완전한 동기화 대신 요소의 타이밍, 속도 및 간격이 엇갈려서 미묘한 "하나씩" 효과가 나타납니다.

사용자가 화면 사이를 이동할 때 오프셋 및 지연은 여러 상호 작용 옵션이 있음을 나타냅니다.

3. 육아

육아는 한 UI 요소의 속성을 다른 요소의 속성에 연결합니다. 상위 요소의 속성이 변경되면 하위 요소의 연결된 속성도 변경됩니다. 모든 요소 속성은 서로 연결될 수 있습니다.

예를 들어, 부모 요소의 위치는 자식 요소의 배율에 묶일 수 있습니다. 상위 요소가 이동하면 하위 요소의 크기가 증가하거나 감소합니다.

육아는 UI 요소 간의 관계를 만들고 계층 구조를 설정하며 여러 요소가 한 번에 사용자와 통신할 수 있도록 합니다. 이러한 이유로 양육은 실시간 상호 작용에서 사용될 때 가장 영향력이 있습니다.

4. 변신

변환은 하나의 UI 요소가 다른 요소로 바뀔 때 발생합니다. 예를 들어 다운로드 버튼은 진행률 표시줄로 바뀌고 완료 아이콘으로 바뀝니다.

UX 관점에서 변환은 목표(시스템 상태의 가시성)와 관련하여 사용자에게 자신의 상태를 표시하는 효과적인 방법 입니다. 이는 UI 요소 간의 진행이 시작과 끝이 있는 프로세스(예: 파일 다운로드)와 연결된 경우 특히 유용합니다.

5. 가치 변화

가치 표현(숫자, 텍스트 기반 또는 그래픽)은 은행 앱에서 개인 캘린더, 전자 상거래 사이트에 이르기까지 다양한 제품에 나타나는 디지털 인터페이스에 풍부합니다. 이러한 표현은 실제로 존재하는 데이터 세트와 연결되어 있기 때문에 변경될 수 있습니다.

값 변경은 데이터 표현의 동적 특성을 전달하고 데이터가 상호 작용하며 어느 정도 영향을 받을 수 있음을 사용자에게 알립니다. 움직임 없이 값이 도입되면 사용자의 데이터 참여 의향이 감소합니다.

6. 마스킹

마스킹은 UI 요소의 일부를 전략적으로 드러내고 숨기는 것입니다. 마스킹은 요소 둘레의 모양과 크기를 변경하여 요소 자체를 식별 가능한 상태로 유지하면서 유용성의 변화를 알립니다. 이러한 이유로 사진 및 일러스트레이션과 같은 디테일한 영상이 이상적인 후보입니다.

사용성 관점에서 디자이너는 마스킹을 구현하여 사용자에게 일련의 상호 작용을 진행하고 있음을 보여줄 수 있습니다.

7. 오버레이

2D 공간에는 깊이가 없으며 UI 요소는 X 또는 Y 축을 따라서만 이동할 수 있습니다. 오버레이는 UI의 2D 공간에서 전경/배경 구분의 환상을 만듭니다. 오버레이를 통해 깊이를 시뮬레이션하여 사용자 요구에 따라 요소를 숨기고 표시할 수 있습니다.

정보 계층은 오버레이를 사용할 때 중요한 고려 사항입니다. 예를 들어, 사용자가 메모 작성 앱에서 가장 먼저 확인해야 하는 것은 메모 목록입니다. 그런 다음 오버레이를 사용하여 삭제 또는 보관 과 같은 각 메시지에 대한 보조 옵션을 표시할 수 있습니다.

8. 클로닝

복제는 하나의 UI 요소가 다른 요소로 분할되는 모션 동작입니다. 중요한 정보나 상호 작용 옵션을 강조 표시하는 영리한 방법입니다.

UI 요소가 인터페이스 내에서 구체화되면 이미 화면에 있는 요소에 연결되는 명확한 출처가 필요합니다. 요소가 갑자기 터지거나 사라지면 사용자는 자신감 있는 상호 작용에 필요한 컨텍스트가 부족합니다.

9. 모호함

젖빛 유리 문을 상상해보십시오. 열려면 상호 작용이 필요하지만 반대편에서 무엇이 기다리고 있는지 (어느 정도) 식별할 수 있습니다.

Obscuration은 같은 방식으로 작동합니다. 사용자에게 상호 작용을 요구하는 인터페이스를 제공하는 동시에 따라야 할 화면의 힌트를 표시합니다. 탐색 메뉴, 암호 화면 및 폴더/파일 창은 일반적인 예입니다.

10. 시차

두 개(또는 그 이상)의 UI 요소가 동시에 다른 속도로 이동할 때 시차가 표시됩니다. 여기서도 의도는 계층 구조를 설정하는 것입니다.

• 대화형 요소가 더 빠르게 이동하고 전경에 나타납니다.
• 비대화형 요소는 느리게 이동하고 배경으로 물러납니다.

Parallax는 대화형 UI 요소로 사용자를 유도하는 동시에 비대화형 요소를 화면에 유지하고 디자인 통일성을 유지하도록 합니다.

11. 차원

차원은 실제 세계의 객체와 마찬가지로 UI 요소에 여러 상호 작용 측면이 있는 것처럼 보이게 합니다. 요소가 접힐 수 있거나, 뒤집을 수 있거나, 떠 있거나, 사실적인 깊이 속성이 부여된 것처럼 보이도록 하여 동작을 수행합니다.

내러티브 장치로서 차원은 UI 요소의 다른 측면이 연결되고 원활한 화면 전환을 만드는 것을 의미합니다.

12. 돌리와 줌

돌리 및 확대/축소를 통해 사용자는 UI 요소를 공간적으로 "이동"하거나 크기를 늘려 더 높은 수준의 세부 정보를 표시할 수 있습니다.

• 돌리: 돌리는 사용자의 관점이 UI 요소에 가까워지거나 멀어질 때 발생합니다. 카메라를 들고 가까이 다가가 사진을 찍기 위해 꽃 쪽으로 걸어가는 사람을 상상해 보십시오.
• 확대/축소: 확대/축소 를 사용하면 사용자의 관점과 UI 요소가 고정된 상태로 유지되지만 요소의 크기는 사용자 화면 내에서 증가(또는 감소)합니다. 이제 그 사람이 가만히 서서 카메라의 줌 기능을 사용하여 꽃을 더 크게 보이게 한다고 상상해 보십시오.

모션은 커뮤니케이션입니다

인터랙티브한 경험은 모든 경쾌하고 미묘한 형태의 움직임을 요구합니다. 모션 디자인의 원칙이 지켜지면 가장 기본적인 UI 요소도 정교한 인간 커뮤니케이션의 주체가 됩니다. 원칙을 무시하면 움직임은 자연계에서 볼 수 없는 특성을 구현합니다. 아무리 미학적인 화려함도 그 결과로 생기는 서투름을 극복할 수 없습니다.

모션 디자인과 디지털 제품의 UX의 관계는 빠르게 성숙해지고 있습니다. 모션에 대한 원칙적인 접근 방식은 트렌드, 도구 및 기술의 일시적인 유용성에 대한 과도한 의존을 방지합니다. 더 나은 점은 2D 화면에서 요소의 추상적인 움직임과 3D 세계에서 움직임에 대한 인식 사이의 구분에 걸쳐 있다는 것입니다.

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

• • •

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

• 포스트 플래시 시대의 웹 애니메이션
• Designer's Edge – Photoshop 플러그인 개요
• 2019년 UX 디자인 트렌드 회고전
• 익숙해지기 – 사용자 온보딩 흐름 가이드
• 모바일 UX 디자인 원칙