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.

This is a companion discussion topic for the original blog entry at: http://www.codinghorror.com/blog/2007/05/zoomable-interfaces.html

I can’t tell you how many times I’ve gone from working with Google Maps or a PDF and then surfed the web and tried to zoom in on something only to be woefully disappointed.

As an aside, Jeff, in the comments to the prior entry about Microsoft you asked me to `prove’ my personal observation that you were a bit of a Microsoft cheerleader. I offer for the prosecution this post: Despite Microsoft being an also-ran in the space, demonstrating nothing of real consequence, the products in question having no market presence of consequence, with Microsoft not presenting anything innovative or new (with much of the products being research or closed alphas), you sure have given a lot of credit to them in this space, despite none of the products mentioned having anything to do with development, which is supposedly your interest in Microsoft.

That is pretty much the definition of cheerleading.

One of the first “zoomable” interface widgets I remember seeing was in Apple’s iPhoto. Grab the slider and zoom in or out on the number of photos to display in the grid at a time. The two-finger pinch and zoom Apple is going to have in the iPhone looks like a great application of gestures and zooming.

I’m not sure this is the same thing. CTRL+mousewheel in Vista is equivalent; it makes all the icons on the desktop larger or smaller. It does not do a true zoom on the desktop.

On OS X it’s definitely a full screen zoom, I can make the post button below this comment box nearly the whole width of a 17" screen , at that level of zoom it’s aliased really badly, but hopefully true resolution indepence in Leopard will fix that.

I haven’t seen Vista’s implementation, only played with it on a non-aero capable machine.

The Seadragon image is intriguing. When you’re navigating the web, the relationship between pages is basically a graph. In this presentation, the size of each page shown is inversely proportional to the weight of the path from the current page to that page.

Since web page graphs typically have cycles, you can get a sort of fractal effect as you navigate to sub pages, and then to more sub pages. Each “zoom” operation effectively moves you along an edge of the graph and adjusts the weights of the paths to nearby nodes, creating a new set of preview images of varying sizes.

Since it hasn’t been mention, another interesting zoomable interface is Beryl for Linux. The Sacle Effect plugin is very similar to Expose and there’s the Input-Enabled zoom that allows you to zoom the whole desktop


anyone remember photomesa ?
used a knapsack algorithm to stick images inside a zoomable frame.
combine that with a little drag n drop and photo management would be much simpler.

A good example why MS suck. I had to install Photosynth. OK, I saw the demo. Now, how do I uninstall that Photosynth?

On the topic, there’s another example of zoom-related application: http://www.zoomify.com/

Opera has had web page zooming since version 5, which was released in December 2000.

Also, yeah, Calibri without ClearType just plain sucks. I might have to deinstall it from my PC - people are starting to use it more and more, without paying attention to millions of those who don’t have CT enabled, nor wish to enable it. Bad typography is basically on the level of “page designed for browser X, screw you if you’re not using it”.

Back on the topic of zooming: I wish every application supported it natively. Yes, there are different screen magnifiers, but sometimes they’re very awkward…

you sure have given a lot of credit to [Microsoft] in this space

Dennis, here’s everything I cite in this post.

  1. Asa Raskin
  2. Jef Raskin
  3. Humanized
  4. Seadragon (MS)
  5. Photosynth (MS)
  6. Silverlight (MS)
  7. Google Maps
  8. Live Maps (MS)
  9. Expose
  10. Flip3D (MS, but only as a negative comparison)
  11. Aperio
  12. OLPC
  13. iPhone
  14. Nintendo DS
  15. DeepFish (MS)
  16. Supreme Commander

So out of 16 citations, I mention Microsoft technology 5 times. I don’t agree that I “sure have given a lot of credit to them in this space” as you assert. All I did was cite every source that had something interesting in the area of zoomable UI.

You might argue that since I live primarily in the Microsoft ecosystem I am more likely to cite them because I tend to be familiar with what they’re doing. But 5/16 citations or 31% is not unreasonable.

Jeff, with all this talking about zooming, I can’t help but tag a link in here about ‘zoom’ layouts:
Joe Clarke’s site: http://joeclark.org/access/webaccess/zoom/

Sure, it’s a different kind of zooming, but it might just be as important for anyone designing web sites/applications/whatnot.


I can make the post button below this comment box nearly the whole width of a 17" screen

When you refer to “post button below this comment box”, it sounds like you’re using in-browser zoom, which again, is not the same thing. What we’re talking about is zooming not just the contents of the browser window, but everything on the desktop-- every window, every icon, every pixel. You could have a super-giant virtual desktop and zoom in and out of it at will, exactly as pictured in my Supreme Commander example.

But you’re right that zooming UIs do imply that the underlying apps are built with vector-based technology.

Heh… just tried out the ctrl+scroll wheel thing. Zooms everything in opera nicely!

Of course, I’ll probably continue to use +/- and * instead.

Mouse wheel zoom is great, but I sure wish there were a standard for which direction is in vs out. Switching from Firefox to Google Earth to Word etc, I’m guaranteed to get it wrong half the time…

“When you refer to “post button below this comment box”, it sounds like you’re using in-browser zoom, which again, is not the same thing.”

No, Ctrl-Mouse-Scroll-Wheel on OS X is not browser zooming, it is full-desktop zooming. Since the entire desktop in OS X is a video card composite, zooming in to it is smooth and easy. As you move your mouse around your “view” of the desktop moves with it.

However, yes, without resolution independance enabled in Tiger, the zoomed view tends to look very pixellated. However, if you need to mouse with a high level of precision, or want to show someone across the meeting table a small part of your screen, the zoom is very useful.

The technology behind SeaDragon is standard stuff : wavelet L.O.D.

We are talking stuff that are at least twenty years old. And there is no innovation here.

It’s also part of JPEG2000, which Microsoft apparently never integrated in Internet Explorer. Do you have an idea what the experience in web browsers would be if Microsoft did?

yeah!!! true.
we use them in our life like google map and gps navigation… but didn’t think much about this.

Does anyone else think it’s funny that the Seadragon icon looks like Debian’s?

In Firefox and other applications, the Ctrl+ ‘+’ for zooming is an extremely useful feature… I always find myself wishing that Acrobat ran with it. I do like how you pointed out “Don’t Make Me Think” in the post… it must be the single, most important tenet of UI design.

Good luck with this. It’s cool but Hillcrest Labs owns the patent on it.