모션 사용성 만들기 : UX에서의 모션 선언

익스랩 최고 관리자

·

2019. 11. 1. 02:00

반응형

소개


다음 선언문은 "UX 또는 UI 디자이너로서 유용성을 지원하기 위해서 언제 어디서 모션을 구현해야하는지 어떻게 알 수 있을까요?"라는 질문에 대한 답변을 나타냅니다. 지난 5년 동안 40 개 국 이상에서 UX, UI 디자이너를 지도하고 멘토링 하고 UI 애니메이션에 대한 워크샵과 자습서를 통해 수백 가지의 최고 브랜드 및 디자인 컨설턴트를 맡았습니다. (해당 내용은 글쓴이의 내용)

 

15년 동안 사용자 인터페이스에서 모션을 연구 한 후 모션을 사용하여 UX 프로젝트에서 유용성 향상을 위한 12 가지의 방법이 있다는 결론에 도달했습니다. 이러한 기회를 "모션 UX의 12가지 원칙" 이라고 하며 수 많은 혁신적인 방식으로 시너지 효과를 발휘 할 수 있습니다. 선언문을 5개 부분으로 나누었습니다. UI 애니메이션의 주제를 다룰 것 입니다.

 

실시간 대비 실시간 상호작용 모션이 유용성을 향상시키는 4가지 방법은 다음과 같습니다. 원리, 기법, 특성 및 가치이며 Ux in Motion의 12가지 원칙입니다. 빠른 연결로 팀을 위한 모션 및 사용성 워크샵을 이끌게 하려면 해당 링크를 클릭해서 자세한 정보를 확인하세요.

 

Motion and Usability Onsite Workshop

Acquire immediately applicable customer centric team based skills for ideating, analyzing and delivering motion and usability concepts for your products. ★★★★★ "I will never think about motion and UX the same." – Alex Chang, Senior UX Designer, Amazon, Sea

uxinmotion.net

 

 

UX 모션은 UI 애니메이션이 아닙니다. (It’s not about UI Animation)


사용자 인터페이스의 모션 주제는 대부분 디자이너가 이해하지 못하는 'UI 애니메이션'으로 이해되기 때문에 12가지 원칙으로 넘어 가기 전에 약간의 이해도가 필요합니다.

다수의 'UI 애니메이션'은 일반적으로 디자이너가 사용자를 보다 즐겁게 만들지만 전반적으로 가치를 높이지는 않다고 생각합니다.

또한, 사용자 인터페이스의 맥락에서 모션은 Disney의 12가지 애니메이션 원칙에 기반 되었습니다.

 

해당 글에서는 UI 애니메이션이 '12 UX in Motion Principles'에 해당하는 사례를 이야기하겠습니다.

이것은 구조가 물리적으로 존재해야한다는 것을 의미하지만, 무엇이 만들어 지는지를 결정하는 지침은 원칙의 영역에서 나옵니다. 애니메이션은 도구에 관한 것입니다. 이러한 원칙은 실제로 아이디어를 실체화 시키는 설계자에 높은 활용도를 제공합니다. 대부분의 디자이너가 생각하는 'UI 애니메이션'은 사실 더 높은 디자인 방식을 의미합니다. 정적임과 동적임에서 발생하는 시간적 동작을 의미합니다.

 

 

 

실시간 대비 실시간 상호 작용 (Realtime vs non-realtime interactions)


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

 

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

 

01

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

실시간 상호 작용은 사용자가 직접 인터페이스 개체와 직접 상호 작용한다는 점에서 '직접 조작'이라고 생각할 수 있습니다. 사용자가 인터페이스를 사용하면서 인터페이스의 동작이 발생합니다.

비 실시간 상호작용은 사용자의 입력 후에 만 발생하며 전환이 완료될 때까지 UX에서 사용자를 잠깐 잠그는 효과가 있습니다. 이러한 차이점은 UX in Motion의 12 가지 원칙의 세계로 여행을 계속 할 때 활용 될 것입니다.

 

 

 

모션은 4가지 방식으로 유용성을 지원 (Motion supports usability in four ways)


아래 4가지는 사용자 경험(UX)의 시간적 행동이 유용성을 지원하는 4가지 방법을 나타냅니다.

 

기대(Expectation)

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

 

연속성(Continuity)

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

 

이야기(Narrative)

Narrative는 사용자 경험에서 시간 / 공간 프레임 워크를 생성하는 선형적인 진행입니다. 이것은 사용자 경험 전체에서 서로 연결된 일련의 신중한 순간과 이벤트로 생각할 수 있습니다.

 

관계(Relationship)

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

 

 

 

 

원칙, 기법, 속성 및 값(Principles, Techniques, Properties, and Values)


Tyler Waye는 다음과 같이 썼습니다. "원칙 기본 원리와 기능 규칙은 여러 기술을 일으킵니다. 이러한 요소는 어떤 일이 있어도 일관된 상태로 유지됩니다."

 

 

 

 


틀린 내용, 오타, 오역이 있을 경우 댓글로 알려주시면 감사하겠습니다.

질문도 올려주시면 아는 선에서 답변해드리겠습니다.


해당 내용물은 해외 포스팅을 번역한 것이며, 해당 내용의 저작권은 Issara Willenskomer님에게 있습니다.

 

Creating Usability with Motion: The UX in Motion Manifesto

The following manifesto represents my answer to the question — “As a UX or UI, designer, how do I know when and where to implement motion…

medium.com

 

 

반응형

💖 포스터에게 힘 보내기 💖

카카오뱅크
3333-25-9477515
치킨 좋아하는 포스터