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

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.

As you've mentioned OS X, it seems rude not to mention its built-in zoom feature - Ctrl+Scroll-Wheel (Ctrl+two fingers on touchpad for us laptop Applers) zooms into (and back out to 100%) the whole screen. I only learnt about this recently - don't know how much I'll use it, mind...

excel and word have nice zoom support

hold down ctrl and use the mouse wheel

> Ctrl+Scroll-Wheel (Ctrl+two fingers on touchpad for us laptop Applers) zooms into (and back out to 100%) the whole screen

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.

I wonder if Asa Raskin is working with Andy Hertzfeld, also at Google?

That would be neat.

I find it amusing that when I saw that image of Supreme Commander my first tought was "Hey look Spring!". I have even played that map, or a rather identical remake.

I don't think I will be able to test Supreme Commander in the near future so I can't say that Spring is as good or better. But atleast it's platform agnostic and runs impressively fast even with high graphics.

Turns out I do have Calibri on my system, it looks fine in a Word document, but not so good in Firefox or IE. Very strange.

Ok, it appears that the font-size: 90% is causing the problems with the Calibri font. Even without that the font appears slightly blurry on my LCD, but the 90% causes the other differences. So perhaps it's an artifact of an LCD screen.

Calibri requires ClearType enabled to look good. It's designed with the assumption that ClearType is available, and it looks pretty awful without it:

http://www.codinghorror.com/blog/archives/000356.html

Good post as always Jeff. Had fun with the flash demo - in some ways it's like the computer in the film Minority Report!

One that I've been having fun with lately is Microsoft's HDView: http://research.microsoft.com/ivm/HDView.htm.

They offer a simple command line tool named HDMake which can take a large image and split it into a series of tiles compatible with the HDView viewer (a small ActiveX control).

The viewer is slick; it's similar to Google Earth in that you can very smoothly zoom in and pan around, and only the pieces of the images necessary for the current view will be downloaded. It also adjusts the projection in real-time, so as you zoom in the image surrounds you and you get a better perspective of how the image looks in real life.

As an example, here's a 40 megapixel panoramic I created of Snoqualmie Falls in Washington: http://www.tonyschr.net/SnoqualmieSmall/SnoqualmieSmall.htm.

For a more extreme example, here's a 13 gigapixel image of Harlem: http://www.harlem-13-gigapixels.com/harlem_hdview.html

This has been implemented, in the field, by newspaper e-readers for several years.

It is certainly interesting to see these types of developments in the UI field. We are definitely moving towards a much more natural look and feel for applications.

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

http://wiki.beryl-project.org/wiki/Input-Enabled_Zoom

The UMD Human Computer Interaction Lab has been doing cool stuff with zoomable UI's for a while. http://www.cs.umd.edu/hcil/piccolo/index.shtml

They have a bunch of applications you can try out:
http://www.cs.umd.edu/hcil/research/

One of the coolest is Fisheye, a calendar display that maximizes screen real estate on a mobile device:
http://www.cs.umd.edu/hcil/piccolo/play/applet/fisheyecalendar.shtml

They've got C# and Java implementations available (http://www.cs.umd.edu/hcil/piccolo/learn/api.shtml) - don't just read about zoomable UI's, go build one!

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.

/cheer
F.O.R.

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

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

Definitely a believer in zoomable interfaces and have to plug for Innotive (www.innotive.com). You can see a demo on YouTube here:

http://youtube.com/watch?v=rZGGgEd6O7Q&mode=related&search=

Seems to me zoomable user interfaces have been "used" in sc-fi movies for 20 years or so.

Hasn't anyone noticed that Google Maps has zooming reversed?

I mean on most of the appplications I use that have zooming, it works so that when you scroll the wheel dowon, you zoom in. This seems natural to me, as you are getting closer into the image/document/whatever and the movement of the wheel is towards yourself.

But on Google Maps it works the opposite way. You scroll up, moving the wheel away from you, to get into the map.

I gues someone could argue that moving the wheel away from you, towards the screen you get into the map, thus come closer into it. But for me it's far more natural the other way.

Remember that file system viewer from the end of Jurassic Park. The one where the girl had to zoom into the file she needed to run. It exists here: http://fsv.sourceforge.net/.

WPF is vector-based / xHTML layout is vector-based. So there aren't any tech restrictions on that.

Legacy Apps is another story though. Basic idea is: with greater resolutions everything becomes sharper, but not smaller.

Jeff - the Vista Ctrl+scroll-wheel behaviour is completely different to the OS X behaviour (I installed Vista for my Dad last weekend - it was a 'free' upgrade for his new PC) - it's interesting to have icons so big that you can get four of them onto the desktop :-)

The OS X behaviour essentially zooms in and gives you a pannable partial view of the screen. As you move the mouse pointer, the screen pans and the mouse pointer gradually shifts from the centre of the screen (when the view is over the centre of the magnified screen) to the edge when the view is at the edge of the screen.

There's a good reason why the scroll wheel works well for zooming:

Zooming is scrolling in the 3rd dimension.

And just like no one likes a left-to-right scrolling application or web page, with zooming: starting users too focused so that they must zoom out will be a similar faux paux.

Let me site the Adobe Flex landscape zoomer component that does a good job at such an interface

Demo: http://demo.quietlyscheming.com/landscape/Declaration.html (slightly big download)
Author's blog entry: http://www.quietlyscheming.com/blog/components/landscape-zoomer/

The demo above is controlled using a menu on the left but it could easily be made such in Flex that the zoom happens on a click or some other event (keyboard or whatever)

Zoomable Unicode Table

http://ian-albert.com/misc/zoom-unicode.php

The same idea, but as expected (and as most of other implementations), pretty useless. Because on different levels of zoomign I'd better see different information, some kind of generalization of what's beneath - not a blind grey recatangle, but a NAME of it - a name of the file, chapter, part of the table, picture or gallery, song, album or genre, etc.

In contrast, Google maps do it properly - they show different data at different levels.

Thanx for this article and all excellent links. It's nice to see how research is going in the UI field. Current Desktop metaphor has became inconsistent and broken and I'm glad to see people who are working to fix this.

Nick is correct. OS X 10.4 (Tiger) features full screen zooming as he described. I don't understand why one (Jeff) would repeatedly question it without at least taking the 5 seconds it takes to Google it and verify it. Just Google:

"mac os x" desktop zoom

It's a very useful feature which is enabled/disabled in the Keyboard & Mouse System Preferences. When zoomed in on any portion of the screen, you can navigate to other areas of the screen simply by moving the mouse.

Just tried the Raskin Flash demo. Nothing original there. The exact same functionality has been in OS X for over two years (Tiger was released in April 2005). See previous post as well as Nick's posts. Everything you can do in that Flash demo you can do in Tiger.

I use OS X desktop zoom all the time -- so I can put youtube videos full screen, or so I can take pictures that I've got in iPhoto and full screen them so people further away can see them.

I've made a mockup of a desktop using ZUI and it is for my use as a graphic designer the perfect desktop replacement.
please enjoy at http://www.kub.fr/design/Grape.html

Some mouse software binds one of the X buttons on mice to use as a zoom. I have it at work for quickly zooming into Photoshop images.

Thought I would share that may be the closest to in OS zooming I have experienced. Plus it integrates seamlessly into flow of working.

Good post though, I believe zoom UI is much more needed though in future applications.

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

This is precisely what the zooming feature in OS X does. It's an accessibility feature I think, can't remember how to use it.

Mandriva Linux has something like this, called Metisse.

OS X's universal access zooms the screen, the entire screen, not just a window, the entire screen. it does (at this time anyway) do this by scaling the bitmap on the screen (realtime) and applying (if the user chooses) a bicubic filter to smooth out edges.

in a default setup of OS X Tiger, you need only press ctrl and scroll to activate, but you can set a whole bunch of options in System Preferences -> Universal Access -> Zoom.

It's not perfect, but it gets the job done rather well as long as you're not trying to get screenshots of the enlarged area.

So for once and for all, the zoom feature in OS X is not per app or per window or per whatever, it zooms everything. now if it could onlyzoom out and give me more space on my screen...

OS X's universal access zooms the screen, the entire screen, not just a window, the entire screen. it does this (at this time anyway) by scaling the bitmap on the screen (realtime) and applying (if the user chooses) a bicubic filter to smooth out edges.

in a default setup of OS X Tiger, you need only press ctrl and scroll to activate, but you can set a whole bunch of options in System Preferences -> Universal Access -> Zoom.

It's not perfect, but it gets the job done rather well as long as you're not trying to get screenshots of the enlarged area.

So for once and for all, the zoom feature in OS X is not per app or per window or per whatever, it zooms everything. now if it could onlyzoom out and give me more space on my screen...

How did that happen? I'm pretty sure i only clicked submit once. Sorry for that either way.

Oberon/Bluebottle from ETH Zürich has a pretty cool version of a zoomable interface, and has had it for years. Worth checking out, I think a somewhat recent version can be found here:

http://bluebottle.ethz.ch/

>When you refer to "post button below
>this comment box", it sounds like
>you're using in-browser zoom

Why is it so hard to believe that Mac OS X has native zooming built-in, and has had it for quite a bunch of years now? It's for people with poor eyesight, I think. Actually, even Mac OS 9 had a similar feature, if I remember correctly. I use it to watch youtube videos in full-screen.

Just to point out, Windows has come with a tool that allows you to zoom in on arbitrary parts of the desktop since Windows 95. Type "magnify" in the run dialog. It works slightly differently though, in that it doesn't magnify the entire screen.

The sort of stuff Aza envisions is *not* possible in MacOS currently. He is not just talking about simple zooming, but having the entire interface specifically designed around both zooming and the thus possible integration of applications with spacial awareness.

Currently in MacOS you can zoom in on the desktop and click icons, but you still have to explicitly click the icons to open them. Aza envisions simply zooming in on the icon and, once you have zoomed in close enough, the editor for the file is rendered in situ and you can start editing right there.

There is no longer, then, any distinction between open and closed documents and no concept of a forced hierarchy. You place your documents where you like in the 2D space and to edit, zoom into it and start editing.

The demo doesn't do the concept full justice, as currently you are just zooming around a static image. But imagine being able to edit the stuff once you zoom in on it. There are, of course, a whole bunch of issues that then arise, some of which I don't know how they will solve.

The videos good, I'd recommend it.

Lets not forget the Zoom UI in the Opera powered Wii Web Browser.

Its pretty awesome... It starts off showing the entire page and all you do is place your cursor over an area and hit the (+) button. It looks at the size of the content your cursor is over and zooms appropriately. You can then move up or down or zoom back out and select another area to zoom into.

Seems similar to what they might work well on the iPhone.

Also, WeFail.com, a design company, has done some pretty interesting site designs for merch companies on the zooming content, starting out very far.. and then either letting you zoom in, or doing it for you depending on your selection. I think they get quite a few things right in these "experimental" websites.

Here are a few to check out

http://www.bbdo.com/
http://www.mailorderchickens.org/
http://www.archive.amplifier.sofake.com/
http://facingnewyork.com/

Also check out Brett Victor's site

http://worrydream.com/

By the way, the BBDO site is so cool. If you play an audio (check out the one on Singapore), then zoom around, you can hear the volume become softer or louder and as you pan around, the audio appears on the left or the right hand side.

[ICR] is right, of course, while Mac OS X offers some kind of zoomable interface, it's not what Oberon implements or what Aza envisions. Again, I would encourage everyone to have a look at Bluebottle/Oberon. It has had precisely that kind of zoomable interface for years.

I remember when I first saw it. One of the developers showed us a presentation of Bluebottle running on Bluebottle. Starting up, he had a lot of files lying on his desktop. Among them were the slides of his presentation, aligned horizontally. He simply zoomed into the first slide until it was full-screen to start the presentation. Pretty cool and intuitive if you ask me.

So I know I'm commenting late but I had to post this. I had an old IBM Think pad that was actually nice to use. When I got it I was checking out what extra functions it had on the keys and one of them was the "Func+Zoom In/Out", I was curious to see it so I did "Zoom In". This is where the magic happened, that button all it did was change the resolution on the laptop screen from 1024x768 to 800x600 and so on... That is some kick ass new zooming technology there buddy!

LMAO

another example is Zdesktop, a zoomable file system explorer you can find at

andrea.l.vitali.googlepages.com

The Brain Maps API is a lightweight multiresolution image viewer that lets you view Zoomify images. It has been designed to be small and fast, and to consume very little memory, yet still be very functional and extensible. Future versions will enable you to add overlays to multiresolution images (including markers and polylines) and to display clickable labels. The Brain Maps API is a free service, available for any web site that is free to consumers. Available at http://brainmaps.org/index.php?p=brain-maps-api

Great article, Jeff. I'm working on a ZUI for my company, and I'm always looking for articles on the web for material to help explain ZUI concepts to my colleagues.

Given Microsoft's efforts in research projects such as Seadragon, I believe you gave them appropriate credit. You mention Jef and Aza Raskin at the top of the article, so you've certainly given credit where it's due.

Will Wright credits the movie "Powers of Ten" for inspiring ZUI aspects of Spore, his upcoming PC game. Spore includes key ZUI features such as the ability to zoom from a galaxy-level view, to stellar, to planetary, etc.

Readers may confuse proper ZUI-like zooming with magnification. The difference is "contextual zooming": objects don't simply appear larger or smaller, they actually change representational forms. Wright's demonstration of the "Civilization" stage of Spore shows contextual zooming: when viewed close up, a city is shown in great detail, but when viewed from a distance the city's features appear cartoony and exaggerated. (I believe I see contextual zooming in the screenshots from Supreme Commander, too.)

To Microsoft's list of ZUI advantages, I'd add the ability to maintain "focus+context" (for a definition, see http://www.usabilityfirst.com/glossary/term_361.txl).

Readers interested in learning more about ZUIs should check out The Humane Interface by Jef Raskin. CiteSeer.com has numerous academic papers related to ZUIs, including references to the earlier ZUI-related work. (The earliest example may be Spatial Data Management System by Donelson of MIT, a system from the late 1970s.)

Again, thanks for calling attention to ZUIs. I wish I'd found your article sooner.

Good post as always Jeff. Had fun with the flash demo - in some ways it's like the computer in the film Minority Report!

Thank you for taking the time to publish this information very useful!
Astrologie