Designing with the Mind in Mind

Structure Enhances People’s Ability to Scan Long Numbers

Even small amounts of information can be made easier to scan if they are structured. Two examples are telephone numbers and credit card numbers (see Figure 3.6 and Figure 3.7). Traditionally, such numbers were broken into parts to make them easier to scan and remember.

A long number can be broken up in two ways: either the user interface breaks it up explicitly by providing a separate field for each part of the number, or the interface provides a single number field, but lets users break the number into parts with spaces or punctuation (see Figure 3.8A). However, many of today’s computer presentations of phone and credit card numbers do not segment the numbers and do not allow users to do it with spaces (see Figure 3.8B). This limitation makes it harder for people to scan a number or verify that they typed it correctly.

Segmenting data fields can provide useful visual structure even when the data to be entered is not, strictly speaking, a number. Dates are an example of a case in which segmented fields can improve readability and help prevent data entry errors, as shown by a date field at Bank of America’s Web site (see Figure 3.8).

Data-Specific Controls Provide Even More Structure

A step up in structure from segmented data fields are data-specific controls. Instead of using simple text fields—whether segmented or not—designers can use controls that are designed specifically to display (and accept as input) a value of a specific type. For example, dates can be presented (and accepted) in the form of menus
combined with pop-up calendar controls (see Figure 3.9).

It is also possible to provide visual structure by mixing segmented text fields with data-specific controls, as demonstrated by an email address field at Southwest Airlines’ Web site (see Figure 3.10).

Visual Hierarchy Lets People Focus on the Relevant Information

One of the most important goals in structuring information presentations is to provide a visual hierarchy—an arrangement of the information that:

• Breaks the information into distinct sections, and breaks large sections into subsections
  Labels each section and subsection prominently and in such a way as to clearly identify its content
  Presents the sections and subsections as a hierarchy, with higher level sections presented more strongly than lower level ones

A visual hierarchy allows people, when scanning information, to separate what is relevant to their goals from what is irrelevant instantly, and to focus their attention on the relevant information. They find what they are looking for more quickly because they can easily skip everything else.

Try it for yourself. Look at the two information displays in Figure 3.11 and find the information about prominence. How much longer does it take you to find it in the nonhierarchical presentation?

The examples in Figure 3.11 show the value of visual hierarchy in a textual, read only information display. Visual hierarchy is equally important in interactive control panels and forms—perhaps even more so. Compare dialog boxes from two different music software products (see Figure 3.12). The Re-harmonize dialog box of Band-in-a-Box has poor visual hierarchy, making it hard for users to find things quickly. In contrast, GarageBand’s Audio/MIDI control panel has good visual hierarchy, so users can quickly find the settings they are interested in.

Print Version—Download a PDF version of “Chapter 3: We Seek and Use Visual Structure.”

Discount for UXmatters Readers—Throughout 2010, buy Designing with the Mind in Mind from Morgan Kaufman, using the discount code UXMATTERS, and save 20% off its retail price.