# Presentation: 519196

## Website Usability

- Making Content Easy to Find

## Basic Usability Concepts

- What is usability, anyway?

## What is a website?

- A set of interconnected webpages, usually including a homepage, generally located on the same server, and prepared and maintained as a collection of information by a person, group, or organization.
- 	(The American Heritage® Dictionary of the English Language, Fourth Edition)

## What is usability?

- The extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use.
- 	(ISO 9241:11 Guidance on Usability 1998)

## Key factors in usability

- Who will use the product?
- What are they trying to do?
- How long should it take?
- Will they be happy about it?
- Under what circumstances?

## Basic Accessibility Concepts

- Why is web accessibility important?

## How many people with disabilities?

- The percentage of people with disabilities in many populations is between 10% and 20%. Not all disabilities affect access to information technologies such as the web (for instance, difficulty walking, or a heart condition, would not affect web access) but many do. (Fact Sheet for "Web Content Accessibility Guidelines 1.0")

## Five Primary Disabilities

- Visual impairments
- Hearing impairments
- Mobility impairments
- Cognitive impairments
- Seizure disorders

## Major Sources of Information

- The really good stuff, mainly websites but also a few print works

## Break

## Analyzing Websites

- Usability
- Accessibility

## Usability Checklist

- Images & animations. Use the alt attribute to describe the function of each visual.
- Image maps. Use the client-side map and text for hotspots.
- Multimedia. Provide captioning and transcripts of audio, and descriptions of video.
- Hypertext links. Use text that makes sense when read out of context. For example, avoid "click here."
- Page organization. Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
- Graphs & charts. Summarize or use the longdesc attribute.
- Scripts, applets, & plug-ins. Provide alternative content in case active features are inaccessible or unsupported.
- Frames. Use the noframes element and meaningful titles.
- Tables. Make line-by-line reading sensible. Summarize.
- Check your work. Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG

## Usability Design Cycle

## What users bring

- Most users have screen area set to 800 X 600 (3/2003)
- Short attention span
- Task in mind or an information need
- Previous experience with websites and other media
- Limited connection speed

## What users bring

- Users do not read - they scan
- Used to printing and page idea

## Guidelines

- Jargon – OPAC, Database, department names
- Don’t make them think
- 20% of content gets 80% of your views.
- Check your logs
- Typical “visit” just 4 to 5 clicks
- What to leave out of the site
- _[http://www.jkup.net/terms.html](http://www.jkup.net/terms.html)_

## Guidelines

- Text quality
- Paper 600 dpi to thousands of dpi
- Computer screen 70 dpi to 100 dpi max.

## Usability of other items

- Newspaper
- “Above the fold”, sections, and paging
- Books
- Index, paging, TOC and chapters
- Physicality of a  book – marking etc.
- Computers
- Hum, What context do they give us?
- Web pages????

## Guidelines

- One Goal per page?  Good or bad?
- User centered goals
- Page size and accessibility.  Does it matter? One screen philosophy
- Scroll – left, right, up, down?
- Frames – a bad idea
- Tables for design or CSS

## Guidelines

- Tables over 500 pixels?
- 670 pixels max. to print
- Printing of pages

## Navigation

- What do users use?
- What they use vs. what they say they use.
- Navigation – right, left, top, bottom?
- User orientated navigation
- How can they find “deep content”?
- Make “Home” omnipresent

## Navigation

- Navigation on every page
- Designed for USERS
- Navigation via graphics + or -
- Use a site or “sight” map

## Guidelines - Links

- Click here?  Context and links
- Red and blue
- Underlining
- Off site links
- Title, H1 & link name matching
- Opens in a new window

## Guidelines

- Graphics - when and where?
- Graphics quality
- GIF, JPG and PNG
- Colors – 216  Where are all the others?
- What colors are “safe”