6-2 Better Navigation: ZoomWorld


Human Interface, The: New Directions for Designing Interactive Systems
By Jef Raskin
Table of Contents
Chapter Six.  Navigation and Other Aspects of Humane Interfaces

If you wanted to design a navigation scheme intended to confuse, you might begin by making the interface mazelike. The maze would put you in a little room with a number of doors leading this way and that. The doors' labels are usually short, cryptic, or iconic, and they may change or disappear,[1] depending on where you've been. You cannot see what is on the other side of a door except by going through it, and when you have gone through, you may or may not be able to see the room you've just left. There may not be a way to get directly back at all. Some rooms may contain maps to part or all of the system of rooms, but you have to keep track of the relationship between the map representation and the rooms you are presented with; furthermore, maps are not well suited to situations best represented by three-dimensional networks. The rooms in this description correspond to computer interface windows and web sites, and the doors are the tabs, menus, or links that are provided to bring you to other windows or sites.

[1] Adaptive menus have this annoying trait.

As legends and stories from ancient times inform us, humans always have been notoriously bad at mazes. If we could handle them easily, they wouldn't be used as puzzles and traps. When using a complex program, I often find, deep in a submenu, a command or a check box that solves a problem I am having. When I run into the same problem a few weeks later, I cannot remember how I got to the box with the solution. We are not good at remembering long sequences of turnings, which is why mazes make good puzzles and why our present navigational schemes, used both within computers and on the web, often flummox the user. Many complaints about present systems are complaints about trying to navigate. Partial solutions, such as "favorite locations" in browsers, have been created.[2] But what we are truly better at is remembering landmarks and positional cues, traits that evolution has bred into us and traits we can take advantage of in interface design.

[2] This works until you have so many that you cannot remember what they all are; then you need a "favorites of favorites" or another scheme to keep track of them.

The antithesis of a maze is a situation in which you can see your goal and the path to get there, one that preserves your sense of location while under way, making it equally easy to get back. An elegant solution is the zooming interface paradigm (ZIP), which in many situations solves the navigation problem and also provides a way around the problem of the limited screen real estate that any real display system must confront. Imagine, if you will, how readily mazes could be solved if only you could fly above them, see their layout, and go directly to your destination. A zooming interface paradigm offers that kind of fluidity and facility for many tasks you perform with computers. Although a ZIP is not optimal for all situations, I will concentrate on its positive aspects, with the aim of demonstrating that there are alternatives superior to desktop-oriented graphical user interfaces.

The ZIP described here is called ZoomWorld and is based on the idea that you have access to an infinite plane of information having infinite resolution. The plane is ZoomWorld. Everything you can access is displayed somewhere on ZoomWorld, whether it is on your computer, on a local network to which your computer is attached, or on a network of networks, such as the Internet.

To see more of ZoomWorld, you think of yourself as flying higher and higher above it. To look at a particular item, you dive down to it. ZoomWorld also has a content searching mechanism. The overall metaphor is one of flying, climbing to zoom out and diving to zoom in. You navigate both by flying above ZoomWorld and by doing content searches.

ZoomWorld is conceptually similar to the walls of a project planning room. After a while, the walls become covered with annotations, tacked-up sheets of paper, sticky notes, photos, or whatever else helps us to remember and to explain our ideas. When you come into the room, you may stand in the center and glance around, spot a place, walk over, and look at the material in detail. At other times, you walk directly to the place where the information you want to review or modify has been posted.

We can find things in such a planning room because we tend to remember landmarks and relative position, a fact sometimes called the psi effect and long known to psychological researchers. "The stuff about marketing is on the right wall, sort of lower down near the far corner," someone might tell you. On another occasion, you go right to a particular document because you remember that it is just to the left of the orange piece of paper that Aviva put up. As you work in the room, you sometimes step back to get your bearings. You don't have to step back far before you can no longer read the small print, but you can see headings and larger diagrams. From still farther away, you can make out only a few of the largest headings, colors of whole sheets, layouts of areas, and tell whether there are illustrations, diagrams, or cartoons on them, even if you can't make out just what is being illustrated or diagrammed.

The ZIP readily permits labels to be attached to images and to collections of images yet does not impose any structure, hierarchical or otherwise, beyond association due to proximity. I suspect that most users will tend to organize collections of images into clusters and that some will create informal hierarchies. For example, a large heading Personal Photos might, when zoomed in on, reveal smaller headings on groups of pictures labeled Baby Pictures, Vacations, Pets, Hobbies, Friends, Relatives, and so forth. Zooming in to the writing under the heading Baby Pictures might reveal the children's names, Agatha, Gideon, and Hermione. A professional photographer is likely to have a very carefully constructed and organized collection. Note that you are not required to remember the names; you find them as you zoom and glide about and decide whether the image you want is likely to be in the named category. The same can be done with films and collections of sound, although you may have to activate a film or a sound to make sure that it is the one you want.

The totally disorganized have hope: If you are one such, you can just lay out the images any old way and zoom around until you find the one you want. You may remember its approximate position due to your spatial memory, which will speed the search.

If you want larger characters, say, in a document you are reading, it is clear that zooming in makes the characters larger, but you may not be able to fit entire lines into the width of the display, making reading from the screen difficult. The solution in this case is to use a command to enlarge the font, making the line length, in terms of number of characters, shorter.

Our inherent tendency to remember position and landmarks can be put to work in ZoomWorld. The method of getting around will not be via scroll bars, which are slow. (Just consider, in Fitts' law terms (Section 4-4), the size of the arrow boxes you must click on.) Nor will it be by clicking on zoom-in and zoom-out icons or menu items, which are also slow, but rather by emulating what a person does in a planning room: stepping back to view large areas, then walking up to just the one that is desired, and finally leaning forward to read the fine print or using a magnifying glass to see a detail in a photo.

Zooming in, so that you can see portions of the space in detail, is probably best implemented as a quasimode (see Section 3-2-3). In this quasimode, the graphical input device button causes a real-time zoom-in to wherever the cursor is located: The center of zooming follows the cursor. The secondary graphical input device button can be used for this function. For compatibility with the application-free systems described in Sections 5-7 and 5-8, the zoom quasimodes can be positioned elsewhere, such as on a second graphical input device, on the keyboard, or as dedicated, labeled extra buttons on the graphical input device (see Appendix A).

Wherever the zooming controls are located, the point you are zooming in on is the cursor location, which can be adjusted during the zoom by the graphical input device, being used in its role as a positional pointing device. That is, during zooming, the system moves the ZoomWorld plane so that the cursor position is at or near the center of the display. If zooming is quick at least a factor of 2 in linear dimensions per second and has the appearance of being continuous, zooming to and from the cursor position will suffice as a graphical navigational tool.

In the planning room, you might put up larger signs over the main areas, signs you can read from anywhere in the room. Zooming operates similarly; the sizes of headings and text determine how far in you have to zoom before you can see details. This technique substitutes for, and improves on, hierarchical directories. A fast text search, such as LEAP, is an important adjunct, used when you need to find a textual detail quickly. A few distinctive geometric landmarks can also be used; see the rules for effective use of icons in Section 6-3 for what is meant by "few." A large red cross, for example, might signal an area containing emergency medical data in both the planning room and in a ZIP.

Without having the phenomenon pointed out to them, users quickly become familiar with the textures of the kinds of work they do. Spreadsheets, tables, text, bitmapped images, drawings, and other products of computer use each have their own visual characteristics even when seen from afar. The products of various coworkers, groups, vendors, and other creators of material will often be immediately recognizable.

A zooming space gives you a great deal of flexibility in layout. If a document grows in length or width, it can simply decrease its scale uniformly to make the entire document fit within the same region it did before its content increased. Similar space-making tactics can be used when a table or a spreadsheet is enlarged. Because you can zoom in, the text can always be made large enough to read. The opposite occurs when a document or drawing gets smaller. Blank space is unlimited, if the system is implemented properly; a command allows a new document to be started anywhere by copying a blank document, the ZIP analog of the GUI New command and documents can be allowed to overlap adjacent documents or be restricted in their growth by them. Internal links and pointers to web sites (URLs) can bring you immediately to other documents at a place and size determined at the creation of the link. Buttons can have as much information on them as you wish, including a complete manual, with examples, without affecting their simplicity when viewed from afar. Every feature can have an explanation built into it.

Zooming can also be nonlinear in time, starting more slowly and accelerating to full zoom speed, allowing for fine control of small changes without impeding large changes in scale. It can also slow down and briefly stop at certain predefined zoom ratios, making it easy to get characters to standard sizes.

Working effectively in a ZIP often permits, and sometimes requires, strategies that are unlike those used in desktop-based GUIs. For example, you can have a number of views of the same data kept on hand because real estate poses no limitations. As with the efficient temperature converter solution in Section 4-3-2, we let the machine do extra work or preparation that may never be used, in the interest of easing human workload. Comparisons can be effected by a split screen, which requires controls for splitting but which allows for independent zooming, and by a typical ZIP trick: moving copies of the two documents or two copies of the same document so that the parts to be compared are adjacent. The ability to move and to scale any object certainly applies to text objects, which is how you can make a document bigger and thus visible at a higher hierarchical (and graphical) level.

A footnote can be more than just a reference. You can zoom in to the entire referenced work. Zooming here is functioning like a link, except that to get back to the main discussion, you zoom out; you do not have to keep a trail of where you have been. To make it easy to find a set of documents, the documents themselves can be arranged in a distinctive pattern that is visible when zoomed out. A page with very large lettering can be seen while zoomed out and used as a title. Zooming out can serve in the role of a Back button in a browser.

Small-scale collaborative endeavors are easily modeled by having collaborators all zoom on the same document, with appropriate rules to prevent interference. A network can be represented as a space in which everyone's work is placed in his or her own region. In a ZIP collaborative space, you can choose to keep as much of your work visible or invisible to others as you wish. Invisible documents are also a way to implement varying levels of access permission.[3]

[3] An interesting zooming user interface (ZUI), called PAD++ (it is now called Jazz), has been developed independently, originally at the University of New Mexico. See http://www.cs.umd.edu/hcil/pad++/. I am grateful to Dr. Donald Norman, then at Apple, for pointing out this work to me.

A typical application for ZoomWorld arose in a design created for Apricus, which was trying to find a way to computerize a large (about a square meter) medical chart of the kind used in an intensive care unit (ICU). All of the methods tried proved slower than accessing the chart manually and also required excessive training; multiple displays could not be used to show the entire chart at once. Not only could ZoomWorld accommodate the chart, but also the same interface could serve as an enterprisewide database without significant extra development effort, allowing the company to extend its sights beyond automating the ICU database. The better interface allowed an expansion of the business model and the range of applications without requiring a more complex interface or any additional interface implementation, although a larger database was, of course, necessary. Figures 6.1?A HREF="#ch06fig08">6.8 show versions of ZoomWorld that were developed at Apricus.[4] In testing, it was found that nurses could use the system after less than one minute of training.

[4] My thanks to Apricus for permission to describe its version of ZoomWorld and for the use of some of the screens as illustrations. Many details and the implementation were provided by Drs. David Moshal and Emanuel Noik and their crew. The customization to the hospital setting is due primarily to Betti Newburn, R.N.

Figure 6.1. A ZIP view of an ICU. The numbered rectangles are rooms, and the names are those of the patients in them (no real data shown). (See color insert.)


Figure 6.8. Zoomed in to one area of the World Wide Web.


In Figure 6.1, the ZIP shows an ICU unit, surrounded by other units. You can zoom in to see the kinds of data available for any of the rooms, some of which are unoccupied. In Figure 6.2, you have zoomed in to room 132, and the major charts can be seen.

Figure 6.2. The charts for a particular patient can be seen when zoomed in this far.


You can continue to zoom in to a particular chart. When the text becomes large enough to be readable, it also becomes editable. In Figure 6.3, a horizontal time scale and a vertical set of legends have automatically appeared. These "float" over the background image so that as you move around in the chart, the scales stay in place relative to the screen. They automatically disappear if you zoom out to or beyond the point where the text is unreadable or if you zoom inside an entry in the chart.

Figure 6.3. The chart's entries are now visible and can be operated on. Floating headings have appeared so that the columns and rows can be identified.


For example, you might zoom in to a particular value and find useful data, such as normal ranges for the measurement or even a lengthy quote from a medical text. Note that such detail does not get in the way or take up any apparent display space, yet it is there, where it is needed.

The zooming can take place in the other direction. Climbing high above Figure 6.1, our first view of the hospital, you can see that the ICU unit is on Floor 1, and you can tell what other units are on the same floor. In addition, the physical layout of the floor is apparent (Figure 6.4).

Figure 6.4. Zoomed out beyond the view shown in Figure 6.1, the entire first floor is visible.


Fly still higher above the first-floor view, and the entire hospital becomes visible, with a one-story set of doctor's offices and a hospital tower of three floors (Figure 6.5).

Figure 6.5. The entire O'Connor hospital can be seen.


Gradually climbing still higher, the entire chain of hospitals can be viewed (Figure 6.6), roughly in their geographic alignment. It is a matter of seconds to get to any patient's chart in any hospital, and the means to do it are evident with only a few seconds of instruction. You could operate this interface from what you've read here, and you would do it correctly.

Figure 6.6. The entire enterprise can be accessed from this level.


It is not only patient charts that can be found from the ZoomWorld image of the hospital system. Assuming that you had logged on at the appropriate level of security, you could also zoom in on the comptroller's office, check on budgets, inventory records of medicines and supplies, and check human resources records or any other facet of the enterprise.

It is clear that ZoomWorld can serve as a database search interface for an enterprise or for a set of enterprises, governmental agencies, schools, and scientific data sets, to name a few examples. Three-dimensional objects are represented by a two-dimensional projection or other transformation on displays, although a three-dimensional ZoomWorld can be created.

Although moves within ZoomWorld are usually accomplished by zooming out and in to the new location, a short move that preserves readability and context is sometimes needed. Therefore, interface designer Emanuel Noik's implementation of this system included a convention that delayed the beginning of zooming. If the graphical input device was moved during the brief delay a few hundred milliseconds instead of moving the zooming point, the graphical input device dragged the image. In testing, it worked well, although in general, the use of such delays can cause problems (see Section 6-4-5); in this case, an occasional zoom when a drag was intended and vice versa was observed. Faster and more certain is to drag the image while both GID buttons are held. Either mechanism is superior to conventional scroll bars, which, aside from the difficulties already discussed, may require the user to decide whether to move horizontally or vertically first and then to decide whether to use the arrows, to move the scroll box, or to click above or below the scroll box. Such decisions cause Hick's law delays (see Section 4-4). Scrolling itself is inherently slow. The user is limited by the system's speed of scrolling, which cannot be made too fast because the user will not be able to see what is flitting by the window; zooming can be fast because the visual images don't change but only scale, and you do not lose your sense of where you are. Note also that when you zoom in, that area is active to the extent that you can operate within an area. You do not have to click or otherwise signal the system that you want to use whatever facility you have zoomed in on. The conventional concepts of "opening" and "closing" documents or applications do not apply, either in ZoomWorld or in the complementary methods discussed in this book.

If we zoom out from Figure 6.6, the image of the hospital enterprise gets smaller and is surrounded by empty space, like an island. As this happens, other islands come into view, and when we zoom in one of them, we find that it is a portal to the World Wide Web (Figure 6.7). From that portal, we can zoom in to a specific area of the World Wide Web (Figure 6.8).

Figure 6.7. A ZoomWorld portal to the World Wide Web.


It is clear how the World Wide Web is surfed in ZoomWorld (see Figure 6.9). Another island is your local system, its mass storage, and any other information that can be reached without going over a network. When a volume, such as a DVD, is mounted, it appears adjacent to your local system island.

Figure 6.9. Zoomed in on a list of browsers. Of course, ZoomWorld is a fine browser in its own right.


The consequence of this discussion should now be obvious: The zooming interface paradigm can replace the browser, the desktop metaphor, and the traditional operating system. Applications per se disappear. Combined with the methods described earlier in this book, ZoomWorld can simplify the use of computer systems in general. With care and understanding of cognetic principles, it can be built so as to completely conform to the requirements of human cognitive abilities and would be easier to implement, learn, and use than present software methods.

ZIPs may help alleviate another seldom-recognized interface design problem. We have acquired a fashionable verbal terseness in our interfaces, trying to find the ideal one word that will make the menu item meaningful, and have been forced into being cryptic in order to cram more labels on our displays. Sometimes, a few words or a sentence would better serve the purpose; in communicating, one should always use as few words as possible, but computer interfaces sometimes go beyond possible to the point of incomprehensibility. With a ZIP, screen real estate becomes more available, and we can more easily afford to maximize clarity rather than to minimize the use of pixels. Of course, even without a ZIP, we should always prefer clarity over brevity in our labels.

The current crop of interface-building tools cannot be used to build ZoomWorld. It must be programmed in a language such as Perl, C, C++, or Smalltalk; a reasonable mockup can be done with Macromedia Flash. If the programmers have not studied the rationale for the change in paradigm, when ZoomWorld or LEAP is implemented, the programmers and designers working on the project tend to slip in details that work in the old ways. Many times I've come in to review a client's progress only to discover that someone had built in a toggle or another modal feature or had used dialog boxes. Our old design habits interfere with maintaining the quality of these interfaces. The only solution to keeping an interface design on track is careful study of and attention to the fundamentals of interface design so as to take cognitive issues into account. That often means retraining the whole team, from management to designers to testers, so that they understand the parts of cognetic technology pertinent to their roles. The training needs to include a study of design heuristics not discussed in this book but well known to the human factors community.

On the hardware side, a mouse for working with a ZIP might have three buttons: two marked Select and Activate on top and one marked Grab on the side, and which might zoom in when you twist it clockwise and zoom out when you twist it counterclockwise, as with standard screw thread direction.


    The Humane Interface. New Directions for Designing Interactive Systems ACM Press Series
    The Humane Interface. New Directions for Designing Interactive Systems ACM Press Series
    ISBN: 1591403723
    EAN: N/A
    Year: 2000
    Pages: 54

    flylib.com © 2008-2017.
    If you may any questions please contact us: flylib@qtcs.net