UI Design Newsletter – February, 2004

Insights from Human Factors International

In This Issue:

Do y'see what I'm saying? Using visual hierarchy to support your message

The Pragmatic Ergonomist

Dr. Eric Schaffer, Ph.D., CPE, founder and CEO of HFI offers practical advice.

Have you ever tried to read a paper that someone else highlighted? If you have, you know that it is not an easy thing to do. Different people read (and highlight) toward different goals. Even so, it is hard to resist being drawn toward text that has – for better or worse – already been rendered bright yellow.

In their 1997 paper, Silvers and Kreiner documented the pernicious effects of inappropriate highlighting. They compared comprehension scores for students reading un-highlighted and inappropriately highlighted text. Not surprisingly, they found that working through inappropriately highlighted text resulted in lower reading comprehension scores. In addition, they found that prior knowledge didn't help. Students who were warned to ignore the highlighting scored no better than those who were not warned. This has serious implications for used textbook buyers. It also has implications for Web page designers.

The message received also depends on the receiver

Web pages are designed to convey a message. Message receivers face a fairly complicated task. They must filter out the meaningless content in the visual presentation, identify the meaningful content, recognize its patterns, interpret and encode it. The effectiveness of this process can be influenced by receiver characteristics such as age and familiarity with the content. It may also be affected by information processing constraints such as attentional focus and memory limitations.

On the Web, as in other presentation channels, there are two components to a message:

• the message itself, and
• how it is presented.

Seemingly mundane points of content presentation can have influence on how effectively a document (online or otherwise) conveys its message. For instance, using typographic details (such as San Serif fonts for headings and Serif fonts in the body) to help readers recognize the organizational elements of a document, reportedly correlates positively with overall funding scores for peer-reviewed grant proposals (Berlant, 2000). Interestingly, these effects can arise well before any content actually needs interpreting. Legibility effects actually begin at the physiological/ transductive level in the eye: work by Rubinstein and Ulichney suggests that the type faces Helvetica and Times are easier to read than Courier because the frequency of the vertical strokes in those fonts matches the sensitivity of the visual system. (Rubinstein, 1988)

The idea that well-crafted content facilitates message transfer should not be surprising. Presenting well-labeled headings offers readers a roadmap with which to navigate your content. Offering organized, meaningful chunks helps them to map your content with what they already know, facilitating both the interpretation and encoding of your message.

Within the gridline condition, they compared:

• tables with column gridlines,
• tables with row gridlines,
• tables with both column and row gridlines, and
• tables with no grid lines.

These different presentation styles are shown in the following figure.

Within the highlighting condition, they compared various approaches to highlighting key data, including:

• blinking key data,
• reverse video,
• colored (red) text, and
• single colored displays (no highlight control).

Participants in this study were asked to scan the tables to identify cases in which there was a discrepancy between data presented across two columns in the same row.

Within the gridline comparison, they found participants were roughly 25% faster in comparing target data pairs in tables that had either no gridlines or had both row and column grids. In contrast, participants were slowed when they were examining data in tables with just row or just column gridlines.

Highlighting had an even greater impact. Participants were significantly faster at identifying exceptional cases when they were highlighted compared with when the same case were presented without highlighting. In some comparisons this improvement was greater than 50%. Blinking and reverse text helped participants focus in on the critical data. Participants proved numerically (but not significantly) fastest at identifying exceptional cases when they were simply highlighted with a different text color – in this case red.

Though not presented in the paper, one explanation I see for the reported differences could be that the participants' task fundamentally changes between the no highlight (control) condition to the highlight conditions.

Think about the functional allocation of the sub-tasks that make up the task. In each trial, the basic process is:

1. Read the value in column A (and remember it)
2. Read the value in column B of the same row (and remember it)
3. Decide if Value A = Value B
4a. If yes, go to next row
4b. If no, record the value

In the control condition the human has to execute each of those steps. In the highlight condition, the computer (by way of the designer's highlights) executes steps 1-4a. The participants task flow changes to:

1. Scan for the exception
2. Record the value

The simple step of using type face appropriately removes steps 1-3 from the human's sub-task set.

So, by providing visually guiding highlights, the designer essentially shifts the functional allocation of the task. The part of the task that is harder for the human (find and compare) is shifted from the human to the computer. By allocating the functions appropriately, the task becomes easier for the participant. It is completed more quickly. It is also likely to be executed with fewer errors – although this is not discussed in the results section of the paper.

Independent of the analysis, Wu and Yuan (2003) demonstrate that the visual presentation level can influence the speed with which users can scan and interpret tabular data.

The ROI of attention to detail

Have you ever stared at a Web page that was just tiring to look at (much less to read)? Unfortunately, Web and information designers often underestimate the impact of "background" visual details, such as gridlines in tables. As a result, they fail to exploit the visual hierarchy created by detailed design. Or worse, they create visual chaos with it. The cost of this failure to guide their receiver's attention through the message space can add up quickly.

Consider the differences reported by Wu and Yuan. Effective tabular presentation saved slightly over two seconds per table. Appropriate functional allocation saved roughly five seconds per screen. Tullis (1983) reported that employees at a single insurance company view over 4.8 million screens per year. Galitz (1980) reported that Bell system employees, using only one software package, extract information from over 344 million displays within the same period. Given these numbers, a savings of only a few seconds in processing time per display could lead to enormous time and cost savings over the long run.

Rubinstein, R. (1988) Digital Typography: An Introduction to Type and Composition for Computer System Design, Addison-Wesley.

Savio, N., Web Typography Tutorial, WebMonkey.

Good usability engineers look at the high-level structure of a page. They shape the user's understanding with cues about the hierarchy, relationship, and criticality of data. To this end we add headers, highlighting, font changes, and other powerful cues. These can be very effective. But this newsletter gives us a caution. Sloppy or poorly chosen cues are WORSE than no cues at all. So we have convincing evidence that poorly conceived and gratuitous cues will impair the user's performance.

References

Galitz, W. (1980) in: Proceedings of the Life Office Management Association on Human Factors in Office Automation, Atlanta, 1980.

Rubinstein, R. (1988) Digital Typography: An Introduction to Type and Composition for Computer System Design, Addison-Wesley.

Silvers, V.L. and Kreiner, D.S. (1997). The Effects of Pre-Existing Inappropriate Highlighting on Reading Comprehension. Reading Research and Instruction, 36(3), pp. 217-23.

Tullis, T. (1983) The formatting of alphanumeric displays: a review and analysis, Human Factors 25, pp. 657-682.

Wu, J. and Yuan, Y. (2003) Improving searching and reading performance: the effect of highlighting and text color coding Information & Management, 40, pp. 617–637.

Past Issues