Principles of Visual Information Design

Like visual interface design, visual information design also has many principles that the prospective designer can use to his advantage. Information design guru Edward Tufte asserts that good visual design is "clear thinking made visible," and that good visual design is achieved through an understanding of the viewer's "cognitive task" (goal) and a set of design principles.

Tufte claims that there are two important problems in information design:

  1. It is difficult to display multidimensional information (information with more than two variables) on a two-dimensional surface.

  2. The resolution of the display surface is often not high enough to display dense information. Computers present a particular challenge—although they can add motion and interactivity, computer displays have a low information density compared to that of paper.

Interaction and visual interface designers may not be able to escape the limitations of 2D screens or overcome the problems of low-resolution displays. However, some universal design principles—indifferent to language, culture, or time—help maximize the effectiveness of any information display, whether on paper or digital media.

In his beautifully executed volume, The Visual Display of Quantitative Information (1983), Tufte introduces seven Grand Principles, which we briefly discuss in the following sections as they relate specifically to digital interfaces and content.

Visually displayed information should, according to Tufte

  1. Enforce visual comparisons

  2. Show causality

  3. Show multiple variables

  4. Integrate text, graphics, and data in one display

  5. Ensure the quality, relevance, and integrity of the content

  6. Show things adjacently in space, not stacked in time

  7. 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. 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 19-6, as well as Figures 19-7 and 19-8).

click to expand
Figure 19-6: Visual comparison. Photoshop filters provide interactive previews that allow users to compare results of an operation with the original before the operation has been executed. Some Photoshop filters permit the preview (which can be flipped on and off instantaneously by the user) to occur over the entire image, or a selection thereof, in addition to the thumbnail shown in the preceding dialog.

click to expand
Figure 19-7: Showing multiple variables. This design created for Shared Healthcare Systems' Orcas long-term healthcare system allows nurses to compare and correlate trends in a single full-screen display. Nurses at long-term care facilities need to be proactive about quality of care issues. Cooper designers created a trend-analysis tool that allows nurses to choose which care issues to track and to interactively correlate them against other potentially related concerns. Graphs on the left show major trends as live thumbnails; these and other attributes can be added to the chart on the right. The sliding vertical vernier determines the day being looked at in the area below the chart, which breaks out all incidents according to affected residents. Clicking on a resident's name takes the nurse to that resident's chart.

click to expand
Figure 19-8: Combining text, graphics, and data in a single display. This interface, also designed for Shared Healthcare Systems, permits case managers at long-term healthcare facilities to appropriately balance the quality of care and cost of care for new residents interactively. The ability to see what-if scenarios visually, as well as the details in text, allows the users to better and more quickly plan what's best for each new resident and her family.

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 34) 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. Figure 19-7 shows an example of an interactive display that permits manipulation of multiple variables.

Integrate text, graphics, and data in one display

Diagrams that require separate keys or legends to decode are less effective and require more cognitive processing on the part of users. 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 19-8 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.

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.

Don't de-quantify quantifiable data

Although you may want to use graphs and charts to make perception of trends and other quantitative information easier 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.




About Face 2.0(c) The Essentials of Interaction Design
About Face 2.0(c) The Essentials of Interaction Design
ISBN: N/A
EAN: N/A
Year: 2006
Pages: 263

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