T2L1
Usability/Accessibility/Information Architecture
Introduction
This lesson is designed for you to gather information about usability, accessibility, and information architecture as it relates to the world wide web. When you finish this lesson, you should be able to:
- Describe user limitations that affect web page and site design.
- Describe basic information architecture issues, including usability and accessibility.
At a rapid rate much of the world is coming on-line and individuals are connecting with each other regardless of the physical distance that separates them and the individual and cultural difference between them. Many bridges are being built that circumvent centralize authority, join individuals of common interests and create new communities.
At the same time many of us using computers do so in social isolation and can easily fall into the assumptions that what I can see read and do everyone can and for a variety of reasons they cannot. We must always try to put ourselves in the others place to make these new communities and connections work well. This is done most easily by asking questions and not making assumptions based on our personal patterns and experiences with computers, networks and information.
Thoughtful consideration of the users is the basis understanding the usability, accessibility and how to organize information on the Internet.
Always consider your audience when designing web pages and sites. What are the user limitations and accessibility issuesthat you need to account for?
How can you maximize the usability of a site? You must consider the information architecture of a site when doing so.
Additional Resources
Information Architecture
Whole Site
The Changing World - Site Design Example
General Design Resource
- Page Design Tips
Information Architecture Guide
Usable Web
Information Architecture Guide
Usable Web
Usability
A Kinder, Gentler Web Site
Usability Checklist for Developers
The Alertbox: Current Issues in Web Usability
<devhead> - Usability
webreview.com - Usability
Accessibility
Equal Access to Software and Information
<devhead> - Accessibility
Web Content Accessibility Guidelines 1.0
Bobby - Check Your Page for Accessibility
IBM Home Page Reader
Applying the ADA to the Internet: A Web Accessibility Standard
The Web Accessibility Initiative
Center for Applied Special Technology
User Limitations and Accessibility
When considering the user of your site, you need to consider the technology the user has, as well as the physical capabilities of the user him/herself.
The Limitations of the Users' Computer System
How fast is the average user's connection? Keep in mind that most users are on a modem and the actual connection speed is typically less than 45k. Thus, a streaming video that plays fine off your design computer may stutter, skip frames, or not even play at all. For this reason, many site designers today have developed a minimalist philosophy - give just enough information. If something like streaming video is crucial to your site, make the users aware of the problems they may encounter, and try to offer some alternatives (such as still pictures with an audio-only overlay, or perhaps just a text overlay).
What browser will the typical user run? What plug-ins do users have? Keep in mind having to download a new browser and plug-ins over a modem connection is usually at least a 10-minute interruption. This may discourage users from even looking at your site! Many sites proclaim what browser the site was designed on and for. Use of good, clean HTML can partially avoid browser incompatibilities. The important thing here is to test your pages prior to release on all possible browsers you believe your users will run.
How big can a file be if it is coming over 28.8 or 56k modem and not lose the user? The best information available claims that users turn away from sites that take more than 10 seconds to download.
How long a document is too long for you to read comfortably on the screen? Screen resolution, which is presently between 72 to 92 pixels per inch (ppi), makes it difficult for many users to read long documents on the screen because the letters are broken up by the jagged pixels. This applies to both HTML and PDF documents. Thus, most text displays on a web page benefit from being short, with plenty of white space surrounding them.
The Limitations of the User
Accessibility is about making sure a site reaches everyone who wants to be reached and particularly addresses the special user, those with some disability that limits their ability to access information on the Web if those needs haven't been considered and addressed.
Remember there are 40 million Americans who a have disabilities, if that percentage is consistent that would make the number of disabled worldwide 1,000,000,000. The chances are the number is greater than that and the Web is increasingly reaching people world wide, especially in the most populous nations of the world, China and India.
It is often pointed out that access to education is the way out of poverty and deprivation and the lack of education a sentence to as impoverished life. The disabled are the largest group in most societies who are denied an education. The web can address that if attention is paid to making sites available to those who for reasons of infirmity, inheritance or age can obtain the information available on the web. That this is central to education goes without saying, that it is also central to sales may need to be pointed out. If a customer can find the produce and information about it they can buy it.
All sites should be accessible to users who have a variety of different limitations. Presently most sites are not. What is called for is careful and thoughtful preparation and coding of a site. Here is check list of things that should be done when preparing a Web site to make it easier for those with disabilities. The percentage of people with disabilities who are on the web is greater than those without - it is a fine way to level the learning and work environments so all can enter, but it requires care and thoughtfulness.
- What disabilities limit user's access to information, like images or colors? For instance, 10% of men are red/green color blind. Using this combination of colors in a foreground/background scheme would be disastrous!
- Can your user grasp long sentences? Dyslexics can’t.
- Are the distinctions made in color and shape great enough to be seen by the user? It is important to realize that as people get older they often can make fewer subtle distinctions of color and shape.
- Does your user have use of his/her basic motor functions - can s/he use a mouse to navigate your site by pointing, clicking, and dragging? In the United States alone we need to serve more than 40 million people with disabilities and presently about 75% of them use the Web (50% of the general population do).
Here are some accessibility issues to consider when designing web pages and sites:
1. Use the alt="text" attribute to provide text equivalents for visuals. For example, if you are displaying a logo, the alternative text might read "[THE LOGO FOR THIS SITE]."
When a sighted visitor views the page with a graphical browser, he will see a picture of the logo. When someone who is blind visits, his voice output program will read [THE LOGO FOR THIS SITE]. This gives him a clear idea of what is on the page. In addition, any visitor coming to the site using a text-based browser will understand that there is a logo there instead of the more ambiguous "image," the default result when no ALT attribute is used. ALT attributes should be short (less than 5 words) as browsers sometimes have difficulty displaying lengthy ALT text.
2. Use client-side image maps to provide accessible text for image map hot spots. Avoid server-side maps. Include menu alternatives for image maps to ensure that the embedded links are accessible.
In an image map (also called ISMAP) a part of a picture can be clicked to activate a link to another page. For example, on a map of the United States, a visitor might click on an image of the state of Oregon to find information about the state. If the Web page developer has not included an alternative menu, visitors using text-based browsers can be totally blocked from the site, or sent on a wild goose chase clicking unlabeled links.
When viewed through a graphical browser, such as Netscape Navigator or Internet Explorer , a beautiful picture of a floor map of a library appears. The visitor can choose selected areas of the library to view. But, when a visitor using a text-based browser visits the site, this is what he sees:
Our Library Page
[ISMAP]
At this point the visitor is stuck, as text-based browsers will not interpret the hypertext links embedded in the image map. His only option is to back out of the site. A visitor who uses a text-based browser, perhaps because he is blind, can't get to your information unless an alternative is provided. The accessibility of an image map depends on the software used as a Web site's server. Check with your system administrator to find out about the capabilities of your Web server software. Some server software will automatically render text links for image maps while other versions won't. Providing text alternatives to image-based links will ensure image maps are usable to the widest audience.
3. Summarize the content of each graph and chart.
When using text to describe complex graphs or charts, or to transcribe sound files containing speech or lyrics, summarize the information next to the element, or consider using the LONGDESC tag which provides for more detailed text than ALT. Lengthy descriptions can also be linked to an external document or immediately follow the graphic or sound element.
4. If video, sound or animations are included, provide captions or transcripts of the content.
Multimedia formats that include audio can present barriers to people with hearing impairments as well as to people with less sophisticated computer systems. Provide captions and transcriptions for these resources so visitors who cannot hear have an alternative method for accessing the information.
5. Provide alternate content for scripts, applets, and plug-ins so important information is not lost when those features are unsupported or turned off.
Many of these programs are currently not accessible to people using text-based browsers. To ensure that people with visual and hearing impairments can access your information, provide the content from these programs in alternative, text-based formats. When using JavaScript, make sure to employ the built-in accessibility features within the Java Developer's Kit.
6. Associate labels with form elements.
7. Provide methods for skipping over navigation links to get to main content of page.
8. If frames are used, provide a title for each frame and frame page so that users can track frames by title.
Use tables and frames sparingly and consider alternatives. Most screen reader programs read from left to right, jumbling the meaning of information in tables. Some blind visitors can interpret tabular information, but it is best to look for other ways to present the information to ensure that visitors with visual impairments can reach your data. In the same vein, frames often present logistical nightmares to text-based screen reading software and make it difficult for visitors to share URLs of pages that may be buried within a frame structure. Evaluate whether frames are truly necessary at your site. If no alternatives to frames are available, ensure that frames are labeled with the TITLE attribute; provide a text alternative with NOFRAMES; and use the TARGET = "_top" attribute to ensure useful Uniform Resource Location (URL) addressing is provided for each interior frame.
9. Control presentation and layout with style sheets (CSS) rather than presentation elements and attributes. See the lesson on Cascading Style Sheets for more information.
10. Use descriptive link text, not just "click here."
Ensure that each link makes sense when it is read out of context. Visitors who use screen reading software can adjust their software to read only the links on a page. For this reason, links should provide enough information when read out of context. Use a more descriptive phrase than "click here" as a link or next to a graphic used as a link.
For example:
Click here for information about our company.
Is difficult to interpret, however
Information about our company.
is quite clear.
11. Design large buttons.
Small buttons marking links can be difficult targets for visitors with mobility impairments that result in restricted hand movements. Larger buttons can make it easier for all visitors to select the links on your page. Test how your buttons appear and operate with a variety of monitor sizes and at different screen resolutions.
12. Include a note about accessibility.
Notify site visitors that you are concerned about accessibility by including a Web access symbol on your page. Encourage users to notify you with their accessibility concerns.
For more information on these issues, please visit the Equal Access to Software and Information site.
Usability
Usability can be defined as the effectiveness of a system. Can users use the system to accomplish their goals, and can they do so effectively and easily? Even if the system does exactly the right thing in theory, it will still be a poor system if users cannot figure out how to get it to work. Good usability is about designing things so that they make sense to the people who use them.
Consider the book format. Did you know the book took its the present codex form 1600 to 1800 years ago? It was largely unchanged by the development of the printed book, in both the Europe and Asia. There is something about a book's usability that endures.
Usability has several key characteristics:
1. Ease of learning: How fast can users who have never seen the user interface before learn it sufficiently well to accomplish basic tasks? If this occurs automatically, you have done a great job! One way to accomplish this is to use everyday metaphors (like a table of contents) in your designs. Related to this is memorability: If users return to your site after a period of time, how quickly can they remember how to utilize your system? Navigation tools need to be kept in the same place on the screen within a site and when possible throughout all sites. Even little changes can slow things down as anyone can tell you who moves from one browser to another or from one platform to anther.
2. Efficiency and ease of use: Once experienced users have learned to use the system, how fast can they accomplish tasks? Related to this is the layout of all media elements, but especially text. What patterns of presentation of information are most commonly used both on and off the Web? Look at print catalogues and web catalogues, web dictionaries and print dictionaries, print newspapers and online newspapers. Text should be easy to scan, by using:
- Tables of contents.
- Headings.
- Large typeheadings, smaller body text.
- Topic sentences.
- Keep text passages short.
- Bold or highlighted text for key words/phrases.
- Bulleted lists.
- Graphics for complex ideas that can be related visually. [[link to M2L5 here]]
- Captions.
One source of usability is familiarity. If you know what to expect you can respond with out thinking and without spending time figuring out how to do something. Navigation tools need to be kept in the same place on the screen within a site and when possible through out all sites. Even little changes can slow things down as anyone can tell you who moves from one browser to another or from one platform to another.
How important ease of use can be seen most easily in the development of the graphical user interface (GUI) and the mouse. It is still possible to do everything on most platforms using key commands and it can be much faster and more efficient, but it is harder to learn and has fallen in wide spread use.
3. Error frequency and severity: How often do users make errors while using the system, how serious are these errors, and how easy is it to recover from a user error? A typical example is in navigation, where users might go to a page or section they didn't really want to go to. Have you provided a way for them to realize their mistake and easily correct it?
4. Subjective satisfaction: How much does the user like using the system? This is a somewhat subjective criteria. Beyond the first items listed here, this is a matter of aesthetics and personal taste.