Web UsabilityStarring the Webcredibles:

Link, Dr. Web Credible, &

Wendy Warner

Starring: Link Webber• Link worked as a

broadband cable technician connecting the UK to the Internet.

• Able to move at phenomenal speeds.

• Able to transfer his matter into digital energy.

• On the lookout for the evils of bad usability and accessibility.

Dr. WebCredible• The real inventor of the

Internet (which he was never credited with)

• Invented, among others the ‘Digital Atom Compiler’ which enables physical beings to explore the digital world he created.

• Leads the crack team known as 'The Webcredibles' fixing usability and accessibility problems.

Wendy Warner• Wendy has the ability

to fly and upload her physical self onto any computer device.

• Extraordinary analytical abilities and problem solving skills.

• On the lookout for usability and accessibility wrong-doing both online and offline.

Introduction

Usability

• The pages must download quickly

• Usability studies have shown that 8.6 seconds is the maximum time web users will wait for a page to download.

Click Here Monster

Use Descriptive Link Text

• Link text stands out to scanning Web users

• “click here” makes no sense out of context

• “click here” is useless to site visitors scanning Web pages

• “click here” is useless to screen readers

Usability

• Information should be easy to retrieve

• Readers scan—they don’t read word-for-word

• On web pages users see text before they see images

• Headings, link text, bold text, and bulleted lists attract the users attention first.

Writing Right for the Web

• Use lists (example of chunking)

– Lists allow users to read the information vertically rather than horizontally

– Lists are easier to scan

– Lists are less intimidating

– Lists are usually more succinct

– Lists prevent long pages of text requiring users to scroll to read the page

User-Centered Design

• Put the intended user of a site at the center of its design and development

• Talk directly to the user

The Missing ALT Tag

The ALT Tag• Provide alternate text for every graphic.

• Alternate text displays in the event that the graphic doesn’t.

• The easiest way to make the content of your site accessible to a wider audience, including people with text-only browsers.

• Helpful to users who have their graphics turned off for faster page downloading.

• ALT tags provide assistance to screen readers

Consistent Layout

Consistent Layout

• The website should be easy to navigate

• Consistent layout generates a sense of unity or oneness within the Web site

• Utilize consistency in. . – Alignment– A common graphic theme– A common color theme

• BUT. . . limit the number of colors in your scheme to three. Additional colors lessen the effectiveness of the color scheme

Lost in Cyberspace

The Color of Hyperlinks

• Blue is the universal color for unvisited hyperlinks

• Violet is the universal color for visited hyperlinks

• If these link colors are changed, be sure to be consistent throughout the site so the user isn’t confused

Unsolicited Pop-Up Windows

The Irritating Pop-Up

• Even an opening “Splash” can drown out a user

• No wonder “pop-up’s” are frequently blocked

Using Clear, Simple, Appropriate Language

Writing Right for the Web

• Use clear, concise, and simple language– Avoid slang or jargon– Avoid complex sentence structure

• Limit each paragraph to one idea

• Front-load content– Put the conclusion first (inverted pyramid)– Follow the conclusion with the what, how,

where, when, why

Using JavaScript for Good

JavaScript in Action

• A simple example of Javascript in action is the image rollover, where one image is swapped for another when the mouse rolls over it.

• A more sophisticated example is a JavaScript powered shopping cart.

• Make sure the use of JavaScript does not slow down the loading of the Web page.

The Lost Shopping Cart

http://www.webcredible.co.uk/