In this article I will explore some of the Zooming User Interfaces out there today and also take a sneak peak of what’s around the corner.
Why Zooming User Interfaces
Consider this. You’re in a maze, unable to find your way out. Relying on maps you quickly lose your way since the human mind is not well suited for remembering long sequences of turns. Now imagine rising up in the air so that you can watch the maze from above. Suddenly it’s really easy to find your way out, or to find you way to any part of the maze.
The maze in this analogy are applications today, confined inside the constraints of the desktop metaphore. The map are menus, bookmarks and other aids we use to find our way.
Through the evolution of man we’ve relied on recognizing landmarks as means to find our way around. This is called spatial memory. We’ve relied on it to remember where we put our tools and hid our food. In ZUI’s we use this ability to find our way through vast amounts of data.
Are ZUI’s difficult to use or hard to understand? Personally I think that the widespread use of interactive maps such as Google Maps and Yahoo Maps have paved the way for Zooming User Interfaces. The zooming paradigm is natural once you’ve tried it and I suspect that it will be more and more common.
Examples of ZUI’s
Ever since I first got interested in ZUI’s I’ve seen an increase of them. Here are a several examples of applications using a Zooming User Interface today.
Prezi is a tool for making zooming presentations. With an intuitive user interface it’s easy to create pretty impressive presentations. The cool thing is that the tools your working with in Prezi blends seamlessly with the presentation.
I’ve made a simple presentation called Zooming Interfaces on Prezi. Check it out to see what I’m talking about.
Seadragon is a tool from Microsoft Live Labs that let’s you use really high resolution images which you can zoom in and out of. In the first part of this video from TED Talks Blaise Aguera y Arcas from Microsoft Labs demonstrates it.
The Seadragon AJAX Library
With the Seadragon AJAX Library it’s easy to embed single high-res images into a web page. This image is about 35 megapixel. Click around in it to zoom in and out.
Image from iStockPhoto
Seadragon is implemented in Silverlight through DeepZoom. This combination enables you to create amazing applications where you can seamlessely zoom through huge amount of image data. It’s also possible to add other information aswell. Check out the examples below to get a sense of how it works. I think that the Hard Rock Café Memorabilia is really impressive.
Here’s some great examples of implementations of DeepZoom.
- Hardrock Café Memorabilia
This is a display of memorabilia from Hardrock Café. By zooming and panning you can explore the content. When you zoom in on an object additional information about it is displayed.
- DeepZoom demo at Vertigo
This demo illustrates how to navigate content with a zooming interface.
Mooncake is another implementation of Seadragon. It allows you to pick pictures from a Flickr or SmugMug account. It then automatically process them into Seadragon images.
Here’s a simple example made from photos from my flickr account.
Zoomorama is a Flash based tool for making zoomable image albums. You can either add images directly through a web interface or install a desktop application. The desktop application provides you with more powerful tools to design the album as you like. You can for example add captions and arrange the images just as you like in it, something that’s not possible in the web app.
This is an example of a Zoomorama album created with the web application.
OpenZoom is an open source framework for the use of high-resolution images and Zoomable User Interfaces on the web. It uses an implementation of the Deep Zoom technique in Flash.
In part three of Daniel Gasienica article series Inside Deep Zoom there are several examples of implementations of this technique.
With creative use of the Google Maps API some people have created pretty cool ZUI’s. I’m sure that this was not the intended use for the API, but hey, why not?
Example of Zooming User Interfaces using the Google Maps API
- The Kremer Collection
The Kremer Collection is a collection of paintings where you can examine the details of a painting by zooming in.
Zkimmer uses the Google Maps API to display magazines.
Zooming User Interfaces in Comics
Cartoonist Daniel Merlin Goodbrey are experimenting with new ways to experience comics. In the comic PoCom-UK-001 he uses a Zooming User Interfaces for the viewer to read the cartoon.
Zooming User Interfaces on Mobile devices
On mobile devices where screen estate is very limited a Zooming User Interfaces has proved its value to organize information.
Safari web browser
The Safari browser on the iPhone is one example of this. By being able to zoom in and out of web pages, we overcome the limitations of the small screen. On the iPhone there’s also the wonders of the multitouch screen which makes it natural to zoom in or out by tapping or by using the pinch maneuver.
Firefox Concept Mobile Browser
Aza Raskin, Head of User Experience at Mozilla Labs, has developed a concept for a Firefox Mobile browser that utilizes a zooming interface among other interesting interaction techniques.
Aurora is a future concept browser that Adaptive Path has developed for Mozilla Labs. It utilizes a lot of new interaction ideoms, zooming being one of them.
About 2 minutes into this movie, theres a sequence that nicely illustrates a Zooming User Interfaces to browse data. In this interface there’s also the Z-axel which represents time. The older the content, the farther away it is. It also fades with time. Check out my article Visualizing the age of content to read more about this concept.
What others have written
Dmitry Fadeyev at Usability Post recently wrote an article called Zoomable User Interfaces, where he discusses the benefit of ZUI’s as well as providing some examples.
There’s also an article on Wikipedia on Zooming User Interfaces.
I can definitely see a trend in ZUI’s. Ever since I first started getting interested about it I’ve seen an increase in examples of it. I feel pretty confident that we’re going to see a lot more of this in a not so distant future. Do you have more examples of the use of ZUI’s?