Zoomable Interfaces

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!

good article indeed.

We’re at the Kitchen Budapest medialab developing a ZUI based presentation editor called ZuiPrezi.
It’s a flash application still in beta.

http://zuiprezi.com

and the open sandbox
http://test.zuiprezi.com/prezi/27/try/

regards,
Viktor

A ZUI which is much more a ZUI than all the others: http://eaglemode.sourceforge.net/

I’m trying to work out the Calibri font issue. Its really terrible - I had standard font smoothing turned on (because on my screens it looks just perfectly peachy that way) and just read some of the above posts that calibri font needs cleartype. But cleartype turns ALL of my fonts blurry, though it does improve Calibri. But this is kind of like cutting off your face to spite your nose? All of my fonts are perfectly clear and very happy with standard font smoothing, and ClearType just screws them all up. I’m running XP with some very nice IBM LCD monitors. I’m thinking of deleting Calibri and replacing it in the font substitution table with verdana or helvetica or something. Or maybe there is a way to tune my cleartype settings - though what a pain in the arse that would be, and why should I have to do that? blah.

Also strange is that Calibri looks really good in Word and in the font control panel, but looks terrible in Outlook and in Firefox.

Ok - I’ve made some significant progress. ClearType is problematic but while still not really working passes the standard of usability.

I found this website to be extremely helpful - ironically, its from the American Bar Association, who knew lawyers could be this helpful?
http://meetings.abanet.org/ltrc/index.cfm?data=20080922

I downloaded the MS ClearType Tuner and messed around with the settings. I essentially had to decide among:
a) Disabling ClearType and having all my fonts look razor sharp except for the new CT-Only fonts like the ubiquitous Calibri
b) Enabling ClearType with RGB striping - in which case the colors all look right but the fonts ALL look blurry and make me want to rub my eyes all the time
c) Enabling ClearType with BGR striping - in which case there are minor color artifacts in the text but the fonts look mostly clear and will result in only minor eyeball friction

I opted for C (though until the Calibri issue came up I had been perfectly happy using standard font smoothing.)

I found out along the way that under XP, IE and MS Office apps each have a separate option on whether or not to use ClearType, so this is why Calibri looked like poop in Firefox and Outlook but pretty good in Word. Odd.

Maybe my findings will be helpful to someone.

A new interesting online ZUI player is www.lila.io, who’s offering a Zoomable Rich Media blogging platform.

Check out this demo video where they use a standard HP touch screen.

http://www.youtube.com/watch?v=rJ6KlAiX27U

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…

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!

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 :slight_smile:

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.

Coming to this discussion a little after 8 years since this was posted. I’ve seen the video of Asa presentation before. We are looking to implement a zoomable UI as it seems like a perfect metaphor for the app we are building currently. There is a good bunch of research, utilities and results of usability testing performed on this. Thought I’d post it for someone who comes into this conversation today

Usability testing - http://www.cs.umd.edu/hcil/pad++/papers/bookchap-98-webbrowser/
“There’s a jquery plugin for that” - http://jaukia.github.io/zoomooz/

1 Like