If you spend much time on the Apple website (and with the recent Philnote I bet at least a few of you have) you may pick up on something pretty clever. On a number of pages Apple is using an under-appreciated heuristic to both draw attention and explain interaction – motion.
On their main Mac products page you can see the effect in the horizontal nav bar they're using – as soon as the page is finished loading the scroll bar jumps from Accessories (the first item) to their line of computers, obviously their main focus. This not only draws the eye but also lets you know how to use the page. Granted a scroll bar is fairly self explanatory; a convention most people are used to. Less obvious is an example on the iPhone page. Load the page and see what catches your eye. It's not just the center splash graphic (although it is pretty obvious) but the right hand App Store listings, which expand and collapse.
Apple is stressing the App Store as a 'killer app' (no pun intended) for the iPhone. Pulling our eyes over to 'What's New' shows us things being added all the time, and then tells us how to check out the other categories – just expand another section.
Motion, like some other heuristics, is under-appreciated. Oftentimes it's used simply because it can be (Flash pages are especially guilty of this). Ads like to use it to get our attention (and, at least for me, piss me off). Motion used well is rare, and something we should explore.
Any other good examples of effective use of motion out there? We'd love to check them out.
I'd be remiss in not mentioning a timeless, obnoxious use of motion to draw the eye. I had to resist the urge to title this entire post <blink>
Wow - I had never noticed that until you mentioned it. It's a fantastic example.
Perhaps one of the main reasons that animation hasn't been used well is that Interaction Design tools, except for a select few, don't support animations very well. The standards - OmniGraffle, Visio, Axure, iRise, whiteboards, etc - really aren't built to handle animation. Thus, communicating the timing and feel of the motion is very challenging.
Here's one example of how difficult it can get: http://wireframes.linowski.ca/?p=14
I'm excited to see what Adobe brings to the table with Flash Catalyst. The demo videos look promising. In the next few years, many design tools will need to move towards supporting animation in a graceful manner. This is especially true as libraries like JQuery make Javascript animation a breeze.
@Loren Great link, man is that complex. I completely agree that wireframing tools are going to have to start accounting for the expanding toolbox designers have to work with - and not just animation but other types of input and output that we're barely scratching the surface of. Maybe Catalyst will get us part way there.
Nice article! I had noticed the jump, but when you put it like that it times total sense for Apple to invest time for innovation at every corner.
@Faramarz One thing we've noticed over time with Apple is that, for better or worse, they don't do much of anything without thinking through a lot of small details - often details many of us wouldn't even consider.
Mark pointed me at another great example: http://playgroundblues.com/. The left hand nav would be completely invisible were it not for some animation when the page loads.