Web Design Considerations

This is a handout to go with the presentation,
Creating Web Pages: Making Wise Decisions Before You Begin,
by Donna Ashmus
SouthEast and Islands Regional Technology in Education Consortium (SEIR*TEC)
Copyright 1998

Simplicity
Keep design elements to a minimum. Minimize clutter so the document is simple to use. Use only one or two fonts and a minimum of three heading sizes. Avoid "piling up" special effects (bold, italics, blinking, etc.) Strive to optimize!

Consistency/ predictability
Repeat major design elements (headings, text blocks, graphics, navigational controls, etc.) to match users expectations. Create a template or format which provides a consistent pattern for the user. Establish a consistent background that is maintained throughout your stack.

Appropriateness
Keep design elements as well as content in an appropriate tone for the organization. Determine the organizational image you want to convey and stick with it. Use appropriate graphics to communicate rather than just decorate.

Usability
Provide a transparent means of navigation. Forecast what the user will find on the next page. Display important information prominently. Make your resource usable and informative!

Paper-based Page Design Principles

Contrast-
Make design elements (color, size, thickness, shape, space) very different.
Proximity-
Items relating to each other should be grouped close together
Alignment-
Never place design elements arbitrarily. Every item should have a visual connection with something else on the page.
Repetition-
Repeat visual elements (color, shape, line thickness, sizes, texture) of the design throughout the document.

Style Guides on the Web

Top Ten Mistakes in Web Design by Jakob Nielsen http://www.sun.com/960416/columns/alertbox/index.html	*Style Guide for online hypertext-* http://www.w3.org/pub/WWW/Provider/Style/
Web Style Manual by Patrick Lynch http://info.med.yale.edu/caim/StyleManual_Top.HTML	*Sun Guide to Web Style* http://www.sun.com/styleguide/

Web Tips

Information

Note how the entirety of your information is interwoven and related to make information organized.
Forecast! Tell users where links lead, especially before it leads away from your site.
Books, TV, and print are linearly limited break out of that mindset! Don't be encumbered by format.
Organize! Users won't wade through endless screens to get what they want. They'll give up first.

Text

Place important or critical information on the top part of the page. (This may include navigation buttons.)
Keep pages short (one to two screens). Only 10% of users scroll beyond the information that is visible on the screen when a page comes up.
Chunk information. Reading speeds are more than 25% slower from computer screens than from paper. Long paragraphs are seen as a gray wall which users will reject. Users scan information and recklessly skip over any text they deem to be fluff.
Be succinct! Too much information will drown the reader (however, too little information will hinder quality and meaningfulness.
Rewrite previously written information from paper documents so information is short and jargon free.
Provide visual contrast between one font and another, and contrast between text blocks and the surrounding empty space. Nothing attracts the eye and brain of the viewer like strong contrast and distinctive patterns.
Think seriously before changing the link and activated link colors. (These are normally blue before they are clicked on and change to red or purple after the link has been activated.)
Use headings as headings. Don't use them to emphasize text. Their purpose is to set apart document or section titles.

Graphics

Try to keep your images under 40K, or your user may lose interest waiting for the page to download. (Over 55% of users access the Web from home via modem.)
Keep the number of graphics per page small.
Use interlaced GIF images to help keep your users interest as the graphic gradually displays over four "passes." (The total time is about the same for interlaced or non-interlaced images.)
Select a background color (don't leave it to default to gray!) that provides contrast to your text. Don't let the background overwhelm the text but subtly complements it. Consider white.
Use color wisely. Color grabs users attention, but a little goes a long way. Don't overdo it.
Avoid "under construction" graphics. Either the information is there or it isn't. Don't waste the users time if the information isn't available.
Be considerate to people who have text-only browsers like Lynx, and those who have turned images loading off. Use the ALT tag for all your important images. Users who can't display images get frustrated when they see the tag without any description.
Similarly, provide text alternatives to image maps. (Image maps are graphics that contain multiple areas that, when selected, jump to another web page or section.)
Use repetitive elements to save transmission time for user.
The best combination is a single quality graphic combined with text.
Use web-safe colors. Not all your viewers have 256-color capability. Test your pages.Check out the web palette at www.adobe.com/newsfeatures/palette/main.html

Links

Be sure to describe and organize your links. This way, people will be able to find what they're looking for. In addition, they'll know what to expect when they click on one of the links.
Use e-mail links with the address in it because not all browsers support the mailto: tag.
Use specific link references. Instead of saying "Click here for information about the clubs at our school," you might say "Our school offers many clubs and activities for students."
List file sizes for links that download files. This helps users make wise decisions about what to download.

Testing

Test your pages with several different browsers. You will be amazed at the variations in interpreting your pages.
Empty the cashe from within the browser to force the browser to get everything from scratch. This will help you estimate how long your pages really take to load.
Turn on the "don't load images" menu item to see how your page looks without images. Can your users still navigate through your pages?
Check your links regularly, especially those to sites outside your stack. You will lose credibility (and users) if you have several links that don't work.
Test your Web site with users representative of your target audience.

Elements to provide on every page:
1. Title of document
2. Name of organization
3. Author or contact information
4. Navigation to at least the home page

Compiled from:
Art and the Zen of Web Sites (http://www.tlc-systems.com/webtips.htm)
A Guide to Designing Web Pages for ICS199v (http://www.wcc.hawaii.edu/epw/begin.htm)
Lynch, Patrick. Yale C/AIM WWW Style Manual. (http://info.med.yale.edu/caim/stylemanual/M_II_5.HTML)
Nielsen, Jakob. Interface Design for Suns WWW Site (http://www.sun.com/sun-on- et/uidesign/)
Principles for Effective Hypermedia Design. Technical Communication, Third Quarter 1993.

Return to SEIR*TEC Home Page