모션으로 유용성 만들기 : 모션 선언에서 UX

출처 : https://medium.com/ux-in-motion/creating-usability-with-motion-the-ux-in-motion-manifesto-a87a4584ddc

Creating Usability with Motion: The UX in Motion Manifesto

 

다음 선언문은“UX 또는 UI 디자이너로서 유용성을 지원하기 위해 언제 어디서 모션을 구현해야하는지 어떻게 알 수 있습니까?”라는 질문에 대한 나의 답변을 나타냅니다.

지난 5 년 동안, 저는 40 개국 이상에서 UX 및 UI 디자이너를지도하고 멘토링하고 UI 애니메이션에 대한 워크샵과 자습서를 통해 수백 가지의 최고 브랜드 및 디자인 컨설턴트를 맡았습니다.

15 년 동안 사용자 인터페이스에서 모션을 연구 한 후 모션을 사용하여 UX 프로젝트에서 유용성을 지원할 수있는 12 가지 특정 기회가 있다는 결론에 도달했습니다.

나는 이러한 기회를 '모션의 UX의 12 원칙'이라고 부릅니다. 그리고 그것들은 수많은 혁신적인 방식으로 시너지 적으로 쌓이고 결합 될 수 있습니다.

선언문을 5 개 부분으로 나누었습니다.

 

• UI 애니메이션의 주제를 다루기

 

 

• 실시간 대 비 실시간 상호 작용

 

 

• 모션이 유용성을 지원하는 4 가지 방법

 

 

• 원리, 기법, 특성 및 가치

 

 

• UX in Motion의 12 가지 원칙

 

빠른 플러그 인으로 팀을위한 모션 및 사용성 워크샵을 이끌도록 관심이 있으시면 여기를 클릭하여 자세한 정보를 확인하십시오. https://uxinmotion.net/creating-usability-with-motion-workshop/

 

UI 애니메이션에 관한 것이 아닙니다

사용자 인터페이스의 모션 주제는 대부분 디자이너가 이해하지 못하는 'UI 애니메이션'으로 이해되기 때문에 12 가지 원칙으로 넘어 가기 전에 약간의 컨텍스트를 만들어야한다고 생각합니다.

'UI 애니메이션'은 일반적으로 디자이너가 사용자를보다 즐겁게 해주지 만 전반적으로 많은 가치를 부여하지 않는 것으로 생각합니다. 따라서 UI 애니메이션은 종종 UX의 빨간 머리 의붓 자식으로 취급됩니다 (모든 곳에서 빨간 머리 의붓 자식에게 사과). 결국, 그것은 마지막 립스틱 패스로 보통 끝납니다.

또한, 사용자 인터페이스의 맥락에서 운동이 당연 애니메이션 디즈니의 12 개 원칙의 도메인 아래로 개최되었습니다, 뭔가 내 문서에 대해 논쟁 ' UI 애니메이션 원리 - 디즈니가 죽은 것입니다 .'

필자는 선언문에서 건축이 건축에 관한 것이므로 UI ​​애니메이션이 '12 UX in Motion Principles '에 해당하는 사례를 만들 것입니다.

이 말은 구조물이 물리적으로 존재해야한다고 주장하지만 (건축 필요), 무엇이 만들어 질지 를 결정하는 지침 은 원칙의 영역에서 나옵니다.

애니메이션은 도구에 관한 것입니다. 원칙은 도구 사용을 안내하는 아이디어를 실제로 적용하는 것이므로 원칙은 설계자에게 높은 활용 기회를 제공합니다.

대부분의 설계자들이 'UI 애니메이션'이라고 생각하는 것은 사실 더 높은 양식의 디자인, 즉 실시간 이벤트와 비 실시간 이벤트 중 인터페이스 객체의 시간적 행동을 실행하는 것입니다.

---

실시간 대 비 실시간 상호 작용

이 시점에서 '상태'와 '행위'를 구분하는 것이 중요합니다. UX 의 상태 는 디자인 구성 요소와 같이 기본적으로 정적입니다. UX에서 무언가 의 행동 은 근본적으로 시간적이며 모션 기반입니다. 객체가 될 수있는 상태로 마스크되는 또는이 될 수있는 행위 마스킹 될. 후자 인 경우 모션이 사용되며 유용성을 지원할 수있는 방식으로 작동합니다.

또한 상호 작용의 모든 일시적인 측면은 실시간 또는 비 실시간으로 발생하는 것으로 생각할 수 있습니다. 실시간은 사용자가 사용자 인터페이스의 개체와 직접 상호 작용하고 있음을 의미합니다. 비 실시간은 오브젝트 동작이 사후 대화식임을 의미합니다. 이는 사용자 조치 후에 발생 하며 과도기입니다.

이것은 중요한 차이점입니다.

실시간 상호 작용 또한 인터페이스가 직접 객체와 사용자가 상호 작용하는 점에서 '직접 조작'으로 간주 할 수 있습니다 즉시 . 사용자가 인터페이스를 사용하면서 인터페이스의 동작이 발생 합니다.

비 실시간 상호 작용 은 사용자의 입력 후에 만 발생 하며 전환이 완료 될 때까지 사용자 경험에서 사용자를 잠깐 잠그는 효과가 있습니다.

이러한 차이점은 UX in Motion의 12 가지 원칙의 세계로 여행을 계속할 때 활용 될 것입니다.

---

모션은 네 가지 방식으로 유용성을 지원합니다

이 네 가지 기둥은 사용자 경험의 시간적 행동이 유용성을 지원하는 네 가지 방법을 나타냅니다.

기대

기대는 두 가지 영역, 즉 사용자가 대상체 가 무엇인지 인식하는 방식과 동작 방식에 속합니다 . 이를 표현하는 또 다른 방법은 디자이너로서 사용자가 기대하는 것과 경험하는 것 사이의 간격을 최소화하려는 것입니다.

연속성

연속성은 사용자 흐름과 사용자 경험의 '일관성'모두를 말합니다. 연속성은 장면 내 연속성 (intra-continuity)과 전체 사용자 경험을 구성하는 일련의 장면 내 연속성 (inter-continuity)이라는 관점에서 생각할 수 있습니다.

이야기

내러티브는 사용자 환경에서 이벤트가 선형으로 진행되어 시간적 / 공간적 프레임 워크가됩니다. 이것은 사용자 경험 전체에서 서로 연결된 일련의 신중한 순간과 이벤트로 생각할 수 있습니다.

관계

관계는 사용자의 이해와 의사 결정을 안내하는 인터페이스 객체 간의 공간적, 시간적 및 계층 적 표현을 나타냅니다.

---

원칙, 기법, 속성 및 값

타일러 웨이 (Tyler Waye) 는 다음과 같이 썼습니다.“원칙… 기본 원리와 기능 규칙은 수많은 기술을 발생시킵니다. 이러한 요소는 어떤 일이 있어도 일관되게 유지됩니다. 원칙이 설계에 무관심하다는 것을 반복한다.

여기에서 원리는 맨 위에, 기술은 아래로, 그 아래에는 속성, 그리고 아래에는 값이있는 계층 구조를 상상할 수 있습니다.

기법 은 다양하고 무제한으로 실행되는 원칙 및 / 또는 원칙의 조합으로 생각할 수 있습니다. 나는 '스타일'과 비슷한 기술을 생각합니다.

속성 은 기술을 생성하기 위해 애니메이션되는 특정 객체 매개 변수입니다. 여기에는 위치, 불투명도, 배율, 회전, 기준점, 색상, 획 너비, 모양 등이 포함됩니다 (이에 국한되지 않음).

값 은 '애니메이션'이라고 부르는 것을 만들기 위해 시간이 지남에 따라 변하는 실제 숫자 속성 값입니다.

따라서 비행기를 여기에 착륙시키기 위해 (그리고 약간 뛰어 넘기 위해), 가상 UI 애니메이션 참조는 25px 및 70 %의 값으로 흐림 및 불투명도 속성에 영향을주는 '흐리게 된 유리'기술을 사용하여 방해 원리를 사용한다고 말할 수 있습니다 각기.

이제 몇 가지 도구를 사용할 수 있습니다. 더 중요한 것은 이러한 언어 도구는 특정 프로토 타이핑 도구와 무관합니다.

---

UX in Motion의 12 가지 원칙

완화 및 오프셋 및 지연은 타이밍 과 관련이 있습니다. 육아는 개체 관계와 관련이 있습니다. 변형, 값 변경, 마스킹, 오버레이 및 복제는 모두 객체 연속성 과 관련이 있습니다. 시차는 시간 계층 과 관련이 있습니다. 불명확성, 차원 성 및 Dolly & Zoom 모두 공간 연속성 과 관련이 있습니다.

원칙 1 : 완화

일시적인 이벤트가 발생하면 개체 동작이 사용자의 기대치와 일치합니다.

시간적 행동 (실시간이든 비 실시간이든)을 나타내는 모든 인터페이스 객체가 용이합니다. 손쉬운 사용자 경험의 매끄러움에 내재 된 '자연주의'를 만들고 강화하며, 사용자가 기대하는대로 객체가 동작 할 때 연속성을 만듭니다 . 덧붙여서 , Disney는 이것을 ' Slow In and Slow Out '이라고 부릅니다 .

왼쪽의 예는 선형 모션이며 '나쁜'것처럼 보입니다. 첫 번째 예제는 동작 을 완화 하고 '좋아 보입니다'. 위의 세 가지 예는 모두 정확한 프레임 수를 가지며 정확히 동일한 시간 동안 발생합니다. 유일한 차이점은 완화에 있습니다.

사용성에 관심이있는 설계자로서, 미학을 제외하고는 엄격 성을 요구하고, 더 유용성을 지원하는 예는 무엇입니까?

제가 여기서 제시 한 사례는 어느 정도의 골격 형성이 완화에 내재되어 있다는 것입니다. 사용자의 기대치를 벗어난 행동으로 인해 사용이 적은 상호 작용이 발생하는 '완벽한 기울기'를 상상할 수 있습니다. 적절하게 완화 된 모션의 경우, 사용자는 모션 자체가 매끄럽고 크게 보이지 않는 것으로 경험합니다. 이는 방해 가 되지 않는 좋은 점입니다 . 직선 운동은 눈에 띄게 명백하며 어쨌든 떨어져 있고, 끝나지 않았으며, 찌그러지고 산만 해집니다.

이제 저는 여기에 완전히 모순되고 오른쪽에있는 예에 대해 이야기하겠습니다. 움직임 이 원활 하지 않습니다 . 실제로, 그것은 '디자인 된'느낌을 가지고 있습니다. 우리는 물체가 어떻게 착륙하는지 주목합니다. 느낌이 다르지만 선형 모션의 예보다 여전히 '정확한'느낌입니다.

여유를 사용하면서도 사용성을 지원하지 않거나 더 악화시킬 수 있습니까? 대답은 '예'이며 여러 가지 방법이 있습니다. 한 가지 방법은 타이밍입니다. 타이밍이 너무 느리거나 ( Pasquele 에서 빌려야하는 ) 너무 빠르면 기대를 깨뜨리고 사용자의주의를 산만하게 할 수 있습니다. 마찬가지로, 완화가 브랜드 또는 전체 경험과 일치하지 않으면 이는 기대와 매끄러움에도 부정적인 영향을 줄 수 있습니다.

내가 당신을 열어보고 싶은 것은 그것이 쉬운 움직임에 관한 기회의 세계입니다. 말 그대로 디자이너로서 프로젝트에서 만들고 구현할 수있는 무한한 수의 '여유'가 있습니다. 이러한 모든 여유 요소에는 사용자에게 트리거되는 자체 예상 응답이 있습니다.

요약 : 여유를 언제 사용해야합니까? 항상.

내 기사 ' 사용성 및 직선 운동의 아이러니 '에서 저의 가설에 대해 더 자세히 배울 수 있습니다 .

원칙 2 : 오프셋 및 지연

새로운 요소와 장면을 도입 할 때 객체 관계와 계층을 정의합니다.

Offset & Delay는 Disney의 애니메이션 원칙에 영향을받는 모션 원칙의 두 가지 UX 중 두 번째입니다 (이 경우에는 ' 관통 조치 및 겹치기 동작 ').

그러나 구현 방식은 실행 방식과 유사하지만 목적과 결과가 다릅니다. 디즈니의 원칙은 '더 매력적인 애니메이션'을 초래하지만 UI 애니메이션 원칙은보다 유용한 경험을 제공합니다.

이 원칙의 유용성은 사용자가 인터페이스에서 객체의 특성에 대해 무언가를 '알려서'사용자를 사전에 성공하도록 설정하는 것입니다. 위의 언급에서 이야기는 상위 두 객체가 통합되고 하단 객체가 분리된다는 것입니다. 맨 위 두 개의 객체는 대화 형이 아닌 이미지와 텍스트 일 ​​수 있으며 맨 아래의 객체는 버튼입니다.

심지어 이러한 개체가 어떤 사용자 등록하기 전에 ,있는 디자이너가 이미에게 전달했다 모션 그녀의 스루 - '. 별도의'객체가 어떻게 든 것을 이것은 매우 강력합니다.

크레딧 : InVision

위의 예에서 FAB (Floating Action Button)은 3 개의 버튼으로 구성된 헤더 탐색 요소로 변환됩니다. 버튼은 일시적으로 서로 '오프셋'되어 있기 때문에 '분리'를 통해 사용성을 지원하게됩니다. 다르게 말하면, 디자이너는 시간 자체를 사용하여 사용자가 객체를 등록하기 전에도 객체가 분리되어 있다고 말합니다. 이는 인터페이스에서 객체의 특성의 일부인 시각적 디자인과 완전히 독립적 인 사용자에게 알리는 효과가 있습니다.

이것이 어떻게 작동하는지 더 잘 보여주기 위해 Offset & Delay Principle을 깨는 예제를 보여 드리겠습니다.

크레딧 : Jordi Verdu

위의 예에서 정적 시각적 디자인은 배경 위에 아이콘이 있음을 알려줍니다. 아이콘은 모두 서로 분리되어 있고 다른 일을하는 것으로 추정됩니다. 그러나 운동은 이것과 모순된다.

일시적으로 아이콘은 행으로 그룹화되어 단일 객체처럼 동작합니다. 제목도 마찬가지로 행으로 그룹화되며 단일 개체처럼 동작합니다. 모션은 사용자에게 눈 이외의 것을 말하고 있습니다. 이 경우 인터페이스에서 객체의 시간적 동작이 유용성을 지원하지 않는다고 말할 수 있습니다.

SCRIPT

https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

원칙 3 : 육아

여러 객체와 상호 작용할 때 공간적 및 시간적 계층 관계를 만듭니다.

육아는 사용자 인터페이스에서 개체를 '관련시키는'강력한 원칙입니다. 위의 예에서 상단 또는 '자식'개체의 'scale'및 'position'속성은 하단 또는 'parent'개체의 'position'속성에 대해 부모입니다.

육아는 개체 속성을 다른 개체 속성에 연결하는 것입니다. 이것은 유용성을 지원하는 방식으로 객체 관계와 계층을 만듭니다.

육아는 또한 디자이너가 사용자 인터페이스에서 시간적 이벤트를보다 잘 조율하면서 개체 관계의 본질을 사용자에게 전달할 수 있도록합니다.

개체 속성에는 스케일, 불투명도, 위치, 회전, 모양, 색상, 값 등이 포함됩니다. 이러한 속성을 다른 속성에 연결하여 사용자 경험에서 시너지 효과를주는 순간을 만들 수 있습니다.

크레딧 : Andrew J Lee , Frank Rapacciuolo

위의 왼쪽 예에서 'face'요소의 'y-axis'속성은 원형 표시기 부모의 'x-axis'속성에 대한 'child'입니다. 원형 표시기 요소가 가로 축을 따라 이동하면 '자식'요소가 가로 및 세로 로 함께 이동합니다 (마스킹 된 상태에서 다른 원리).

결과는 동시에 동시에 발생하는 계층 적 시간적 서사 프레임 워크입니다. 'faces'객체는 각 숫자에서 'face'가 완전히 표시되고 부분적으로 표시되지 않는 일련의 '잠금'으로 작동합니다. 이 예제에서는 미묘한 '사용성 치트'가 있다고 주장 할 수 있지만 사용자는이를 완벽하게 경험할 수 있습니다.

육아는 '실시간'상호 작용으로 가장 잘 작동합니다. 사용자가 인터페이스 객체를 직접 조작함에 따라 디자이너는 모션을 통해 객체가 연결되는 방법 및 객체 간의 관계를 통해 사용자와 통신합니다.

육아는 '직접 육아'의 3 가지 형태로 발생합니다 (위의 두 가지 예인 '지연 육아'및 '역 육아'참조).

지연된 육아 (Credit : AgenceMe ) 및 역 육아 (Credit : AgenceMe )

원칙 4 : 변환

객체 유틸리티가 변경 될 때 이야기 흐름의 연속 상태를 만듭니다.

모션 원칙 '변형'에서 UX에 대해 이미 많은 글을 썼습니다. 어떤면에서, 그것은 애니메이션 원리 중 가장 명백하고 관통 가능한 것입니다.

변형은 눈에 띄기 때문에 가장 식별하기 쉽습니다. 방사형 진행률 표시 줄이되도록 모양을 변경하고 확인 확인 표시가되도록 모양을 다시 변경하는 '제출'버튼은 우리가 알아 차린 것입니다. 그것은 우리의 관심을 사로 잡고 이야기를하며 완성을 이룹니다.

크레딧 : Colin Garven

무엇 변환하는 일은 완벽하다 다른 UX 상태를 통해 사용자를 전환하거나 (이에로 '의이다' 입니다 버튼, 이것은 이다 반경 진행률 표시 줄이는 것입니다 결국 원하는 결과를 초래 확인 표시가). 사용자는 이러한 기능 공간을 통해 최종 목적지로 연결되었습니다.

변형은 사용자 경험의 핵심 순간을인지 적으로 '청킹'하여 원활하고 연속적인 일련의 이벤트로 분리하는 효과가 있습니다. 이 매끄러움으로 인해 사용자 인식, 유지 및 추적이 향상됩니다.

원칙 5 : 가치 변화

가치 주제가 변경 될 때 역동적이고 연속적인 이야기 관계를 만듭니다.

텍스트 기반 인터페이스 객체, 즉 숫자와 텍스트는 값을 변경할 수 있습니다. 이것은 그 '명백한 명백한'개념 중 하나입니다.

텍스트와 숫자 변경은 매우 일반적이므로 사용성을 지원하는 그들의 역할을 평가하기 위해 구별과 엄격 성을 부여하지 않고 우리를 통과시킵니다.

따라서 값이 변경 될 때 사용자는 무엇을 경험합니까? 사용자 경험에서 12 가지 UX 모션 원칙은 사용성을 지원할 수있는 기회입니다. 여기서 세 가지 기회는 사용자를 데이터 뒤에 있는 현실 , 대행사 개념 및 가치 자체의 역동성에 연결하는 것입니다.

사용자 대시 보드의 예를 살펴 보겠습니다.

값 기반 인터페이스 개체가 '값 변경'없이로드 될 때 이것이 사용자에게 전달하는 것은 숫자가 정적 개체라는 것입니다. 그들은 55mph의 속도 제한을 표시하는 페인트 표지판과 같습니다.

숫자와 값은 실제로 일어나는 일을 나타냅니다 . 현실은 시간, 수입, 게임 점수, 비즈니스 지표, 체력 추적 등이 될 수 있습니다. 모션을 통해 우리가 구별하는 것은 '가치 주체'가 역동적이며 가치가 그 역동적 인 가치 설정에서 무언가를 반영한다는 것입니다.

시각적으로 가치로 구성된 정적 객체를 사용하면이 관계가 손실 될뿐만 아니라 더 깊은 기회도 사라집니다.

모션 기반 값의 형태로 동적 시스템의 표현을 사용하면 일종의 '신경 피드백'을 활성화합니다. 데이터의 동적 특성을 파악한 사용자는 이제 해당 값을 변경하여 에이전트 가 될 수 있습니다. 값이 정적 인 경우 값 뒤에있는 현실과의 연결이 줄어들고 사용자는 대행사를 잃게됩니다 .

크레딧 : Barthelemy Chalvet , Gal Shir , Unknown

가치 변경 원칙은 실시간 및 비 실시간 이벤트 모두에서 발생할 수 있습니다. 실시간 이벤트에서 사용자는 개체와 상호 작용하여 값을 변경합니다. 로더 및 전환과 같은 비 실시간 이벤트에서는 동적 설명을 반영하기 위해 사용자 입력없이 값이 변경됩니다.

원칙 6 : 마스킹

유틸리티가 오브젝트 또는 그룹의 어느 부분이 표시되거나 숨겨져 있는지 판별 될 때 인터페이스 오브젝트 또는 오브젝트 그룹에서 연속성을 작성합니다.

행위 마스킹 물어의이 물체의 모양과 그것의 유틸리티 사이의 관계로 생각 될 수있다.

정적 디자인의 맥락에서 디자이너는 '마스킹'에 익숙하기 때문에 시간이 지남 에 따라 행동이 아닌 상태 로 발생하는 모션 원칙 'Masking'에서 UX를 차별화해야합니다 .

물체의 영역을 드러내고 감추는 일시적인 사용을 통해 유틸리티는 연속적이고 매끄럽게 전환됩니다. 이것은 또한 이야기 ​​흐름을 보존하는 효과가 있습니다.

크레딧 : Anish Chandran

위의 예에서 헤더 이미지는 내용이 아니라 경계 모양과 위치를 변경하고 앨범이됩니다. 이 개체가 어떤 변화의 효과가 있다 상당히 깔끔한 트릭 - 마스크 내의 내용을 유지하면서 . 이는 사용자가 작업을 수행 한 후 활성화되는 전환이 아닌 비 실시간으로 발생합니다.

UI 애니메이션 원칙은 일시적으로 발생하며 연속성, 내러티브, 관계 및 기대를 통해 사용성을 지원합니다. 위의 참조에서 객체 자체는 변경되지 않은 채로 경계와 위치가 있으며이 두 요소가 객체의 정의를 결정합니다.

원칙 7 : 오버레이

계층화 된 객체가 위치에 의존 할 때 시각적 평지에서 서술 및 객체 공간 관계를 만듭니다.

오버레이는 사용자가 평평하지 않은 계층 구조를 극복하기 위해 평평한 순서 지정 속성을 사용할 수 있도록하여 사용성을 지원합니다.

평면을 약간 착륙시키기 위해 오버레이를 사용하면 설계자가 모션을 사용하여 3D 공간이 아닌 다른 공간의 앞이나 뒤에있는 위치 의존적 객체를 전달할 수 있습니다.

크레딧 : Bady , Javi Pérez

왼쪽의 예에서 전경 개체는 오른쪽으로 밀어 추가 배경 개체의 위치를 ​​나타냅니다. 오른쪽의 예에서 전체 장면은 아래로 슬라이드하여 추가 컨텐츠 및 옵션을 표시합니다 (오프셋 및 지연 원리를 사용하여 사진 개체의 개별성을 전달).

어느 정도 디자이너로서 '레이어 (layers)'라는 개념은 자명 할 정도로 분명합니다. 우리는 레이어로 디자인하고 레이어의 개념은 깊이 내재화되어 있습니다. 그러나 우리는 '사용하는'구절을 구별하는 데주의를 기울여야합니다.

'만들기'과정에 지속적으로 참여하는 디자이너로서, 우리는 우리가 디자인하고있는 모든 오브제 (숨겨진 부분 포함)에 친숙합니다. 그러나, 사용자로서, 이러한 보이지 않는 부분은 정의 및 실습에 의해 시각적 및인지 적으로 숨겨져있다.

오버레이 원리를 통해 디자이너는 'z 축'위치 레이어 간의 관계를 전달하고 그렇게함으로써 사용자에게 공간적 방향을 홍보 할 수 있습니다.

원칙 8 : 복제

새 객체가 시작되고 출발 할 때 연속성, 관계 및 설명을 만듭니다.

현재 장면에서 (및 현재 오브젝트에서) 새 오브젝트를 만들 때는 모양을 설명 적으로 설명하는 것이 중요합니다. 이 선언문에서 나는 객체의 기원과 이탈을위한 서술 적 프레임 워크를 만드는 것이 중요하다고 강력하게 주장한다. 단순한 불투명도 페이드는이 결과를 얻지 못하는 경향이 있습니다. 마스킹, 복제 및 차원은 강력한 내러티브를 생성하기위한 3 가지 유용성 기반 접근 방식입니다.

크레딧 : Jakub Antalík , Jakub Antalík , 알 수 없음

위의 세 가지 예에서, 사용자의 관심이 해당 객체에 집중되는 동안 기존의 영웅 객체로부터 새로운 객체가 생성됩니다. 이 두 가지 접근 방식 (주의의 지시와 복제 된 새로운 객체의 생성을 통해 눈을 인도하는 것)은 명확하고 모호하지 않은 일련의 사건을 전달하는 강력한 효과를 갖습니다. 'x'조치는 'y' 새로운 자식 객체의 생성

원칙 9 : 모호

기본 시각적 계층 구조가 아닌 객체 또는 장면과 관련하여 사용자가 공간적으로 방향을 지정할 수 있습니다.

마스킹의 모션 원리에서 UX와 유사하게, Obscuration은 정적 및 시간적 현상으로 작동합니다.

이것은 일시적으로 생각하는 경험이없는 디자이너, 즉 순간 사이의 순간에 혼란을 줄 수 있습니다 . 디자이너는 일반적으로 화면 대 화면 또는 작업 대 작업을 디자인합니다. 모호함을 모호한 상태 가 아니라 모호한 행위 로 생각하십시오 . 정적 디자인은 가려진 상태를 나타냅니다. 시간을 소개 하면 물체가 가려지는 행동 이 생깁니다.

크레딧 : Virgil Pana , Apple

위의 두 가지 예에서 투명한 객체 나 오버레이 처럼 보이는 모호함 도 시간에 따라 여러 속성을 포함하는 일시적인 상호 작용 임을 알 수 있습니다 .

이에 대한 다양한 일반적인 기술에는 흐림 효과 및 전체 객체 투명도 학습이 포함됩니다. 사용자는 자신이 운영하고있는 추가 비 기본 컨텍스트를 알고 있습니다. 기본 객체 계층 구조 뒤에 '다른 세계'가 있다는 것입니다.

설계자는 불명확성을 통해 사용자 경험에서 단일 통합 시야 또는 '객관적 시야'를 보상 할 수 있습니다.

원칙 10 : 시차

사용자가 스크롤 할 때 시각적 평평한 공간에 공간 계층을 만듭니다.

Motion Principle의 UX 인 'Parallax'는 서로 다른 속도로 움직이는 다양한 인터페이스 객체를 설명합니다.

시차를 통해 사용자는 설계 무결성을 유지하면서 기본 작업 및 컨텐츠에 집중할 수 있습니다. 배경 요소는 시차 이벤트 동안 사용자를 위해 지각 적으로 그리고인지 적으로 '수신'합니다. 디자이너는 Parallax를 사용하여 즉시 컨텐츠와 주변 컨텐츠 또는 지원 컨텐츠를 분리 할 수 ​​있습니다.

크레딧 : Austin Neill , Michael Sevilla

이것이 사용자에게 미치는 영향 은 상호 작용 기간 동안 다양한 객체 관계 를 명확하게 정의하는 것 입니다 . 전경 객체 또는 'Quicker'를 이동하는 객체는 사용자에게 '가까운'것으로 나타납니다. 마찬가지로, 배경 개체 나 '느리게'움직이는 개체는 '더 멀어짐'으로 인식됩니다.

디자이너는 시간 자체를 사용하여 이러한 관계를 만들어 인터페이스의 어떤 개체가 우선 순위가 높은지 사용자에게 알릴 수 있습니다. 따라서 배경 또는 비대화 형 요소를 더 '뒤로'밀어내는 것이 합리적입니다.

사용자는 인터페이스 디자인을 시각적 디자인에서 결정된 것 이상의 계층 구조를 갖는 것으로 인식 할뿐만 아니라,이 계층 구조 를 사용하여 디자인 / 디자인을 의식적으로 인식하기 전에 사용자 경험 의 본질 을 파악할 수 있습니다 . 함유량.

원칙 11 : 차원

새 객체가 시작되고 출발 할 때 공간 설명 프레임 워크를 제공합니다.

사용자 경험에 중요한 것은 위치 감뿐만 아니라 연속성 현상입니다.

차원은 평범하지 않은 평범한 사용자 경험을 극복 할 수있는 강력한 방법을 제공합니다.

인간은 현실과 디지털 경험 모두에서 탐색하기 위해 공간 프레임 워크를 사용하는 데 상당히 능숙합니다. 공간 원점 및 이탈 참조를 제공하면 사용자가 UX에있는 위치의 정신 모델을 강화하는 데 도움이됩니다.

또한, 차원 원리 (Dimensionality Principle)는 시각적 평평한 지역에서 깊이가 부족한 물체는 같은 평면에 존재하지만 다른 물체의 '앞'또는 '뒤'와 같이 발생하는 계층 적 역설을 극복합니다.

차원은 종이 접기 차원, 부동 차원 및 개체 차원의 세 가지 방식으로 나타납니다.

종이 접기 차원 은 3 차원 인터페이스 객체를 '폴딩'또는 '힌지'로 볼 수 있습니다.

종이 접기 차원의 예 (크레딧 : Eddie Lobanovskiy , Virgil Pana )

여러 개체가 '종이 접기'구조로 결합되어 있기 때문에 숨겨진 개체는 보이지 않지만 공간적으로 여전히 존재한다고 말할 수 있습니다. 이는 사용자 경험을 사용자가 상호 작용 모델 자체와 인터페이스 객체 자체의 시간적 행동 모두에서 탐색하고 운영 컨텍스트를 생성하는 연속적인 공간 이벤트로 효과적으로 렌더링합니다.

Floating Dimensionality 는 인터페이스 객체에 공간 원점과 이탈을 제공하여 상호 작용 모델을 직관적이고 서술 적으로 만듭니다.

부동 차원의 예 (크레딧 : Virgil Pana )

위의 예에서 차원은 3D '카드'를 사용하여 달성됩니다. 이것은 시각적 디자인을 지원하는 강력한 내러티브 프레임 워크를 제공합니다. 내러티브는 추가 콘텐츠 및 상호 작용에 액세스하기 위해 카드를 '충돌'함으로써 확장됩니다. 차원은 갑작스러운 발생을 최소화하는 방식으로 새로운 요소를 도입하는 강력한 방법이 될 수 있습니다.

객체 치수 는 깊이와 형태가 실제 인 치수 객체를 생성합니다.

객체 차원의 예 (크레딧 : Issara Willenskomer , Creativedash )

여기서, 3 차원 공간에 다수의 2D 층이 배치되어 실제 치수 객체를 형성한다. 그들의 차원은 실시간 및 비 실시간 전환 순간에 드러납니다. 객체 차원의 유틸리티는 사용자가 보이지 않는 공간 위치를 기반으로 객체 유틸리티에 대한 예리한 인식을 개발한다는 것입니다.

---

원칙 12 : 돌리 & 줌

인터페이스 객체와 공간을 탐색 할 때 연속성과 공간 설명을 유지합니다.

돌리와 줌은 카메라와 관련된 물체의 움직임과 프레임에서 이미지 자체의 크기가 장거리 샷에서 클로즈업 샷으로 (또는 그 반대로) 매끄럽게 바뀌는 영화 개념입니다.

특정 상황에서, 물체가 줌하고 있는지, 물체가 3D 공간에서 카메라쪽으로 움직이고 있는지 또는 카메라가 3D 공간에서 물체쪽으로 움직이고 있는지를 구별하는 것은 불가능합니다 (아래 참조 참조). 아래 세 가지 예는 가능한 시나리오를 보여줍니다.

레이어가 돌리거나 확대되거나 카메라가 움직이고 있습니까?

따라서 '돌고'와 '확대'인스턴스는 연속적인 요소와 경치 좋은 변형을 포함하고 모션 원칙에서 UX의 요구 사항을 충족한다는 점에서 별개이지만 유사하게 취급하는 것이 적절합니다. 모션을 통한 사용성을 지원합니다.

왼쪽의 두 이미지는 돌리고 오른쪽의 이미지는 확대 / 축소됩니다

돌리는 영화 용어이며 피사체를 향하거나 멀리하는 카메라 움직임에 적용됩니다 (수평 '추적'움직임에도 적용되지만 사용 환경에서는 관련성이 적습니다).

크레딧 : Apple

공간적으로 UX에서이 동작은 뷰어의 시점 변경 또는 객체가 위치를 변경하는 동안 정적 상태로 유지되는 시점을 나타냅니다. Dolly Principle은 연속성과 설명을 통해 인터페이스 개체와 대상간에 원활하게 전환하여 사용성을 지원합니다. Dolly는 Dimensionity Principle을 통합하여보다 공간적인 경험과 깊이를 제공하고 현재보기의 '앞'또는 '뒤'에있는 추가 영역이나 컨텐츠를 사용자에게 전달할 수 있습니다.

확대 / 축소 는 원근감이나 객체가 공간적으로 움직이지 않고 오히려 객체 자체의 크기가 조절되는 (또는 객체의 시야가 줄어들어 이미지가 확대되는) 이벤트를 나타냅니다. 이것은 추가 인터페이스 객체가 다른 객체 또는 장면의 '내부'라는 것을 뷰어에게 전달합니다.

크레딧 : Apple

이를 통해 유용성을 지원하는 실시간 및 비 실시간의 완벽한 전환이 가능합니다. Dolly & Zoom 원리에 채택 된이 매끄러움은 공간적 정신 모델을 만들 때 매우 강력합니다.

---

당신이 이것을 지금까지 만들었다면 축하합니다! 그것은 선언문의 짐승이었습니다. 모든 GIF 가로 드되어 브라우저를 죽이지 않기를 바랍니다. 또한 본인과 새로운 도구에 대한 가치를 얻고 대화 형 프로젝트에 활용할 수 있기를 바랍니다.

유용성을 지원하기 위해 모션을 디자인 도구로 사용하기 시작하는 방법에 대해 자세히 알아볼 것을 권장합니다.

최종 플러그 — 팀을위한 모션 및 사용성 워크샵을 이끌게하려면 여기를 클릭하여 자세한 정보를 확인하십시오. https://uxinmotion.net/creating-usability-with-motion-workshop/

 

Amazon 의 Kateryna Sitner에 대한 관대하고 환자의 기여와 지속적인 피드백 없이는이 선언이 불가능했을 것입니다. 감사합니다! 특별 감사 알렉스 장 나는 비행기를 착륙 그의 브레인 스토밍과 주장에 대한, 브라이언 Mamaril 그의 독수리 눈 마이크로 소프트, Jeremey 핸슨 그의 편집 노트에 대한 에릭 브라프 에서 롭 Girling 그가 제정신 UI 운동 전문가, 인을위한 인공물 에 대한 자신의 모든 년 전에 나에 대한 믿음, 매트 실버는 애프터 이펙트 회의에서 UI 운동에 대한 자신의 영감 이야기를 들어 브래들리 Munkowitz는 멋진 룸메이트 인 저를 얻기를위한 UI에서 영감 파스 콸레 D' 실바운동에 대한 그의 놀라운 기사, 레베카 Ussai 헨더슨 UI 안무, 그녀의 멋진 기사에 대한 아드리안 Zumbrunnen UI와 운동의 주제에 자신의 멋진 기여 웨인 그린 필드 와 기독교 Brodin 내 배후 형제 인 항상 저를 최대 수준으로 밀어, 그리고 영감을주는 GIF를 계속 찾아내는 수천 명의 UI 애니메이터.