Zoomable User Interfaces

Imagine for a moment how you would work on a real desk. Perhaps you want to proofread one document, make a couple of notes somewhere else, and fill out a form as well. Sure, most of us don’t touch a lot of paper these days, but think about those situations when we do. You can place documents on your desk wherever you want, provided your desk is sufficiently large. You have your tools, like the pen and pencil, nearby as well. The only limit to how much stuff you can put on your desk at the same time is the surface area of the desk.

If we then examine how a computer desktop behaves, we’ll see some differences.  One big one is that the area provided by the computer monitor is much smaller than that of a desk. What this means is that we can’t spread out all our documents over it without overlapping – we have to put them one over the other because there just isn’t enough space. This is even more problematic considering the computer gives not only a greater access to all our documents, but also an easier way to access them, leading to a need for virtual desktop real estate.

This poses a window management issue in operating systems. Suppose the user opens a lot of applications and documents. Inevitably, they start to open over the top of each other, covering up the contents of the stuff below. This creates a stack of windows, with stuff getting hidden underneath. How do we work with this? There are a couple of ways.

The first way is to hook up more monitors, which is actually a fairly practical solution, if somewhat expensive. The second way is to see if the operating system can help you out.

Windows goes for the Alt+Tab application switching or the “Flip 3D” mode where you can see all your windows as cards in a stack and then flip them round until you get the one you want. Mac OS X has a solution called “Expose”. It decreases the size of all the open windows until they all fit on one screen, allowing the user to then click on the one they want to enlarge them again. This window is now promoted to the top.

Flip 3D in Windows Vista

OS X also has a a feature called “Spaces”, which basically creates a number of virtual desktops for you. These virtual desktops are just copies of your regular desktop; you can fly from one to another with a shortcut. This lets you work with fewer windows in any one desktop, easing the window management issue. Virtual desktops like this are also available on Linux and Windows.

OS X “Spaces” showing an overview of 4 virtual desktops

Is there a better solution?

The root of the problem of course is that windows are getting stacked in the first place. People are losing stuff they need under more windows as they open them. This is because they just don’t have the screen real estate to have each window open at the required size without it blocking something else.

A potential cure to this root of the problem are zoomable user interfaces (ZUI). ZUIs provide a limitless canvas for your work. They do this by allowing you to pan across the desktop surface, as well as zoom in and out. This means you can have as many windows and documents open at the same time as your computer allows and you’ll be able to spread them across a limitless surface of your virtual desktop without any one of them blocking anything. 

Example of a ZUI interface

Indeed, because you can zoom in and out, you could potentially have objects at different distances going into the canvas itself. This would create a sort of 3 dimensional desktop where you can utilize the z-axis for window management as well. For example, open a bunch of related windows at a deep zoom level, zoom out, and the group will now only take a tiny portion of your screen.

Zoomable interfaces are already here.

While the desktop OS is still waiting for a proper ZUI implementation, we’ve actually already seen a very good implementation of ZUI in a consumer gadget. I’m talking about the iPhone. The iPhone has a relatively small screen, and while this isn’t a problem for most of the applications it runs, it is a problem for web browsing because most websites aren’t optimized for small displays. To solve this problem Apple implemented a ZUI in their Safari web browser on the phone.

Using natural finger gestures like pinching or spreading your fingers, you can zoom in and out of a website, as well as pan around it. This works very well because we never really read on the whole page at once – we focus on individual sections of a page and read those. Using the ZUI you can do just that, and because most of the smaller segments of the page are small enough for the iPhone’s screen the page becomes perfectly readable.

There is another successful implementation of a ZUI, this time on Windows (and the iPhone, too) called Seadragon. Seadragon is more of an interface than an app. It’s a powerful ZUI that allows you to place vast amounts of content on the screen without overloading your computer. When you zoom out, the content becomes smaller. Because our screens have a limited amount of pixels, we don’t need to load full pictures, just what’s visible at that distance. So by loading less and less details the further away you go, Seadragon is able to display hundreds of photos and even pages of a books on one screen simultaneously. When you zoom in, the full details are loaded.

Whole newspapers compressed into a small Seadragon window

Applying ZUI concepts to the desktop OS

What if we could break away from a fixed desktop and implement a limitless work area in which you could open all your documents and applications and simply pan around to view them all. Perhaps hold a key, like Control, and simply move the mouse around to pan. Maybe add a “mini-map” of all your items somewhere which you can use to jump directly to where you want. I think this is the next step in evolution after virtual desktops.

Perhaps you could store various apps at different zoom levels – or maybe applications would reveal more information when you zoom into certain areas. There are potentially a lot of things you can do with zooming. Here’s a very cool concept of a ZUI website: Zoomism – it’s a functional example interface, implemented using Flash.

You’ll have to zoom right in to each little area on Zoomism to find out what’s there

It’s interesting how little information or talk there is about this topic. Maybe this sort of interface just isn’t fast enough to operate or just isn’t needed?  What do you think about this concept? I’d love to read your comments or any examples you know of such interfaces.