Core Animation indeed

April 22nd, 2007
New iPad puzzle game:
Art Scrambles

Expect Leopard to surprise and delight with Core Animation, but animation itself has always been at the core of the Mac OS X user experience. Remember the first time you tried to log in with the wrong credentials and the Login Window shook? The window shook, the credentials disappeared, and you understood. That’s good design, made possible by animation.

Think of the many other ways you’ve seen designers try to solve that problem. An alert pops up saying invalid user name or password, or maybe that text appears directly in the window, perhaps near where you typed. A little yellow triangle adds a warning, and sometimes there’s a rude beep.

Solutions like these often add things and clutter the experience, complicating what was already a troubled interaction. The wonderful thing about animation is that, done right, it lets the designer replace clutter with an elegant simplicity.

Good animation is also fun in a way that can be hard to describe but unmistakable when you encounter it, perhaps because good animation builds on what we already know of the real world and how things behave. Recognizing familiar behavior helps us model in our heads what’s happening onscreen and leads to a stronger sense of mastery and confidence. Recognition → understanding → confidence → fun.

The animations in Mac OS X range from obvious to subtle and from tiny to enormous. They range in quality too, but the good overwhelmingly outnumber the dubious. Surveyed as a whole, they represent an impressive though under-appreciated investment by Apple, and a confidence that while you might not notice the individual details, you’ll certainly notice their combined effect.

And you do notice. It’s part of why you like using a Mac. And from what we’ve seen of Leopard, Apple TV, and the iPhone, it’s about to get…

…a lot more interesting.

 

Animated windows

Most of the time you spend on a Mac involves a window, so it’s natural that windows in Mac OS X feature a number of built-in animations, including drawers. Drawers animate out from one of the window’s edges, and by animating not only draw your attention to their contents, but emphasize their relation to the parent window. They hold things you’ll need in the window and when you do, you open the drawer, grab what you need, and close the drawer again. Like a real-world drawer they look as though they slide beneath the window surface.

Drawer


Sheets are also attached to windows, but slide down from beneath the window’s titlebar and remain above the window until you dismiss them. Sheets are modal—you can’t use that window until you dismiss the sheet.

Modal messages in earlier versions of Mac OS were awkward: they blocked everything until you dismissed them, and it was sometimes unclear who initiated them or what they referred to. Sheets addressed these problems by strengthening the visual relationship between message and window. They’re modal, but they restrict the modality to their window, leaving the rest of the system modeless.

By animating out from beneath the window’s titlebar, a sheet neatly clarifies which window displayed the modal message and which window the sheet refers to.

Sheet


When you minimize a window, the window shrinks from its current size and location and animates to a position in the Dock. Opening the window from the Dock grows and animates the window to its previous size and location.

It seems obvious, but the animation tells you what happened (the window minimized) and where the window went (to the Dock). Without the animation, you’d wonder and often be confused.

Shown in the movie below, Apple’s default Genie effect has been one of the more controversial animations in Mac OS X. Animating the minimizing window seems warranted, but many question the Genie effect’s technical and aesthetic merits. It ran slowly on older machines and OS versions and looks graceless to some, though this might be due to the harsh anti-aliasing artifacts resulting from the complex transformation, artifacts that should disappear with the approaching resolution-independence planned for a future OS release.

To address these concerns Apple quickly added an alternate Scale effect which respects the rectangular dimensions of the window as it shrinks into position in the dock.

Minimize Window


Safari’s RSS reader introduced a new overlay animation that emerges organically from the window’s edge to fill the entire window. Like a sheet, Safari’s new overlay descends from above when you click the RSS icon in the address bar, but future overlays might be equally effective sliding in from either side as well.

The animation provides a strong visual connection between the RSS icon and the overlay, and cognitively links the RSS and web page. When you see the overlay slide down, you understand that the web page is still there beneath the RSS, that both RSS and web page now fill the window with the RSS on top. That understanding, that feeling that the two share a physical space, is achieved through the animation.

It wouldn’t be surprising to see Safari’s Bookmarks view adopt this animation in the future rather than simply replacing the window contents with the bookmarks as it does now.

Overlay


Windows can resize automatically as their contents change, usually when responding to user input. In preference windows with multi-paned content for instance, clicking on an icon to select a pane causes the window to resize itself to fit the pane’s contents.

This subtle animation solves a delicate problem: different views sharing the same window have different size requirements, sometimes markedly so. A common but awkward one-size-fits-all solution employed in early versions of the Mac OS settled on a fixed window size large enough to fit the largest view, but left the smaller views with too much room. A later improvement, still found in the current Finder preference window, resizes the window but does so jarringly, without animation.

But with animation, you hardly notice, even when the window contents change as profoundly as they do in the movie shown below. It just feels right.

Resizing Window


 

Animated lists and drag-and-drop

Lists in Mac OS X are animated. The shuffle reorders the list when one or more of the list’s items change. It promotes an item towards the top of the list where you’ll notice it, or demotes an item to the bottom where you won’t. The shuffle usually occurs spontaneously to reflect changes in the user’s world—a friend signing into iChat, for instance—rather than to respond to anything the user did personally.

The animation catches the eye and guides it from the old position to the new, alerting the user that something interesting changed.

List Shuffling


When you drag something into a list in Mac OS X, the list often makes room for the new item by easing the existing items apart to either side, like bench-sitters accommodating a newcomer.

Lists Make Room


If you drag something to somewhere you shouldn’t or abandon a drag by dropping it onto the menubar, the dropped items animate back to their original spot. The animation confirms that the drop was abandoned, and reminds you where the drag originated. This can be useful when you’ve dragged the items a great distance.

Abandoned Drops


Dock

The Dock will hide automatically if properly configured. When it does, it slides away in a smooth motion then slides back as the cursor approaches that edge of the screen.

The animation gives you the sense that the Dock lies hidden just beyond the edge of the screen, as though it has physical presence. And sensing that presence, you naturally move the cursor over to that edge of the screen to retrieve the Dock.

Dock Hiding


Applications launch in the Dock with a gentle bouncing, a calm animation with a measured pace. This animation reassures the user that the application is launching as the user requested. Once the bouncing stops, the application is ready to use.

Application Launching


Once they’re running, applications can ask the Dock to flag the user’s attention by bouncing the application’s icon in the Dock repeatedly. How high the icon bounces is significant because, if the Dock is hidden, the bounce must clear the edge of the screen for the icon to be seen.

And when the icon bounces, it does so with a peculiar and asymmetric rhythm entirely different from the calm animation used for application launching. This odd rhythm naturally catches the eye—hey, what’s that bouncing over there?—and distinguishes it as a notification. You’re supposed to notice and to respond, which may be why many people find this animation maddening. It’s hard to ignore that icon for long once it starts bouncing.

Application Notification


Finder

When you drag items in the Finder, you can choose to have them snap to grid, their positions automatically aligned to invisible rows and columns. Drop an item between grid points and the Finder realigns it with an animation so gentle you might miss it.

The animation reminds the user that alignment is enabled and guides the user’s eye from the item’s old position to the new. Polite and effective.

Snap To Grid


When you open a folder in the Finder, the folder’s window animates outward from the folder’s icon, starting small and growing until the window is properly sized. When you close that window, it animates back towards the folder’s icon, shrinking until it disappears into the icon.

This quick animation is easy to miss, but establishes a visual connection between the folder and the window so that you understand they represent the same thing. When you close the window, the receding animation is handy the way it guides your eye to the folder icon, because the window might have been covering the icon making it impossible to see, or the icon might be covered by another window still open.

Opening A Folder


The animation you see when you open a file is similar but with a telling difference. When you open a folder in the Finder, you’re asking the Finder to show you the contents of that folder, which it does by animating the folder’s window out from the folder icon. When you’re done, you’re still in the Finder.

But when you open a file, you’re asking the Finder to open another application to show you that file. When you’re done opening a file, you’ve left the Finder and moved to that different application. The Finder conveys this difference by animating the file’s icon outwards toward the screen with a partial transparency. The effect is as though the file is opening towards you, opening so wide it moves beyond the plane of the computer screen. This simple animation happens in concert with a number of other coordinated effects: the Dock expands to make room for the launched application; the launched application becomes active; and the Finder moves into the background with the drop shadows and titlebars of its windows diminishing appropriately.

These animations and visual effects all coordinate to keep you oriented as you change applications, which might otherwise catch you by surprise with considerable confusion.

Opening A File


 

There are many other animations in Mac OS X, some of them well-known like Exposé and Dashboard, others quietly helping you to enjoy your Mac. See if you can spot them, and when you do, take a moment to appreciate their magic.