
Watching Apple: A closer look at iPhone transition animations - PanMan
http://watchingapple.com/2009/11/a-closer-look-at-iphone-transition-animations/
======
JunkDNA
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.

~~~
ryangoins
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.

~~~
sjs
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.

~~~
encoderer
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.

~~~
weaksauce
I am curious how they got around the patent.

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

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

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

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

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

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

------
jmreid
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
I never noticed that before. The spotlight view works symmetrically: full on
when it's bound to appear, fades out when it disappears.

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

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

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

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

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

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

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

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

