Use Animation to Help Users Notice User Interface Changes

This article explains why you should use animation to help users notice changes in your user interface. When interacting with software, users focus on the task they want to perform, not on the software itself. As a result, some users just don’t notice UI changes that occur in one discrete step, even if they caused those changes. For example, I’ve been at usability tests where users didn’t realize that a sidebar pane was opening or closing even when those users repeatedly clicked on the toggle button to open and close the pane.

Whenever user actions causes changes in the state of your user interface, consider animating those changes. Don’t assume that users will notice changes in your UI, even if they interact with controls that initiate those changes. Animating UI changes gives users time to notice those changes happening. Animations don’t have to (and shouldn’t) last long; most of the animations I use last around 350 milliseconds.

Three excellent opportunities for animation are:

• inserting and deleting data
• disclosing and hiding controls
• opening and closing panes

Most smartphone and tablet users have seen insert and delete animations. Guesture-based interaction with animations on smaller screens provides an intimate interaction between user and device. However, animation is particularly important when this interaction intimacy does not exist, such as when users interact with native or web-based applications with a mouse on larger screen sizes. Often, the larger the screen size, the less likely users are to notice changes.

The video below shows how smooth animation enables users to notice changes in the Xcode, OmniGraffle and Word applications on macOS. Notice that Word’s ribbon animation should be much smoother.