How to use motion for better UX
We thrive to create the best possible experience for our users. But often designers forget about motion design, which can be a powerful tool to get there. Let’s see how to apply it properly.
by Martin Maczurek, Head of UX at Cheil Germany
No matter the purpose of your digital product: A good and pleasant user experience (UX) is the key to convincing your users and keeping them in the long run. One tool in user interface (UI) design that is often used thoughtlessly and only for decorative purposes is animation. Many overlook the fact that thoughtful and properly used motion design can significantly improve the UX of your product.
In this article, you’ll learn to understand the role of an interface in guiding the user to their goal and how motion design can help your users achieve those goals easier and faster. Through examples, you’ll see how other products take advantage of these benefits and what to consider when using animation for your product.
The basics of good UX: Understand the goals of your users and make it as convenient as possible to achieve them.
A user always operates an interface to solve a task that will take them to their ultimate goal. In that sense, an interface is just a tool. Like a screwdriver that you use to turn a screw into the wall so that you can hang a picture on it.
If the screwdriver fits exactly, the screw can be tightened without any problems. You don’t need to think about the screwdriver or the screw, instead, you quickly and easily complete the task that takes you to your goal: to hang a picture.
But if the screwdriver doesn’t fit the screw properly, you keep slipping. You have to concentrate on holding the screwdriver in a certain way to carefully be able to turn the screw. You lose sight of the actual task because you have to pay attention to the correct operation of the tool you have to use. In the end, with a bit of luck, the picture still hangs on the wall, but it took much longer than planned and your nerves are shot. In the worst case, the screw breaks and you don’t even reach your goal. In both cases, one thing is certain: you won’t repeat that task anytime soon.
This analogy shows the relationship between user to interface and how frustrating it can be when the interface doesn’t properly support the user in solving the task. However, if it works intuitively and well, the user does not even have to think about how to use it. In the best case, the user even forgets that there is an interface between him and the task at hand.
You very likely became a victim of bad user experience somewhen in your everyday life. This article will painfully remind you of some of those moments.
But what does all this have to do with motion design?
Here are 5 tasks you can solve with motion design to make your user’s lives easier
You now know how important it is to know the goal of your users and what role the interface plays in that. Below are some real-world challenges and how animation can help you overcome them.
The list is based on Don Norman’s design principles from his book “The Design of Everyday Things”, the “10 Usability Heuristics for User Interface Design” by Jacob Nielsen, and the “Principles of user interface design” by Lucy Lockwood and Larry Constantine, the founders of “User-Centered Design”.
Note: Even though the most important use cases are covered here, they are certainly not all of them. It is a good practice to always question the exact purpose of an animation in a certain situation and to evaluate if it helps the user in any way to achieve their goal.
1. Provide orientation
The development of a digital product is ideally done from rough to detailed. I say “ideally” because in reality design isn’t a linear process but often an odyssey as Ryan Ford accurately named it. However, ideally, you first try to get an idea of all the areas of the product, structure them, and then iteratively work them out to the final interface. This process ensures that you know your product inside out and can tell the exact position of each interface in the overall hierarchy.
In contrast, your user sees each interface for the very first time without knowing the entire structure and all the reasoning behind it. They are practically disoriented in a new environment and need to learn. The UI must therefore be “learnable” and guide them through the product in such an intuitive way that they can find their way around it quickly and independently on themselves.
In addition to a menu or a site map, which serves basic navigation, motion design can help to show the connection between individual interfaces. With an animated transition, for example, the connection between these two interfaces can be explained. But also dependencies and structures within individual sections can be clarified in this way.
Example: Zoom transition for detail settings
The Qixxit platform determines the best possible travel route, taking all available means of transport into account. When searching for a connection, the interface reflects the real course of the journey (based on the concept of natural mapping). At the top is the starting point, at the bottom is the destination, and on the path in between is the choice of the desired means of transport.
For this purpose, the user can filter the way they would like to get around by selecting the desired means of transport.
The filter is an optional function and is therefore subordinate to the actual connection search. When tapping on the filter element, the interface zooms into the detailed view of the filter. This transition makes clear that you just entered a more detailed view of your search where you can set specific details for the higher-level connection search. Additionally, this transition makes it clear to the user what happens once they set their preferences: They zoom back to the original view. So in this case, the animation provides a wordless explanation of the hierarchy and helps the users to orientate themselves within the different states of the interface.
2. Giving feedback and showing the system state
In practice, it is a very simple but effective principle that we experience unconsciously in everyday life: Every action is followed by a reaction. The reaction changes the status of the system you are operating. You in turn interpret each change and decide which next action might be necessary to get closer to your goal. (A fundamental and much-discussed concept in the field is the so-called Gulf of Evaluation & Gulf of Execution).
If you for example press the button of a mouse, you immediately receive haptic feedback with the button moving and additionally acoustic feedback with the “click”-sound you hear. Both signals confirm, that you really pressed the button. The system responds to the action, for example, by opening the program you clicked on. However, if the system does not respond immediately because the program takes some time to load, you would probably suspect that the system has frozen. There would be no doubt that your mouse or keyboard didn’t work because both gave you immediate and clear feedback. But if the system shows you a reaction directly after your click, e.g. a loading bar, you would know that a status change has occurred and that you only have to wait a short time.
So feedback that is as immediate as possible is crucial to make users understand that an action has been recognized and processed. (I recommend this read if you’re keen to learn more about the importance of feedback and visibility of system status.)
What might work well when it comes to physical devices like a mouse and keyboard becomes much more difficult when using a touchscreen. With touchscreen devices, there is no haptic or acoustic feedback that happens on its own. They have to be specifically designed. At this point, motion design is a great way to make sure the users get the feedback they need.
Example: tappable tags
A good example, which can be found in a similar form in many products, is interactive tags that can be activated or deactivated on tap. These tags are also used in the app mainaqila, where users have the option to select which kind of content they want to see in their feed. There is also certain content that will always be displayed in the feed and therefore cannot be deselected.
If the tags are selectable or deselectable, they are briefly dimmed during the tap to indicate to the user that the action has been detected. Subsequently, the selected tag changes its state and indicates this state change by changing the fill color as well as the icon.
If the user activates a tag that cannot be deselected, which is indicated by the lock icon, they see a movement that is reminiscent of shaking a padlock. The Interface shows that the user’s action has been recognized, but at the same time provides feedback that the status didn’t change.
3. Pointing in the right direction
At certain points in the user journey, it is foreseeable what the user is likely to want to do next. With the help of animations, the interface can show them the way before they even have to think about the next step.
This example touches on the concept of anticipatory design which is a highly interesting and controversially discussed part of user experience, here’s a good starting point if you’re interested to dive into this field.
Example: Purchase process in a store
Let’s take the app mainaqila as an example again, this time the store. We are on an item detail page for a particular shirt. The user’s actual goal is not to select the right size for the shirt, but to buy the shirt in the appropriate size as quickly as possible so that they can then wear it.
To achieve this goal the system first needs some information, such as the correct dress size. Therefore, the interface was designed in such a way that after an interaction, the user’s eye is immediately guided to the place that is relevant next for completing the purchase by using well-placed animations.
Once the user has selected the desired dress size, the “Add to Cart” button slides from the right into the interface and positions itself next to the selected dress size. The movement directs the user’s eye to this next logical step: adding the item to the cart. If the user presses this button, the product is symbolically packed in the selected size and then pushed into the shopping cart. On the one hand, this behavior confirms that the product was successfully put into the cart and simultaneously shows where to press to complete the purchase process.
4. Show how something works
Just like the second challenge in this list — giving feedback to the user — this point has its origins in Don Norman’s design principles and shows how motion design in the UI can serve as a so-called “signifier”. This means, that each element should signal to the user how it should be operated and what function the user might expect when operating it. This avoids unnecessary trial and error, requires less thinking and makes for a more pleasant experience.
Example: Anchor navigation with self-explanatory “signifiers”
They are almost as old as the Internet and still around: Anchor links and their use for navigating between sections on a long website. This principle was also used for the article detail pages in PropRate’s “Understanding Real Estate” section.
In the upper part of the article, a chapter overview allows the user to get an overview of the article’s content and to jump directly to the chapter of interest via anchor links. As soon as the user has scrolled further down to the beginning of the article, a sticky navigation bar appears at the bottom of the screen, which helps to navigate between the individual chapters and track the reading progress.
The chapter the user is currently reading is indicated by the light blue state of the respective circle. If the user moves from one chapter to the next, the active circle changes its state accordingly in a quick transition. This simple state change indicates that the numbers in the circles represent the chapters of the article and signal that clicking on one of the circles is likely to switch to the corresponding chapter.
Additionally, when hovering over one circle, the title of the corresponding chapter pops up as a tooltip above the circle. On the one hand, this additional hint shows the user the title of the respective chapter without having to memorize it, on the other hand, it serves as an additional signal showing that the circles likely are interactive. In combination, the behavior of the elements in the bottom bar indicates their function without having to explicitly explain them. These measures help to solve the usual problems one might run into when using anchor links without enhancing their usability.
5. build an emotional connection
Even though “thoughtlessly” and “decorative” were words I used at the beginning of this article: The aesthetics of an interface can positively influence the user experience and should not be underestimated.
If the user feels comfortable using the product and develops emotions that build a connection, whether through funny, touching, or surprising moments, the likelihood of using the product again is significantly higher.
These moments can be very subtle details and occur throughout the product, or they can happen very boldly as the main component of an interface to tell a little story that breaks the ice and evokes sympathy. Without such moments, you may have an efficient and easy-to-use product, but it can easily be perceived as boring and distant. This can lead to users not coming back, even though your product does a good job, just due to the lack of emotional connection.
For this reason, artistic motion design should not be underestimated, especially when used in the right place.
Example 1: Microinteractions
Appealing motion design can tell tiny stories in a very short time. A great way to surprise the user with attention to detail. As seen above: the removal of a product from the favorites list in the app mainaqila: the heart breaks when you remove a previously favorited product from your favorites list.
This little animation creates a small but surprising moment of joy that might cause a smile. Additionally, such subtleties show attention to detail, which can increase the perceived quality of your product.
Example 2: 404 error page
Unfortunately, errors are unavoidable in some cases, so it is important to communicate them in a way that helps your users to overcome their anger quickly. A nice-looking animated illustration is ideal for this and ensures that the annoyance about the error quickly fades away. Despite the problem, the user is left with a positive feeling and chances are this usually bad experience is kept in positive memory.
Conclusion: Less is usually more
As the examples show, the success of motion design in digital products depends on finding the right measure in the right situation. In addition, the quality of the implementation plays an important role. If you overdo it or make the motion design look unprofessional, you may miss the desired benefit.
However, if you make sure that the animation doesn’t take away the user’s time, doesn’t distract them from the essentials, and — most importantly — improves the user experience, they are an excellent way to optimize your product.
If this article has piqued your interest in the topic and you want to dive deeper into it, I recommend reading the “12 Principles of Motion Design” by Frank Thomas and Ollie Johnston from the book “Illusion Of Life”. Not all of them are useful in UX/UI design, but the knowledge will help you find the right dose.
If you want to develop animations for your interfaces, I also recommend taking a look at the documentation of Airbnb’s Lottie project to get the necessary understanding of the technical side. Lottie animations have become the method of first choice for animations in digital product development.
