ERGONOMIC GUIDELINES FOR USER-INTERFACE DESIGN

The following points are guidelines to good software interface design, not an absolute set of rules to be blindly followed. These guidelines apply to the content of screens. In addition to following these guidelines, effective software also necessitates using techniques, such as 'storyboarding', to ensure that the flow of information from screen to screen is logical, follows user expectations, and follows task requirements.

1. Consistency ("Principle of least astonishment")
   • certain aspects of an interface should behave in consistent ways at all times for all screens
   • terminology should be consistent between screens
   • icons should be consistent between screens
   • colors should be consistent between screens of similar function
2. Simplicity
   • break complex tasks into simpler tasks
   • break long sequences into separate steps
   • keep tasks easy by using icons, words etc.
   • use icons/objects that are familiar to the user
3. Human Memory Limitations
   • organize information into a small number of "chunks"
   • try to create short linear sequences of tasks
   • don't flash important information onto the screen for brief time periods
   • organize data fields to match user expectations, or to organize user input (e.g. autoformatting phone numbers)
   • provide cues/navigation aids for the user to know where they are in the software or at what stage they are in an operation
   • provide reminders, or warnings as appropriate
   • provide ongoing feedback on what is and/or just has happened
   • let users recognize rather than recall information
   • minimize working memory loads by limiting the length of sequences and quantity of information - avoid icon mania!
4. Cognitive Directness
   • minimize mental transformations of information (e.g. using 'control+shift+esc+8' to indent a paragraph)
   • use meaningful icons/letters
   • use appropriate visual cues, such as direction arrows
   • use 'real-world' metaphors whenever possible (e.g. desktop metaphor, folder metaphor, trash can metaphor etc.)
5. Feedback
   • provide informative feedback at the appropriate points
   • provide appropriate articulatory feedback - feedback that confirms the physical operation you just did (e.g. typed 'help' and 'help' appear on the screen). This includes all forms of feedback, such as auditory feedback (e.g. system beeps, mouse click, key clicks etc.)
   • provide appropriate semantic feedback - feedback that confirms the intention of an action (e.g. highlighting an item being chosen from a list)
   • provide appropriate status indicators to show the user the progress with a lengthy operation (e.g. the copy bar when copying files, an hour glass icon when a process is being executed etc.)
6. System messages
   • provide user-centered wording in messages (e.g. "there was a problem in copying the file to your disk" rather than "execution error 159")
   • avoid ambiguous messages (e.g. hit 'any' key to continue - there is no 'any' key and there's no need to hit a key, reword to say 'press the return key to continue)
   • avoid using threatening or alarming messages (e.g. fatal error, run aborted, kill job, catastrophic error)
   • use specific, constructive words in error messages (e.g. avoid general messages such as 'invalid entry' and use specifics such as 'please enter your name')
   • make the system 'take the blame' for errors (e.g. "illegal command" versus "unrecognized command")
7. Anthropomorphization
   • don't anthropomorphize (i.e. don't attribute human characteristics to objects) - avoid the "Have a nice day" messages from your computer
8. Modality
   • use modes cautiously - a mode is an interface state where what the user does has different actions than in other states (e.g. changing the shape of the cursor can indicate whether the user is in an editing mode or a browsing mode)
   • minimize preemptive modes, especially irreversible preemptive modes - a preemptive mode is one where the user must complete one task before proceeding to the next. In a preemptive mode other software functions are inaccessible (e.g. file save dialog boxes)
   • make user actions easily reversible - use 'undo' commands, but use these sparingly
   • allow escape routes from operations
9. Attention
   • use attention grabbing techniques cautiously (e.g. avoid overusing 'blinks' on web pages, flashing messages, 'you have mail', bold colors etc.)
   • don't use more than 4 different font sizes per screen
   • use serif or sans serif fonts appropriately as the visual task situation demands
   • don't use all uppercase letters - use and uppercase/lowercase mix
   • don't overuse audio or video
   • use colors appropriately and make use of expectations (e.g. don't have an OK button colored red! use green for OK, yellow for 'caution, and red for 'danger' or 'stop')
   • don't use more than 4 different colors on a screen
   • don't use blue for text (hard to read), blue is a good background color
   • don't put red text on a blue background
   • use high contrast color combinations
   • use colors consistently
   • use only 2 levels of intensity on a single screen
   • Use underlining, bold, inverse video or other markers sparingly
   • on text screens don't use more than 3 fonts on a single screen
10. Display issues
    • maintain display inertia - make sure the screen changes little from one screen to the next within a functional task situation
    • organize screen complexity
    • eliminate unnecessary information
    • use concise, unambiguous wording for instructions and messages
    • use easy to recognize icons
    • use a balanced screen layout - don't put too much information at the top of the screen - try to balance information in each screen quadrant
    • use plenty of 'white space' around text blocks - use at least 50% white space for text screens
    • group information logically
    • structure the information rather than just presenting a narrative format (comprehension can be 40% faster for a structured format)
11. Individual differences
    • accommodate individual differences in user experience (from the novice to the computer literate)
    • accommodate user preferences by allowing some degree of customization of screen layout, appearance, icons etc.
    • allow alternative forms for commands (e.g. key combinations through menu selections)

(these guidelines are based on those contained in Hix, D. & Hartson, H.R. (1993) Developing User Interfaces: Ensuring usability through product and process, NY, Wiley. Chap. 2).

---

Web page design

Download speed is a critical aspect of web page design. Remember that when you check your pages locally in your browser you aren't experiencing normal web delays! Regardless of your modem speed, pages will only download at the fastest rate of the slowest link in the 'chain' from a server to the browser. The following tips will help to speed downloads and aid comprehension of your web page materials:

• avoid using 'blinks' unless these are absolutely necessary - blinks are distracting, use fonts, sizes, colors to attract attention
• keep backgrounds simple and muted
• minimize audio and video use, this really slows download time
• use animated files (e.g. animated .GIFs) sparingly
• use thumbnail .GIFs linked to larger .GIFs
• specify .GIF size (HEIGHT, WIDTH) - this speeds download times
• use 'ALTs' for .GIFs where only the .GIF provides the link - this provides linked text information to those only browsing in text mode
• use image maps sparingly - they are slow and can be annoying - using an invisible table can often give similar results with much faster downloads
• use frames sparingly and consistently - use absolute widths for frames, scroll bars, avoid menus for small numbers of items, also check that users don't get stuck in a frame
• avoid 'construction signs' - web pages are meant to be dynamic and therefore should be changed/updated regularly - they are always under construction - try to tell users when content was last changed and what changes were made
• minimize use of Java, Javascript, Applets (e.g. ticker tape status bars) - they are cute but often provide little useful information content and slow downloads
• remember that 50% of users have monitors 15" or less and at 640 x 480 resolution, so use a maximum window width of 620 pixels or flexible window widths and test your pages in your browser at low screen resolutions and limited colors (256 or less)
• provide contact information at the home page location in your site

(above guidelines based on those found at http://www.glover.com/ss/ssmain.html)

---

Additional Interface Design Information

• Cross-platform User-Interface Design Guidelines, Common Front Group, Cornell University.
• Cornell University's Interactive Multimedia Group.
• The Apple Human Interface Guidelines book (an online book about how people interact with computers.)
• The Apple Human Interface Guidelines for the web book.
• A list of links from Apple about interface design.
• A Human Interface bibliography from Apple.
• IBM's Human-Computer Interaction resources.
• Digital Human Factors and Ergonomics Resources
• Interface Hall of Fame
• Interface Hall of Shame
• Ask Tog (Computer Interface Design Information)
• Section 508 web site accessibility
• Summary checklist of section 508 requirements
• Designing Accessible Web Sites