Usability
Usability is ensuring that a person of average or below-average ability can experience your website easily and completely. This is accomplished by employing design and navigation strategies that accomplish the following.
- Design should clearly communicate to the visitor:
- What is important
- What is secondary
- Navigation should always tell the user:
- Where they are
- Where they can go
- What is offered
Use a visual hierarchy
Visually associate like elements
- Elements that are associated logically should be associated visually.
- Visual associations allow the user to understand the elements’ commonality without reading the text.
- Example: The navigation bar groups links visually with common colors, fonts and placement.
Nest elements
- Nesting elements, or grouping them together by content, reinforces the visual hierarchy.
- Create boxes within each other to associate content
- Where have we seen this?
- Allows for distinction between areas of page:
- Read content, navigate, find general site information, et cetera.
- This should be immediately evident with proper distinctions between sections of the page.
Write concisely
- This practice is more important online than in print.
- Site visitors scan webpages first, then decide what to read; long blocks of text discourage the visitor.
- When writing for the Web, chunk content and utilize non-paragraph format (quote outs, lists, subheads, images, etc).
- Unnecessary text causes three problems
- Noise level.
- Lack of distinction between content.
- Sometimes requires scrolling
- Write in "chunks"
- The expression of an idea or concept.
- Roughly 200-350 words; any longer passages should be broken with subheaders or into new documents.
- Review McAdams' rules for writing for the Web for a fuller explanation.
- What news site does this most effectively?
- Language to avoid:
- Instructions, eg. “click here”, should be unnecessary.
- Happy talk, simply to be sociable: “Welcome to my website.”
- Other text that tells the visitor nothing.
Organize information
- Logos / site IDs
- Page headers
- Page headers are unique to the page, tell visitor current location on site.
- Use position, size, typeface to contrast page name with other, less important content.
- Make it match the internal link: If the link is labeled “Friends,” name the page “Friends” (not “Friends and Family” or otherwise).
- Page titles
- Page titles should also be unique to the page, to reinforce location
- Usually include site name followed by location within site; John Doe :: Work Experience
Provide clear navigation
- Navigation needs to tell the visitor where they are in relation to other pages
- The navigation bar should include a style for the current page -- use <span> and dead link.
- For larger sites: breadcrumbs
Accessibility
Accessibility standards ensure that online content is viewable by the widest audience, including:
- Visually impaired
- Motor impaired
- Web crawlers / robots
- Smart phone users
Visual material
- Images are not inherently readable
- For images, provide alternative text that explains the image
- Without alternative text, a reader or crawler will register the image as [IMAGE] – not very helpful.
- Use description: <img src=”mom.jpg” alt=”This is a picture of my mother in China” />
- NOT file name or other unhelpful text: <img src=”mom.jpg” alt=”mom.jpg” />
- Alternative text only in HTML not CSS (background images not applicable)
Web crawlers
- Search for content by reading pages but are "blind."
- Flash, Quicktime content is not accessible to crawlers.
- SEO strategies should be employed to reach broad audience.
Color
The law
- Section 508 of the Rehabilitation Act covers communication devices, within these are Web documents.
- Law does not apply to every website, only those of the federal government or an agency that receives federal funding.
- 508 recommends using alternative text on images, and accessible formats for multimedia presentations.
