[아티클 인사이트 #21] 디자인시스템에 모션 가이드 추가하는 방법

#1 오늘의 아티클

▼ 디자인시스템에 모션 가이드 추가하는 방법

디자인시스템에 모션 가이드 추가하는 방법 (brunch.co.kr)

디자인시스템에 모션 가이드 추가하는 방법

 

#2 아티클 정보 요약

❑ 모션의 중요성

1. 계층 요소를 이해하는데 도움
   -> 가상의 공간인 모바일에서는 움직임을 통해 전체 서비스의 구조를 이해하는데 도움을 준다
2. 중요한 데이터 or 핵심 UI요소를 강조하는데 도움
3. 사용자 행동에 대한 즉각적인 피드백과 현재 상태를 제공

        ※ UI모션은 긍정적인 사용자 경험을 만들어준다

❑ 디자인 모션 

• 100마디 말보다 한 번의 움직임으로 직관적으로 이해할 수 있게 도와주는 도구
• 모션 시스템에서 일관성을 유지하면 사용자에게 편안하고 예측 가능한 환경을 제공

❑ 디자인 모션 시스템 분류

• 생산성 모션
  • 미묘한 방식으로 효율성과 반응 능력을 향상하며 집중이 필요한 작업에 이상적
  • 산만함 없는 부드러운 사용자 경험을 보장
• 표현적 모션
  • 열정적이고 활기찬 움직임이 특징
  • 중요한 순간에 사용되어 시스템 경고 및 알림에 대한 의미와 주의를 집중

❑ 모션 디자인 시스템에서 접근성 고려

• 제어하기
  • 애니메이션으로 인해 불편함 / 산만함을 느낄 수 있는 사용자를 위해 모션을 비활성 / 조절하는 옵션
• 방해하지 않기
  • 모션 요소가 제품과 상호작용하는 것을 방해하지 않도록
  • 장식적인 요소가 아니라 사용성을 향상하는지 확인

❑ 결론

• 모션 디자인 시스템을 구축하는 것은 시간이 많이 걸리는 작업이지만 일관되고 명확한 사용자 경험을 만들기 위해 필수적이다.
• 제품 경험을 향상하고 사용성을 개선하며 전체적인 흐름을 더욱 즐겁게 만들 수 있는 모션 시스템을 만들 수 있다.

 

 

 

#3 인사이트

• UX는 정지된 화면이 아닌 동적인 화면에서 사용자와 제품 간의 사이에 상호작용을 의미한다는 것을 다시 한번 알게된 아티클이었다.
• 동적인 물체의 감정(모습)에 따라 사용자에게 어떠한 메시지를 줄 수 있다는 부분을 인지하고 레이아웃 뿐만 아니라 동적인 것도 잘 디자인을 해야겠다는 생각이 들었다.

 

<알게된 점>
💡 레이아웃 뿐만 아니라 모션감에서도 시스템 할 수 있다는 부분이 새로웠다

<좋았던 점>
💡 UX는 정지된 화면이 아닌 동적인 화면을 통해서 사용자와 상호작용하는 부분이 좋았다.→ 현실세계에서의 동적인 환경을 디지털 환경에서도 실제와 같은 사용성을 부과하는 부분
과도한 모션디자인은 오히려 사용성을 해칠 수 있다. 비활성 옵션 추가에 관련된 내용에서 도움이 많이 되었다.