Gretchen Whitney
School of Information Sciences
University of Tennessee, Knoxville
8 March 2000

Web Design Workshop
128 Hodges Library
University of Tennessee, Knoxville
http://web.utk.edu/~gwhitney/pretty.html


Objectives:
  • To gain a sense of design principles by examining good and not so good sites

  • To engage our critical skills by understanding the appropriate use of Web technologies, and

  • To recognize that excellence in Web site design is most certainly within our grasp.
what makes a useful site? Principle No. 1: Good web site design does not mean shimmering and colorful graphics. Glitzy graphics are frequently an inhibition to good design.

Principle No. 2: Good web site design does not rely on knowing JavaScript, Java, or Photoshop. Images changing unexpectedly can be unwelcome surprises.

Principle No. 3: While a high degree of interactivity is fun and engaging, interesting and useful content can be more compelling and satisfying. In the educational and professional context, interactivity (quizzes, chats) can be important.

Principle No. 4: Good web page design relies on adherence to good coding, a sense of organization, and knowledge about the information needs of your readers. It is not inaccessible to the novice designer.

same subject sites: Compare www.nabisco.com and www.pillsbury.com. Which one gets across large amounts of information across better?

Compare www.chryslercorp.com and www.ford.com/us/. Which one helps you find information about the car you already own? Which one is promoting the company to stockholders, and which one is supporting its customers?

relentless navigation: Annotated Inktomi and Coyote enables the reader to go smoothly from the tale, to the annotation, to the footnotes. The coding isn't complex, but there's a lot of it to present a simple interface for the reader. Another example is East o' the Sun, which works with the same kind of relationships.

But, you can overdo the navigation on the front page. Visit volkswagen to see a site that presents items in multiple mouseovers - what would a screen reader make of this site? The essence is contrast - information for the graphics-oriented, information for the text browser. Why present alternatives for the same browser crowd?

extensive directions: If your site is so complex that 75% of the real estate needs to be taken up with directions, might there be something wrong? Visit the Acura site to sample an extreme.

problem areas: While we have moved away from the obvious problems illustrated in the awful page, we now are encountering problems of a far more subtle nature. In particular, the Web community as a whole has become far more sophisticated in its use of Web technologies and tools such as Photoshop and the WYSIWIG editors. This sophistication has brought us new problem areas to understand and endure.
fun cursors: We had blink. Then we had flashing background colors. Then we had the applet that took over the status bar. The latest "wave" for the Web seems to be fun cursors. One can watch flowers traverse the screen at WickedMoon, or butterflies at ChezTonner. If you must, the script is at DynamicDrive.

my mental model is a biscuit?: One of the most powerful information organizers is a mental model that relates the information that you're presenting to a real-life object. Information about a political campaign can be nicely organized around a map of the area, linking voter turnouts to congressional districts for example.

But what mental model is being used in these examples?

where in the world...: What would a person from Finland think if she landed on your site? The Web is a global network, with sites from outside the United States growing faster than those inside. In some circumstances, for example the main page of a site, it's necessary to indicate your geographical location. On sub-pages, at the very least an informative link back to the main page will enable the visitor to find out where you are. But at Chandler, OK Chamber of Commerce, neither is provided.
and now I do what, exactly??: One of the most frustrating things on the Web is to land on a site, and be given no guidance as to what to do next. The sites with a splash page and an enter button are barely acceptable. The major point in this discussion is that the use of the newest technologies is not always the best approach. Take a look at these fine examples:
  • Missing Link Indeed, the Links are missing...

  • APrimo Like the energizer bunny...

  • RLG Well, yes, there's a link. But it's not in the traditional color. These folks ought to know better.

  • MPL2. What IS this all about?

  • Literacy Volunteers of America. One of the best splash pages around. But, even if you can read, what do you do next?....

  • Zwerneman.com. Manages to combine the problems of no navigation, no indication of purpose, hideous loading time, and a repeating music theme. Wow!

  • Twilight. No navigation. What do these folks do? Where are they located? Examine the graphic section of the site: how long does it take to load for you? If, of course, you have the Flash plug-in...

  • ETSA. Well, perhaps this is in Australia, and of local interest. But the larger issue is, mouseovers are NAVIGATION devices. And these don't go anywhere. You've trained your users to expect that when a mouse moves over an image, they've found a link to something new. Not here...

  • The Matrix. We can expect multimedia from the film industry. But this has to be a classic for download time and lack of navigational clues.

  • This has to be my favorite Website for navigation. Not only does it pulse, you have no earthly idea what you're supposed to do. It's cool as heck, but a total mystery. Visit Audi and join the mystery. The same technique is used at Canon, but they've added music and a mysterious cube that goes nowhere. Wow!

student successes: Successful sites do not require extensive skill. They do, however, require attention to the information needs of the clients, and simple designs that meet these needs. I offer a few examples from relative novices, beyond the fairy tale sites offered above. These sites illustrate the application of principles that we've seen violated in the commercial sites:
Summary and Conclusion: We have gained the following principles from the examination of these sites, to avoid the "Pretty yes! Useful no!" problems:
  • Minimize download times with lean images,

  • Make navigation absolutely clear, for graphics-enabled and text-based browsers,

  • Stop the music/animations after one run-through - better, let the user control it in unexpected situations,

  • Provide a clear statement of purpose on the first screen, as well as authority information, dates of update, and the like to establish authority,

  • Finally, content is the most important aspect of your site. Recognize your readers, and fill their information needs.