In its infancy, motion design was known for being purely aesthetic and enjoyable to watch. But, as the digital world has developed, so has motion design. In today’s user-focused world, a new division of motion design, known as UX Motion Design, plays an essential role in enhancing the user experience. It adds a compelling option for visual storytelling and guiding the user through the site. UX Motion Design is typically thought of by designers as a way to make the user experience more delightful—but it’s much more than that. It can help make a brand’s digital products more efficient and intuitive for a user—if used with restraint.
One of the biggest advantages of UX Motion Design is that it attracts users’ attention, but this can also be a hindrance if used improperly. The idea that “less is more” is something you want to constantly keep in mind when designing UX animations. Too much animation can become distracting and frustrating to the users. This ultimately degrades their experience and sends them away from your site. Being the newest addition to UX/UI design family, UX Motion Design is often misunderstood, causing it to be used incorrectly. Every animation should have its purpose and its use, just like the rest of the design. If it doesn’t enhance the user experience, don’t include it.
When creating a website, it’s important to keep UX Motion Design in mind throughout the entire process and not just at the final stages. Including basic animation options in the wireframes can help streamline the process. This can be as simple as noting how images appear, how a button can be interacted with, or how the navigation expands. Using tools like After Effects or InDesign can help you prototype your animations before even building one line of code. This can be especially helpful to developers if the project gets passed on to them and it becomes their responsibility to build the site to completion. Instead of developers having to predict how you want interactions and animations to flow, they can watch your prototypes to make sure their final product matches what the designer envisioned.
There are many different reasons to include UX Motion Design in a site, but the main purposes are to give feedback, create fluid transitions, guide a user, and show progression.
Giving Feedback
Clear and concise feedback, also known as confirming actions, is necessary when creating good interaction design. Animation is a useful way to help the user understand that their actions have been recognized by the system. Having a visual response or feedback can increase engagement while also delighting the user.
An ubiquitous example of this is selecting items and moving them into a new folder. Below you can watch a user complete this action within the finder. They select three documents and move them into a folder labelled “Old Drafts.” The drafts are then highlighted in blue, indicating that they have been selected. A small version of the file names is attached to the cursor with a small “3,” further ensuring that the correct files are selected. When the files are dropped into their new folder it is highlighted to show that the selected folder is correct. Lastly, the folder opens to reveal the three newly moved documents are inside.
Seeing this feedback ensures the user that they have successfully completed the task. The user does not have to wonder if they selected the right files or if they placed the files in the correct folder. The animated feedback answered both of those questions for them.
Another thing to keep in mind is providing negative feedback. While all animated feedback should be subtle, this is especially true when it comes to negative feedback. People do not like to be told when they are wrong. So, when completing actions erroneously, people don’t want a big, bold animation telling them they are wrong.
The gif on the top shows a subtle shake that tells the user “sorry but no, that is not the right password”. On the gif below, we see a big, red screen flash on with a thumping “X” yelling at us “WRONG!” While both animations convey the same story, the user entered their password incorrectly, they evoke two different emotions. The one on the left makes the user feel calm and optimistic to try again, while the other leaves the user insulted and frustrated.
Creating Fluid Transitions
UX Motion Design helps to seamlessly transform the flow from one element to another. Having a fluid smooth transition can help keep your users from getting lost. Static transitions can cause something called “Change Blindness.” Change blindness occurs when a static transition is so abrupt, it causes the user to miss out on noticing any transition at all. This results in the transitions being completely ignored by a user ultimately causing them to be confused and unsure how to proceed. Including an animation in a transition can help drive attention to the change and allow the user to process the change internally.
On the Vans mobile site, if a user selects a size that is no longer in stock, the add to cart button has a static transition to read “Out of Stock.” This slight difference is so abrupt and subtle it most likely goes unnoticed by the user. If the user does eventually notice this change the delay, it would add to the overall interaction cost. Adding movement to draw the user’s attention towards the button can help make this change more noticeable.
Using motion in transitions not only helps protect against change blindness, it also helps the user feel more integrated into the site or digital product. By introducing subtle motion into a design, it makes the action feel more realistic to a user. A great example of this is scrolling through photos, articles, or feeds on a mobile device. The more energy and speed the user exerts into their swipe, the faster the images scroll past. Another common example is animation within state changes. When a user clicks a button and there is a subtle bounce with that action, it indicates to the user that they have indeed clicked the button.
Fluid animations in UX can also be seen through navigation changes. These functional animations ease users through moments of change and smoothly transitions them between different screens. It also explains the change through visual cues or visual storytelling. The example below is a site we designed here at Zion & Zion and demonstrates how we take into account showing visual transitions.
Depending on the different tab that is clicked, the information moves over to make room for the new information. With the movement of the information sliding over, it indicates that the information is still there if the user wants to go back to it, but it is not in the direct line of focus. It also doesn’t leave room for any change blindness because it doesn’t just suddenly disappear, the subtle animation shows it exiting and entering the view. The user is able to visually see where it is going.
Guiding a User
As mentioned earlier, animation is attention-grabbing, and if used properly, can help direct users throughout your website. For example, when entering a homepage, it isn’t always clear that there is more information below what is initially loaded, or what we refer to as “below the fold.” Adding a subtle arrow animation pointing down indicates there is more to be seen and the user can scroll downward to get to the rest of the information. Using visual hints throughout your site can help drive your user’s attention to possible interactions that might have been left otherwise unnoticed. It also helps communicate the spatial relationships between screens and elements as they are guided to different views. UX Motion Design can be used to explain to the user where to focus, what to do next and what the important elements are on a page.
In this aspect, think of UX Motion Design as the user’s personal tour guide throughout the site. It brings life to the interface while maintaining the user’s purpose as well as your own. UX research indicates that movement and direction assist users in making decisions on what to do next.
Showing Progression
The most commonly thought of use for UX Motion Design are pre-loader animations. Pre-loader animations are incredibly useful to keep the user entertained and engaged while waiting for a page to load. However, these animations aren’t the only way to animate progress within the digital world. When on websites, we often come across forms and after we enter our information it is nice to visually see that the system is thinking and processing all the information we inputted.
Progress animations are also commonly seen when listening to music or watching videos. The line at the bottom moves from left to right as we get deeper into our music or video. This helps the user identify how much more content is left.
Lastly, progress animations are great for sites that include multi-step processes. Using icons and animations to visualize which steps are completed and how many steps are left is beneficial to the user. The animations allow the users to estimate how much longer the steps will take them and where they are in the process.
Conclusion
UX Motion Design is a strong tool that can be used to enhance your user’s experience—when used properly. Although animation is fun and exciting, it should only be used when the time and circumstances are right. Adding animation simply as a fun element without a true purpose will most likely distract your user and drive them from your site without accomplishing their initial purpose. When used correctly, animation can drastically improve the usability and functionality of your site. Motion is typically used to describe functionality and intention with refined beauty and fluidity.
However, UX Motion Design alone can’t help you create the most user-friendly site. To learn about the basics of building a website check out this article written by another member of the team here at Zion & Zion.