Post on 10-Dec-2015
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/