Window Layout: Cures for Cryptovision (continued)

Avoid putting focus on protected fields. These fields do not allow data entry, or they only display data. Don't let your user think they could enter data with a crypto-illusion data entry field. Dim (deactivate) your protected data entry fields. Meanwhile, put display-only data on a plain background, generally the same color as the window background. In rare cases when you need to draw special attention to the displayed data, use a rectangle around the data, but make the color of the rectangle background the same color as the window background. Don't color it like an input field.

Reduce Intellectual Work

Issue: Let's assume that the screen displays a good task flow sequence. However, fields and controls may not be clearly grouped. Also, they may not be identified by some unifying concept (e.g., there is no grouping header). Plus, fields may lack left justification. It takes extra time to figure out the tasks amidst the clutter. The user must work to locate a particular field (see left side of Figure 6).

Figure 6. Avoid right justification on the colon. Left justification looks more organized. Also, indenting labels under a grouping header helps users in finding the desired field on a screen. Find the "1099$" field in each illustration. Which was easier?

Solution: Align field labels on the left side. Avoid justifying field labels on the right, typically on the colon. This creates a "ragged left" margin that creates crypto-problems. First, the ragged left margin creates a subjective sense of clutter, according to rigorous usability research. Second, it's hard to discern a grouping header when the designer fails to evenly indent and align the labels below the header (see right side of Figure 6). Some designers stricken with cryptovision think right justification makes it easier to scan a set of entry fields. For an expert-only population will be true because experts can ignore the field labels; they memorize the screen. But soul design recognizes that casual, infrequent, and new users need to make sense of the screen first. They need clear visual cues that create intellectual understanding for them.

Here are some corollary solutions to intellectual demands:

• Left-align text edit fields as much as possible. It's all right to tolerate four to seven extra spaces between the label and the rectangle to get the alignment. However, you need not be compulsive and align absolutely every field! The example on the right side of Figure 6 is a good balance of alignment and variation. The variation reinforces the grouping of fields. In summary, pull the text edit field towards the label when the spacing becomes extreme. Meanwhile, pick up alignments from items higher in the screen whenever possible.
• Place a blank line every five or six rows of fields. This avoids visual "run-on" that fatigues the eye. Physiological research shows that a typical user can handle five or six lines of text in one glance. (This constitutes the preferred maximum of 5 degrees visual angle.) Consider Figure 7. Notice that even though the fields are aligned and grouped, the abundance of run-on fields slows comprehension. You can logically put a blank line above the Room rate and the Phone fields for improved grouping

Figure 7. Avoid run-on fields. The eye fails to "read" the bottom items in a single glance. If you can't use a grouping header, at least put a blank line every 5 or 6 lines.