![]() ![]() ![]() ![]() Maybe you’ve caught a lyric video with kinetic typography or come across a cinemagraph, or even saw a logo animated in a way that made you smile. Such behavior exists nowhere in the physical world and appears halting to users.The opening credits to HBO’s True Detective Season 1 are a fantastic display of motion graphics. UI elements displaying linear motion go from stationary to full-speed, and full-speed to stationary, instantaneously. It applies to all UI elements exhibiting motion. EasingĮasing mimics the way real-world objects accelerate and slow down over time. Relationship: How do the spatial, aesthetic, and hierarchical attributes of UI elements relate to each other and influence user decision-making? How does motion impact the various element relationships that exist?ġ2 Motion Design Principles for Digital Products 1.Narrative: Are interactions and the motion behaviors they trigger tied to a logical progression of events that satisfies user intent?.Continuity: Do interactions produce consistent motion behaviors throughout the user experience?.Expectation: When users interact with UI elements, what motion behaviors do they expect to see? Does motion meet the expectation or cause confusion?.When it comes to UX, motion design must support usability in four distinct ways. Non-real-time interactions occur after user input, meaning that users must briefly pause and watch the resulting motion behavior before continuing.In other words, motion behaviors respond instantly to user input. Real-time interactions provide immediate feedback when users manipulate UI elements on-screen.Motion design is concerned with two fundamental interactions: real-time and non-real-time. Motion isn’t ornamentation, it is behavior, and behaviors can only help or hinder the user experience. ![]() This is crucial because UI animation is almost always treated as a cosmetic afterthought with no bearing on UX (except to add charm). Motion design is not synonymous with UI animation. Motion Design and UX: Important Distinctionsīefore addressing the principles of motion graphics, it’s important to highlight key distinctions that appear throughout Willenskomer’s manifesto. Unpacks the inner workings of core motion behaviors.Distinguishes motion design from UI animation.In establishing the 12 Principles of UX in Motion, Willenskomer: Its depth is astounding, but it’s not light reading. The most ambitious attempt to reorient motion principles around interactive UI elements (and their UX significance) is Issara Willenskomer’s UX in Motion Manifesto. Still, the motion design basics call for translation if they are to be applied holistically to digital product design. One of the more illustrative examples is the 10 Principles of Motion Design, a Disney adaptation by animation expert Jorge R. They empower drawn characters to move and emote, but they don’t adequately address the interactive motion needs of modern user interfaces.Ĭontemporary designers have attempted to bridge this gap. The Disney principles distill the essential laws of physical motion for the sake of animated storytelling. Their 12 Basic Principles of Animation remain influential in motion graphics for film, television, and digital content. Frank Thomas and Ollie Johnston were among Walt Disney’s most valued animators and key contributors to classics like Pinnochio, Bambi, and Fantasia. The marriage of motion design and UX is relatively new, but its roots are in Disney. If motion is to enhance the usability of digital products, it must be founded on unchanging rules of behavior that apply to an infinite number of use cases. Tools and techniques are essential, but they derive their power from motion principles. Define points on a predetermined path, and software tweens the gaps. In theory, making UI elements move is easy. Something as simple as a card sliding onto the screen looks awkward. Just ask anyone who’s animated UI elements for the first time. In the realm of digital product design, it would seem that motion is second nature, an extension of the everyday to be leveraged with little effort. Even in still moments, leaves tremble and lungs expand. It is a compelling force that bolsters product engagement and extends the reach of design communication. In the context of user interfaces, motion is more than a visual garnish. Motion has a profound impact on the user experience of digital products, but if interface elements don’t exhibit basic motion design principles, usability is undermined. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |