UX design must often include micro-interaction elements and ways for subtle user interactions. These components make the design more communicative and illustrative while improving its usability. However, user designers must know precisely when and where to include an active motion to enhance usability. For example, on Twitter, pulling down the screen would refresh the content. The screen slides down and bounces back, revealing a spinning wheel. This tells the user that some action has been initiated and is happening at the moment. Such subtle animations and UI micro-interactions are ingrained in our lives that their absence can be confusing. Sometimes, an animation will need to call more attention to itself, making us pause what we are doing and pay attention. For example, a confirmation window will pop up and keep blinking until we click an action button.
UX designers can create seamless experiences by using animation with some tact. In this blog, we discuss the purpose and the ways of using UI animation and motion.
Why Animation and Motion in UX?
Animation in UX helps build mental models for users about the system’s workings and interact with it. Animations that are time-filling visual stimulations during the transition are less crucial than those that need to capture the user’s attention (like a call to action). Remember, animations need to be leveraged for usability and provide important cues about the current system status. They also signify how UI elements will behave. These serve as spatial metaphors that can be easily understood and related to the user’s location in the information space.
Feedback: Animation and motion are useful as noticeable feedback indicating an action or a condition (as recognized) in the system. For example, a navigation menu slides over the page when the user taps on the hamburger icon. The human visual system attunes to motion such that a short animation can be sensed as feedback. On the contrary, static visual feedback is ignored since users cannot sense any motion visually. Animations serve as a feedback mechanism before the user commits to action. Thus, animation or motion increases the chance of noticing feedback quickly and efficiently.
Communicating State Change: An object motion indicates the interface switch to a different state because of a mode or system status change. You can achieve this by either making the mode change noticeable; or through a conceptual metaphor depicting the mode transition. In addition to capturing mode transitions or views of data, animation and motion help communicate state changes that could go unnoticed if not triggered by user actions. For example, loading indicators depict the system is not ready to accept inputs.
Spatial Metaphors and Navigation: The structure of a complex information space can often challenge communication to users. Scanning through navigation menus, breadcrumbs, or tree diagrams to figure out the user’s location in the information hierarchy is time-consuming and needs more cognitive exercise. Animation can signal to users the direction in which they are moving within a process or information hierarchy. This adds a supplemental cue and intuitiveness while navigating through complex UI. Zooming animations help understand the direction of the user’s journey in a hierarchical design space. Zooming out decreases the detail while including more objects in a visual space while diving out of the detailing. Whereas zooming in does precisely the opposite. Likewise, slide-over animations help establish the forward or backward movement of the user within a checkout process.
Orientation: Animations prevent disorientation among users when using a new or unfamiliar design. This is especially useful for mobile UI design, where context can be lost due to the smaller screen size. Designers often use accordions, menu overlays, and anchor links in UI design. An animated cue helps tell users what they’re looking at and what they have to do next.
The Signifier of Action, Information, and Context: Animations make UI elements intuitive for users by adding context to the design, action, or information. The direction and other attributes of the animation signify what is acceptable (or not). For example, a menu or tab expanding from the bottom of the screen signals that it can be closed by pulling it down.
Types of Animation Interactions
Animation is related to the temporal behavior of interface components in real-time or non-real-time. Real-time or non-real-time events thus drive the temporal behavior of these objects.
Real-time vs. Non-real-time Motion: Real-time motion behavior involves the user’s direct interaction with the screen objects. While non-real-time means the behavior of the object is dependent on its post-interactive state. The motion is transitional and occurs after a user action. While the state of the UX object is static, its act is temporal and motion-based. When an object is in the act of being masked, it means motion is involved, which could support usability. Real-time interactions provide the ‘direct manipulation of the interface object, immediately. It means the interface behavior happens as the user is interacting with it. Non-real-time interactions take place only after the user input is provided. These give the feeling of locking the user out of the UX until the transition is completed.
Key Considerations for UX Motion and Animation
The considerations influencing the temporal behavior and usability of UX designs include:
Expectation: includes the user’s perception of the definition and behavior of an object. UX designers should focus on minimizing the gap between user expectations and actual experiences. For example, instead of the screen bouncing back and revealing a spinning wheel, nothing visually happens while the app refreshes content anyway. Instead of new content, the same content still exists because no one has made any updates in the last half hour. The app could’ve refreshed the news feed, but we’d have no way of knowing if it did or not. Based on the standard expectation, the user’s thought process is interrupted, leading to more confusion.
Continuity: covers the user flow and the ‘consistency’ of the UX. Designs can be ‘intra-continuous’ —within a scene and ‘inter-continuity’ —within a series of screens or spaces that make up the total user experience.
Narratives: define an event’s linear progression in the UX space resulting in a temporal/spatial framework. This includes a series of discreet events and reactions that form a connection throughout the user experience.
Relationships: are the temporal, spatial, and hierarchal representations between UX objects that influence user understanding and decision-making.
Speed: there is a range of milliseconds that is appropriate to animation. We can only register something happening at greater than 100 ms, like standard frame rates for movies. Slow animations frustrate the user. If we’re swiping left in Tinder, it’s great to watch someone get banished from our digital existence in slow motion, but not so slow that we can’t cover swiping another 50 potential dates within the next minute.
Natural Quality: Easing can be looked at as adding a natural quality to animation. Imagine a spaceship orbiting the moon and preparing to dock with the ISS. There is an initial thruster boost in which the ship accelerates to full speed. Then, there is a reverse thruster boost to bring the ship to a complete stop. If the ship were traveling at full speed, every second of that entire journey, either the ship or the ISS would explode in a real-life scenario. When depicted through a UX design, this would mean a hypothetical catastrophe or an unnatural view of a ship moving at full speed and instantly stop full speed. Likewise, it is more pleasant when things are animated based on how natural events unfold. Other examples include the slight in and out easing of a toggle switch when tapped. Or a little bounce that comes back to a stop slowly when we pull down a screen to refresh.
Eight Cornerstone Principles of UX Motion and Animation
UX animation is supported by these eight principles that fundamentally underscore the premises and rules of UX animation techniques. These principles are categorized based on timing, object relationship, object continuity, spatial continuity, and temporal hierarchy.
