Coding Horror

programming and human factors

Zoomable Interfaces

Asa Raskin, the son of the late Jef Raskin, recently gave a presentation at Google on the work his company, Humanized, is doing. It's largely a continuation of the work of his father. One of the most interesting aspects of Jef's work was zoomable user interfaces. Asa's demo of zoomable interfaces starts at 1:05 in the video. You can interact with the very same flash demo on this page; scroll down to "Launch the Zoom Demo", and be prepared to wait a bit, as it's an 8 megabyte Flash file.

Although popularized by Jef Raskin, Humanized isn't the only company working on zoomable user interfaces; Microsoft has Seadragon:

Seadragon zoomable UI screenshot

You can experience the Seadragon technology in Photosynth, which is also being ported to Microsoft's Silverlight. According to Microsoft, zoomable UI has these advantages:

  1. Speed of navigation is independent of the size or number of objects.
  2. Performance depends only on the ratio of bandwidth to pixels on the screen.
  3. Transitions are smooth as butter.
  4. Scaling is near perfect and rapid for screens of any resolution.

Zooming user interfaces are rare in current operating systems and applications, but there are a few. You're probably already using at least one zoomable user interface without thinking much about it.

  • Most modern mapping sites (Google Maps, Live Maps) allow zooming in and out, with varying degrees of smoothness and fidelity.
  • The Expose feature in OS X is a limited form of zooming in and out of the desktop. Vista's Flip3D is a far less useful imitation, but fortunately there is an excellent clone available.
  • Ole Eichhorn's company Aperio implemented similar zoom techniques to allow the viewing of terapixel images in the browser. You can dynamically zoom in and out of a 3 terabyte image compressed into 144 gigabytes of data.
  • The OLPC Sugar UI heavily leverages the Zoom metaphor in its design.
  • Many mobile web browsers, due to their tiny screens, implement zoomable interfaces for navigating the web. The Apple iPhone, the Nintendo DS, and DeepFish for Windows Mobile all use this technique to render web pages.

What really struck me about zoomable UI is how intuitive and usable it is in the right situation. The zooming metaphor is central to the new real-time strategy game Supreme Commander; you're constantly zooming into the battle to take control of individual units, then zooming back out to get a larger, strategic view of what's happening on the battlefield. It's totally natural and completely intuitive. You don't have to think; it just works the way you'd expect it to.

Supreme Commander zoom levels

I'm not sure when the mouse scroll wheel became standard equipment on computer mice, exactly, but I'm awfully glad that it did. Zooming is a natural metaphor that people adapt to as easily as they do to scrolling. Zoomable UI is woefully underused today, but I think it should be an integral part of our desktop operating systems in the future.

Written by Jeff Atwood

Indoor enthusiast. Co-founder of Stack Exchange and Discourse. Disclaimer: I have no idea what I'm talking about. Find me here: http://twitter.com/codinghorror