--
“Colors answer feeling in man, shapes answer thought, and motion answers will.” — John Sterling
Coming from a background as a Flash developer, I’m super keen on motion.
With the gradual death of Flash and emergence of HTML5, it felt like we initially took a step backwards. Motion disappeared for some time, but now a whole host of new possibilities have appeared.
My colleague, Niels, recently published an article about flat design. As he mentions in this piece, motion is often used to bring flat (or material) design elements to life.
This can be seen with clarity on the Lab Digital website, which is an example of us using motion in our content.
In this article, I’ll outline four main conclusions about using motion in design.
In a recent presentation for the Lab Digital team, I emphasised the distinction between using motion in content and using motion in UI.
However, regardless of your scenario, motion has a tangible purpose beyond the “nice-to-have” label. Let’s look into these purposes…
In the context of using motion in content, the purposes are myriad. Firstly, to add character and immersive experience. In a text-heavy blog post, for example. Motion can also be used to keep someone engaged during loading times. Another purpose for motion in content may be educational — to dynamically explain elements of your app to a user.
When adding motion to content, we use JSON animations with Airbnb’s Lottie in combination with the Bodymovin plugin for After Effects. This is a super lightweight solution, and it works seamlessly for Android, iOS, and web. In simple terms, this is about animating illustrations.
When using motion in a user interface (UI), we also have very clear purposes. Motion can be implemented to support a product’s usability in many different ways, and here are just some:
a) For guided focus through different views
b) For clarifying the relationship between different objects
c) For attracting attention to critically important actions
d) For creating an expectation pattern for an object and its responses
e) For temporary states, to display particular information
As a designer, I have a practical and an emotional loyalty to motion. Let’s not take the joy away from our ambition to create things that are simply cool. “Nice-to-have” must have a place in our mindset, because pushing boundaries doesn’t always stem from a commercial motivation.
However, when working with clients it is essential to know tangible reasons for adding motion to any given element. Whether it is content or UI, the simple “because it looks great” is not sufficient justification.
Motion has a purpose and a function, so let’s shout about it.
If we can agree on the need for motion in a world of flat and material design, we must also know that it can’t simply be added at the end of the design process. This is particularly important when using motion in UI.
Motion will influence the key usability of a product, and therefore needs to be integrated into the earliest stages of a project.
It’s one thing to see static designs, but when you can experience a product coming to life, you can feel how it’s going to work for the end user. Motion can be the backbone of an app, and it’s important to share this with the client in order to visualise the end result.
This is when motion comes into prototyping. With tools like InVision Studio or Principle, we can incorporate motion into design during the prototyping process. A prototype is tangible, and often very close to the finished product. We’ve found that this helps inform product development, giving the client a better perspective on what to expect.
Motion has already become an expectation among users. We are visual creatures, and we’re stimulated by motion.
This is highlighted by the ubiquitous growth of video and the popularity of GIFs in mainstream digital culture.
Most importantly, the big players have adopted motion in UX.
This shapes user expectations. High standards have been set, and now the general public expects products to behave in a certain seamless and stimulating way. In truth, it’s foolish to resist this unstoppable surge.
If your app doesn’t meet these high design standards, people will be reluctant to use it. This might only be applied to consumer-facing applications, but reports have shown that business users expect the same experience when using internal software and business tools. Whether you are building for corporate use or public use, the same principles apply.
Static websites and apps will become a thing of the past, as motion continues to permeate mainstream design.
High-quality motion will be available for businesses with smaller budgets, and the standards will continue to be pushed higher across the board.
Motion or no motion, the user experience must be nailed.
There’s no point in using motion in a suboptimal experience, and there’s certainly no need to let motion damage an experience.
This fantastic piece by Issara Willenskomer is presented as the manifesto for motion and UX. It is essential reading for anyone in our field. Here is one key way he defines how motion is useful:
“The state of something in UX is fundamentally static, like a design comp. The act of something in UX is fundamentally temporal, and motion based. An object can be in the state of being masked or it can be in the act of being masked. If it is the latter, we know that motion is involved and in a way that could support usability.”
At the heart of Issara’s manifesto is “The 12 Principles of UX in Motion”. This is an excellent point of reference, which is summarised in the visual below:
Easing: Naturally speed up or slow down an object
Offset & Delay: Use timing to show that objects are separate from each other
Parenting: Link multiple objects to each other to clarify the user experience
Transformation: Seamlessly flow narrative moments within the user experience
Value change: Emphasise dynamic values over static data
Masking: Transitions between different states, and showing or hiding content
Overlay: Depth indicates whether certain objects are in front or behind each other
Cloning: Introduce new objects, or a hero object to absorb the user into the flow
Obscuration: Apply transparent objects or overlays to focus on a particular interaction
Parallax: Clarify difference between primary actions / content and background
Dimensionality: Build an intuitive flow or highlight additional information
Dolly & Zoom: Indicate whether the content is in front of or behind the current view
The above gives an overview of the main principles. Above all, the types of motion must be cohesive in a design, contributing to the overall consistency of the experience.
“Improving people’s lives through design’ sounds like a great objective to put in your LinkedIn profile. But the designs we create also have to make business sense.” — UX Design Collective
To summarise, the four conclusions about the use of motion in design are as follows:
Motion has a purpose
Motion must be considered early
Motion is the future for app design
Motion must maintain a seamless UX
As designers, we must promote the business case for using motion. This is why purpose is so important. In a commercial setting, stakeholders are looking for tangible results.
As the use of motion gathers momentum, it’s critical to consider motion early in prototyping, to provide the most accurate vision for how a product will work.
In terms of the future for app design, it’s clear that the most influential players on the field are making the moves, and this is already snowballing into the mainstream.
Above all, motion must be seen as a useful component of a functional UX.
— —
AUTHOR BIO