Watching Apple: A closer look at iPhone transition animations | Hacker News Reader

Watching Apple: A closer look at iPhone transition animations

watchingapple.com

97 pointsPanMan33 comments

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.

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.

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.

The one on my Vaio pulses similar to my wifes Macbook.

Not all PC makers are clueless.

I've long thought Sony to have the finest industrial design this side of Apple.

I am curious how they got around the patent.

http://www.freepatentsonline.com/6658577.pdf

They license it?

Or it's different enough to not conflict?

I don't know.

Patents are stricter than you may think and the descriptions of them in the media often gloss over what is actually being patented.

Agreed. If there were no MBP there's a good chance I'd use a Vaio Z.

You're definitely right. I suppose I just meant that it's one of those little things that doesn't make or break a computer, but it's those same things that sets Apple apart from the rest.

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?

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.

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.

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).

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.

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.

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.

"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.

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.

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

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.

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.

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

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

while tweeting from a native app http://daringfireball.net/linked/2010/10/21/beltzner

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.

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.

Hmm, odd, not on mine. Are you looking at the Contacts app? If you're looking at something that has a non-white background, it might be because of the blending.

I think your eyes are playing tricks on you.

"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.

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

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.

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.)

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.

Reply on news.ycombinator.com