Guides and Sample Code

Developer

macOS Human Interface Guidelines

iBooks

Animation

macOS uses subtle, meaningful animation to give people feedback and help them understand the results of their actions. When you use system-provided UI elements, you automatically benefit from the animations that macOS builds in. If you want to create custom animations, approach the designs with the goal of enhancing clarity and communication in your app.

For example, when users duplicate a TextEdit document, the copy springs from the original and becomes the active, key window.

image: ../Art/animation_2x.png

Avoid gratuitous animation. Animation that serves no purpose or is illogical quickly becomes tiresome and irritating to users. Be sure that the animation you add enhances the user’s understanding of your app’s functionality.

In general, avoid using animation as the focus of the user experience. Unless you’re developing a game in which animation plays a major role, use animation to enhance the user experience subtly. If you place too much focus on animation in your app, users are likely to become distracted from their task. The best animation helps users understand what’s going on, without drawing attention to itself.

Use animation to clarify the consequences of user actions. Showing users the results of an action before they commit to it helps them build confidence and avoid mistakes. For example, items in the Dock move aside when users drag an object into the Dock area, showing where the new object will reside when they drop it.

Animate a window's transition to and from full screen, if appropriate. It can be a good idea to supply a smooth, high-quality animation to replace the default transition. Creating a custom animation works especially well when your window contains custom elements that might not be able to participate in the default transition. For example, if you display a secondary bar below the toolbar (such as a “favorites” bar), make sure that this bar transitions along with the toolbar when the window goes full screen.

Aim for realistic motion. Sometimes, realistic movement can help people understand how something works even more than realistic imagery can. For example, macOS uses the rubber band effect to show users that they’ve scrolled to the end of a window’s content or come to the last full-screen window or desktop. Take the time to investigate the physics that dictates how the objects in your UI might move so that you can enhance the user’s understanding.

Use animation when an object changes its properties. Showing an object’s transition from one state to another, instead of showing only the beginning and ending states, helps users understand what’s happening and gives them a greater sense of control over the process.

Use animation when an action occurs so quickly that users can't track it. When it’s important that users understand a connection or a process, animation can help them watch actions occur in a more human time frame. For example, when the user minimizes a window, it doesn’t just disappear from the desktop and reappear in the Dock; instead, it moves fluidly from the desktop to the Dock so that users know exactly where it went.

Avoid animating routine actions supported by system-provided controls. Users understand how common UI elements work, and they don’t appreciate being forced to spend extra time watching unnecessary animation every time they click a button or switch tabs.

Avoid animating everything. Although it’s tempting to think that more animation results in great clarification and better feedback, it’s not generally true. Most tasks and actions in an app are best performed quickly and with a minimum of fanfare.