Motion and animation make a design come alive. Earlier, motion design was included on interfaces for the sake of aesthetics, but now it is a vital feature in turning users’ interactions seamless and predictable. Thoughtful motion in design can enhance the user experience manifold.
With the increased popularity of motion design to enhance the user experience of a product, it is essential to understand how one should use motion design to make the right impact. One thing to be kept in mind is not to overdo it and use it in moderation, enough to provide the users with some smooth interactions and feedback on their actions.
Motion as a signifier
Animations help and guide the users on how to interact with the UI elements on an interface they are using. It creates a dynamic with the user where they are constantly getting guided and informed about the actions they are doing and the feedback that tells them what to do next.
For example, in this Tracky app, a user can find out his home key and car key with the directional map. When he swipes up, the car key card expands with the details of the navigation and after tapping on the ‘Find’ button, it goes to the next slide which comes from the right swipe effect. These interactions make the process more intuitive and engaging for the user.
Another good example is this watch UI where the user can swipe up to view the next playlist. He can play any playlist with a tap on that playlist which is pretty intuitive and easy to use. Along with offering ease of use, smooth interactions also have a positive effect on the psychology of the user where they feel excited and intrigued by the way a product is interacting with them.
Motion for feedback
Animations are a great tool for communicating feedback to the user. They are a way of showing that an action by the user has been recognized by the system. One good example of feedback through animation is when the navigation menu slides over a page as soon as we tap on the hamburger icon on an app. That sliding motion or the turning of a hamburger menu into a cross are signs that our action has a response. Motion is a powerful means of feedback as our visual systems are attuned to it very intuitively.
In this example when the user clicks on the ‘Set as desktop background’ option, the wallpaper image animates into a bigger image and comes to the center with colors popping up on the image indicating the color patterns of the image.
Motion to communicate state change
The motion also helps in indicating a mode change on the interface to the users. Usually, it can be quite challenging for a designer to effectively communicate that the state of the system has changed as a result of an action. Motion and animation can help to communicate the state change in two ways: (1) by making the state change noticeable and evident, and (2) by providing a conceptual metaphor of the transition that took place.
For example, the submit button on a disk after it was clicked on signals the transition from Submit to Done; this is how we can show mode change through motion design.
In addition to showing a transition between modes, animations are also used in communicating state changes that are not usually triggered by users’ actions. For example, loading indicators show that the system is preparing itself and is not yet ready to accept input from the user. One popular way of showing a loading screen is through a “skeleton screen” i.e., a placeholder UI that looks like a wireframe of the loading page, with no content on it. Such pages show an animation of a light glare moving across it.
Motion for spatial metaphors and navigation
Interfaces that are loaded with information that too in a complex structure and hierarchy is never a good experience for the users. It takes up a lot of screen space and increases the cognitive load for the users as they have to scan through a lot of information thrown together.
Animation can aid in solving this problem to a certain degree if not completely. Adding clear and short animations when a user is moving through the application can give them a sense of direction and make wading through a complex information architecture more intuitive and understandable.
A good way to communicate information hierarchy through motion is by the zoom in, zoom out animation. Zooming in on specific content shows more details and creates an impression of going deeper into the hierarchy. On the other hand, the zooming-out animation shows traveling up into the information hierarchy by showing fewer details and more objects on the screen.
For example, in this movie ticket booking app when the user taps on a movie card, the card zooms in and the movie details come in that section.
In this example, when the page loading has done the abstract shape animation has come and it zooms out the video to the background video.
Attention-grabbing and attention hijacking
As a matter of fact, the human visual system is extremely sensitive to motion, and therefore animation and motion design play such an important role in grabbing users’ attention for better or for worse. It is important to judiciously use animations on a design as their overuse can also annoy and distract users from what they intend to do on an application. At the same time, it is important that designers use animation to grab users’ attention for good rather than hijack it and trick users into an action they don’t want to perform.
In this Dribbble post, we can see when the user hovers on a particular card, the elements of that card are animated with smooth effects which are grabbing the user’s attention
In conclusion, when animations on a UI are subtle, unobtrusive, and short, they can work to enhance the user experience a great deal. They can communicate feedback and state changes, prevent users from getting disoriented and lost on complex and cluttered interfaces, and strengthen the signifiers. But at the same time, it is important to keep in mind that they should not be overused, as they can easily become overwhelming, distracting, and exploitative of the users’ behaviors and interaction patterns.
