Motion Design and Its Impact on User Experience

November 19, 2018

In bygone days, motion design was circumscribed by aesthetics. But, in today’s world, motion design is a crucial element in making users’ interactions with a brand’s digital products more streamlined and intuitive. Companies aim to provide better narratives through their product user experiences, making motion design an essential part of modern user-interface design.

“Motion tells stories. Everything in an app is a sequence, and motion is your guide. For every button clicked and screen transition, there is a story that follows,” says Craig Dehner, formerly on the Human Interface team at Apple. Designers need to begin thinking about such moments in an interaction from the very beginning of the design process.

Champion Advertisement

Motion design helps create easy to use, enjoyable user interfaces. Animation plays an essential role in enhancing the user experience and adds a powerful option for visual storytelling. However, taking control of animations and transitions as part of interaction design gradually increases the complexity of the user interface and demands more of the designer’s time.

The proper implementation of motion design helps ensure better quality user experiences for your brand. Leveraging motion design aligns with user desires and improves various aspects of user interactions. Motion design demonstrates the relationships between an application’s UI elements, enabling easier navigation. Designers can use animated icons, illustrations, and logos to communicate with users.

Transition Patterns

Let’s begin by focusing on the design of navigation transition patterns, which provide a strong foundation for motion design. Simplicity and consistency are key to designing navigable transitions. There are two types of motion patterns that UI designers and developers can employ in implementing transitions.

Transitions based on a container
Transitions with no container

Transitions Based on a Container

If an application’s user interface consists of buttons, cards, or lists, transition design is based on animating the container. Usually, it’s easy to spot containers because of the visible edges of their separators. However, sometimes containers are invisible until a transition takes effect. That is, until a transition occurs, there are no visible dividers or containers.

Here is an example of a transition based on a container: Material Design’s deceleration easing allows scaling animations to begin at peak velocity, then gradually slow down until they become static. In the end, the screen display simply fades out, with no scaling. Therefore, exits from animated containers are subtler than entrances—for which transitions focus the user’s attention on the new content.

Transitions with No Container

For screens whose transitions are not based on containers—for example, when the user taps an icon at the bottom of the screen to navigate to a new destination page—transitions follow a two-step pattern:

The initial display fades out as the next display fades in.
Using Material’s deceleration easing, the new display can also scale up subtly as it fades in. Scale applies only at the beginning of the transition to draw attention to the new content that displaces the old content.

Graphic Cues

Motion design provides guidance to the user of an application or Web experience by using animations to communicate to the user where to focus, what to do next, or what is most important on a page. Consider using motion to acknowledge user input and to help users navigate information without losing their bearings. Motion makes navigation interactions seem more natural and less abstract. Motion brings life into the user interface while maintaining context.

Fluid, Responsive Motion

Users want user interfaces that are fluid and responsive and have begun to demand them. On the Web, users generally hover over an element when they are not sure about its function. A good user interface rewards this habit by providing the user with instant feedback—perhaps in the form of an animation. For an uninterrupted browsing experience, immediately answer any questions that users may have. On devices that respond to touch, user-interface designs come alive by allowing users to make deep connections in delightful ways.

Flawless Transitions

Motion design makes the flow between the various elements that enable users to navigate and perform user-friendly interactions to become understandable. Plus, you can use motion design to entertain or distract users as one feature transitions to the next. For example, animations hold the user’s attention while a page is loading, creating the illusion of speed and making users wait more patiently to view their content.

Eliciting Emotions

Motion design for your company’s digital products can reinforce your brand’s identity. Adding motion design to express a user interface’s character elicits greater emotional response in users than static visuals do. Effective motion design emphasizes the personality of the user interface rather than its visual identity and, thus, has strong impacts on users’ behavior and emotions. Just as people’s body language and the way they move reveals their personality, the same is true for motion in a user interface. Motion helps ensure digital interactions and your brand resonate with customers.

Motion design and UI development have become more complex, but time-saving design tools offer important efficiencies.

SQUID UI Flow Template for Sketch—This tool helps many UX professionals to create elegant user flows in just a few minutes.
The Iconic—The world’s first app icon compendium provides premium templates for Sketch, quality checklists, and validation tools, so designers can quickly perfect their design assets.

Demonstrating Interactions

You can use motion graphics to create a unique, high-converting video that demonstrates user interactions with your brand’s digital user interfaces. Animated videos offer all the benefits of motion design that I’ve described so far and help you grow your business faster. You can create animated videos that employ several different types of animations, including the following:

motion graphics
cartoon animations
virtual-reality animations
digital, stop-motion animations
2D character animations

The Design-Contest Marketplace

Check out the design-contest marketplaces and find one that provides solutions for the problems this article has described. On these Web sites, you can find a great variety of designs from many different designers. Plus, you won’t have to pay much for them. If you want to create your own designs, make sure they stand out in the design-contest marketplace by differentiating them from the competition.

Conclusion

Users deeply enjoy and are sometimes delighted by well-designed motion-design solutions. Motion design has become a crucial element of user interfaces that may determine whether a solution is successful. Motion design is an inventive way of conveying a coherent narrative that sticks with users. Plus, motion is an integral element of a user-friendly, user-interface design. Make sure your motion designs and animations are purposeful and subtle enough to provide the user with an awesome experience.

In Animation Design | Interaction Design

Allison Ravenhall

November 21, 2018 7:56 PM

Great article Herman.

It’d also be good to mention animation and motion as they relate to accessibility. Looping animation can be too distracting for people with attention deficit conditions, some movement animation (e.g. parallax scrolling) can trigger people with vestibular disorders to feel sick.

The W3C’s Web Content Accessibility Guidelines contain two criteria that specifically address animation and motion: 2.2.2 Pause, Stop, Hide and 2.3.3 Animation from Interactions.