 |
|
|
|
|
|
| |
<<Previous | 1
| 2 | 3
| 4 | 5 | 6
| Next>>
|
|
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.
|

|
|
| |
<<Previous | 1
| 2 | 3
| 4 | 5 | 6
| Next>>
|
| |
GUI Articles List
|
|
 |
|