Web design

Guidelines

Designing for the screen requires experience and knowledge. Whether you are starting a new site, re-mediating existing materials, or designing new online courses for the Web you should consider the effects of reading from a screen, and the importance of user-centered design.

In this section are guidelines for creating Web environments that are well-organized, clear, and user-friendly.

 

Basic page design guidelines

Usability, legibility and speed of download should influence all design decisions.

Make pages accessible to all users (unless you have specific users in mind).

Design according to how people read web pages (see Neilsen site for research paper).

Keep page size to 30 kb or less. Avoid large graphics or multimedia elements.

Design according to the needs, skills, equipment and mode of Internet access of your target group of users.

Test your pages and site on a variety of computers and browsers; test early in the design process —and test frequently.

Test page dimensions and behavior on a variety of different-sized monitors.

Keep navigation buttons, menus and bars to a maximum of 20% of the page area.

Design flexible webpages and sites.

Page dimension considerations

When deciding what size to make a web page, remember that the page itself is displayed on the user's screen within a browser, and that the browser toolbars themselves ("browser chrome") take up screen space

The Web is a fluid medium. Users set browsers at different widths, and use different size monitors. Design web pages that are fluid and flexible, resizing to accomodate all screens.

If you are designing a page for a laptop screen area of 800X600 pixels, the page should be 700 pixels wide by 350 high to display in the browser window without the user having to scroll to see the whole page.

You can make pages that resize automatically to fit 100% of the screen to accomodate a variety of monitor or browser window sizes. Alternatively, you can specify exactly how wide a pages is in pixels.

If you specify the width of a page in pixels, it will stay that size no matter how wide the user's browser window is: for example, the column of text you are reading is 300 pixels wide, and it will stay that size no matter what size the user's browser or monitor.

Designing for the screen

People don't "read" web pages, they scan for information sometimes using a zig-zag pattern, and tending to focus first in the center of the screen then on the top left and so on as shown in the sequence. You can take advantage of these patterns when deciding where to locate key information on pages (for more, see below).

The "aspect ratio" of a computer screen (the ratio of width to height), is wider than it is long, in contrast to that of paper, which is longer than it is wide. This fact will probably influence how you lay out your web pages. The aspect ratios of screen and paper are contrasted below.

 

Navigation

 

General design guidelines

A good navigation design does 3 things:

1. Minimizes travel: create the simplest and shortest path between any two points.

2. Minimizes depth: create a hierarchy with the fewest possible levels (extra levels mean extra steps).

3. Minimizes redundancy: avoid creating multiple paths to the same place from the same screen.

The content, purpose and audience of a site should guide the design of a its navigation systems: note the similarities to the magazine at National Geographic's site.

If your site uses a hierachical structure, show users the underlying framework.

Let users jump around on your site without having to click through many layers of a hierarchy. Your site structure should allow users to get to any page with no more than 3 clicks.

Hierarchical categories on a site should be mutually exclusive. Work out the categories on paper.

Home page design guidelines

Home pages should answer 3 questions:
Where am I? What does the site do? What is the navigation scheme?.

Design home pages which make the answers to these questions clear to visitors as quickly as possible.

The home page is a good location for news and updates because it is the most frequently visited page.

Many home pages function as menus, allowing the user to see and quickly access the site's contents from 1 page.

To insure rapid downloading make home pages no more than 35k.

Tell users when the site was modified, and provide a means to contact the author.

Give the user a way to get back to the home page from all other pages in your site.

It is much easier to update site text if it is html rather than graphic text.

Avoid features that ask users to download a plugin before they can see your home page.

Avoid Flash movies on your home page —they slow download speed.

For more, see Lynch and Horton's Web Style Guide or go to the IRC site "styles" section.

Information Architecture

When you plan a Web site you go through a process of structuring information for others to access (information architecture). The structure of your site depends on its purpose, audience and size. The simplest way to structure a site is to organize the information in a linear sequence, in which pages appear as in a book.

 

 

However, because most web sites contain too many pages for a linear sequence to work well, most sites organize information into a hierarchy (below).

 

Indeed, according to Rosenfeld & Morville in "Information Architecture on the WWW", the function of almost all good information architectures is the well-designed hierarchy. In Figure 2, there are 3 levels to the hierarchy, and users are never more than 3 clicks away from all pages on the site.

 

Color

As with any new medium, Web designers are experimenting with the full range of technical and aesthetic possibilities available. In matters of color on the Web, principles of legibility, usability, and good taste are emerging.

For a detailed introduction to color principles in general, go to the Color Matters site. The site introduction states: "the concept of color can be approached from several disciplines: physiology, psychology, philosophy and art. This website provides some starting points for an exploration of color."

Web color selection tools

At this site you will find a useful tool to help you decide on colors for your pages. The Web Color Visualizer allows you to select a Web safe color as a page background (the background color fills the screen).

You then choose another other Web-safe color, which is displayed as a color swatch and as lines of text against the background you have selected.

You can then decide which colors look good against various backgrounds, and what color text is most legible. You may need to try the color combination for a few paragraphs to accurately assess its legibility.

A site with a similar tool is at Visibone which shows the 216 Web-safe colors arranged in a color wheel.

You click a color in the color wheel to be your background color, and a background color swatch appears. You can then click other colors from the wheel, and they appear against the background.

A "web-safe" color is one of the 216 colors of the "browser palette"used by the Explorer and Netscapse browsers to produce color on a monitor. There is more about web-safe color below.

About Web-color

For an introduction to web color and techniques to improve the look and efficiency of web graphics, go to the Yale site and read the chapter on web graphics in the excellent, online Yale/CAIM Styleguide manual.

Lynda Weinmann writes that the "web differs from the printed page in more ways than you might imagine. "It is not enough" she notes, "to approach web authoring with good ideas and graphic art work. Understanding the medium is necessary in order to insure that others view your designs and colors as you intended".

Here is Weinmann's list of things that are different about the web as a publishing medium.

People view your artwork on a variety of monitors with different settings

Different operating systems (i.e. Mac and Windows) affect the way colors are displayed.

Different web browsers affect the way colors are displayed.

People judge your site not only by its artistic content, but by its speed. Colors can affect speed.

 

 

Text

The principles of legibility and readability in print media have evolved for 1000 years as a result of our experience with the design of user-friendly text; however, we have less than 50 years of experience with the design of text for the computer screen.

From a writer's point of view, the production of print material was relatively simple. An author wrote or typed a manuscript and sent it to a publisher, who made most design decisions. Decisions about type size, line length or which font to use were left to the print professionals.

However, the computer and the Internet allow us to publish our own material, with the result that Web publishers must often become designers too, and must make decisions which influence the legibility and readability of what they publish on the Web.

A good place to begin learning more about fonts and Web design in general is at the Web Page Design for Designers site. www.wpdfd.com/wpdhome.htm

This is not meant to be an extensive or detailed HTML "how-to" guide to fonts and web pages; for this, go to Microsoft's Typography site, from which you can also download a core set of specially-designed web fonts free.

 

Legibility guidelines

Fortunately, some basic principles for making your web and screen presentations usable and legible have evolved.

You can make your user's experience more enjoyable, and get your message across more effectively, by following a few legibility guidelines.

Use fonts designed for screen reading: for example, use Verdana as a sans-serif font and Georgia as a serif font. For more information go to the "Choosing a screen font" page.

Avoid background patterns or tiling (they distract). Use background images only for navigation or on splash pages.

Rather than experimenting with with many different fonts, design with a few and get to know them well.

Avoid italics; italics are poorly rendered on screen because of the curves.

Keep line length short: no more than 100 characters per line for body text, or 40-50 characters per line for columns.

 

General text guidelines

First, remember that type is the "user interface" of text. You will need to learn why some fonts look better on screen than others, and that the fonts you use for paper documents are not the best to use for legible screen documents.

Always keep in mind that the Web is inherently a flexible environment. Text flows, even in tables; the users control what font, and size of font, is used to diplay a web page.

Minimize the need for scrolling. If your page design requires scrolling beyond 2 or 3 screens, begin a new page.

Left justify all body text. Avoid centering body text: readers scan back to the left margin for a visual cue to the beginning of the next line.
Use Cascading Style Sheets (CSS) for greater control of fonts, line spacing, etc..

Avoid using capital letters except for the first letter of headers. Caps are more difficult to read than small-case letters (also true on paper).

Keep important information, or slow loading graphics or tables, above the fold —in the first 300 vertical pixels on a page.

 

Color and Text

Use black text on a white background: the greater the color contrast between text and background the better the legibility.

White text on a black background is legible, but tiring to read. Use it for titles, not body text.

Use color for text with care: color should generally be used only for hypertext links or major headings.

For more information about color and text, go to this site and read a brief article for general background information, and see a graphic demonstration of why some colors produce more legible text on background colors than others.

Test color schemes before committing to them. Go to the "color" topic for links to several sites which let you try color combinations and see how readable different text color is on different backgrounds.

If you want to insure that your web pages are legible to the maximum number of users, test all pages on Windows and the Mac, and check pages in the Netscape and Internet Explorer browsers.

If you design and test only on Windows-based platforms, you will be surprised to see text on the Mac look smaller. If you test on both machines, you can achieve a balance by choosing a font size that works well for both platforms.

Graphic text

When you want to be sure text will look the same on the user's screen as it does on yours, you will have to use graphic text.

Graphic text eliminates the jagged edges of screen text shown in below in the top letter by smoothing, or "anti-aliasing" letters.

 

Anti-aliasing blends the letter color to the background smoothly by adding transitional colors, seen in the bottom letter. Anti-aliased graphic text is often used for titles.

Although graphic text looks good, use it sparingly because graphic can take longer to download and appear on the screen than screen text, which is rendered by the browser.

Well-chosen graphic text can make an otherwise text-only page look great, and download speed need not be adversely affected if you make small graphic files.

 

Usability

According to Jakob Nielsen there are four main reasons users return to the same websites and not to other websites. In essence, they are what make a site usable.

The 4 are the foundation of good web design because they are the things users want the most from a site:

1. High quality content
2. Often updated
3. Minimal download time
4. Ease of use

Go to the IBM site and read Web Guidelines which summarize five "unique considerations" for Web usability which should be addressed during the "usability verification" phase of site production:

1. Can users distinguish between static graphics and graphical links?
2. Are users able to see the most important information without scrolling?
3. Can users navigate in your site without getting lost?
4. Can users find the information they are looking for easily?
5. Do the user's reactions to your site support your goals?

 

Usability testing guidelines

During the initial phase of software development, test early, test often, and on different platforms. Web sites should be tested with a variety of browsers.

Web sites should be tested on platforms with different Internet access speeds: not all your users have T1 lines and 20" monitors.

Test software on a large monitor and a laptop to see how various factors affect graphics, text and download rates.

Before your design is set in stone, create a small test site to evaluate how users react to the navigation elements and interface.

Software and Web pages develop by "iterative design" and projects continue to develop after the initial version, often in response to comments from users or from usability testing.

When you conduct user testing, select subjects who match your intended users, and test in a realistic environment (i.e. similar to the one where the software will be used).

Try not to become too attached to your design; listen to user's comments —you have been looking at your navigation for weeks, they see it as new users (or surfers) will see it.

Ask test subjects to do a "cognitive walk through" as they see and use your software. Ask them to talk as they perform actions, explaining problems or confusion. Watch them navigate and note their actions.

Usability testing should be done during all phases of development. It is a lot easier to change a site when you have only the template to alter.

Usability resources

To create things that users understand, we in turn have to understand the users and how they think. "Good" usability is about designing things so that they make sense to the people who use them" (C. Rowland)

Go to Nielsen's "Useit" site and look at the list of the "Top Ten Mistakes in Web Design".

Go to the Usable Web site for other numerous links (100+) to information about Web usability.

If you are designing a site for wide public access, go to the part of the W3C site which discusses accessibility guidelines for making your site usable for people with disabilities.

You can find a comprehensive and well organized set of Web Design Guidelines at IBM's Human-Computer Interaction site.

The Usable Web site has a great many links (800+) to information about Web usability.

 

Accessibility

1. What legislation governs web site accessibility?
2. What disabilities must I be concerned with?
3. Are there Basic Guidelines for designing accessible sites?
4. Is my site accessible?
5. Online resources
6. Section 508 standards
7. Is there an online course on accessibility design?
8. Powerpoint and pdf

What legislation requires me to make my web site accessible?

The legislation that applies to GH College as a federally funded institution is Title II of the Americans with Disabilities Act 1990 (ADA). It is intended to protect qualified individuals with disabilities from discrimination on the basis of disability in the services, programs, or activities of all state and local governments.

The ADA states that a public institution of higher learning must take appropriate steps to ensure that communication with persons with disabilities is "as effective as communication with others".

Conditions of effectiveness include timeliness, accuracy, and provision in a manner and medium appropriate to the significance of the abilities of the disabled individual.

What types of disabilities should I be concerned with?

If you think that all Web Accessibility is about is making things accesssible to the blind you're only getting half the story. Disabilities that affect Web Accessibility include: Visual (blindness, low-vision, color-blindness); mobility (inability to use hands, slow muscular movement); hearing (deafness, hard-of-hearing); cognitive (mental retardation); and others (learning or reading disabilities, attention deficit disorder, etc..)

Sometimes people comment that in all the years they have been teaching, they have never had a student in their class with any of these disabilities. But how do they know?

Ordinary text is the most accessible form of information on a web site for persons with any disability. Simply providing text can go a long way to making a Web page accessible to blind people.

To better understand, you can watch a video, "Introduction to the Screen Reader" with Neal Ewers of the Trace Research Center, which shows how screen-reading equipment helps the blind navigate the web and access electronic pages by scanning text and turning it into synthesized speech.

However, the web has evolved to include graphics, animations, video, sound and other non-text displays, which has created a barrier to accessibility because even specially-adapted equipment like a screen-reader does not handle them well. The basic guidelines below give suggestions for overcoming these barriers.

 

Basic guidelines

Make Web pages more accessible to people with disabilities by providing alternate and equivalent means of communicating information on Web pages.

1. Provide text equivalents (descriptions) for non-text elements on the page, such as images, audio, video.

2. Avoid using clickable "image maps" for site navigation.

3. Provide summaries of graphs and charts; these are hard or impossible for screen-reading equipment to process.

4. Ensure that all information conveyed with color is also available in the absence of color.

5. Organize content logically and clearly; avoid using tables for layout. Use CSS instead.

6. Provide alternative content for special features (applets or plug-ins) that may not be supported.

Universal Design for the Web

Underlying the idea of making Web pages accessible is the concept of "Universal Design," or designing for the widest range of people's abilities.

As you build web pages, keep in mind that your audience is diverse. Not all web page visitors are using the standard graphical browsers like Explorer or Navigator.

They may be using adaptive technologies such as screen readers or text-based browsers, they may have their browser graphics turned off, or they may not be able to use, or have access to, a mouse or keyboard.

The tips listed above, and the expanded list of Accessibility Guidelines, apply this concept to web page design.

Following the guidelines will ensure that your Web pages are robust, standard, and accessible to the fullest possible range of users. (Adapted from the mit disabilities resource).

Eventually we may be using cell phones or audio devices from our cars to access the web. Universal Design not only ensures that your information will be accessible to people with various types of disabilities, but also to those using old, alternate, or emerging technologies.

The more extensive and detailed list of design principles, The Accessibility Guidelines will satisfy minimal accessibility standards for your Web pages. These principles have been developed by the standards-setting W3C (WorldWideWeb Consortium) body.

Making your Web site accessible is neither difficult nor time-consuming, and you can often do so merely by typing text descriptions of pictures so screen-readers can turn the text to speech.

Is my Web site accessible?

The best way to tell is to observe someone with disabilities use your site. Any problems will soon become evident. In the absence on such a person, look at the Section 508 Checklist for an introductory overview of whether a page is lkely to pass or fail Section 508 Accessibility standards based on the page contents.

You can also use a free accessibility evaluation tool to automatically evaluate your Web pages.

The Web Accesibility Evaluation Tool is one of the easiest one to use. You type in the URL of a Web page, send it for evaluation, and the program returns a report highlighting the applicable Section 508 accessibility standards, and gives suggestions for resolving non-accessible features on the page.

A-Prompt (Accessibility Prompt) is a software tool designed to improve the usability of HTML documents by evaluating Web pages for accessibility barriers, and then providing developers with a fast and easy way to make the necessary repairs.

A-Prompt will ensure that client Web sites are accessible to the largest number of potential visitors, including those with disabilities. The tool's evaluation and repair checklist is based on accessibility guidelines created and maintained by the Web Access Initiative of the World Wide Web Consortium.

If an accessibility problem is detected, A-Prompt displays the necessary dialogs and guides the user to fix the problem. Many repetitive tasks are automated, such as the addition of ALT-text.

Bobby is a commonly used (but less user-friendly) evaluation tool, which was created "to help Web page authors identify and repair significant barriers to access by individuals with disabilities".

The University of Wisconsin provides background information about Bobby, and helps you interpret Bobby's findings at Bobby: Introduction and General Information.

Wave from Temple University, is another easy-to-use Web Accessibility tool in which you enter the URL of a page, submit it, and an analysis is returned in a few seconds. Icons are placed on the page where Section 508 Guidelines are not adhered to.

Limitations of Tools

The W3C site contains this advice about the use of automatic verification tools:

"There is as yet no tool that can perform a completely automatic assessment on the checkpoints in the guidelines, and fully automatic testing may remain difficult or impossible. For instance, some checkpoints rely on an interpretation of what "important" information is, or whether the text equivalent for a non-text element is accurate."

"It is also possible for automated accessibility checkers to register "false negatives" or "false positives" due to the type of mark-up on a page."

Accessibility resources

webaim.org ("Web Accessibility in Mind")
Gives general information, summarizes regulations, and provides great tutorials, "how-to's", quick tips, and free, online training events. It is frequently updated, too.

Adaptive Technology for the Internet
ALA online edition, "Adaptive Technology for the Internet: Making Electronic Resources Available to All". In particular, see Ch 2 for designing accessible Web sites.

National Center for Accessible Media
Captioning and Audio Description on the Web.

The Art of ALT
Writing effective ALT tags.

Internet Resources for the Blind
Site designed by a visually impaired designer.

Making Websites 508 Accessible for the Deaf

Authoring tool for making CD-ROMs & multimedia accessible to persons with disabilities.

Section 508 Accessibility Standards

"Section 508 of the Rehabilitation Act of 1973, as amended (29 U.S.C. 794d). Section 508 requires that when Federal agencies develop, procure, maintain, or use electronic and information technology, Federal employees with disabilities have access to and use of information and data that is comparable to the access and use by Federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency."

Specific standards within Section 508 have been developed for Web-Based Intranet and Internet Information and Applications. These standards are clearly explained in this document.

These provisions of the standards provide the requirements that must be followed by Federal agencies when producing web pages. These provisions apply unless doing so would impose an undue burden.

Is there a course I can take?

The Advanced Learning Unit of Academic Affairs and Fiscal Affairs of the University System of Georgia has developed an online tutorial on issues relating to accessibility design for higher education professionals. The Table of Contents is shown below.

 

 

Powepoint and pdf

WebAIM gives suggestions for making pdfs and PowerPoint presentations accessible(both of which convert text to images, which are not readable by a screen-reader).

 

GeorgiaVIEW Vista