Visually displayed information should, according to Tufte:
Enforce visual comparisons
Show causality
19_084113 ch14.qxp 4/3/07 6:07 PM Page 314
314
Part II: Designing Behavior and Form
Show multiple variables
Integrate text, graphics, and data in one display
Ensure the quality, relevance, and integrity of the content
Show things adjacent in space, not stacked in time
Not de-quantify quantifiable data
We will briefly discuss each of these principles as they apply to the information design of software-enabled media.
Enforce visual comparisons
You should provide a means for users to compare related variables and trends or to compare before-and-after scenarios. Comparison provides a context that makes the information more valuable and more comprehensible to users (see Figure 14-9 for one example). Adobe Photoshop, along with many other graphics tools, makes frequent use of previews, which allow users to easily achieve before and after comparisons interactively (see Figure 2-2).
Show causality
Within information graphics, clarify cause and effect. In his books, Tufte provides the classic example of the space shuttle Challenger disaster, which could have been averted if charts prepared by NASA scientists had been organized to more clearly present the relationship between air temperature at launch and severity of O-ring failure. In interactive interfaces, modeless visual feedback (see Chapter 25) should be employed to inform users of the potential consequences of their actions or to provide hints on how to perform actions.
Show multiple variables
Data displays that provide information on multiple, related variables should be able to display them all simultaneously without sacrificing clarity. In an interactive display, the user should be able to selectively turn off and on the variables to make comparisons easier and correlations (causality) clearer. Investors are commonly interested in the correlations between different securities, indexes, and indicators. Graphing multiple variables over time helps uncover these correlations (see Figure 14-9).
19_084113 ch14.qxp 4/3/07 6:07 PM Page 315
Chapter 14: Visual Interface Design
315
Figure 14-9 This graph from Google finance compares the performance of two stocks with the S&P 500 over a period of time. The visual patterns allow a viewer to see that Barclays Bank (BCS) and UBS are closely correlated to each other and only loosely correlated to the S&P 500.
Integrate text, graphics, and data in one display
Diagrams that require separate keys or legends to decode require additional cognitive processing on the part of users, and are less effective than diagrams with integrated legends and labels. Reading and deciphering diagram legends is yet another form of navigation-related excise. Users must move their focus back and forth between diagram and legend and then reconcile the two in their minds. Figure 14-10 shows an interactive example that integrates text, graphics, and data, as well as input and output: a highly efficient combination for users.
Ensure the quality, relevance, and
integrity of the content
Don’t show information simply because it’s technically possible to do so. Make sure that any information you display will help your users achieve particular goals that are relevant to their context. Unreliable or otherwise poor-quality information will damage the trust you must build with users through your product’s content, behavior, and visual brand.
19_084113 ch14.qxp 4/3/07 6:07 PM Page 316
316
Part II: Designing Behavior and Form
Figure 14-10 This “Communication Plan” is an interface element from a tool for managing outbound marketing campaigns that was designed by Cooper. It provides a visual structure to textual information, which is in turn augmented by iconic representations of different object types. Not only does this tool provide output of the current structure of the Communication Plan, but it also allows a user to modify that structure directly through drag-and-drop interactions.
Show things adjacently in space,
not stacked in time
If you are showing changes over time, it’s much easier for users to understand the changes if they are shown adjacently in space, rather than superimposed on one another. Cartoon strips are a good example of showing flow and change over time arranged adjacently in space.
Of course, this advice applies to static information displays; in software, animation can be used even more effectively to show change over time, as long as technical issues (such as memory constraints or connection speed over the Internet) don’t come into play.
19_084113 ch14.qxp 4/3/07 6:07 PM Page 317
Chapter 14: Visual Interface Design
317
Don’t de-quantify quantifiable data
Although you may want to use graphs and charts to make perception of trends and other quantitative information easy to grasp, you should not abandon the display of the numbers themselves. For example, in the Windows Disk Properties dialog, a pie chart is displayed to give users a rough idea of their free disk space, but the numbers of kilobytes free and used are also displayed in numerical form.
Consistency and Standards
Many in-house usability organizations view themselves, among other things, as the gatekeepers of consistency in digital product design. Consistency implies a similar look, feel, and behavior across the various modules of a software product, and this is sometimes extended to apply across all the products a vendor sells. For at-large software vendors, such as Macromedia and Adobe, who regularly acquire new software titles from smaller vendors, the branding concerns of consistency take on a particular urgency. It is obviously in their best interests to make acquired software look as though it belongs, as a first-class offering, alongside products developed in-house. Beyond this, both Apple and Microsoft have an interest in encouraging their own and third-party developers to create applications that have the look-and-feel of the OS platform on which the program is being run, so that the user perceives their respective platforms as providing a seamless and comfortable user experience.
Benefits of interface standards
User interface standards provide benefits that address these issues when executed appropriately, although they come at a price. According to Jakob Nielsen, relying on a single interface standard improves users’ ability to quickly learn interfaces and enhances their productivity by raising throughput and reducing errors. These benefits accrue because users are more readily able to predict program behavior based on past experience with other parts of the interface or with other applications following similar standards.
At the same time, interface standards also benefit software vendors. Customer training and technical support costs are reduced because the consistency that standards bring improves ease of use and learning. Development time and effort are also reduced because formal interface standards provide ready-made decisions on the rendering of the interface that development teams would otherwise be forced to debate during project meetings. Finally, good standards can lead to reduced maintenance costs and improved reuse of design and code.
19_084113 ch14.qxp 4/3/07 6:07 PM Page 318
318
Part II: Designing Behavior and Form
Risks of interface standards
The primary risk of any standard is that the product that follows it is only as good as the standard itself. Great care must be taken in developing the standard in the first place to make sure, as Nielsen says, that the standard specifies a truly usable interface, and that it is usable by the developers who must build the interface according to its specifications.
It is also risky to see interface standards as a panacea for good interfaces. Assuming that a standard is the solution to interface design problems is like saying the Chicago Manual of Style is all it takes to write a good novel. Most interface standards emphasize the syntax of the interface, its visual look-a
nd-feel, but say little about deeper behaviors of the interface or about its higher-level logical and organizational structure. There is a good reason for this: A general interface standard has no knowledge of context incorporated into its formalizations. It takes into account no specific user behaviors and usage patterns within a context, but rather focuses on general issues of human perception and cognition and, sometimes, visual branding as well. These concerns are important, but they are presentation details, not the interaction framework upon which such rules hang.
Standards, guidelines, and rules of thumb
Although standards are unarguably useful, they need to evolve as technology and our understanding of users and their goals evolve. Some practitioners and programmers invoke Apple’s or Microsoft’s user interface standards as if they were delivered from Mt. Sinai on a tablet. Both companies publish user interface standards, but both companies also freely and frequently violate them and update the guidelines post facto. When Microsoft proposes an interface standard, it has no qualms about changing it for something better in the next version. This is only natural — interface design is still in its infancy, and it is wrongheaded to think that there is benefit in standards that stifle true innovation. In some respects, Apple’s dramatic visual shift from OS 9 to OS X has helped to dispel the notion among the Mac faithful that interface standards are etched in granite.
The original Macintosh was a spectacular achievement precisely because it transcended all Apple’s previous platforms and standards. Conversely, much of the strength of the Mac came from the fact that vendors followed Apple’s lead and made their interfaces look, work, and act alike. Similarly, many successful Windows programs are unabashedly modeled after Word, Excel, and Outlook.
Interface standards are thus most appropriately treated as detailed guidelines or rules of thumb. Following interface guidelines too rigidly or without careful consideration
19_084113 ch14.qxp 4/3/07 6:07 PM Page 319
Chapter 14: Visual Interface Design
319
of the needs of users in context can result in force-fitting an application’s interface into an inappropriate interaction model.
When to violate guidelines
So, what should we make of interface guidelines? Instead of asking if we should follow standards, it is more useful to ask: When should we violate standards? The answer is when, and only when, we have a very good reason.
DESIGN
Obey standards unless there is a truly superior alternative.
principle
But what constitutes a very good reason? Is it when a new idiom is measurably better? Usually, this sort of measurement can be quite elusive because it can rarely be reduced to a quantifiable factor alone. The best answer is: When an idiom is clearly seen to be significantly better by most people in the target user audience (your personas) who try it, there’s a good reason to keep it in the interface. This is how the toolbar came into existence, along with outline views, tabs, and many other idioms.
Researchers may have been examining these artifacts in the lab, but it was their useful presence in real-world software that confirmed their success.
Your reasons for diverging from guidelines may ultimately not prove to be good enough and your product may suffer, but you and other designers will learn from the mistake. This is what Christopher Alexander calls the “unselfconscious process,”
an indigenous and unexamined process of slow and tiny forward increments as individuals attempt to improve solutions. New idioms (as well as new uses for old idioms) pose a risk, which is why careful, Goal-Directed Design and appropriate testing with real users in real working conditions are so important.
Consistency and standards across applications
Using standards or guidelines can involve special challenges when a company that sells multiple software titles decides that all its various products must be completely consistent from a user-interface perspective.
From the perspective of visual branding, as discussed earlier, this makes a great deal of sense, although there are some intricacies. If an analysis of personas and markets indicates that there is little overlap between the users of two distinct products and that their goals and needs are also quite distinct, you might question whether it makes more sense to develop two visual brands that speak specifically to these
19_084113 ch14.qxp 4/3/07 6:07 PM Page 320
320
Part II: Designing Behavior and Form
different customers, rather than using a single, less-targeted look. When it comes to the behavior of the software, these issues become even more urgent. A single standard might be important if customers will be using the products together as a suite.
But even in this case, should a graphics-oriented presentation application, like PowerPoint, share an interface structure with a text processor like Word?
Microsoft’s intentions were good, but it went a little too far in enforcing global style guides. PowerPoint doesn’t gain much from having a similar menu structure to Excel and Word, and it loses quite a bit in ease of use by conforming to an alien structure that diverges from the user’s mental models. On the other hand, the designers did draw the line somewhere, and PowerPoint does have a slide-sorter display, an interface unique to that application.
DESIGN
Consistency doesn’t imply rigidity.
principle
Designers, then, should bear in mind that consistency doesn’t imply rigidity, especially where it isn’t appropriate. Interface and interaction style guidelines need to grow and evolve like the software they help describe. Sometimes you must bend the rules to best serve your users and their goals (and sometimes even your company’s goals). When this has to happen, try to make changes and additions that are compatible with standards. The spirit of the law, not the letter of the law, should be your guide.
20_084113 pt03.qxp 4/3/07 6:07 PM Page 321
Part
III
Designing Interaction
Details
Chapter 15
Chapter 21
Searching and Finding: Improving
Controls
Data Retrieval
Chapter 22
Chapter 16
Menus
Understanding Undo
Chapter 23
Chapter 17
Toolbars
Rethinking Files and Save
Chapter 24
Chapter 18
Dialogs
Improving Data Entry
Chapter 25
Chapter 19
Errors, Alerts, and Confirmation
Pointing, Selecting, and Direct
Manipulation
Chapter 26
Designing for Different Needs
Chapter 20
Window Behaviors
20_084113 pt03.qxp 4/3/07 6:07 PM Page 322
21_084113 ch15.qxp 4/3/07 6:07 PM Page 323
15
Searching and Finding:
Improving Data Retrieval
One of the most amazing aspects of this new digital world we live in is the sheer quantity of information and media that we are able to access inside applications, on our laptops and devices, and on networks and the Internet. Unfortunately, accompanying the boundless possibilities of this access is a hard design problem: How do we make it easy for people to find what they’re looking for, and more importantly, find what they need?
Fortunately, great strides have been made in this area by the likes of Google, with its various search engines, and Apple, with its highly effective Spotlight functionality in Mac OS X (more on these later). However, although these solutions certainly point to effective interactions, they are just a start. Just because Google is a very useful way to find textual or video content on the Web, doesn’t mean that the same interaction patterns are appropriate for a more targeted retrieval scenario.
As with almost every other problem in interaction design, we’ve found that crafting an appropriate solution must s
tart with a good understanding of users’ mental models and usage contexts. With this information, we can structure storage and retrieval systems that accommodate specific purposes. This chapter discusses methods of data retrieval from an interaction standpoint and presents some human-centered approaches to the problem of finding useful information.
21_084113 ch15.qxp 4/3/07 6:07 PM Page 324
324
Part III: Designing Interaction Details
Storage and Retrieval Systems
A storage system is a method for safely keeping things in a repository. It is composed of a container and the tools necessary to put objects in and take them back out again. A retrieval system is a method for finding things in a repository according to some associated value, such as name, position, or some other attribute of the contents.
In the physical world, storing and retrieving are inextricably linked; putting an item on a shelf (storing it) also gives us the means to find it later (retrieving it). In the digital world, the only thing linking these two concepts is our faulty thinking. Computers will enable remarkably sophisticated retrieval techniques, if only we are able to break our thinking out of its traditional box.
Digital storage and retrieval mechanisms have traditionally been based around the concept of “folders” (or “directories” in Unix). While it’s certainly true that the folder metaphor has provided a useful way to approach a computer’s storage and retrieval systems (much as one would approach them for a physical object), as we discussed in Chapter 13, the metaphoric nature of this interaction pattern is limiting. Ultimately, the use of folders or directories as a primary retrieval mechanism requires that users know where an item has been stored in order to locate it. This is unfortunate, since digital systems are capable of providing us with significantly better methods of finding information than those physically possible using mechanical systems. But before we talk about how to improve retrieval, let’s briefly discuss how it works.
Alan Cooper, Robert Reinmann, David Cronin - About Face 3- The Essentials of Interaction Design (pdf) Page 44