This article is only available in Dutch 🇳🇱
A bar that fills up promisingly while loading a page, a new screen that subtly slides into view or an icon that moves with a new notification. Motion and great digital user experiences go hand in hand. To get inspired and stay up to date with the latest developments, our UX/UI Designers Arnout and Glenn and intern Estèlle attended Five Talks Motion. A day full of lectures on Motion Design, focusing on typography, branding and data visualization. In this article we share the three most important takeaways as well as our own vision on motion within UX/UI Design.
Takeaway #1 - Design with a purpose
If you want to present a large amount of exact information, you could choose to display it with static tables and graphs. But in many cases, stirring up an emotion with data is much more important than the actual numbers. Adding motion to your data visualization will turn your data into a story that captivates and connects people. A Day in the Life of Americans and 200 Countries, 200 Years, 4 Minutes are great examples of how Motion Design brings complex data to life and makes it accessible to a large audience.
Takeaway #2 - Include motion throughout the process
Look for ways to apply motion right from the start of the design process. Preferably with the knowledge and expertise of a Motion Designer who knows the ins and outs. That way, you make sure you offer it optimally and seamlessly in your product(s). It also lets you use the full creative space to explore all possibilities.
Take-away #3 - Sketch, storyboard, software
First, draw out on paper what you want to make clear using motion. Include what form you want to portray, what the desired result is and what steps are necessary to achieve that result. Then, with the help of storyboards and/or a script, determine how you will design the animation. This makes the digital elaboration in the software you use much more efficient.
Motion: an essential part of UX/UI Design?
Nowadays, the absence of motion in a digital user experience is more noticeable than its presence. And especially that of micro-animations. For example, you've probably clicked a button several times because it didn't seem to respond, even though it just did. Right? As a web or app user, you often don't even realize that motion influences or even guides you through complex processes. That's because good motions subtly capitalize on a set of psychological principles that form the basis of UX/UI Design. In addition to confirming, influencing and guiding the app or web user, micro-animations also contribute to a positive user experience in other ways. They ensure, if applied properly, that important elements stand out and that transitions between screens feel natural.
When using motion within UX/UI Design, the first thing to consider is accessibility. Well-functioning motions require high image resolution and clear contrast with the rest of the visible content. Second, the principle of "Less is more" applies. An excess of motion can be overwhelming for the user and cause cognitive overload. Therefore, it is essential to consider in advance how motion can contribute in a project, what story it should tell and which psychological principles are touched. The last important point is coordination with the developers. Determine together the right way to produce motion and get it workable in the system versions that the app or web application needs to support.
In short: motion enriches and enhances the digital user experience - if applied in the right way. As far as we're concerned, awareness of what Motion Design can contribute is a logical and essential part of every UX/UI Designer's skillset.