|
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 issues[[link to single html page on this]] that 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
[[http://ds.dial.pipex.com/pixelp/wpdesign/]]
The Changing World - Site Design Example
[[http://www.tafe.sa.edu.au/vet_div/irsi/best_prac/htm/mainmenu.html]]
General Design Resource
[[http://reallybig.com/default.shtml]]
www.builder.com - Page Design Tips
[[http://www.builder.com/Graphics/CTips2/index.html?st.cn.fd.main.bl]]
Information Architecture Guide
[[http://argus-inc.com/iaguide/]]
Usable Web
[[http://usableweb.com/]]
Information Architecture Guide
[[http://argus-inc.com/iaguide/]]
Usable Web
[[http://usableweb.com/]]
Usability
A Kinder, Gentler Web Site
[[http://www.interknight.com/kindergentlerwebsite.html]]
Usability Checklist for Developers
[[http://webreview.com/pub/1999/10/15/usability/]]
The Alertbox: Current Issues in Web Usability
[[http://www.useit.com/alertbox/]]
- Usability
[[http://www.zdnet.com/devhead/filters/usability/]]
webreview.com - Usability
[[http://webreview.com/wr/pub/Usability]]
Accessibility
Equal Access to Software and Information
[[http://www.rit.edu/~easi/
- Accessibility
[[http://www.zdnet.com/devhead/filters/accessibility/]]
Web Content Accessibility Guidelines 1.0
[[http://www.w3.org/TR/1999/WAI-WEBCONTENT-19990505/]]
Bobby - Check Your Page for Accessibility
[[http://www.w3.org/WAI/GL/]]
IBM Home Page Reader
[[http://www.rs6000.ibm.com/sns/hpr.html]]
Applying the ADA to the Internet: A Web Accessibility Standard
[[http://consumerlawpage.com/article/ada.shtml]]
The Web Accessibility Initiative
[[http://www.w3.org/WAI/]]
Center for Applied Special Technology
[[http://www.cast.org/]]
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 animation 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. [[link to T6L1]]
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. [[http://www.rit.edu/~easi/]]
Reflective Questions
Take the time to answer these questions on your own:
Explain how to accommodate non-English speaking and reading web users.
Describe what changes need to be made in most Web documents so they are accessible to the people with no or limited vision, no use of their hands, and no hearing.
Explain why the Web has been called the ultimate prosthetic device.
It is projected that in the next five years over 60% of web users will be non-English speakers and readers. How can you accommodate them on a web site?
What changes need to be made in most Web documents so they are accessible to the blind or those with limited vision? What changes for those who can't use their hands? For those who can't hear?
What answer can you give to why the Web has been called the ultimate prosthetic device?
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.
5. The site's structure should reflect the site's content: It should be a picture of the content and should illuminate the attitudes of the provider. The content of the site should grow out of what needs to be communicated and how users can best find and grasp that information. Form is a part of meaning, not something added after the content has been developed. The form and structure of the site sets the tone, inflects the meaning and should clarify the purpose.
Here is a check list to use to evaluate if these goals have been reached:
1. Do users feel in control? Is the site designed so that people constantly "guess right."
2. Does it provide advice? tools? reference materials? Are they easy to find?
3. Do users enjoy their experience? Will they come back? Why?
4. Does it behave consistently throughout - for instance is the menu always in the same place, the search access?
5. Is it visually consistent, do the users know where they are? Does the site have a personality, a distinctive look?
6. Does the site reflect a clear understanding of how users do their work?
7. Are response times fast enough to keep users active attention, does it respond in 10 seconds or less on a modem connection?
8. Does the user know where they are as soon as the site starts to open?
To refine the usability of you sites, spend some time planning what you want them to do and who you expect your audience to be. Know your users. Know the tasks your users perform. Know what performance means to your users.
Reflective Questions
Take the time to answer or address these questions on your own.
Explain how the web compares to books in terms of function and ease of use.
Describe how they learned to use a library and the web.
Explain whether the library or the web requires more skills.
Explain where the user expects to find information and tools for finding it.
Describe which corner of the screen is the place where you expect to see the place to start a search.
Discuss what users look at and ignore on web pages.
Discuss whether users generally wander around or are directive when they visit a site and how to accommodate these different types of users.
Discuss why the book form has been so enduring.
Explain why the page continues to be the basic unit on the Web.]]
What can the web do better than books? What does it do worse than books? What do people say the web makes easy? Hard?
How did you learn to use a library? And the web? Which requires more skills?
Were does the user expect to find information and the tools for finding it? Which corner of the screen is the place you expect to see the place to start a search?
What does user look at and what do they ignore? Do users usually wander around or go directly to what they came to site for? How can you accommodate both types of users at a single site?
Why do you think the book form has been so enduring? Why is it easy to use and find your place in?
Why does the page continue to be the basic unit on the Web? Do you think it is because the computer screen is based on the page?
[[reflective questions can be shared in a CMC format at the instructor's discretion]]
Information Architecture
Information architecture is about planning the structure of a site so it is usable, accessible and easy to maintain. It involves reflecting the attitude, feel and tone of what the site is about. It involves systems of layout, labeling, navigation, and search to help people find and manage information more successfully. It also involves the physical layout of the page relationships. Good planning and good citizenship are crucial. Make sure both the originators and the end-users rights and privileges are served equally and well.
Attention to detail and a strong sense of organization are the most necessary skills for an information architect. The process of information architecture design begins with research into mission, vision, content, and audience. A well-designed information architecture minimizes the time that users of a Web site spend looking for information.
This checklist suggests places where the development of sound information architecture should start:
1. Who will use the site and its purpose should be established first before any details of the architecture are done.
Knowledge of the users' culture is extremely important. Why do we assume that the user will understand our images? Do you realize that to many people an image of building with a false front won't represent a store, a picture of a galvanized can with a lid isn't a trash can, and a rural delivery mailbox won't stand for mail?
Does your site assume that English is first the language of user? Does your site use humor? Verbal puns and metaphors are often difficult for people who are not native speakers of the language the pun was developed in.
For a lively and humorous view of how rapid access to information is changing many things look at the cluetrain manifesto [[http://www.cluetrain.com/]]
2. The structure of the site should reflect the needs of the user not the provider.
People with low vision or colorblindness, or those using black and white monitors, can have difficulty reading information at sites with busy backgrounds and dark colors. Some background images and colors obscure text and make reading difficult. Make sure that there is enough contrast between your text and the background of the page. Choose background, text and link colors carefully, and always test your site by viewing it at different resolutions and color depths. For example, you can change your monitor settings to a resolution of 640x480 and 16 colors for one test, and change to 1024x768 and 24 bit color for another.
3. The site structure should be as clear as possible - a tree diagram is often good to follow.
A consistent design and look makes it easier for visitors to locate the specific information they seek. For example, a feature presented on every page, such as a standard navigation menu or logo for the site, should always appear in the same place. A carefully planned, organizational scheme will help everyone use your site. A clear, consistent presentation will especially assist people with visual impairments or learning disabilities who have difficulty following disorganized presentations.
A tree diagram may be narrow and deep, or broad and shallow. New sites that are intended to grow may benefit from the broad and shallow approach, at least initially. This approach allows you to add content without major restructuring.
Narrow & Deep
Broad & Shallow
4. A site plan should involve those with different skills - graphic artists, programmers, writers and administrators should all be involved from the start.
5. Look for common industry standards - they are familiar to the user.
6. Look for redundancy in site architecture - it often adds ease of use.
7. Testing of usability should be done before a site is released.
Use standard HTML. Hypertext Markup Language (HTML) is the standard code used to create Web sites. HTML was designed to be a universal format outside the bounds of proprietary software and computer operating systems. The code works via tags that tell a Web browser where to find and how to display information. While nonstandard tags exist, using standard HTML as defined by the W3C will ensure that your content can be accessed by all browsers used by visitors to your site. Avoid tags, features and plug-ins that are available to only one brand or version of a browser.
8. How easy is the site to maintain? How out of date will it be in six months?
9. Does the design of the site reflect its purpose and origin?
The information architecture team needs to be have a good sense of design, the ability to organize information, the willingness to work though different concerns and different points of view and have the skills, collectively to execute a plan. They also always need to consider the relationship between the user and the site content.
Usability/Accessibility/Information Architecture Summary
This lesson was designed for you to gather information about web site usability, accessibility, and information architecture. When you are finished with this lesson, you should be able to do the following:
Describe user limitations that affect web page and site design.
Describe basic information architecture issues, including usability and accessibility.
A short summary of these topics are listed below. If you cannot do these things, you should review the lesson at least once. If you are still having difficulty, you should consider other sources of information that compliment this lesson, such as textbooks, tutors, and instructors.
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.
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.
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.
3. Summarize the content of each graph and chart.
4. If video, sound or animation are included, provide captions or transcripts of the content.
5. Provide alternate content for scripts, applets, and plug-ins so important information is not lost when those features are unsupported or turned off.
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.
9. Control presentation and layout with style sheets (CSS) rather than presentation elements and attributes.
10. Use descriptive link text, not just "click here."
11. Design large buttons.
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.
More detail. [[link to appropriate page]]
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.
Usability has several key characteristics:
1. High ease of learning.
2. High efficiency and ease of use.
3. Low error frequency and severity.
4. High subjective satisfaction.
5. The site's structure should reflect the site's content.
Here is a check list to use to evaluate if these goals have been reached:
1. Do users feel in control? Is the site designed so that people constantly "guess right."
2. Does it provide advice? tools? reference materials? Are they easy to find?
3. Do users enjoy their experience? Will they come back? Why?
4. Does it behave consistently throughout - for instance is the menu always in the same place, the search access?
5. Is it visually consistent, do the users know where they are? Does the site have a personality, a distinctive look?
6. Does the site reflect a clear understanding of how users do their work?
7. Are response times fast enough to keep users active attention, does it respond in 10 seconds or less on a modem connection?
8. Does the user know where they are as soon as the site starts to open?
More detail. [[link to appropriate page]]
Information Architecture
Information architecture is about planning the structure of a site so it is usable, accessible and easy to maintain.
This checklist suggests places where the development of sound information architecture should start:
1. Who will use the site and its purpose should be established first before any details of the architecture are done.
2. The structure of the site should reflect the needs of the user not the provider.
3. The site structure should be as clear as possible - a tree diagram is often good to follow.
4. A site plan should involve those with different skills - graphic artists, programmers, writers and administrators should all be involved from the start.
5. Look for common industry standards - they are familiar to the user.
6. Look for redundancy in site architecture - it often adds ease of use.
7. Testing of usability should be done before a site is released.
8. How easy is the site to maintain? How out of date will it be in six months?
9. Does the design of the site reflect its purpose and origin?
More detail. [[link to appropriate page]]
|
