Many people can intuitively categorize a website as "good" or "bad," but there are underlying principles of usability and accessibility at work, as presented in this week's Supplementary Information.

Identify one professional website that exemplifies good design and a second website that exemplifies bad design. Try to identify extremes-find the uniformly "best" and "worst" websites you can, based upon the design standards presented this week. Provide the URLs of the websites and briefly describe each. Explain why you chose these specific websites, citing the resources and/or other appropriate research about the best practices of usability and accessibility. Include screenshots of the sites that support your claims. Please limit your choices to professional websites that are appropriate for the classroom.

Below is the  Supplementary Information

 

Web Design Patterns

In 1978, Christopher Alexander wrote a book about architecture (as in the design of buildings) called A Pattern Language. This identified over 250 common problems in architecture and proposed a similar number of design patterns to provide solutions to those problems. Since then many other disciplines have adopted the idea of design patterns.

Many of the design problems facing web designers are very common and are similar on most sites. It is therefore quite natural that many design patterns have been suggested as generic solutions to commonly recurring problems. So what problems would design patterns typically address? Here are some examples:

• Establishing what design is appropriate to each genre (type of website). Van Duyne, Landy, and Hong (2007) suggest that personal e-commerce sites need to make it clear why people should purchase from them, provide multiple ways to find products, and avoid surprises by making privacy and security policies and additional charges clear. Web design therefore goes well beyond what XHTML code covered in this course to use to higher-level business objectives that are crucial to the organization.
• Finding ways to make websites more easily navigable. This might involve placing tools to search and browse the site at the top of a page.
• Helping customers to complete tasks by minimizing the number of steps required, providing progress bars to let customers know where they are in the process, and making sure the Back button always works.

Van Duyne, Landy, and Hong (2007) stress the importance of a website meeting the customer's needs (customer-centered design). This is not necessarily something that a web programmer will be able to assess. Websites are produced for a particular business purpose and there is likely to be a need for people with both business and technical computing skills to ensure that the business goals are met by those writing the code.

Web Usability

One of the main aims of design patterns is to promote usability, which may be defined as "the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use" (ISO 9241-11). The stressing of web usability has been partly a reaction against the idea that websites simply need to look good or be "cool." Users come to sites to find information, leave a message, buy a product, etc. and if they cannot achieve these goals, they will abandon the site and go elsewhere. Hence the need for usability, to avoid problems such as:

• A website that is confusing and not at all self-explanatory.
• A failure to realize that users may select the first reasonable option rather than pondering over the best possible link or menu choice.
• A navigation path to a desired piece of information that requires too many mouse clicks or too much thought.
• Having too many words on a web page.
• A home page that does not tell you what the site is and what it is used for.
• Confusing instructions that lead to personal injury or damage to property.

One of the leading figures in this field has been Jakob Nielsen, who has a website calledhttp://www.nngroup.com/ (http://www.nngroup.com/). This site contains a wealth of information about usability studies. Many find the design of Nielsen's site very plain, and hence other writers may make the point that usability and a striking appearance are not necessarily incompatible.

Another major figure, Steve Krug, also has a website called sensible.com (http://sensible.com/) with useful resources, including sample chapters from his books in electronic form (Krug, 2010). A major theme of Krug's work is that websites should not make the user think too much. Navigation around a site should require little thought and effort. The user who is challenged to think too much about how to achieve his or her goals is one who is likely to give up and leave the site.

Both Nielsen and Krug tend to concentrate on qualitative research. They ask test users to identify problems in a web page or site. Nielsen (2000) argued that as few as 5 test users would identify 85% of usability problems.

However, in other cases, some may be seeking some quantitative assessment of a website by a group of representative users. Leading researchers in this aspect of usability are Tom Tullis and Bill Albert who also have a website (http://measuringux.com/) containing a store of resources. Their emphasis is on metrics, ways of measuring things. They would typically suggest measuring performance (such as how long it takes for a user to complete a task, or how many users perform a task successfully) or satisfaction (such as asking users, on a scale of 1 to 7, how they rate some aspect of a website).

Other Aspects of Web Design

For those who are interested, there are many opportunities for self-directed learning. This is a huge topic and you can choose how deeply to immerse yourself in it. Here are a few areas that could be explored later.

The design of navigation systems (the way one navigates around a website by clicking on links) is something of an art. James Kalbach (2007) addresses this topic on his site, Designing Web Navigation. It addresses key questions such as how one navigates around the web; how, in general, one finds information; and how one moves from an abstract concept to a concrete solution.

Peter Pirolli introduced the term "information foraging" to describe the way users seek information. They are compared to animals following a scent that leads to food. The way this affects the design of websites is described in detail by Peter Pirolli and Stuart Card (1999) and further information about the authors is at parc (http://www.parc.com/). An interview with Pirolli can be found at Web Site Optimization (http://www.websiteoptimization.com/speed/tweak/information-foraging/interview.html). Here he talks about "satisficing." Because people don't have an unlimited amount of time to search for information, they settle for something good enough, but possibly less than the best solution.

Information architecture, which deals with the structuring of information on a website, has emerged as a separate sub-topic. A simple example of using information architecture principles to plan a website can be found at Lane (2008). There is now an Information Architecture Institute (http://iainstitute.org/en/) and a Journal of Information Architecture (http://journalofia.org/). An interview with two respected authors in the field, Peter Morville and Lou Rosenfeld, can be found at Evans (2002). In this interview, Morville talks about the priorities for designing the architecture of a new site, namely identifying the site's audience and what information needs they have, how to make the content accessible to users, and whether your designs can be implemented given the organization's resource constraints.

The way people search for information has generated the concept of search patterns. If this is a subject of interest, further information can be obtained at Peter Morville and Jeffrey Callender (2010a, 2010b). Patterns might include the use of autocomplete when typing in search terms, making sure that search facilities return the most relevant results in the top three (best first), using federated searches that look through several databases at once, the development of an advanced search facility (such as that offered by eBay or Google), and approaches to pagination, the number of results shown per page.

The task of designing web interfaces is addressed well by Scott and Neil (2009). A number of examples of interface designs are presented there. The authors outline six design principles: allowing the editing of content without changing web pages, reducing the effort needed to interact with a site, displaying information without page refreshes, providing invitation cues for users to move to the next level, using transitions, visual effects to mark the fact that a change has taken place (such as making areas of the screen bright or dim); and using real-time feedback when searching for information.

Web Accessibility

The previous section listed topics that could be explored as optional extras. Web accessibility for people with disabilities does not fall into that category. There are at least three reasons why businesses would want people with disabilities to be able to use their sites successfully, including:

1. Legislation. It is likely that they will do business in at least one country that has legislation requiring websites to be accessible. They want to avoid a lawsuit.
2. Publicity. Even where an inaccessible website does not break any laws, the negative publicity arising from complaints by disability groups can be damaging to the business. The business may also feel ethical responsibility in this area.
3. Sales. Potential buyers who cannot use the website successfully will likely result in lost sales. In difficult trading conditions the loss of a small percentage of possible buyers may mean the difference between a profit and a loss. Businesses want to make their site inviting to as many buyers as possible.

Understanding the Issues

Given the visual nature of websites, the emphasis has inevitably been on the problems created for people who are totally blind or partially sighted. There are two main things to bear in mind:

1. A blind person will typically rely on a screen reader, a piece of software that reads out loud the text on a web page. Pictures will convey no information without the use of the altattribute.
2. A mouse relies on the visual alignment of a mouse pointer and an object on screen. That is no use to someone who is blind. Navigation around a page is likely to be by means of keyboard commands.

A number of free screen readers are available and it would certainly be useful to download one of these at some point to understand how they work. Examples are NVDA (http://www.nvda-project.org/) and Thunder at ScreenReader.net (http://www.screenReader.net).

The tab key is often used by visually disabled people to move from one screen object to another e.g. moving between fields in an XHTML form. It is possible for the default tab order to be changed using JavaScript andtabIndex (W3 Schools, 2010). Each browser has its own set of keyboard shortcuts that can be used instead of mouse clicks. The Internet Explorer 8 list can be found at Microsoft's website: Internet Explorer Keyboard Shortcuts and the Firefox shortcuts are at the Mozilla website: Keyboard Shortcuts. Programmers can define their own keyboard shortcuts using the XHTML accesskey attribute.

Universal Design?

One way of accommodating people with disabilities is to create a second version of a website which is tailored to their needs. However, this approach has been criticized by disability interest groups. The concept of Universal Design, under which there is one version of a site that is suitable for everyone, has been gaining ground. Trying to accommodate everyone is not without its difficulties and some compromises may need to be made. Some argue that accessible sites also tend to be highly usable by those without disabilities.

Accessibility Standards

A number of organizations have drawn up standards to guide web developers in producing accessible websites. One of the most important standards is that produced by the World Wide Web Consortium (W3C)Web Content Accessibility Guidelines (WCAG) 2.0 (W3C, 2008).

The W3C guidelines deal with things such as the need to provide text alternatives to non-text content, creating content that can be presented in different ways, making all functionality available from a keyboard, providing users with the time to read and use content, making text readable and understandable, and maximizing compatibility with assistive technologies.

Another key standard, relevant to anyone wishing to do business in the United States, is known as Section 508. This refers to Section 508 of America's Rehabilitation Act 1998. It is accepted as setting out de facto accessibility standards even in areas where the act may not have legal force.

It is highly desirable that students have some understanding of these two sets of standards. The following sources provide additional information for those who are interested in exploring the topic more deeply. You should start with three more documents, produced by the W3C Web Accessibility Initiative: WAI Resources on Introducing Web Accessibility, W3C: Techniques and Failures for Web Content Accessibility Guidelines 2.0, and W3C: Authoring Tool Accessibility Guidelines.

Governments often provide guidelines to their own departments about rules that should be followed in producing websites. In the United States there is Usability.gov: Your guide for developing usable and useful Websites (A href=http://usability.gov/ target=new>http://usability.gov/); in the UK the Central Office of Information (2010): Web standards and guidelines; in Canada, the Treasury Board of Canada Secretariat (2010): Common Look and Feel Standards for the Internet, Part 2: Standard on the Accessibility, Interoperability and Usability of Web Sites.

There are a number of online tools available to help check the accessibility of web pages, including www.webaim.org (http://www.webaim.org).

Other Disabilities

Websites can be a challenge for people with non-visual disabilities. A thorough assessment of website accessibility would not neglect the needs of the deaf (WebAIM (2010e)), those with motor disabilities (WebAIM (2010f)) Motor Disabilities, and those who suffer from dyslexia (British Dyslexia Association, 2010).

There is a useful online tool at Vischeck which simulates the appearance of a website presented to users who have different kinds of color blindness (http://vischeck.com/). The user enters a URL and a link to that site is returned. When the link is clicked the user should see the page as a color blind person would see it. The owners of Vischeck admit that it will not work in all cases, but it is a useful tool.

The Elderly

All elderly people do not have disabilities, but research has identified a number of special requirements that older web users may have. The "silver surfers," as some have called this demographic group, have a significant amount of purchasing power, and hence most businesses will want to ensure that their websites are welcoming to them.

Dana Chisnell and Janice Redish (2005) produced a substantial report for the Association for the Advancement of Retired Persons (AARP). They followed this up with a paper setting out guidelines (heuristics) for understanding how to produce websites that are accessible by the elderly (Chisnell, Redish and Lee, 2006). They found that the web is very difficult for the least expert among older adults. Other problems included type that is too small and not adjustable, language that is difficult or unfamiliar to this audience, and information architectures that are too deep, causing the user to become lost or disoriented.

More practical advice has been produced by the National Institute on Aging and the National Library of Medicine (2009). They advise web designers to:

• Break information into short sections.
• Give instructions clearly and number each step.
• Minimize the use of jargon and technical terms.
• Use single mouse clicks.
• Allow additional space around clickable targets.
• Use 12- or 14-point type size, and make it easy for users to enlarge text.
• Use high-contrast color combinations, such as black type against a white background.
• Provide a speech function to hear text read aloud.
• Provide text-only versions of multimedia content.
• Minimize scrolling.
• Choose a search engine that uses keywords and doesn't require special characters or knowledge of Boolean terms.

Writing for the Web

Research shows that readers of web pages tend to scan the text during a search for some specific information rather than reading every word. This has encouraged a number of authors to suggest that writing for the web is a specialist skill which requires a slightly different approach.

Many suggest reducing the number of words on a web page and altering the formatting of text to make it more scannable. This is not quite the same as saying that pages should score highly on readability tests such as the Gunning-Fog Index, or the Flesch Reading Ease test. Those interested in such tests can find information and an online tool at Juicy Studio (http://juicystudio.com/).

Search Engine Optimization

Search engines index websites on the basis of information submitted manually to them or by the use of pieces of software called spiders which search the web automatically recording details about new web pages. Each relevant business would like to see its site towards the top of the list when a user performs a search in Google or some other search engine. It is known that sites with certain features are ranked more highly than others, so there is an important branch of web development known as Search Engine Optimization (SEO) which tries to ensure that a website exhibits those desirable qualities.

Improvements in a site's search engine ranking can be made through the intelligent use of keywords and building up the number of other sites that provide links to other sites. It is, however, a game of cat and mouse with the search engines, which often change the criteria they use to rank web pages. The key business issue is that some of the tactics that are used by developers in their quest for improvements may be seen as illegitimate or questionable.

These dubious practices are often known as "black hat" techniques. They include presenting one page to a search engine and another version to the user; setting up hundreds or thousands of bogus sites, each with links to the site that is looking for a high search engine ranking; or exploiting security vulnerabilities to change the content of a competitor's website with a view to getting them banned from a search engine's rankings.

It is therefore important that there should there should be some business control over the activities of any staff or outside agencies that are charged with carrying out SEO. Getting caught doing something questionable can damage the business's reputation, and does not exhibit a respect for professional ethics.

1. Click Here To Get More on This Topic......