About HFI   Certification   Tools   Services   Training   Free Resources   Media Room  
               
 Site MapUser Experience for a Better World   
Human Factors International Home
Free Resources
Bookmark and Share

Window Layout: Cures for Cryptovision (continued)

Reduce Visual Work

Issue: We find that some developers fail to recognize that their screens merit the text approach to reading the rectangle. They design with the artistic approach. They think that by making some area in the screen appear dominant, the user will automatically look there and subsequently figure out the task flow. Crypto-designers erroneously hope that highlighting, blinking, and textual emphasis like bold or italics can override a poorly sequenced layout (see Figure 4). Here the "note" at the bottom of the screen really serves as a warning. It's quite important. Although bold text may make it stand out, most users still fail to read the note prior to entering the forbidden Y value.

Solution: Sequence all your fields, menu options, and other screen elements to match a left-right, top-down task flow. If the task has no clear sequence, group items by subject or function. Lay out your screen so that important items like warnings (as in Figure 4) and critical guidance show up first. In other words follow the logical task flow, with warnings preceding the action.

warning note
Figure 4. The warning "note" fails to capture the users attention even though the designer put it in bold. When tempted to highlight or emphasize text to get user attention, you probably lack the right layout sequence. Sequence guidance and other instructions in the task flow to eliminate the need for emphasis.

Some corollary soul solutions to visual work in layout design:

  • Avoid putting important items in the "status bar" typically used at the bottom of the window. The status bar is spatially too far removed from the other screen elements to attract the user's attention for special cases. Important messages deserve special prominence such as a dialog box or placement at the top of the window. These include error and warning messages, system messages and informational messages. However, you can display field definitions in the status bar without compromising usability.
  • Put field labels to the left of the field. Avoid placing the labels above the field or below it because it contradicts the normal habit of left-right reading.

Reduce Memory Work

Issue: Cryptolayout lapses can increase memory demands. For example, the user may see a start date and an end date side-by-side. Can you compare the days, months, and years easily? See Figure 5. The eye cannot take both date elements within the same glance. You must remember one and mentally compare.

Solution: When the user benefits from comparing two dates, then position one date above the other. The user can easily compare year, month, and day in a single glance, given their spatial proximity.

Some corollary solutions to memory demands in layout design:

  • Avoid covering fields with their associated error messages or detail dialog boxes. Users won't remember what they did. To see the field, position dialog boxes below and to the right of the field. However, a single standard position for these dialog boxes won't work because fields can be anywhere on the screen. Therefore, build in some "smarts" to your application. Position the dialog according to field position on the screen . Use this algorithm: First choice: below and to the right of the field; second choice, to the right; third, below the field; fourth, above and to the right; fifth, above the field; sixth, to the left of the field.
  • Avoid slavish crypto-placement of field labels to the left of the field. (Although, normally we should place the label to the left of the field.) Consider the user's task! For example, exceptions occur when users read a paper form for data entry and the paper form has the label above or below the line. Ideally, the screen should mimic the form layout. This minimizes user memory requirements for mentally "translating" between the form and the screen layout (see Figure 5).

label and field justification
Figure 5. How compare dates easily? Here a single glance fails to get both dates at once. You must work hard to remember one date while reading the other. Solution: place the latter date below the earlier one. Next: How to position labels? Solution: Put labels on the left - but remember to reduce crypto memory demands in special cases. Match your screen layout to paper forms that may have labels below the line. Then users won't need to remember how to translate field names and sequences between paper and screen.

Top

© 1996-2012 Human Factors International, Inc. All rights reserved  |  Privacy Policy  |   rss feed biber hapıbiber hapı