Flying Pixels

August 13th, 2008 by Jeremy Chone

With the emergence of new technologies such as AJAX, Flash, and Silverlight, and popular applications such as Google Map and iPhone, the temptation for developers to fully and deeply animate their upcoming applications has become almost irresistible.

While slick animations and transitions are certainly useful for emotionally driven applications, such as car configurators, and some applications or components such as Google Map and charting, they should not be used as a substitute for a good interactive design. Application developers need to realize that these animations and transitions come at an extra design and development cost (no matter what tool they are using). 

In fact, the most successful and influential Internet consumer applications (e.g. Yahoo, eBay, Amazon, Craigslist, Facebook, FriendFeed, and YokWay) use animations and transitions relatively lightly.

In the desktop and mobile arena, Apple has become (and probably always has been) the most famous and admired pixel maestro. However, it is important to note that screen orchestration is a new art and comes at a cost. Even in Apple’s case, flying pixels come with a feature cost, whereas iPhone users can very elegantly scroll their contacts but cannot search them, and can slide from application to application but cannot cut and past between them.

Obviously, the point here is not that including animations and transitions is a bad practice, but that the animations and transitions need to be carefully and thoughtfully considered and planned. So, here are the good, the bad, and the five rules about flying [your pixels]:

The good

  • Natural Feel: In the real world, things do not disappear and reappear as they used to do on computer and mobile screens. As shade and gradient are making shapes easier on the eye, animations and transitions are useful techniques to bring a more natural feel to the application.
  • Visual Continuity: Good animations and transitions for some types of information can dramatically improve their access (e.g., maps and multi-level charting).
  • Perception: Perception is everything, and nowadays a couple of flying pixels can go a long way toward obtaining some good marketing/user buzz and management visibility. iPhone without the flying pixels would not be iPhone.

The bad

  • Distraction: Users can be overwhelmed by too many flying and flashing pixels, and developers can spend too much time animating them. The order of priorities should be: first, interaction design; second, visual design; and finally, “orchestration design.”
  • Perception: Cool flying pixels might give a false sense of design quality when, in fact, they can hide some serious design flaws or even deteriorate the real use of the application.
  • Costs: Flying is not free. First you need your team to learn new APIs, tools, and, sometimes, languages, and secondly, you need to acquire good screen orchestration design skills. Making moving parts feel natural is not as easy at it might seem (even with the right tools and APIs)

5 rules about flying [your pixels]:

  • Hire a pilot
  • Fly when you need to, not when you can.
  • Fly from A to B, not A to A.
  • Don’t fly too high — it might suck out all your oxygen.
  • Don’t forget to land.

 

My belief is that animations and transitions are like lipstick; the good ones are the ones you do not notice… except if you are selling lipstick, I guess.

  • Share/Bookmark

9 Responses to “Flying Pixels”

  1. Software to Rule the New Mobile Market | Bits And Buzz Says:

    [...] were disabled on early versions of Windows Mobile devices. Interestingly, iPhones 3G, despite its flying pixels, still does not have tethering nor allows it. I am not sure if it is an iPhone limitation or [...]

  2. iPhone vs Android vs WinMobile: 2-1-1 | Bits And Buzz, by Jeremy Chone Says:

    [...] Mobile Office and Outlook are readily available on Windows Mobile. So, if you do not care about flying pixels, virtual lighters, and virtual beers, then Windows Mobile is still a smart bet. (disclaimer: I am a [...]

  3. Dave Says:

    Yeah I agree, to an extent animations are cute (the pooch in the windows search screen for example) but after one or two they become overkill. I would rather have something functional that just does its job.

  4. Enterprise Web vs Consumer Web [2.0]: Top Six Differences | Bits And Buzz, by Jeremy Chone Says:

    [...] on Look and Feel aspects and confusing these attributes with usability. As explained in my previous Flying Pixels post, good looking is not necessarily smarter. Most successful Web applications (i.e., Facebook, [...]

  5. Oracle on Sun Java, MySQL, OpenOffice, and Linux | Bits And Buzz, by Jeremy Chone Says:

    [...] JavaFX as they realize it is the failed compiled client/server model all over again with some flying pixels, a cute, but weird, Java-like-but-not-Java language, with very low client [...]

  6. Myths about JavaFX, Android, and J2ME | Bits And Buzz, by Jeremy Chone Says:

    [...] Office team got very excited when Larry told them they should port their application to JavaFX. Flying pixels should rule the world! SHARETHIS.addEntry({ title: “Myths about JavaFX, Android, and J2ME”, url: [...]

  7. adjustable bed prices Says:

    There does seem to be a trend towards the more flashy of late. People like to pay for pretty graphics but quickly tend to abandon these kinds of products after a short while.

  8. Ash Says:

    I agree that these animations are becoming easier on the eyes. Shade is such an important aspect of this new world of graphics.

  9. UGGS Says:

    Yeah I agree, to an extent animations are cute but after one or two they become overkill. I would rather have something functional that just does its job.

Leave a Reply