Lecture 21 Animation & Feedback


OSX Show desktop (F11)

Imagine if it worked like this…

OSX minimize window

Imagine if it worked like this…

Abruptness is confusing
Which usability principles do abrupt UIs violate?

Feedback [1](http://www.csun.edu/science/courses/671/bibliography/preece.html) [2](https://www.interaction-design.org/literature/article/shneiderman-s-eight-golden-rules-will-help-you-design-better-interfaces), [visibility of system status](https://www.nngroup.com/articles/visibility-system-status/) which affect both Learnability and Safety.

Understanding motion Credits: Google Material UI (material.io/design/motion/understanding-motion.html)

Motion Principle Informative

Motion design informs users by highlighting relationships between elements, action availability, and action outcomes

(Good) motion design communicates things like…
  • What are the relationships between elements?
  • What actions are available?
  • What did my action cause to happen?


Motion orients users by showing how elements in a transition are related.

Speaking of relationships between elements, motion design can communicate hierarchy. Here, motion reflects the hierarchy between a parent element (the inbox) and a child element (the inbox message).

Hierarchy: Child

Here, motion unites the menu icon with the resulting action of an open menu.

Hierarchy: Peer

Motion indicates the hierarchical relationship between “Dogs” and “Cats,” peer items in the navigation.


  • Motion provides timely feedback and indicates the status of user or system actions.
  • Animated elements responding to keypad input provide feedback to show if the action was successful.

Feedback: Loading

Animated list items are placeholders that convey content is loading.

Feedback: Touch

Motion of a card makes selection, positioning, and release visible.

User education

The swipe-to-open action is animated to invite and encourage the necessary gesture.

User education: Location

The motion path of an item into a shopping cart teaches users the location of the selected item. This follows the same principle as the minimize example we saw earlier.

Motion Principle Focused

Motion focuses attention on what's important, without creating unnecessary distraction.

Movement in a person’s peripheral vision triggers a stimulus-driven shift in visual attention and is an example of bottom–up processing. This is in contrast to a goal-directed shift (top–down processing), where a person voluntarily adjusts attention to an area of interest. The instinctual attention shift to motion is a remnant of the days when we needed to quickly notice a snake in the grass and other forms of looming danger or potential prey.

On a web page, the periphery generally includes any areas outside the F-shaped pattern of reading. Blinking images and video advertisements in the right rail are the most obvious examples of utilizing peripheral animation for business-oriented goals (with their overuse leading to banner blindness and right-rail blindness), but even well-meaning animations can prove to be distracting and annoying (Clippy, we’re looking at you). Notifications appearing near the edges of the screen and promoting related content, recent activity, or the capability of live chat are all examples of peripheral animation that is intended to alert the user to relevant features or content, but in practice can be as interrupting and unwanted as a pop-up window.

NNGroup (“Animation for Attention and Comprehension”)


Let's try an experiment. Start reading this quote

Perceived animacy

How fast visual attention shifts toward a moving object in the periphery depends on the perceived animacy of the object. Factors such as the increasing speed of the object, the magnitude of its shift in position, and, whether this motion appears to be self-propelled (rather than caused by an external collision of some sort) all influence the perception of animacy. This means that elements that slide in or otherwise display a shift in position at any degree of speed will attract attention faster than elements that slowly fade in.

NNGroup (“Animation for Attention and Comprehension”)

Shortly after loading the homepage of Olark, a How can we help? window slides up from the bottom right of the screen with an additional Hey … window then popping up above it. While the animation certainly succeeds in alerting the user to the existence of the chat feature, its sudden appearance in the periphery of the user’s vision distracts from the primary task of consuming the main content of the page.

Source and media credits: NNGroup

The Back to Top link on the Festival of Marketing site slides up from the bottom left of the page as the user scrolls, a motion which immediately draws attention toward the element in the periphery of the screen and distracts from the main task of reading the main page content.

Source and media credits: NNGroup

The arrow button to scroll back to the top of the page slowly fades in at the right edge of the screen as the user scrolls down the page. This slow animation with no position change is less visually distracting than the slide-in animation seen in the previous example. Of course, another solution, which avoids the issue of possibility interrupting the user from the task of browsing products, is to always display the link somewhere within the page.

Source and media credits: NNGroup

Choosing an Appropriate Animation

Read the room

Consider the situation at hand, and the user's mood. This is an example from a Mac code editor called Espresso. When using "Go to line…", there is an animation of the popup disappearing, before the editor actually scrolls to the line requested. It does not communicate anything, it’s purely decorative. While such animations might be a delight in some cases, when debugging, users are typically frustrated already, and very goal-oriented. They don't have time for delight. They want to move on, fast. An their patience for gratuitous animation decreases even more with every additional line they need to look up.

Motion Principle Expressive

Motion celebrates moments in user journeys, adds character to common interactions, and can express a brand’s style.

In icons

Animating icons can playfully reinforce or add to the icon’s meaning.

Subtle animation in icons, illustrations, and product logos can add polish and playfulness to the user experience.

The icon animations in Owl, an educational app, are designed to reflect its colorful brand.

The main menu of Newton Running is revealed at the end of a lengthy animation sequence, which is then played in reverse once an option has been selected. Whenever users want to use the main menu, they must endure the entire animation sequence again. Gratuitous, purposeless animations discourage the user from interacting further with the website, as they needlessly waste precious time that could be spent absorbing actual content.

Source and media credits: NNGroup

Don’t get in the user’s way. Consider likely frequency in a typical visit. Keep frequent animations very short.

Another important aspect to consider when designing an animation is the frequency with which it would likely occur within a single visit of a typical user. Animations that are repeatedly encountered are roadblocks to content and lengthen the amount of time to complete a task. Users do not want to wait and watch a lengthy animation sequence over and over again, especially when it has no purpose other than being “fun” and showing off the coding capabilities of the developer. Remember: just because you can implement an animation, it doesn’t mean that you should.

Page Laubheimer is a Senior User Experience Specialist with Nielsen Norman Group. Video source: https://www.nngroup.com/videos/ux-animations/

Not mutually exclusive

Crane’s animated logo indicates hierarchy, but also adds polish and an extra moment of delight.


CSS transitions

  • transition makes style changes smooth, whenever possible.
  • It is actually a shorthand of transition-duration, transition-delay, transition-property, transition-timing-function
  • The minimum it needs is a duration, but it also accepts a property, delay, easing.
  • Both transition and its longhands accept comma-separated lists, to create multiple transitions with different parameters for different properties.
  • Keyword changes cannot be interpolated, but lengths, numbers, colors, transforms etc can.
  • For custom easing functions, you can use the cubic-bezier() function. cubic-bezier.com allows you to generate these visually.
  • Transitions convert abrupt value changes to smooth ones.
    But what if we want more control?

    CSS animations

    • Animations are more complex than transitions but give us more control.
    • We define animations with the @keyframes rule.
    • We apply animations to elements with the animation property.
    • The animation property is actually a shorthand for:
      • animation-name: Which animation to run?
      • animation-duration: How long should each iteration last?
      • animation-delay: Any delay before it starts?
      • animation-iteration-count: How many times should it play? (number or infinite)
      • animation-timing-function: How should it progress over time?
      • animation-direction: Should any iterations be reversed?
      • animation-fill-mode: How should it behave before and after it’s applied?
      • animation-play-state: Should it be paused?
    • At a minimum, a name and duration is needed for an animation to play.
    • All animation properties accept comma-separated lists of parameters, to apply multiple animations on the same element.
    • We can monitor the progress of CSS animations via the animationstart, animationiteration, and animationend events.

    CSS Animations allow us to create motion that goes through any number of arbitrary states

    Showing content smoothly

    Stuff that appears dynamically when the button is hovered would go here. E.g. a tooltip.

    For interpolation to be possible, all intermediate values need to be representable in CSS


    height: 0px 20px 40px 60px 80px 100px
    color: white rgba(204,204,204) rgba(153,153,153) rgba(102,102,102) rgba(51,51,51) black
    transform: rotate(0deg) rotate(5deg) rotate(10deg) rotate(15deg) rotate(20deg) rotate(25deg)
    z-index: 1 2 3 4 5 6


    display: none ??? block
    border-style: solid ??? dashed
    height: 1em ??? auto
    position: static ??? absolute

    Showing content smoothly

    Stuff that appears dynamically when the button is hovered would go here. E.g. a tooltip.

    Animating CSS variables

    Here no actual animation is happening because custom properties are not animatable by default. We can however "teach" the browser how to animate them, by using the [`@property`](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) rule.
    Page Laubheimer is a Senior User Experience Specialist with Nielsen Norman Group. Video source: https://www.nngroup.com/videos/ux-animations/

    Animation Progression: Easing

    Easing adjusts an animation’s rate of change, so transitioning elements speed up and slow down. In the physical world, objects don’t start or stop instantaneously. Easing is a technique that makes elements move as though natural forces like friction, gravity, and mass are at work.

    Easing in CSS

    Easing in CSS

    Frame-by-frame animation

    frames.png (500 × 72)

    Frame-by-frame animation

    Typing Animation

    Discrete animation is useful for a variety of things, not all as laborious as frame-by-frame animation. Here, we animate the heading to look as if it's being typed, by using two discrete animations.

    JS Animation

    			requestAnimationFrame(function scroll() {
    				let html = document.documentElement;
    				html.scrollTop += 10;
    				if (html.scrollTop +
    				    innerHeight <
    				    html.scrollHeight) {
    When we want to animate something that is not a CSS property, or even a CSS property in ways not currently possible, we can always fall back to JS animation (this was the main way to do animation before CSS transitions and animations). What does this do?


    For some, animation can be delightful…

    For others, not so much


    			@media (prefers-reduced-motion) {
    				* {
    					/* Too drastic, but better than nothing */
    					animation: none !important;

    In JS

    			const MOTION = !matchMedia('(prefers-reduced-motion)').matches;
    			if (!MOTION) {

    Don’t throw the baby out with the bathwater!

    Identifying triggering animation

    • Relative size of movement: Animations that move an object across a large amount of space are most apt to trigger a negative response for someone suffering from a vestibular disorder. The physical size of screen matters less than the size of the motion relative to the screen space available—so a small button with a 3D rotation probably won’t cause trouble, but a full-screen wipe transition covering the entire screen likely would. Animation that involves only non-moving properties, like opacity, color, and blurs, are unlikely to be problematic.
    • Mismatched directions and speed: Exaggerated parallax and scrolljacking animations are highly likely to be triggering. Much of the time, these effects involve background objects moving at a different speed than foreground objects, sometimes drastically. Animations that move a different direction than the user is scrolling, or in a way not directly linked to the speed at which the user is scrolling, also tend to be problematic. It’s not much of a stretch to see how that could be disorienting.
    • Distance covered: The amount of spatial distance covered by an animation is a factor as well. It’s virtual space, of course, but animations covering a large perceived distance can be triggering. For example, iOS 7’s 3D zoom transitions caused trouble because of the amount of virtual space covered so quickly.
    • Read more:

    For each animation or interaction you’re planning, ask yourself, “If this effect was stronger (much faster, or bouncier, or swoopier), would it be disorienting, or make me feel motion-sick?” If the answer is yes, then you can rest assured there are plenty of people in the world whose threshold is already low enough to be bothered.

    “Your Interactive Makes Me Sick” by Eileen Webb