Motion, branding and interaction
When motion standards (principles, timing, duration, and easing) align to your brand, they serve to bring tangible personality into micro-interaction and video.
Motion + Brand ✨
Motion connects the digital to the real world. It isn’t extra decoration; it’s one of the most powerful tools to guide communication and interaction. It’s the best way to connect with your user emotionally in a way that’s felt beyond the fingertip. When motion is a design discipline stemming from your company’s brand principles, it builds deeper unity in the customer experience from a social media video spotlight to an in-app everyday use welcome screen. Let’s take a look at a few ways motion can strengthen a positive and memorable experience:
Welcome, new user
One of the key moments of a customer journey is welcoming someone who’s new, or welcoming a return user who is experiencing a new feature or even a complete redesign for the first time. I think we’ve all been through experiences that lacked a proper welcome. It can feel very frustrating, especially when trying to accomplish a routine task like checking email or paying a bill. On the flip side, I can bet that a lot of product teams out there have shipped something that everyone thought would soar, only to be reamed by negative feedback rooted in the surprise factor of not properly preparing customers for big shifts (the who-moved-my-cheese effect) .
Along with taking the opportunity to create a positive connection as opposed to a negative review, a welcome experience is also a prime candidate for building on brand principles through content, illustration and ease of use. Check out a TON of inspiring examples on Dribbble.
Perceived performance
There are a few ways to improve the performance of a product experience. The most obvious is to actually improve it by cleaning up code, simplifying API calls and prioritizing the most important calls first. Experiences can also be simplified from a data density perspective to make systems run smoother. Another tactic is to use motion to provide a positive experience even during noticeable wait times.
A good example of this tactic is Linkedin’s branded loading page (shown below). Once users log in, they see the Linkedin logo with an animated loading bar for a brief 1–2s duration, and then move on to the landing page. If parts of the page are still loading, a skeleton state communicates that sections are still in progress. Ideally, users are taken right to their content from the logo loading bar. The logo is not repeated beyond the first entry to avoid branding over-saturation.
Staging a loading experience out into a few keyframes helps the overall flow feel smoother and more intentional than waiting on sections to load, or experiencing a web page that feels twitchy and fragile as pieces blip in randomly when ready. Learn more in this in-depth article from Lisa Dziuba.
Action feedback
Every action has an equal and opposite reaction, and the same should be true for interaction design. If a button is ‘pressed’, the act of pushing or clicking should be acknowledge by a focus state, pressed state and loading if the action takes time to accomplish. This is also highly applicable when components take an action and change state to allow the reverse to be accomplished. Like transitioning an icon from a menu button to a close button.
In session updates
Nothing grabs the eye quite like a moving object. That can be used to the benefit of the sighted user when a new object comes in to the frame or when a new piece of information needs to be communicated. If a background process fails or needs action, a toast message can guide the user to successful task completion. Motion allows new pieces of information to be easily seen by sighted users. Similar attention grabbers can be used for low-sighted users by using the proper ARIA labels to communicate without completely distracting.
Accessibility concerns ❤️
We can’t talk about motion without taking a deeper look at the adverse effects that movement can have on a large part of the world’s population. Improper use of motion can cause serious problems like seizure or nausea. The best place to start when implementing motion is to absorb the WCAG guidelines for motion and work with an expert who has deep knowledge of accessibility best practices to guide design and implementation.
Prefers reduce motion
The most important piece of implementation is respecting the user’s preferences around reducing motion. Essentially, if a user sets their browser or device to reduce motion, that should impact the motion included in illustrations, scrolling and component states. Everything moving should be still to respect the user’s preference. Safety is key here due to the potential effects on health.
Illustrations, page builds and scrolling
Illustrations with motion should be implemented with a static version included to provide the visual delight even when motion is off. Page builds and scrolling should also be considered in a moving and static state to ensure a positive experience for all users. If motion is off, ensure the experience is still easy to follow and nothing is lost in terms of communication and simplicity.
Be mindful and sparing
Curb cutouts are meant to make an easier experience for wheelchair users crossing streets, but they also benefit walking pedestrians. I don’t think anyone has even complained about having a cutout. In the same way, designing with accessibility in the front of your mind produces simplified and intentional experiences that benefits everyone. When employing motion, make sure it guides the user through a flow and leads the eye to progress.
How to scale motion 🤯
When looking to apply motion at a large scale, either to many products or as a skill across a large design team, standards are a must. Everyone has personal preferences for motion across the full spectrum, and without standards in all aspects of motion, it quickly becomes a wiggly hot mess.
Token + token = mixin
Design tokens are a system to scale the most basic building blocks of a design system. They shine for things like color and type styles, and they also apply to the simplest aspects of motion in experience design: duration, easing and delay. Tokens serve to create a scale from fast to slow, near to far, soon to later. Combine one of each type of token together and you have a motion mixin that can be applied to numerous components and transitions. Mixins can even be applied to illustrations and similar reusable expressions in After Effects for longer format motion-like videos.
Collaboration
The biggest win for motion tokens is the ability for designers and developers to work together instead of in siloed tools. These basic building blocks speed up design and dev collaboration and curb the need to learn new software and techniques. With tokens in place, tools can be created to make mixins, apply them to components, and move forward into production-ready code. IBM’s motion generator is a great example of giving all teammates the ability to experiment with motion to find the right mixin for the job. Everyone on the team can create masterful brand expressions with the right tools and guidance.
Take a moment to look around 👀
Like anything else, there are countless examples in the wild of motion bringing brands to life. Process should always begin with a contemplative look around town. Here are a few inspiring resources:
