How to Integrate Motion into UX Design to Elevate Your Brand Experience
Incorporating animation and motion into your design process is vital in helping your users achieve their goals. Motion tells stories — it shows how your design (app, animation, etc.) is organized and what it can do. By adding a new depth to interaction, motion also alters the UI design by redefining navigation and creating a more natural experience.
This guide looks at the benefits of adding motion to your UX design and the process of addition animated content to your designs. First though, what is motion in graphic design?
An Introduction
Animation refers to graphics, images or such elements which are in motion. Motion graphics, are limited to moving or animated graphic designs. It is, however, not uncommon for designers to use the two terms — motion design and animation — interchangeably.
In essence, motion design takes graphic design that would be otherwise static and gives it animation and movement, often without a specific narrative. For example rather than creating a static design you convert your logo design to integrate motion. Or instead of having a static bar graph, a designer can use motion graphics to have the bars move up and down for extra visual flair.
What are the Benefits of Motion in UX Design?
One of the biggest benefits of motion in user experience (UX) design is that it helps tell the full story. Motion design creates emotions that users readily understand. These emotions are necessary if you want to positively impact consumer behavior.
To understand how all this works, imagine a user looking at an animated loading icon with a smile on its face. This smile can raise the consumer’s spirits. It can help define the consumer’s mood even before the page is loaded.
In one study, for example, it was found that subjects who are exposed to animated circles and triangles quickly comprehend the narrative, and the imagined story instantly becomes their basis for determining the “emotions” of the shapes on the screen.
How all this connects back to user experience is simple. User experiences are stories. Graphic designers have a responsibility to deliver these stories on apps, websites, logos, and so forth. Consumers then interact with these stories when they visit your website, app, social media profile, or any other online resource to make a purchase or read through your content.
As long as your stories (motion design) connect with the audience, you’re guaranteed super engagement.
Storytelling, however, isn’t the only benefit of motion design. Other advantages of incorporating motion into your UX design include:
- Takes boredom out of a loading screen
You’ve likely heard about digital consumers not willing to wait too long for a website or app to load. On websites, it takes only two seconds for users to start considering their options. Indeed, if after four seconds the page hasn’t fully loaded, you’ll have lost more than half of your potential visitors.
When integrated into loading screen designs, animation keeps users entertained and engaged as they wait for the next age to load. This reduces abandonment.
- Gives users clues
Motion design can also be used to give users clues on how to use or what to expect from an app/resource. For instance, if you’re creating an app where posts slide up as they disappear on the screen, you can use motion design to give users a “heads up” about that. Instagram, for instance, uses motion design to alert users that they can “swipe up” on the Stories feature to visit the creator’s website.
Provide real-time visual feedback
Feedback is critical to meaningful conversations. When you give feedback whenever it’s necessary, you help the user understand whether or not they’re doing the right thing.
Motion design can be used to provide highly-engaging feedback. Some apps, for example, show a “dancing” thumbs-up button, often on a green background to indicate that you’re doing the right thing and a thumbs-down button, usually on a red background, to flag a wrong step.
- Branding
Finally, motion design can also play a role in brand design. The ability of animated content to evoke emotions within users makes them effective branding tools. You can, for instance, incorporate motion design into your logo design or branding to elicit joy, excitement, anticipation, sympathy, or even curiosity like users at Product Hunt have done for their brand listing. A with a little tip and guide a new logo design would look more sharp and dynamic when motion is added to it. Likewise the theme of the brand logo when incorporated into videos or gifs can greatly influence the visual impact of the brand, like a video tutorial or podcast.
Brands that successfully elicit the right emotions via motion design easily induce a sense of loyalty and strengthen consumer attachment to the particular brand.
How to Integrate Motion into User Experience (UX) — The Process
Introducing motion into your UX design is a delicate process that requires proper understanding of your audience’s needs and subsequent creation of the right motion elements to meet those needs. Proceed as follows;
- Understand when to use motion design
Unfortunately, the decision on whether or not to use motion design isn’t one you can make on your own. Instead, you must first go to your users, study them in their day to day activities, and look at their feedback to make the right decision.
This shouldn’t be too difficult if you’re designing a new app, building a new website, or creating new graphic design elements for your digital campaign. Just pay attention to areas/steps where the user provides feedback such as;
- I don’t know where to focus
- I have no idea how to use this tool
- Where do I go from here?
- How do I know that I’ve completed the task?
- I don’t understand what this step requires of me
Whenever you get such queries from users, it gives you the opportunity to use motion design to solve glaring challenges.
2. Align the motion design to user needs
Aligning motion design to user needs not only allows you to see the real value of the motion elements but also prevents you from contemplating meaningless, overly complex design.
In this step, begin by revisiting the reasons why motion is used in design in the first place. As we already discussed, motion brings four main things to your design;
- It provides a deep level of clarity
- It provides useful feedback to your users
- It engages users through imaginative creations
- It gives users hints and clues on what’s next
Other benefits such as aesthetics, better communication, directing the user’s focus, and reinforcing the hierarchy of elements stem from the above four uses.
The idea here is to map these benefits against the feedback discussed in step #1 above. Where any of the feedback can be directly addressed by one or more of the benefits discussed in step #2, it becomes easy to identify the right motion design elements to use for that situation.
For instance, if users are complaining that they “don’t know when a task is complete,” a motion design element that “provides feedback to the users” would be ideal. We recommend exploring portfolio websites such as Dribble, Behance, and CodePen to find inspiration for the right kind of motion design. Once you’re done, communicate the findings to your team.
3. Design and storyboard
In this step, you already have the ideas and the inspiration, now you need to design. Here’s how to proceed;
- Sketch: Every design process begins with a sketch, and motion design isn’t different. So, pick up a paper, get a whiteboard, or bring out your drawing app — SketchBook Pro, Mischief, and Photoshop are all great choices. A pen (stylus) display or pen tablet would be a bonus.
- Storyboard: Create a storyboard of the key states of your motion design. Use simple annotation to visualize the flow.
- Share: Allow your team to take a look at your sketches and storyboard and to provide any advice or insight.
- Decide: Based on the comments and insight of your team, decide what motion design elements will be prototyped and user-tested.
If everything goes to plan, by the end of this step, you should have an acceptable sketch of what your motion element will look like.
4. Prototype
The next step is to create a prototype of the design. You can either create a coded prototype or use one of the many prototype applications on the market.
We recommend prototype applications as they reduce the time and effort needed. Some of the best prototyping apps you can use for motion design include; Adobe Photoshop, Adobe After Effects, Adobe Edge Animate, Keynote, Axure 8 Principle, and Flinto.
However, if you choose coded prototyping, some of the best UI frameworks and libraries for UX motion design prototyping include; CSS3 Animation, Motion UI, Transit, Velocity, and GSAP.
5. Test your design
So, now you’ve created the prototype for your design. All that’s left is to test the design to find out if you captured the users’ needs and whether the users are impressed. The testing process can be accomplished in four steps;
- Schedule: Identify members of your audience for the test and decide when the testing will take place.
- Conduct the test: Run participants through the typical tasks that would lead to the use of the newly created motion elements and observe whether the new elements help or harm the experience. Remember to gather feedback.
- Review feedback: Take time to go through the feedback to determine whether your users like the new elements. Feedback should be reviewed alongside the challenges identified in step #1.
- Decide: Do the new motion elements improve user experience? If yes, congratulations, you’re successful. Otherwise, you have to go back to the drawing board.
Wrap up
The above process shouldn’t be straightforward whether or not you’re an experienced designer. What we must stress, though, is the need for communication, both with your design team and the audience. Although motion adds so much to design, you don’t want to end up with creations that don’t address your users’ main pain points.
