Watching Apple: A closer look at iPhone transition animations

http://watchingapple.com/2009/11/a-closer-look-at-iphone-transition-animations/

by PanMan • 16 years ago

97 33 16 years ago

JunkDNA• 16 years ago

These little details are what sets a lot of their stuff apart. While I don't use it all that much, one of my favorite examples is the clock dashboard widget on OS X. The second hand wobbles at the very tip as it "clicks" into place. Most computerized renderings of clocks (even Apple's own clock in the system preferences) omit this detail. But it's amazing how much more lifelike it looks with the jiggle. Individually, things like that are not that important, but the collective accumulation of all those little details is what makes the difference.

ryangoins2• 16 years ago

Totally agree. Another example of this is with the sleep indicator. It pulses at the same rate that the average human breathes at, creating a calming effect. Really not important at all, but the attention to detail really does set them apart.

sjs2• 16 years ago

It is important though. Even with Apple knocking them out of the park every couple of years people don't seem to fully catch on. Dell added a sleep indicator to some of its notebooks and it pulses too quickly and is annoying. You need a control freak like Jobs that can go around and criticize every part of a system. You need someone that is willing to spend money to make things right.

edit: Even if people don't realize it breathes at the same rate as a human they notice subconsciously. Something about it is just right. Little touches like that make Apple products attractive to humans. Design matters. It's hard to hear for some geeks but the tech isn't paramount now that computers are mainstream.

smackfu2• 16 years ago

I do wonder whether if the whole "same rate" thing even matters or if its just bullshit that sounds good. Like why is that particular rate more calming? Because it seems like it should?

watty• 16 years ago

Interesting how the 3rd to last frame breaks the transparency of the hiding content. The blue arrow seems to be back to fully opaque.

pmjordan• 16 years ago

Not sure what's going on there, the 4th and 5th to last frames seem to be lighter on the whole, including the navigation bar.

If you click the image to zoom in you'll notice it's quite blurry, so I suspect it might not have been created as a screencap of the simulator but filmed off the device with a camera. That would explain the variation.

mattmanser• 16 years ago

The other day I was scrolling through my contacts in my iPhone when I noticed the animation for transitioning between one letter and the next. The letter separator docks at the top of the screen, becomes translucent and then the first contact starts scrolling underneath it. It fascinated and amazed me.

I think it's part of what made the iPhone so amazing and revolutionary, everything was looked at, everything thought about. And every now and then you notice something like the phonebook scroll which is delightful.

Yaggo2• 16 years ago

It amazes me, that even the device's web browser supports similar hardware-accelerated animations through CSS. What a beautiful implementation.

Yaggo2• 16 years ago

... and some Mozilla guy dares to say that Apple is going to abandon the web :(

StavrosK2• 16 years ago

The separators are always translucent, but I love how the new one pushes the old one up and out of view. I play with this a lot, even though I only realised it when you mentioned it.

cmelbye2• 16 years ago

If you look closely, there's a noticeable change in opacity of the section titles.

EDIT: Yes, in the Contacts app. The center of it gets lighter.

pshapiro• 16 years ago

"everything was looked at, everything thought about"

When I went to WWDC this year, the lead UX guy from Apple said that one of their major design considerations is how to make the interface seem like a real thing with which you're interacting directly (known as a NUI in some circles).

If you keep this mind it explains a lot of their UI decisions... For example, the letter headers pushing each other out of the way as if they could not occupy the same space at the same time.

camtarn• 16 years ago

As much as I love my HTC Desire, its interface doesn't quite stand up next to my iPod Touch for exactly these reasons.

For instance, the GMail app recently added the feature that the email subject line and 'from' line are always visible - but the way they implemented it was to pop in a reduced version of the message heading as soon as the full version is completely out of view. So if you scroll as you're reading the first two lines, there will be a brief period where you can't see all of the message header, then the header will pop in with no transition - right over what you were reading.

The iOS mail app doesn't have this feature, but the equivalent behaviour in Contacts is a lot smoother, since the alphabetical contact header just docks at the top of the screen as soon as it starts to move out of view, which feels a lot more natural.

All of these are tiny, tiny little differences that don't particularly impact the use of the system, but make a big difference to the overall feel.

Before I bought my iPod I must confess to having been quite disdainful of Apple fans. Nowadays I understand the difference a bit more.

nooneelse• 16 years ago

Odd, that isn't how it behaves on my Droid. The reduced header becomes visible as soon as the top of the full header gets under where the reduced header will be (so that it covers information which it replicates), well before any message text gets to that area of the screen. The most I can get it to obscure is the top half of the "To" address and the date that is on the same line. I tried altering my animation level, but can't reproduce the bug you mention.

wallflower• 16 years ago

I love the app switch animation that I got when I upgraded my 3GS to iOS 4. It makes it seem faster, even though the hardware is the same.

If you have registered as a developer with Apple, check out session 103 "iPad and iPhone User Interface Design" by Jay Capela and John Geleynse. John is the Director, Technology Evangelism and User Experience Evangelist at Apple.

Session 103 was one of the best at WWDC10. Geleynse talks about how hard it was to decide how to animate things in Keynote for iPad. For example, how long it took them to come up with the right animation for rearranging slides in the navigator - they ended up with a little "bump" animation as you moved a slide up and down.

http://developer.apple.com/videos/wwdc/2010/

While you're at it, Session 104 "Designing Apps with Scroll Views" shows you how precisely Apple engineers their own UI code to be efficient and elegant.

cmelbye2• 16 years ago

"Designing Apps with Scroll Views" is a fantastic session, and anyone using scroll views in their app should watch it. Before watching it, I never knew how much I was missing in terms of how I was implementing them.

stcredzero• 16 years ago

From what I've seen in the demos, WinPhone7 is going for the same feeling of aliveness through responsiveness of UI elements to touch input. It's amazing that Apple has developed this level of detail awareness in their UX technique and design. (This stuff is obviously all over desktop OS X as well.)

bnycum• 16 years ago

Technically the back arrow should slide in as well, but it seems the author put in a custom left button on the navigation bar to go back instead of letting the navigation bar do it's thing. I don't know his reasoning why but it's annoying if you are going to talk about how cool their transitions are and not do them correctly.

jmreid• 16 years ago

How about this one:

If you swipe left from your first home screen to the search screen, the icons dim gently as you swipe. If you swipe back to the first home screen, the icons are at full opacity right away and don't fade back in.

Timothee• 16 years ago

I never noticed that before. The spotlight view works symmetrically: full on when it's bound to appear, fades out when it disappears.

xtacy• 16 years ago

The other thing I like about OSX is the "instant on, no fancy flickering" way in which a Finder Window appears. On Windows (Vista, which I checked last), when you open "Computer", there's a green scrollbar on the top that races from left to right, flashes green when it's complete, the cursor turns from a normal one to an hourglass, the icons flicker, a "refresh" happens, the hourglass appears next to the cursor---all this gives a "dramatic" effect as if the computer has done an incredible amount of processing just to show the "Computer" window.

On the other hand, if you contrast it to what happens on OSX, the screen "just appears" without much fuss. This actually reduces distraction (at least to me).

glhaynes• 16 years ago

To me it gives the feeling of the Mac showing "real things" whereas Windows is showing some illusion, an abstract representation. Of course they're both just representations, but the Mac's solidity helps me forget that.

I think you're spot on when you mention the impression on Windows of the computer having done a tremendous amount of work just to put up that Explorer window. I note that I "irrationally" try to avoid having the computer do unneeded work — for example, if I accidentally kick off an "ls -lR" against the wrong directory, I jump to hit control-C as quickly as I can, even though I know full well that no harm beyond an infinitesimal fraction of a cent's worth of energy usage and wear & tear would be done by letting it continue to run for a few seconds.

jRoden• 16 years ago

That might just be your computer (or Vista?). On my netbook, on Win7, none of that happens. The only thing I noticed was a slight delay when the Start menu closed and I saw an empty desktop for a split-second before the Computer window Aero'd into existence. The filling of the window was also slightly asynchronous. No progress bar, cursor change, or icon flicker though.

usaar333• 16 years ago

I sometimes wonder if I'm the only person who gets annoyed by the many iPhone animations. I want the desired change to occur instantly, so I feel that a few hundred ms of my time is wasted whenever I see a rotate animation, app start/close animation, etc. And unlike on say Android, there doesn't seem to be a way to disable them.

Watching Apple: A closer look at iPhone transition animations

Related Stories