Motion3:05 with Anwar Montasir
Motion isn’t just something UX designers include superficially to add delight to a product. Applied thoughtfully, motion enhances usability.
Motion isn't just something UX designers include superficially 0:00 to add delight to a product. 0:05 Applied thoughtfully, motion enhances usability. 0:07 Audi's design system includes a section called Functional Animation. 0:12 And that's a useful way to describe the role of motion 0:17 in guiding users through an application. 0:20 Audi suggests using motion to provide feedback. 0:24 Users receive confirmation. 0:29 Yes, that tap or click really happened. 0:31 Yes, something's loading. 0:34 Highlight. This is an important feature. 0:38 Pay attention. 0:41 Meaning. How is this interface used? 0:43 What interactions are possible here? 0:47 Position. Where did this content come from? 0:52 Will a vertical swipe reveal more? 0:56 In addition to determining the role of motion in an application's storytelling 1:00 process. 1:04 A design system provides guidance on how animation should behave 1:06 to suit brand personality. 1:11 Does your app speak with a loud, colorful voice, 1:13 with animations slapping you in the face, demanding your attention? 1:17 Or does it speak modestly, 1:21 with animations providing gentle usability cues and nothing more? 1:23 Adobe Spectrum begins with three motion principles, 1:29 purposeful, intuitive, seamless. 1:33 If the animation calls attention to itself, it's too much. 1:37 By intuitive, Adobe means the animation should behave like 1:41 a real-world object subject to forces like gravity. 1:45 As falling objects near the Earth, they accelerate. 1:50 Animators call this effect Easing In. 1:54 A ball bouncing up from a surface will decelerate 1:58 until it eventually starts falling again. 2:02 Animators term this a deceleration Easing Out. 2:04 Adobe demonstrates these effects and provides code for implementation. 2:08 Here's a list of suggested motion durations which depend on the distance and 2:16 complexity of each animation. 2:21 Finally, here are samples of different types of animation I can choose from. 2:24 As new content enters the page, I could fade it in, or 2:29 slide the content into place, or combine both into a slide fade. 2:34 So those are the rules governing the basic elements of style 2:42 you'll likely find in the design system. 2:46 Together, these rules form of visual design language. 2:49 In our next stage, we'll take a look at how these elements combine together, 2:54 piece by piece, like Legos, to form a library of user interface elements. 2:59
You need to sign up for Treehouse in order to download course files.Sign up