CTI Usability Guidelines

User Experience

Design for broadband (think slower DSL).
Reduce user workload (e.g., the amount of information one must enter to register).
Do not require users to multitask while reading.
Minimize page-download time. In the case of long downloads, warn users. Provide feedback (e.g., hourglass icon) when users must wait.
Warn of time outs and provide a means for users to avoid getting logged off.
Place error messages in a clear, easy-to-view location. Explain how to fix the problem.
Provide a search tool on every page.
Design for screen resolutions of 1024x768.
Do not display unsolicited windows or graphics in pop-ups.
Use drop-down menus sparingly.

Organize information at each level of the website so it presents a clear and logical structure to the user.
Ensure all of the content pages live at the same level within each sub-topic.
Group related elements and functions.
Allow the user to perform tasks in the same sequence and manner across similar conditions.

Include a link titled "Home" in the banner or navigation.
Use consistent navigation on all pages. Make the navigation on the home page as consistent as possible with the navigation on internal pages.
Ensure that "clickable" navigation areas are large enough for all users to click with ease.
Provide feedback on user location: let users know where they are in the website.
Use site maps for websites with many pages.

The home page should answer the following questions for anyone who accesses your website:

Limit the home page to one screen: all information and possible paths should be viewable without scrolling.
Keep the home page clean and uncluttered. Limit the amount of prose text.

A tag line that increases user understanding of the site
A link for each section
A link labeled "About Us" (information about Clinical Tools, the project, and the project team)
A link labeled "Contact Us" (Feedback Form)
A link labeled "FAQs"
An announcements section

Decide whether to use scrolling or non-scrolling pages. [How do we choose between the two?]
Visually align page elements, either horizontally or vertically.
Display information in a format that is immediately usable — i.e., do not display information that requires user conversion to another format.
Provide a print version.
Use dark text on a light background. Ensure text and graphics are understandble on a black-and-white screen (consider designing in black-and-white first, before adding color).
Use intuitive and descriptive topic and page titles. Users should have a good idea of the content in a section or on a page just by looking at the title.
Facilitate scanning: use clear, well-defined, and well-located headings; short phrases and sentences; and small paragraphs.
Put the most important information "above the fold."
Make first sentences descriptive: include the primary theme of a paragraph and the scope of what it covers.
Use familiar words, those frequently seen and heard.
Provide a glossary for unfamiliar/technical terms.
Use active, rather than passive, voice.
Write instructions in affirmative, rather than negative, statements.
Define acronyms and abbreviations the first time you use them, listing them in parentheses after the full word. Afterwards, you can use them on their own.
Use abbreviations sparingly.
Use mixed case.

Use sans-serif fonts, such as Arial, Helvetica, and Verdana.
Set the site's base font at a minimum of 85%; for sites targeting seniors, use 100%. To make a piece of text (e.g., a page title), noticeably larger, set it to font-size:120%; — this will make it 20% larger than the parent element's font size.
Provide an increase/decrease font-size functionality.
Use ALL CAPS for titles, if at all.
Use italics sparingly.
Use underlining for links only.
Left-justify prose text.
Use appropriate line lengths: if reading speed is important, use 75 to 100 characters per line; if acceptance of the website is more important, use 50 characters per line.

Use text instead of images.
Use clear, consistent, and descriptive titles. Do not use "click here" or "click this link"; use titles that provide users with a good idea of what they should expect to find. If that, for some reason, is not possible, then use descriptive mouseovers.
Indicate internal vs. external links. Let users know when they will be leaving the site.
Use standard colors to identify active (blue) vs. visited (purple) links. [How strict this guideline should be is debatable.]
Links that are part of a list of online resources ("For More Reading") should include 10- to 12-word descriptions.

Use images to facilitate learning, but make sure they are relevant to the text.
Ensure that all clickable images are either labeled or readily identified as clickable by typical users.
Do not use complex background images; they tend to slow down page loading and can interfere with foreground text.
Include actual data with data graphics, such as graphs and charts.
Use audio, video, and animation only when they help to convey—or are supportive of—the website's message or other content. Use short segments to reduce download time.

Successful projects require at least four to five different (re)sources of information (e.g., support lines, focus groups, bulletin boards).
Focus on performance before preference (i.e., content and interaction before color and graphics).
Recognize tester bias.
Use heuristic testing cautiously, as it tends to detect more potential problems than actually arise.
Use cognitive walkthroughs cautiously.
Use automatic-evaluation methods (to find slow-loading pages, jargon, missing links, etc.) but do not use it as a substitute for usability testing with actual users.

Alertbox: Current Issues in Web Usability - Usability guru Jakob Nielsen's biweekly newsletter
Making Your Web Site Senior Friendly: A Checklist - Usability guidelines for websites targeting seniors, published by the National Institute on Aging and the National Library of Medicine
Usability News - The newsletter of Wichita State University's Software Usability Research Laboratory (SURL)
Usability.gov - The Federal Government's usability website

Hart TA. Evaluation of websites for older adults: how "senior-friendly" are they? Usability News. 2004;6(1). Available from: http://psychology.wichita.edu/surl/usabilitynews/61/older_adults.htm
Outing S, Ruel L. The best of Eyetrack III: what we saw when we looked through their eyes [Internet]. St. Petersburg (FL): The Poynter Institute; no date [cited _____]. Available from: http://www.poynterextra.org/eyetrack2004/main.htm
Rogers BL, Chaparro B. Breadcrumb navigation: further investigation of usage. Usability News. 2003;5(2). Available from: http://psychology.wichita.edu/surl/usabilitynews/52/breadcrumb.htm
Russel M. Using eye-tracking data to understand first impressions of a website. Usability News. 2005;7(1). Available from: http://psychology.wichita.edu/surl/usabilitynews/71/eye_tracking.html
Shaikh AD, Lenz K. Where's the search? Re-examining user expectations of web objects. Usability News. 2006;8(1). Available from: http://psychology.wichita.edu/surl/usabilitynews/81/webobjects.htm

Nielsen J, Loranger H. Prioritizing Web usability. Berkeley, CA: New Riders; 2006. 432 p. Amazon.com Listing