November 7, 2007

Zoomable User Interfaces

In my last post I talked about the shortcomings of Flickr to provide you with enough context on where you've been, where you are and where you are going. A particularly interesting concept to adress this issue and provide users with more context are Zoomable User Interfaces (ZUI).

What are ZUIs?

If you use Google Maps, Google Earth or own an Apple iPhone you've already been exposed to zoomable user interfaces. Although these applications are fairly new — as far as I've read about the history of ZUI — the concepts behind them are not.

In 1963 Ivan Sutherland developed Sketchpad, today considered to be the first graphical user interface, which also featured a zoom function. Jef Raskin, the creative mind behind the Apple Macintosh user interface and author of The Humane Interface, was a a big proponent of ZUI. Part of his legacy lives on in the project Archy where the concept of zooming plays an important role. Aza Raskin, Jef's son and founder of Humanized, gave a talk at Google called «Away with Applications: The Death of the Desktop». If you've got some time at hand, I definitely recommend watching the whole session but the reason I am referring to it is the following sequence where he talks about zoomable user interfaces. The main point to take away from Aza's discussion about ZUI is

«Where it is, is what it is.»

What Does This Mean For Us?

Part of what he is trying to say is that we should take advantage of the excellent spatial awareness we, as human beings, possess. In regards to Flickr and tandem, it also means we should take advantage of certain mental models of entities we're used to such as photos, sets, collections and their relationships. Photos reside inside sets and sets inside collections. Why not represent this on the screen?

I think we should be able to navigate through Flickr's data model through zooming, not through pages. We should zoom into a collection and discover its sets. Then we zoom into the sets in front of us and discover the individual photos that belong to it. If we get the feeling of being lost we can just zoom out and find ourselves in the place where we came from. How awesome would that be? It's definitely a big step forward from using the back button which sometimes doesn't take us back to the exact place we were before. And because zooming is so continuous — that is without a page refresh — it is even more intuitive.

Imagine you're walking in a city and you take the wrong turn. When you realize it, do you suddenly re-appear at the block you were two minutes ago? No. You turn around and find yourself in more familiar surroundings. It's a continous, smooth process just like zooming. Unlike the sudden context switch which a page refresh represents. Browsing something rich such as Flickr by clicking through pages is like walking down the street blinking permanently.

You may have noticed that this early version of tandem does not quite implement the principles I discussed in this post. Although the zooming is quite continuous, it is indirect and only between two states.

To get an idea of how the zooming might look in the future, check out this bleeding edge version of tandem. However, be warned. Due to a nasty bug in the Flash Player for the Macintosh, the mouse wheel is not recognized without the use of a nasty hack (which I have not yet implemented.) [Fixed.] Furthermore, zooming from collections into sets and from there to the photos is not realized (yet.) This is certainly the part I will be spending most of my time on in the future.

Another subtle but interesting difference you may notice between the two versions of tandem is that I got rid of the paging navigation. I felt proud to have realized its shortcomings myself until I found out that I was obviously not the first one to do so. But let's talk about this another time…

Inspiration

Further Reading