Tammy Allgood, Stephanie Mabee and I were asked to put together a set of usability guidelines our web community. This is currently in draft form and will go to the Web Editorial Board for a final review on May 16th. But before this gets finalized, I'd love for you guys to take a look and give us feedback (collective intelligence rocks).

Our group is also currently finding examples and resources to go with the items below, so let us know if you have any favorite usability resources.

Usability Guidelines Draft

May 2, 2007

Site Design and Page Layout

1. Organize site from the user’s perspective.1
2. Important content should be placed at the top center of the page.
3. Use the recommended ASU template or header/footer to provide consistent ASU branding and global navigation. At a minimum the standard navigation elements must be included. 2
4. Do not make users scroll horizontally.
5. Create visual hierarchy.
6. Eliminate noise and text density.
7. Look professional. Research has proven that users don’t trust a website that looks amateurish. 3

Home Page

1. Communicate the purpose and value of the website or organization.
2. Limit prose in favor of links to the major options of the site.

Navigation

1. Ensure the home page and other major options are available and consistently located on every page of the site.
2. Use descriptive labels to help users navigate. Labels can either describe the function or the destination of the link.
3. Site should require little or no instruction to use.
4. Use navigation that lets people know not just where to go, but where they are.

Links in Content

1. Use meaningful labels to clearly indicate the content, function or destination.
2. Links should be easy to spot; use consistent cues to indicate a link (e.g., underlined text). Color can be used to indicate links that have been previously visited.
3. Indicate when new window will be opened (e.g., for pdfs). Users rely on the back button as a primary means of navigation.
4. Avoid misleading cues to links (styling or underlining text that is not a link).
5. Use text links instead of images as links. Label clickable images. If any part of an image is clickable, make the whole image clickable.
6. Don’t use “click here.” 4

Content

1. Use familiar words and avoid jargon or overly technical language.
2. Define acronyms and abbreviations. Limit the use of acronyms.
3. Be brief and concise.
4. Write in affirmative, active voice.
5. Make the first sentence of a paragraph descriptive of the content.
6. Use bullet points and headings when appropriate to make scanning easier.

Graphics, Images and Multimedia

1. Every image should have a descriptive ALT tag.
2. Use simple backgrounds that do not distract. Try to use solid colors only behind text.
3. Label clickable images.
4. Use meaningful multimedia. The content should be important and not distracting.
5. Introduce the type of media (listen to podcast, watch the video).
6. Avoid graphics that look like banner ads.
7. Media should be optimized for quick downloads.
8. Important information should not be contained only in images.

Text Appearance

1. Use adjustable font sizes. Use dark text on high-contrast background colors.
2. Limit the use of bold and other text styling to emphasize importance.
3. Different background colors can separate text areas.

Forms and Interactive Elements

1. Anticipate user errors. Provide error messages that are easy to notice and include suggested solutions.
2. Identify required and optional fields.
3. Label buttons clearly (usually by the action the button initiates).
4. Label data fields clearly and consistently.
5. Place labels near fields.
6. Provide tabbing.
7. Position cursor in the first field.
8. Display default or known values.
9. Provide a confirmation/thank you page after the form is submitted.

Develop Alternate Presentations for Print and Mobile/Handheld Devices

1. Remove elements that are relevant only in interactive environments (navigation menus, multimedia) for printing.
2. Provide the date and URL on print pages.
3. Position navigation elements below content in mobile/handheld presentations.
4. If content is relevant to mobile users, make sure markup complies with XHTML MP (Mobile Provider). 5

Search Engine Optimization

1. Use the ASU Google Search Appliance.
2. Provide a search option on every page.
3. Clearly indicate what content is being search.
4. Use unique and relevant keywords in the page titles, headings and content to ensure better search matches with search terms.
5. Remove old pages from the site (Google will find them).

Testing and Maintenance

1. Test the site with users and incorporate improvements based on feedback.
2. Test your site on both platforms (PC and Mac) with all the major browsers (IE, FF, Opera and Safari).
3. Update content frequently.
4. Remove information when it is out of date.
5. Replace or remove broken links.
6. Include both feedback and contact information.

Bonus Tip: Accessibility

1. Ensure that the site meets accessibility standards. Accessibility standards complement usability and have huge usability benefits.

Resources:

1 User's perspective: http://www.stcsig.org/usability/topics/articles/ucd%20_web_devel.html

2. Standard Navigation: https://wiki.asu.edu/web/index.php/Standard_Navigation

3. http://credibility.stanford.edu

4. http://www.w3.org/QA/Tips/noClickHere

5. http://dev.mobi