Designing Usable Web Pages

Introduction

At SUNY Potsdam there is no official web designer. There is an individual in College Relations who designs the "Official College Pages" but this is in addition to his regular duties in College Relations. Thus the designing and writing of web pages for the academic departments and administrative offices is left to each individual unit. There has been some instructional workshops on writing HTML but none on actual design of pages.

Following a usability study of the Potsdam web site this past spring I realized the need for a Seminar/Workshop on Web Design. The usability study revealed problems in several areas including navigation, use of color, consistency of standard information, general organization and use of graphics and images. It is therefore the goal of this seminar series to provide information that will help correct the usability problems found at the web site.

Goal of the Seminar

The goal of this seminar/workshop series is to provide information so that participants will be able to write web pages that are both usable and follow basic web design principles.

Target Audience

This seminar is designed for adults interested in designing pages for the World Wide Web. It is specifically designed for the faculty and professional staff at SUNY Potsdam. Since the focus is on design principles it is not necessary for the participants to have prior experience in designing web pages.

Organization

There will be a total of six sessions with each session concentrating on a different topic. Each session will consist of two parts, the first being a seminar where the basic design principles will be discussed and the second being a hands on workshop where participants can apply the principles to their actual web pages. Each session will last two hours with one hour for the seminar and one hour for the workshop. The sessions will cover the following topics

Session 1: Layout Design, Navigation and Knowing Your Audience

Session 2: Web Page Content

Session 3: How to Use Tables and Page Links

Session 4: Use of Color on the Web

Session 5: Graphics and Images

Session 6: Designing Your Own Graphics

Materials

Each participant will be given a handbook to accompany the sessions. In addition a corresponding web site will be developed which reinforces the material presented in the sessions.

The session will be conducted in a computer classroom that is linked to the campus network so that participants can work on their own web pages during the workshop portion of each session. The classroom has approximately 15 Macintosh computers, this will limit this number of participants for the workshop portion of the sessions.

Assessment

At the end of the seminar the participants will be able to produce web pages usable web pages. They will also be able to evaluate web pages from multiple perspectives.

Session One: Layout Design, Navigation and Knowing Your Audience

Preparation

Prior to the start of the session start NetScape on each computer and then load a different academic web site on each machine. The sites chosen will be other SUNY campuses.

Objectives

  1. The participants develop an awareness of the types of people who will be visiting Potsdam Web pages.
  2. The participants become aware of the organizational structure of web pages
  3. The participants become aware of how people read web pages
  4. The participants will examine the various ways to navigate between web pages
  5. The participants will understand the importance of "branding" their web pages
  6. The participants will begin to understand the visual components of web design

Activities

  1. Icebreaker: Index Card - What is unique about you?
    1. Favorite sports/hobbies/past times (upper left)
    2. Birthplace and Favorite cities to visit (upper right)
    3. Current Job (lower left)
    4. 2 comments, things or traits about yourself (e.g. team player, personable, talkative, opinionated, like movies, hate sports) (lower right)
    5. Favorite web site (in the middle)
    6. On other side write 4-5 expectation for this Seminar
  2. Icebreaker: Treasure Hunt (find 2 or 3 others like you)
  3. Brainstorm: Type of people that will be looking at Potsdam Web pages
  4. Critical Thinking: Plus Minus Interesting
    1. In teams of 2 look at the several other SUNY Pages
    2. Number 1’s look at Pluses on the pages
    3. Number 2’s look at Minuses on the pages
    4. The teams compare the pluses and minuses and note interesting items
  5. Critical Thinking: 6 Hats (identified in the Audience brainstorm)
    1. Have participants think about the web sites they have just looked at from the viewpoint of one of the audience groups.
  6. Brainstorm: The ways that a person can navigate web pages
  7. Critical Thinking: Discuss the various organizational structures available for information on web pages.

Assessment

The participants will be able to identify the major audiences for the web site. They will also be able to state various navigational methods and what they like and dislike concerning visual design.

Session Two: Web Page Content

Preparation

Prepare a handout with examples of content of web pages. The examples should include both well written and organized content and poorly written confusing pages.

Objectives

  1. The participants will understand the difference between a computer page and a printed page.
  2. The participants will understand how people read web pages
  3. The participants will be able to write pages in an active voice.

Activities

  1. Brainstorm: How does web page differ from a printed page?
  2. Critical Thinking: Recognizing good and bad writing
    1. Have different people read various web passages
    2. The participants discuss what is a good or bad passage and why
  3. Cooperative Writing: Rewrite the passages to make them good passages.
    1. Divide into teams of four - 2 people work together to rewrite a passage
    2. The rewritten passage is read to the other 2 on the team and discussed to see if it can be better.
  4. Cooperative Writing: Choose a page on your own site and rewrite in an active voice.
  5. Cooperative Learning: APC - The various ways to present information on a web page?

Assessment

The participants will read a web page and decide if it is well written or recommend how it can be rewritten.

Session Three: How to Use Tables and Page Links

Preparation

Prepare a handout showing the various uses of tables on web pages. Also show the various ways at links can be used on a web page.

Objectives

  1. The participants will understand the various uses for tables in web pages
  2. The participants will understand the properties of tables
  3. The participants will understand the predictive nature of links
  4. The participants will be able to write descriptive links

Activities

  1. Critical Thinking: Predict the Link
    1. Divide the participants into two team
    2. Team 1: Look at a link and guess what it links to
    3. Team 2: Give a list of terms and predict where the information can be found
    4. Have the teams compare results and see if they agree
  2. Cooperative Writing: Look at links on your web page and rewrite to make them more descriptive.
  3. Brainstorm the use of tables
  4. Discuss the various effects that can be achieved with tables

Assessment

The participants will use descriptive links and effectively use tables on their web pages.

Session Four: Use of Color on the Web

Preparation

Bring to the session the Pantone Color Strips and Books on Web Color

Objectives

  1. The participants will understand that who browsers can select only certain colors.
  2. The participants will be able to identify a web color tag
  3. The participants will be able to create usable color combinations
  4. The participants will understand that there are only 216 usable web colors

Activities

  1. Brainstorm: Why do we use color on the web?
  2. Critical Thinking: Best Colors - Worst Colors
    1. Divide into teams of 2
    2. Number 1’s - Write a list of the worst color combinations that you have seen on the web.
    3. Number 2’s - Write a list of the best color combinations that you have seen on the web
    4. 1’s and 2’s compare lists to see if they can be "improved"
    5. Make a list on the board of the best and worst colors.
  3. Web Map: Properties of good and bad color combinations
  4. Discuss web browsers use of color
  5. Use the Pantone color strip to identify the HTML code for the best color combination.

Assessment

The participants will locate the HTML code for a desired color using the Pantone color strip.

 

Session Five: Graphics and Images

Preparation

Prepare a handout showing the good and bad uses of images.

Objectives

  1. The participants will understand the impact of graphics on web pages
  2. The participants will understand the effect of image size and load times
  3. The participants will locate and download images from the web
  4. The participants will scan a picture and make the image into a gif file
  5. The participants will place an image on a web page

Activities

  1. Web map: The reasons for using graphics on a web page
  2. Discuss load times - how long should people wait for an image to load?
  3. Creative Writing:
    1. Draw 2 or 3 icons that could be used on the web
    2. Draw or describe a picture that conveys a message
  4. Critical Thinking: PMI - Good Icons - Bad Icons
    1. Use a PMI figure to list the PMI attributes of Icons and Images
    2. Compare list with another person
    3. Discuss the interesting statements
  5. Locate an interesting icon on the web and download to your folder
  6. Scan a picture and create an gif file

Assessment

The participants can locate and download an image from the web. They will then place the image on a web page.

Session Six: Designing Your Own Graphics

Preparation

Bring to the session books on preparing graphics.

Objectives

  1. The participants will use Photoshop to create a banner that can be used on their web page.
  2. The participants will use Photoshop to create a special effect with an image
  3. The participants will place a created image on a web page
  4. The participants will use the Pantone Color Strips to select a web safe color for the image

Activities

  1. Brainstorm: Reasons for creating your own graphical images
  2. Use Photoshop to create a graphic
  3. Add graphic to web page

Assessment

The participants will create an image and add it to a web page.