Animation and motion in UX & UI design

In this article I will outline the fundamental animation and motion design principles and discuss five key concepts one can use when incorporating them into your digital platforms. Creating these moving and dynamic visual design elements can help create improved and engaging user experiences.

Each concept will have an accompanying example, created either for in-house purposes or for one of Make it Clear’s fantastic clients.

There are several principles designers should consider when creating motion and animation designs for digital platforms.

• Designs should be informative and communicative, providing informative content to help educate the users.
• Designs should be useful and unobtrusive, so as not to distract or annoy the user; this will help reduce the cognitive load of the user.
• Designs can be used as feedback or as micro interactions, providing relevant information and context to help guide the user through their journey.
• Designs must reflect the brand’s visual DNA to ensure all UI elements are cohesive and visually consistent.

As with all digital design, we hope to engage with and inspire the user.

Five animation and motion design concepts

Loading & progress bars

A loading or progress bar is an informative tool, which can communicate to the user a page’s loading time or how much of an onboarding process is still to complete. They have numerous functional and psychological attributes which improve user experiences, namely:

Functional:

• Indicates to the user that the system is working and the page is indeed loading
• Indicates to the user the stage of progress
• Sets a timeframe for completion

Psychological:

• Can help Reduce tension and promote a sense of ease as the user feels in control

State changes

Element state changes are micro interactions that can indicate the progress or functionality of certain elements or segments in a dynamic digital platform.

The change of states communicates information to users, prompting them to know what actions they are able to perform and guide them through a page, and are often used for buttons, menus and windows.

One example is the change of a button state when a user is filling out a form. When the form is complete, the button turns from disabled to clickable. This change of state informs the user when their task has been completed and tells them that an action can be validated.

Conveying data

Incorporating animation and movement into graphs and other data-telling techniques adds greater context to the information on display and brings static visuals to life. It can help make analysing data less laborious and more engaging.

Movement can enhance the relationship between the user and data, conveying both process and agency, and helping the user to understand and make sense of the information, emphasising trends or discovering anomalies.

Motion should feel smooth, easy and dynamic. It should not feel clunky or distract the user from understanding the story the data is telling.

Branding / Brand DNA

Animation can help convey a brand’s DNA and reflect its core values. This can be reflected in the design’s colour, tone and spirit. A fast-paced and energetic motion design could reflect a brand that is modern, dynamic and vibrant, whereas something more slow-paced and elegant could reflect a more sensual and natural brand ethos.

Animations can evoke emotions and personality, too. We can make the user feel empathy, sadness or delight through the tone of voice of the animation, thus making a brand more human and memorable.

Create a mood

A certain mood, spirit or energy can be conveyed through animation and motion design. It can be used when setting the scene of a website’s landing page or to delight and inspire the user through visually stimulating colours, patterns and movement.

Often, moods reflect a brand’s ethos and can target the user’s visual and auditory senses. An example of this is ASMR (autonomous sensory meridian response) sounds, which creates a relaxing and often sedative sensation, also known as ‘brain massaging’, putting the user in a calming and relaxing state.

Conclusion

Animation and motion design elements are vital when creating digital products. They convey information and personality, and improve the overall user experience. Designs should be subtle and sophisticated and should not distract or annoy the user.

The five concepts outlined above are the tip of the iceberg when it comes to animation and motion design. The possibilities are endless, so experiment and go for it!

Have a call

We’d love to talk to you about how Make it Clear can support your organisation. Book a call here.