Some time ago, the graphical user interface became known as the point & click interface. The point being simplicity. Point and click, anybody can do it, but point & click, point & click, point & click, all day long and you have ... Windows 95. It would be like calling the file cabinet a pull and grab device, but the file cabinet isn’t a device for pulling and grabbing, but rather for storing information.
Point and click, the mechanics, we’re being dragged into the machine. The graphical interface is hardly graphical any more; it’s become the mechanical, textual, reading interface. It requires going to see if you want to be there. Would you go to India just to see if you wanted to be there?
We can do better.
How can we allow users to attend to the truly important? The problem is not so difficult as it might appear. It is in fact natural for us humans to process large amounts of information. Think of the number of bits we dealt with in the jungle long ago or on the streets of Manhattan today. It was necessary to take in lots of information and select the important for us to survive as a species. We can take advantage of great human skill thus evolved in nature.
Let us design around what we were before we were born. Let us design around skills like seeing red or tracking objects as they move, detecting edges and discontinuities, comparing shapes, noticing motion or changes of light.
Surround point & click, with see and go. Point & click becomes simply the snap of the finger that says yes, let’s go. But first you would have seen that you wanted to be there.
We can achieve in the world of the mouse something as rich and natural as the physical office and maybe beyond. To better something already of great wonder, it is best to appreciate the wonder so its values may be retained, and then to take on the power afforded in the new. The compututational tools we have built for interacting with information are more like the file cabinet, a great tool, but not as wondrous as the office that surrounds and includes it. It is no surprise that piles appear in offices; among other reasons, we fear that putting documents into the file cabinet, we will never find them again.
Even as we attend to the great values we must retain, we can aspire to transcend. We have something magical in this stuff called computation, and in striving to use it, we will articulate the laws of a magical realism. And those laws will be consistent with the natural laws of ancient and modern realities.
We builders of interactive tools have learned much on how to do this over the last dozen years of the journey. Many a "wide widget"new intensely graphical components that scale to large amounts of informationhave we built that embody our knowledge.
7 principles illuminate the path.
1. put graphics first
Seeing graphics is fundamentally different from reading text. If one person stands up in an audience of say a thousand people, I can instantly see him. I can decide whether the event is important, and thus, whether to attend or not. If 1,000 numbers are displayed on a screen, the numbers (like text) require a great deal of mental effort to process and understand. Turn the numbers into a thousand tiny bars and you can see instantly for example that some value sticks out. Or you can see the general distribution of values, or once sorted, you can compare the shape of the distribution to other distributions.
Putting graphics first in a sensible arrangement allows the user to see before going. Furthermore, graphical representations can be packed more densely then text, so much more information can be processed in parallel. Effective use of graphical marksof varying color, light level, texture, shape, size, iconography, so onand linking or arranging the marks in space allows a large number of objects and relationships to be quickly assimilated. So long as graphical properties that are perceived easily by humans are mapped onto underlying attributes of the information that are relevant to the task at hand, then the human will be able to decide when and on what to attend.
2. use the "grain of the wood"
Information has inherent structure, a grain. Trees, tables, time, documents, calendars, these are the spines that organize information. By designing tools based on such canonical information structures, they become potentially applicable in a wide range of situations.
Furthermore, these underlying structures are a resource for organizing the interaction in ways that reduce needless mechanical overhead. By spinning, shaking, sorting, and generally rearranging according to the inherent shape of the information, the interaction is at the level of the semantics of the information and thus becomes coherent and meaningful. The focus becomes the information rather than the tool through which we are viewing the information.
3. provide focus & context
Even using rapidly perceived and denser visual representation, there is still a fundamental limitation on available screen space. There is a tradeoff between showing a lot about a little and a little about a lot. One strategy for dealing with this is to switch between overviews (a little about a lot) and more detailed views like a page view (a lot about a little). However, the page view is awful when you want to read a map, and the map is awful if you really want to read.
An alternative strategy is based on seeing that these two types of view really form a continuum. In fact, many well-designed information layouts including magazine layouts and better designed portal Web pages combine the two in various ways. We can show an integrated view that shows a lot about some of the information (focus) amidst a little about much more (context). The focus becomes the area of current attention, and the context provides, well, context for interpreting the current focus as well as the resource for navigating and for changing attention.
4. animate the transitions
Animating the transitions between one arrangement of the information and another allows the user to connect the before and the after. In well-designed transitions, the user will not wonder what is going on. No conscious effort is spent since our skills of object tracking and constancy fuse the motion into a coherent, even as it is a magical, reality. Animating the changes of focus in a wide widget organized by an information spine, in particular, reinforces the coherence of the interactive experience.
Animated transitions are another example of exploiting our perceptual skills. Consider the ability of the eye/brain to fuse a series of images together to maintain a sense of object constancy when the images are delivered quickly enough. From our understanding of visual cognition, a speed of roughly 50-100 milliseconds per frame is fast enough.
5. create stable and consistent spaces
The desktop metaphor from its beginning was based on exploiting our spatial memory and thus the principle of stable and consistent spaces. Arranging information spatially in a way that is consistent across time and across manipulations allows users to improve their performance over time. Because of the intensely dynamic rearrangement of objects and space in a wide widget, this principle requires particular attention. As various warping techniques are used to achieve focus and context, much of the challenge becomes figuring out how to preserve some interpretation of the overall space, and the current arrangement of it.
Preserving the spatial relationship between an object and some absolute location like a home or root object allows a user to get back to objects from a top or central location. Or alternatively, preserving the relationship between an object and local relatives allows the users to use the widget to navigate relatively. For example, if children of an object are always to the right, then without even looking, a user can navigate down a hierarchy. These two modes of spatial preservation show that the tool can on one hand boost the user’s ability to learn how to use the tool regardless of information collection, or on the other, learn how to navigate in a particular information collection.
In any case, spatial constants can lead to tools that achieve a form of bi-directional relationship between amount of knowledge and facility of navigation. Knowledge about the information can speed navigation, or conversely, navigating naturally yields knowledge about the information.
6. favor interacting directly on the stuff
By supporting direct operations on rendered objects, a level of immediacy is achieved that supports an illusion of transparent interaction with the underlying information. One of the most prominent operations is a means of changing focus from one object to another. Pointing and clicking on objects to indicate interest and initiate changes of focus can eliminate the need for harder-to-perform interaction with distant scrollbars.
Other operations may align well with the structure of the information itself. The branches of a hierarchy or the rows and columns of a table are natural subcollections to leverage in an interaction. Associating operations with locations that conventionally represent these subcollections can enhance the fluidity and the memorability of the interaction.
7. spotlight results of computation in the same space
Given a view of a whole information set, search hits (or items matching by any underlying computation) can be marked saliently so that a user can see where they are and how to get there. Because hits are shown in context, effects like clusters of hits, near-hits, and isolated hits are easily seen.
This is a sharp contrast to getting back a long list of scrollable textual items that must be read. Spotlighting reveals information about the effectiveness of the query, where in the site it might make sense to browse, and unusual hits that may be interesting. All of these revelations allow the user to make better decisions about further use of time.
A more subtle virtue of spotlighting is that it ties search to spatial and visual cues, which are quite persistent in our memories. Imagine searching for something by a name that you just happened to see today in the paper, say the name of a division on a corporate Web site. In a week or two, it is likely that you will have forgotten the name and thus would have lost the ability to search by name. However, had you seen the results spotlighted in a space, it is likely that you will remember that the matches were, say, down in the lower left corner and thereby be able to get back to those pages.
When these seven principles are embodied effectively in an interactive design, a new level of interface experience is achieved. See and go loops back, creating fluid cycles of seeing and going. Neither perceiving nor acting encroaches on the "think" that can now rest calmly between the see and the go. Alan Kay to Mark Weiser have invoked Flow & Wittgenstein. We forget what we are doing as we are doing it. And we blind men begin to see with our canes.
Chief Technology Officer
Inxight Software, Inc
©1999 ACM 1072-5220/99/0900 $5.00
Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.
The Digital Library is published by the Association for Computing Machinery. Copyright © 1999 ACM, Inc.