Improving Web Usability

• 9th Annual Accessing Higher Ground 2006
• Trace Donald
• Auburn University

Usability Study

Overview of the Nielsen Study

Findings

• User spent on average 1m 49s before leaving the site
• User spent 25 to 30s on the homepage and 27s on interior pages

Search Engines

• 88% went straight to search engines when not given a specific place to begin
• In 93% of the searches, the users in the study only visited the first SERP
• Only 47% scrolled the page

Scrolling

• 1024 by 768 pixels
• Less experienced user scrolled less than experienced users
• 23% scrolled on their 1st visit to a Home Page
• 42% scrolled interior pages

Structure

• Design with user expectation in mind
• Involve the user in the design
• Observe your users
• Survey your users

Page Layout

• Keep a consistent navigational structure
• Locate your name or logo in the upper left corner of each page
• Link it to your homepage
• Locate Search boxes in the upper right corner
• Don’t link to the page your own

More on Page Layout

• Show the user where they are
• Highlighted Cues
• Breadcrumbs
• Provide a clear link back to the homepage
• Prioritize order of information
• Limit the number of elements

Homepages

• Introduce your Site
• Who you are
• What your about
• What benefits do you offer
• Limit your words
• Write half of what you would write for print
• Write less for those with little or no education

More on Homepages

• Place direct links on the homepage to high priority operations – www.mozilla.com
• Have a “What’s New” section
• Have the most important information just a click away

• People spend less and less time on your homepage after each visit
• Only 23% scrolled the homepage and less after each visit

Interior Pages

• Users will spend 45 to 60 seconds on an interior page
• Most time is spent on the content area
• Most clicks to other pages occurred in the content area

Writing

• Write for your readers
• Use simple language
• Most important points made in the 1st two sentences
• Remember users scan
• Visual Cues - headers, bolded text
• Avoid jargon, clichés, and acronyms
• Keep it short and concise
• Layer information if more detailed text is needed
• Make your headings and links understandable
• “Know What” or “more”

Headings

• Larger and Bolder than body text
• Subheading smaller but larger than body
• Left Justified in sentence case or title case
• Can help screen reader users better navigate your site

Lists

• Use bulleted or number list over run-in list when you use 4 or more items
• Studies showed vertical list can improve usability by 47% over run-in
• Keep text close to the bullet and have it wrap underneath the text
• Have a clear descriptive lead-in sentence

Text

• Verdana or Arial
• Limit font styles and colors
• Use fonts 10 pts and above
• Allow the user to resize the text
• Avoid moving text

Text

• Avoid all caps
• Limit graphical text
• Not searchable
• Not scalable
• Can’t select
• Increases file size

Relative Font Sizes

• Use percentages or em
• Use 140% of the body text size of 10pt to equal 14pt

Background

• Black Text on white background easiest to read
• White or desaturated colors
• http://www.adampolselli.com/2005/
• Avoid similar colors (light grey text on white background)
• No busy backgrounds
• http://www.staff.amu.edu.pl/~zbzw/ph/sci/msc.htm

Links

• Be specific with names
• No “Click Here”, “More”, “Download”, or, “Try It”
• Don’t provide duplicate links
• Keep drop down menus short
• Limit fly-out horizontal menus to no more than two

More on Links

• Make sure your links standout
• Change the color of visited links
• All graphical links must include the “Alt” attribute

Why use CSS

• Separation of content from presentation – Zen Garden
• Easier site management
• Faster rendering of pages
• Encourages better html coding
• No <p> as headers

More on why to use CSS

• Allows you to cut down on javascripts

Hover – 
#content a:hover {
	color: #003366;
}

• Cascading Menus - Suckerfish
• Print Styles
• May improve search engine results

How CSS improves Usability

• No more tables for layout
• Use of relative font sizes
• Ability for user to apply their own style
• Alternate Styles
• Hidden text or links

Hiding Text

Page Summary or Skip to Content
#Page_Summary {
	position: absolute;
	overflow: hidden;
	width: 0;
	height: 0;
  }

Other thoughts on Usability

• Redundancy
• Title and H1
• Links
• Navigation Consistency
• “Skip Navigation” vs Headers
• San Serif – Verdana or Arial
• Clear naming of links

Accesskeys

• Firefox takes you immediately to the page
• Alt + Shift + Accesskey – Firefox 2.0
• Can be changed by entering “about:config” in the Firefox address bar and change “ui.key.contentAccess” to “4”.
• IE 7 still requires the user to press enter after using the accesskey

Announcing Accesskeys

HTML Code:
<a accesskey="g" href="alttags.html"> <em>G</em>raphics </a> <em>G</em>raphics   
The following CSS code will underline the text and make the font the same weight as the rest of the text.

CSS Code:
a em {
font-style: normal;
font-weight: normal;
text-decoration: underline;
} 

Getting people to think about usability

• Befriend web designers
Start a web user group – www.ammug.org
• Approach accessibility by way of usability
• Show them the Zen Garden

Developing Web Standards

• Form a committee and develop standards
• Have resources available
• Keep talking about it

Book Resources

• “Prioritizing Web Usability” Jakob Nielsen and Hoa Loranger, 2006
• “Don’t Make Me Think”, Steve Krug, 2006
• “Web Accessibility”, Jim Thatcher and Others, 2006
• “Designing with Web Standards” (2nd Edition), Jeffrey Zeldman, 2006

More Book Resources

• “Eric Meyer on CSS: Mastering the Language of Web Design”, 2002
• “CSS Hands-On Training”, Eric Meyer, November 2006

Web Resources

• A List Apart - http://www.alistapart.com/
• 456 Berea Street - http://www.456bereastreet.com/
• StopDesign - http://www.stopdesign.com/