In usability we trust

UX and all things web

The rise of Zooming User Interfaces

The first time I ever read anything about Zooming User Interfaces was when I was reading The Humane Interface by Jef Raskin, where he introduced the concept of Zoom World, a whole OS based on a Zooming User Interface (ZUI). Of course this wasn’t my first encounter with this type of user interface since I’ve, among other things, been using Interactive maps like Google Maps. But it was the first time that I started considering a Zooming Interface a viable alternative to the traditional interaction idioms.

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

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

Seadragon

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

DeepZoom

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

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.

Get Microsoft Silverlight

Zoomorama

Zoomorama

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.

Example

This is an example of a Zoomorama album created with the web application.

OpenZoom

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.

Google Maps

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
    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.

Watch a video on how this works on apple.com

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.

Read more about it onMozilla Labs and on www.azarask.in.

Future concepts

Aurora

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.


Aurora (Part 1) from Adaptive Path on Vimeo.

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.

Conclusion

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?

11 Comments

  1. Veeeeeeeery interesting, but I think until V8 and other Javascript virtual machines dont take popular place people should put limits on their JS apps.

    On linux things get ever worse, some JS apps hangs the whole browser.

    I love javascript, it makes sweet things but it must be used with care.

  2. For another example of a ZUI for comics, check out Infinite Canvas by Ian Gilman of the Live Labs Seadragon Team:
    http://infinitecanvas.appjet.net/

  3. Daniel: Cool, I haven’t seen those before. Thanks for the tip!

  4. Another ZUI interface is also Closer Viewer technology, that could also be used for free at http://www.closr.it.

    Thanks,
    d.

  5. Along with Zoomorama and Prezi you definitely need to add http://www.ahead.com; a creative web publishing and presentation tool for zooming web sites, presentations, portfolios etc.

    They provide deep zooming of hi res images and you can add most file formats incl. office and Adobe files 🙂

  6. Javascript Image Zoom called AJAX-ZOOM uses jQuery and PHP to show high resolution images, so “Javascript virtual machines” perform quite well, at least for me (Vista Firefox, IE8).

  7. Great article!

    I found also a related desktop project called Eagle Mode, which implements a ZUI as global navigation metaphor. Check it out here:

    http://eaglemode.sourceforge.net/video.html

  8. g. Thanks for the tip! It looks really interesting!

  9. I built an advertising medium in SVG that uses a zooming user interface, but I didn’t know it was called that until I read this. Thanks.

  10. There are a couple of JQuery solutions called Zoomooz and Panel Magic. Very lightweight and awesome.

  11. Corporate Identity Logo Design
    Professionally logos and corporate identities can play critical role to a business success. That’s why ADAM IT Solutions provide unique logo and corporate identities to our customers, which can uniquely represent them all over the world.
    Your logo… your Specific and memorable ID
    Your logo is the first image with your customers.
    An icon or colors that represent everything behind each company and the message that it transmits. ADAM IT Solutions creative design team will be able to provide you with the most unique, sophisticated and modern logo that will portray your company’s history, services and Impression.
    Sana
    0561422123

Leave a Reply

Your email address will not be published.

*