Lecture 6a:
Usability and Accessibility
What You Will Learn Today
- Describe characteristics and design implications of the web medium.
- Describe usability and principles of user-centred design and
development.
- Describe ways to design pages to load fast for users with limited
bandwidth and to test loading speed.
- Describe accessibility standards and ways to design for people with
disabilities or limited browsers.
- Describe internationalization
issues and ways to design for multiple languages and countries.
- Common mistake: treating the Web exactly like another medium.
- book, newspaper, magazine, journal, document, brochure, television,
radio, telephone, video games, software, etc.
- Many existing documents and products are dumped onto the Web with little
or no modification.
- How is the Web similar to and different from other media?
- What are the Web's unique characteristics?
- What are the Web's strengths and weaknesses?
- How are these like/unlike the characteristics of other media listed
above?
- Here are a few of the Web's characteristics relative to some other media.
- Resolution, color depth and readability are low.
- CRTs cause eye fatigue (emit light, flicker, poorly focused, large
pixel size 72 dpi).
- Access speed to each page varies greatly depending on user
connections but is usually low.
- Multimedia such as animation, audio and video is usually limited
by low bandwidth.
- Screen size varies and depends on the user's monitor and browser.
- Easy to switch to another site, like changing channels; difficult
to confine the user to one site.
- Much control of content selection and sequence can be given to
users.
- Quick access to information can be provided.
- Hypertext can provide many paths through the content, not
merely linear/sequential.
- Interactivity and immediate feedback can be provided. The Web is
not merely for broadcasting information.
- Can be used as a software interface for server applications like
e-mail, web development and database management.
- Can be made freely accessible to a world-wide audience.
- Can be an inexpensive way to publish information.
- Content and format tend to change often because changes and
updates are relatively quick and easy to make.
- Available only to a wealthy minority of the world's population
(requires a computer and Internet connection).
- What other characteristics can you think of?
- What are the implications of each of these characteristics to the
design of your site?
- Information should be quick and easy to access.
- Provide a clear, consistent navigation scheme and multiple paths to the
content.
- Frequently used content should be the easiest and most obvious to
access.
- Link to related content whenever possible, briefly explaining the link
with a
title attribute.
- Schedule and budget for maintenance and regular updates. Keep the
content correct and up-to-date.
- Information should be clearly organized and presented.
- Provide a consistent navigation scheme and make use of hyperlinks.
- Keep lists and procedural steps short (7 plus or minus 2 items);
subdivide if there are more.
- Decide how much content is appropriate to provide on each page.
- Information should be easy to read.
- Users scan or skim and focus on headings instead of reading every word.
- Use many headings and short blocks of text.
- Clicking a link is generally much easier than scrolling.
- Use short top-level pages to minimize scrolling.
- Use few fonts and colors, and choose complementary fonts and colours.
- Use dark text on a light background and high color contrast for large
amounts of text.
- Use active white space to separate page elements.
- Communication with your users should be the focus of your site
design.
- Your clients' opinions of the users may be biased and not based
on scientific/empirical evidence.
- Be aware of your own biases and ego (the urge to "show
off" your Web skills, toys and special effects).
- Profile your users. Gather information through surveys, interviews,
etc. Then write a summary.
- What are their characteristics, expectations, problems, wants, needs,
priorities?
- Site organization should reflect the users' knowledge and mental
models of the content.
- List a number of possible content topics and ask users to categorize
them.
- The style, tone or look and feel of your site should resemble the
content and target audience.
- formal/informal, academic/commercial, logical/artistic,
informative/entertaining, etc.
- The ultimate judge of your site is the user.
- No matter how many design principles you follow, you can only know the
effect of your site after it is used.
- Usability tests can provide accurate predictions of how your
users will perceive and use your site.
- Some web authoring programs can estimate the number of seconds a
page will take to load for a given speed.
- FrontPage tells me this page would take 6 seconds to download using a
28.8 kbps modem.
- You can estimate download time yourself by dividing total size of all
files by the bandwidth.
- For this page, I estimate 19 KB * 8 bits/byte / 28.8 kbps = 5 seconds.
- Test your pages for a typical user's connection to verify these
estimates.
- How much download time is acceptable?
- Depends on your users' motivation to wait, speed of competing sites,
An accessible site avoids excluding users who are limited by a number
of factors, including:
- Slow connection speeds (probably the biggest limit for the largest number
of users)
- Visual limitations
- Blind people and search engines; color blindness; poor vision;
low-resolution screens
- Text-only browsers such as Lynx and Links
- Browsers with images disabled for faster downloading
- Navigational limitations
- Inability to use keyboard and/or mouse
- Awkward keyboards and/or pointing devices e.g. portable computers
- Speech recognition for hands-free browsing; text-to-speech browser
readers
- Language limitations
- non-native English speakers
- speakers of other languages, automatic page translators
Accessibility Techniques
- Design for speed.
- Reduce size, number and importance of images.
- Reduce page size.
- Complex tables take time to load. Divide into simpler tables. Use width
and height attributes.
- Separate content and presentation.
- Use logical formatting like <strong> and <em> instead of physical
formatting like <b> and <i>.
- Use standard, correct HTML and XHTML. Use
<h1> for
primary headings. Do not omit closing tags.
- Avoid browser-specific features; use only features recognized by
all browsers.
- Use links to Cascading Style Sheets instead of embedded CSS or
font tags for text formatting.
- Avoid using tables for page layout. (Many sites ignore this,
though.)
- Design for visual and navigational limitations.
- Use multiple, redundant attributes to differentiate function; do not rely
on a single attribute like graphics or colour.
- Supply
alt attributes for all images.
(Test by disabling images in your browser.)
- If you use a graphical navigation bar, also supply a navigation bar
of text links.
- Link text should describe the contents of the target page. Avoid "click
here."
- Use colors which contrast in lightness (or darkness) and not merely
hue (RGB/CMY) and saturation (difference from gray).
- Make a logical tab order for your links. (Test by pressing tab
several times in your browser.)
- Avoid frames, or at least provide a noframes version of the site.
- Check if your site would make sense if the words were read aloud to a
visually impaired person.
Summary of Accessibility
- Users can be limited due to several factors including aging, physical
disabilities, equipment, and language.
- Too much attention to accessibility may sacrifice features which would
benefit the vast majority of users.
- However, many accessibility improvements are very easy to make and can
greatly improve general usability.
- For more information, see the W3C web accessibility initiative page at
www.w3.org/WAI/.
- To check your site for accessibility, go to the web-based site checker
Bobby at www.cast.org/bobby/.
- Demographics: In 1997 80% of Internet users were in North America.
In 2010 only 20% will be North American, 50% Asian.
- Avoid cultural biases like language-specific metaphors and gesture
icons that can be offensive in some cultures.
- Avoid date/time ambiguity. Use month names rather than 4/5/2004.
Use AM/PM or 24-hour clocks. Specify the time zone.
- Commercial sites in English with International appeal should use .com;
others should use a country domain like .ug.
- If many of your users come from countries of different languages, provide
separate language versions of the site.
- Provide versions of every page, or at least provide versions of
frequently accessed pages.
- You can check server logs to see the countries where your users are
browsing from.
- Provide an easy-to-understand way for the user to choose the language.
- links or menu? on the home page or every page?
- start with a default language or use a language selection page?
- flag, language name, or two-letter abbreviation (en, fr, de, es, sw)?
- Make it clear whether your site is for a local or global audience.
To Do After Class