iPhone’s user experience features a brilliant animated language of navigational cues to help you understand where you are, where you’ve come from, and where you’re going. These animations aren’t just for looks; they actually help to make the iPhone user experience work.

The iPhone is much more than a next-generation iPod. The entire iPod user interface is linear: you can navigate forward or backward, but you can’t jump. You always know where you are because you can only get there one way. And the iPod’s relatively simple hierarchy of artists-containing-albums-containing-songs is well suited for the novel clickwheel, which translates rotary motion into a linear motion more suitable for lists.

But the iPhone is significantly more complex. It’s both multi-tasking and random access. You can be viewing your photos when someone sends you an email containing the phone number for a restaurant rendezvous that evening. You click that number to call the restaurant, and while you’re on hold, your friend calls to remind you…well, you know the rest. The iPhone is designed to let you do all those things you want to do, that you need to do, but that your previous cellphones never quite let you do. (Well, they let you, but it wasn’t easy.)

These animated transitions help make it easy.

Zoom in and out → moving between applications

Moving from one application to another zooms in or out with a dramatic transition. The new application appears tiny and far away then grows in size to fill the screen, while the old application either zooms out beyond the boundary of the screen, or simply fades away.

If you’re returning to a previous application, a reverse transition occurs, the current application shrinking from full-size to a vanishing dot while the previous application fades back into view.

Slide left or right → moving through hierarchies, and viewing collections

Choosing an item from a list usually slides left to reveal a detail page for that item. This is similar to how the iPod already works, but with a nice animation. This is still how you navigate your music content, in fact. When you want to go back, touching the collections button at the upper left slides things right again to restore the list.

Viewing a collections of photos uses the same transitions: slide left or right to see the next photo.

Slide up and down → Displaying utility panels

Touch any text entry box and the keyboard slides up into view. Whenever a similar collection of buttons or controls is needed, like emailing a photo or clearing an SMS conversation, a panel usually slides up from the bottom of the screen.

Utility panels can descend from the top too, as when Safari’s url entry panel expands and descends to let you type in a URL.

Fade in and out → switching between views

When you’re switching between similar views, like viewing your music by songs or by artist, the two views transition with a simple fade. This makes sense, as it lends a faint emphasis to the transition while remaining barely noticeable—just enough to reinforce the new view’s appearance.

Spin around → Selecting and modifying attributes

Some elements in the user interface function more like physical objects. On these elements, tapping the appropriate control causes the element to flip around so you can see the other side. You can already see this in Mac OS X with Dashboard widgets, which spin around when you click their little i control to edit their settings.

Spinning the element around like this strengthens the physicality of the element, giving elements like albums and the phonecall options panel (with the mute and merge calls buttons, etc.) a perceived weight and presence, even while cleverly ekeing out additional screen real estate without triggering a context shift with attendant risks of confusion. Instead, you just touch, modify, then touch again, all the while feeling as though you’ve actually modified a physical object without leaving your place.

These animated transitions are consistently applied throughout iPhone, though there are exceptions—like the way the list of videos slides down rather than left to reveal a video when you play it. Look for the transitions in Apple’s new iPhone guided tour video, and note how their subtle cues reinforce your movements as you navigate around, how they help keep you oriented when you take a call in the middle of listening to a song then end that call to resume listening, or when you call a number you received in an email then return to that email after the call.

When you’re doing those things, multi-tasking through conversations and emails and chats, you won’t think twice about iPhone’s little animated transitions, but they’ll be there, helping.

Monday, June 25th, 2007, 12:10 am    Trackback.