Web Site Design ASCIT Workshop

Fall 1999 Page 1

HTM 305

Web Site Design

Objective

The objective of this workshop is to introduce the basic principles of designing effective, usable web sites. Most web sites, including major corporate sites, are poorly designed. Most sites do not focus on value added marketing – sharing more than just information, but sharing knowledge and expertise. Web sites are often overly difficult to use. When a user is given a specific task to accomplish, the majority of the time they will fail. Most web designers fail to understand the needs of the users and the limitations of the technology.

The amount of information available on the web is growing at an incredible pace. With the increased competition for attention, simply having a web presence will no longer guarantee visitors. Web sites now must be designed to make the user’s experience as enjoyable as possible.

Utility can be defined as the usefulness or satisfaction one receives from a good or service. The focus of this workshop is web design based on improving utility. Topics to be covered include developing content, writing for the web, site design, page layout, cross platform issues, optimizing images, and a review of html authoring packages. This is a three hour session presented in lecture format; each section will repeat the same material.

Table of Contents

References ...... Page 2

Section One - Introduction

What’s Wrong With the Web ...... Page 3

The Four Elements of Good Design ...... Page 4

Section Two - The Web Design Process

Planning ...... Page 5

Determining Content ...... Page 6

Information Architecture ...... Page 7

Page Design & Layout...... Page 9

Section Three - Graphic Design ...... Page 10

Section Four - Tools for creating web sites ...... Page 12

Companion Web Site

Web Site Design ASCIT Workshop

Fall 1999 Page 2

References

Books

Holzschlag, Molly, (1998), Web By Design, Sybex

Rosenfeld, Louis, and Morville, Peter, (1998), Information Architecture for the World Wide Web, O’Reilly

Sano, Darrell, (1996), Designing Large-Scale Web Sites, John Wiley & Sons

Sterne, Jim, (1995), World Wide Web Marketing, John Wiley & Sons

Waters, Crystal, (1996), Web Concept and Design, New Riders Publishing

Weinman, Lynda, (1997), Designing Web Graphics.2, New Riders Publishing

Williams, Robin, (1994), The Non-Designer’s Design Book, Peachpit Press

Web Resources

Copyright Links (from Iowa State)

Graphics, Visualization, & Usability Center's (GVU) User Surveys

Jakob Nielsen's Website

How Users Read on the Web

Inverted Pyramids in Cyberspace

Response Time: The Three Important Limits

The Web Usage Paradox: Why do People Use Something This Bad

Report Puts a Number on the World Wide Wait (New York Times article)

Useable Web

Writing on the Web (from Sun Microsystems)

Web Review

Yale Style Guide

Web Site Design ASCIT Workshop

Fall 1999 Page 3

Section One - Introduction

What’s Wrong the Web

Overview

Despite the popularity of the web, most sites are poorly designed. Most users find using the web a frustrating experience. The Graphics, Visualization, & Usability (GVU) Center at Georgia Tech has performed user surveys of the World Wide Web for the past several years. The results of these surveys regarding problems people have using the web provide valuable insight into effective design.

The most common complaint about the web is speed. Sites should be made to download as quickly as possible.

Application

How Fast is Fast Enough

  • Pages should load in no more than 10 seconds, less than one second is the ideal
  • General recommendations for page sizes fall between 30k and 60k, but this should be based on how the target audience is connected to the internet (Pages load at approximately 3k per second over a 28.8 modem)

Improving Speed

  • Use images and graphics only to meet the site’s objectives
  • Optimize images to the smallest possible size that will maintain acceptable quality
  • Reuse images to take advantage of the computer’s cache
  • Keep navigation and other important information in the first screen
  • Avoid long tables and layers of embedded tables

Notes:

Web Site Design ASCIT Workshop

Fall 1999 Page 4

Section One - Introduction (cont.)

The Four Elements of Good Design

Overview

The four elements of good design in all effective web sites are content, navigation, interaction, and feedback. These elements will remain relatively constant and are independent of technological advances.

Content

Content is the single most important element of a web site. Content is king. All successful web sites will have reliable, accurate, timely, compelling information that is developed for the target audience.

Navigation

The quantity of information on the internet has grown faster than user’s ability to find it. Single home pages have been replaced by large comprehensive web sites. By it’s very nature, electronic information is difficult to navigate. Effective sites will get users to the content quickly and intuitively, and each page will provide context on that page’s relationship to the site.

Interaction

A web site is not something people read, it is something they do. The best web sites make users feel like they are pulling information they want, rather than having it pushed at them. The user is in control of what happens.

Feedback

The web provides the opportunity for two way communication. Effective web sites actively solicit the opinions of users through the use of on-line forms and email.

Notes:

Web Site Design ASCIT Workshop

Fall 1999 Page 5

Section Two - The Web Design Process

Step One - Planning

Overview

Designing, creating and maintaining a large web site requires planning and traditional project management skills. An important first step that is often skipped in the rush to create a web site is determining the site’s goals. Too often sites are launched without a fundamental understanding of mission and purpose. The successful web designer will spend time planning the project, determining objectives, identifying audiences, and establishing criteria for measuring success.

Application

Type of Site

There are many types of web sites including educational, reference, entertainment, business, and point of sale. (The focus of this workshop is internet sites. Designing intranet and extranet sites requires a different approach.)

Mission & Objectives

Specific goals for the site should be identified. Examples for a business site would include disseminating information, improving customer service, sales, marketing, instruction, branding, etc.

Identifying Your Audience

  • Who are they? (Demographics)
  • What information do they want?
  • How do they connect to the internet?
  • What is their level of computer literacy?

Budget

The development of a web site is a continual process that doesn’t end when the web site is launched. Proper project planning and budgeting should be completed before starting a site. Plan on spending a minimum of 50% of the original budget on yearly maintenance costs.

Staffing

Specific skills for creating a web site include project management, graphic design, computer programming, html, writing and editing, and marketing. These can be the responsibilities of one person or a large team. Identify what can be done in-house and what must be outsourced.

Measuring Success

Success can be measured in many ways including traffic to the site (hits), reduced operating expenses, public exposure, and improved customer relations.

Notes:

Web Site DesignASCIT Workshop

Fall 1999 Page 6

Section Two - The Web Design Process

Step Two: Determining Content

Overview

Content is the most important element of any web site. The best web sites are more than electronic brochures, they provide value. They provide more than information, they provide knowledge and expertise. Effective web sites are created in a customer service paradigm. Content is based on users’ needs, presented in a way the user will understand.

Application

Validation

Users are often skeptical of information found on the web. Validate content by keeping it current and accurate, signing and dating each page, and including a copyright statement. The objective is to earn the user’s trust.

Writing for the Web

  • Users don’t read web pages, they scan
  • Use sub headings and bullets to provide white space
  • Information should be succinct, reliable and timely
  • Use traditional Style Guides (spelling, punctuation, usage)
  • Write in inverted pyramids
  • Use specific link references - avoid “Click Here”
  • Avoid promotional writing

Copyright

In general, everything on the web is protected by copyright. Written permission from the copyright holder must be obtained before using copyrighted material.

Notes:

Web Site Design ASCIT Workshop

Fall 1999 Page 7

Section Two - The Web Design Process

Step Three - Information Architecture

Overview

Designing a web site requires a different approach than designing a single web page. The elements of information architecture include organizational systems, navigation systems, labeling systems, and search methods. Concentrating on a site’s information architecture will improve utility. The well designed site will have a short learning curve. Users will quickly become comfortable, confident that they can easily find quality information.

As web sites have grown larger and more complex, navigation has become increasingly important. The early style of embedding links in the content has been replaced by stand alone navigation systems that help provide context and easy movement.

Application

Organizing Information

  • Seven plus or minus two rule: the cognitive limits of the human mind
  • Chunk information into small, discrete units
  • Establish a hierarchy of importance
  • Structure the relationships between the chunks of information
  • Analyze the balance between menu pages and content pages.The goal is efficient and intuitive task flow

Navigation Systems

  • Allow users to quickly and easily find information
  • Allow users to easily move to the various sections of a site
  • Provide context - visual clues on the relationship of an individual page to the overall site
  • Separate navigation from content

Improving Navigation

  • Logical organization of information - strong hierarchy
  • Provide clear navigational aides, including visual cues
  • Consistency - be predictable
  • Don’t disable the browser’s navigational features
  • Provide links to the home page and major navigational pages from every page
  • Include a bottom navigational bar on long pages
  • Include a table of contents, search page, index, and site maps where appropriate

Web Site Design ASCIT Workshop

Fall 1999 Page 8

Section Two - The Web Design Process

Step Three - Information Architecture (continued)

Site Design Guidelines

  • The best design is one no one notices. Keep it simple
  • Every site should have a graphic identity
  • Background images shouldn’t hinder legibility
  • Every home page should clearly state the intent of the site
  • Keep users informed of changes
  • Only include links that add value
  • Test on all common platforms and browsers

The following techniques have been shown to adversely effect the usability of web sites. Careful consideration should be given before using the following:

Frames

  • Break the fundamental user model of the web page
  • URL’s don’t work - you can’t bookmark a page and return to it
  • Indexing programs (search engines) do not always index the contents of frames
  • Difficult to print
  • Difficult to code properly
  • The back button on older browsers doesn’t work
  • Most users prefer frame free sites

Image Maps

  • Large file sizes
  • Server side image maps disable navigation
  • Accessibility for people with disabilities
  • Time consuming to create

Gratuitous Use of Technology

  • Is the design based on the site’s objectives or are you just showing off your skills
  • Designing web sites is radically different from designing CD-ROMS due to bandwidth issues
  • Forcing user’s to download plug-ins will have a negative impact
  • Movement is very distracting and should be used with caution (animated gifs)

Under Construction Pages

  • Don’t launch a site until it’s complete. The assumption is the web is always under construction

Notes:

Web Site Design ASCIT Workshop

Fall 1999 Page 9

Section Two - The Web Design Process

Step Four - Page Design & Layout

Overview

Page design consists of the positioning and balancing of page elements to direct the readers eye through the content of the page by using the tools of layout, typography, and illustration. The traditional page design principles of contrast, alignment, repetition and proximity are applicable to web design.

Of the three current methods for web page layout (tables, frames and cascading style sheets), tables are the most consistent, dependable technique.

Application

Page Layout

  • Use a page grid to control the relationship of page elements
  • Modular design - each page will have areas that perform certain functions
  • Use white space for emphasis and to provide visual relief

Page Design Guidelines

  • Design for 640 x 480 display. Do not make users scroll horizontally
  • Include clear titles (bookmarks)
  • Provide navigation in the first screen

Stand Alone Pages

  • Every page should include logos, titles and other information to indicate the site to which it belongs
  • Sign and date each page
  • Provide links to the home page and major navigational pages
  • Include a “mailto” link on each page

Typography

  • Fonts are controlled by the user
  • Legibility is the most important factor
  • 60-70 characters per line
  • Avoid all capital and all bold letters
  • Italics is difficult to read

Cross Platform Issues

  • Default Gamma Settings
  • Default Font Size & Spacing

Notes:

Web Site Design ASCIT Workshop

Fall 1999 Page 10

Section Three: Graphic Design

Overview

Balancing the aesthetics and visual appeal of graphics and in-line images against the effect on download times is always difficult. User surveys continue to rate slow download times as a major problem, yet it’s the use of graphics that has made the web a success.

When using graphics, they should directly add to the content and address specific objectives. All graphics should be created with quality and professionalism. The file size of all graphics should be reduced as much as possible while retaining quality.

Application

GIFS
  • Graphic Interchange Format
  • 8 bit images (256 Colors)
  • Lossless compression
  • Interlace images
  • Transparent images
  • Animated GIFS
/ JPEGS
  • Joint Photographic Experts Group
  • 24 bit images
  • Lossy Compression
  • Variable level of compression
  • Progressive JPEGS

GIFS vs. JPEGS

  • Use GIFS for line art, graphical buttons and titles, and when transparency is needed
  • Use JPEGS for photography

Bitmap and Vector Images

  • Bitmaps are images that are displayed as rows and columns of pixels (picture elements)
  • Vector images use mathematical formulas for displaying lines and shapes
  • All current graphic file formats used on the web are bitmaps

Resolution

  • Typical screen resolution is 72 DPI (dots per inch)
  • All images for the web should be created at screen resolution

Notes:

Web Site Design ASCIT Workshop

Fall 1999 Page 11

Section Three: Graphic Design (cont.)

Bit Depth

  • The number of colors in an image or the number of colors a computer system is capable of displaying
  • The lower the bit depth, the smaller the file size

1 bit: 2 colors
2 bit: 4 colors
3 bit: 8 colors
4 bit: 16 colors
5 bit: 32 colors / 6 bit: 64 colors
7 bit: 128 colors
8 bit: 256 colors
16 bit: 65,500 colors
24 bit: 16.7 million colors

Anti-Aliasing

  • The adding of intermediate colors to smooth the jagged edges normally seen in bitmap images
  • Anti-aliasing should be used on all text larger than 12 points
  • Anti-aliasing should not be used when making selections to help eliminate the halo effect

Web Safe Colors

There are 216 colors that are shared between the major browsers and platforms. Failure to use web safe colors could result in dithering on monitors set to 256 colors. Use the following table to determine the web safe colors:

Web Safe Color Values (the rule of 51’s)

Hex Value / 00 / 33 / 66 / 99 / cc / ff
RGB Value / 0 / 51 / 102 / 153 / 204 / 255

Optimizing Graphics for Speed

  • Crop the image as tightly as possible - every pixel will add to the file size
  • Reduce the bit depth as far as possible on all gifs
  • Use the lowest quality acceptable for jpegs
  • Use height and width tags in the html code for all images
  • Use thumbnail sketches for large images - warn the user beforehand of large file sizes
  • Use the file format that produces the smallest file size

Notes:

Web Site Design ASCIT Workshop

Fall 1999 Page 12

Section Four: Tools for Creating Web Sites

Overview

There are a wide variety of tools for creating web sites. These fall into four general categories: text editors, html editors, WYSIWYG editors, and full development packages. Each category has strengths and weaknesses and what is best will depend on the nature of the project and individual preferences. Regardless of the tool, to properly design effective sites requires a fundamental understanding of html.