HFI Usability Home

Usable. Experience. Design.

HFI Usability Home About HFI - Usability Experts Usability Consulting Usability Training & Certification Usability Tools & Standards Usability Newsletter Executives Only  

Contact Us | 1-800-242-4480

 
UI Design Newsletter
Current Issue
Past Issues
Reader Comments
Subscribe
Change Address
divider
HFI Webcasts
January 2009 Webcast
Upcoming Webcasts
Past Webcasts / Podcasts
divider
Ask Eric
Questions & Answers
Ask your question
divider
Readings
Published HFI Articles
White Papers
Intranet Standards
GUI Standards
Quantitative Usability
e-Commerce Usability
GUI Design
IVR
divider
Just Fun
Cartoons
Mouse Maze
10 Web Usability Tips
Usability Quiz
Web Usability Quiz
Contextual Innovation Quiz
Persuasive Design Quiz
Persuasion Flow Symbols
History of HFI Buttons
divider
Resources
Persuasion Flow Symbols
Accessibility
Bibliography
Usability Links
HCI Degree Programs

Window Layout: Cures for Cryptovision (continued)

GUI Articles List | Print this page | Email this page

 

<<Previous | 1 | 2 | 3 | 4 | 5 | 6 | Next>>

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.

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.

warning note

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).

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.

label and field justification

 

<<Previous | 1 | 2 | 3 | 4 | 5 | 6 | Next>>

 

GUI Articles List