Top Ten Mistakes in Academic Web Design

Faculty usually make their first foray into integrating technology into their teaching by putting their syllabus on the Web. Putting a syllabus into digital format renders it accessible to students and solves a number of logistical and routine problems for the instructor. A smaller number of higher education folk mount entire courses on-line, both for distance education and for traditional course enhancements. Presently, there are enough of these examples to make some comments about the usability of these sites and where they are going wrong. So, with a tip of the hat to David Letterman and Jakob Neilsen, the top ten mistakes in academic web design are:

1. Bloated Graphics

Most instructors understand that including images on a web site either contributes to the overarching aesthetic design or enhances a site by furnishing images for illustration or analysis or both. The problem is that most of these images are far too big and increase download times enough to try the patience of Job. The solution: use a web-centric image editing program, such as Adobe ImageReady or Macromedia Fireworks to reduce the resolution and increase their compression of the images; most photographic images will maintain their integrity even when the JPEG quality is set at 15 or 25 or Poor Quality.

2. Scaling Images

Closely associated with “bloated graphics” is the problem of scaling images. Many commercial HTML editors allow scaling or making a large image smaller to fit a design space. Scaling is a non-destructive procedure and merely alters the appearance of an image and not its actual measurements. Scaled images, therefore, will appear to be the size of postage stamps when they are actually the size of postcards. In other words, a scaled 200K image will still weigh in at 200K and take over a minute to download. The solution: lay out the page in an image editing program or scale the image in the HTML editor, note the dimensions, and resize images accordingly before placing or importing them into a site.

3. Dense Text

Let’s face it. Academics are primarily text people. Most of what and how we have learned and what and how we teach involve text. Early on, we learn that paragraph development is critical to writing a cogent essay and that the “one sentence paragraph” and bulleted lists are stylistic tactics more at home in the worlds of journalism or business. Most web visitors, however, do not “read” on the web–they scan. And once they have located the information that they desire, they choose to print the material. This is especially true of web pages that include large blocks of text. As a number of Web mandarins have pointed out, writing for the Web is different from writing for print. Transferring hard copy material directly to the Web without giving some thought to altering its format will exasperate visitors because they will be unable to find the information that they need as quickly as they desire. The solution: chunk the information into bite-sized pieces, use shorter lines (10-12 words), adopt shorter paragraphs, and employ bulleted lists where it is possible. The best strategy is to revise the syllabus to strengthen its scannability and provide a downloadable, print version (RTF or PDF format to accommodate different platforms) that retains the longer, more developed text. Of course, meddling with a primary document in this fashion is unacceptable in academic circles, so these must be posted in their original state or turned into downloadable documents.

4. Lack of Contrast

Intimately allied with the issue of dense text is the problem of contrast. For a variety of reasons, computer monitors are difficult for human eyes, and human eyes are most comfortable scanning text when the contrast between the background and the type is high. Black type on a white background, for example, is “high contrast” and, like the basic black dress with pearls, is always in style. Unfortunately, many commercial HTML software packages include backgrounds that lure the unsuspecting academic into bad practices. As a result, many instructors place their text on busy backgrounds or use low contrasting colors for text and background. (One of the most common of the latter instances is black text on the default gray background.)

5. Font Size

Although mistakes in font size are less severe than errors in contrast and text density, they are still annoying to both the Mac and Wintel Web users. Many academics who create their pages on Wintel platforms are apparently unaware that, though the text might appear the “right-sized” on their machines, it will appear hopelessly small and unreadable on a Mac. Conversely, instructors who work on Macs seem equally unconcerned about the fact that their “right-sized” text will balloon to billboard proportions and cause excessive scrolling on a Wintel machine. The easiest solution: check the site in Internet Explorer 4.5 or greater by using the large and smaller text buttons on the navigation bar. Albeit not foolproof, such a check will provide an instructor with an idea of the page’s readability on both platforms.

6. Looping Animations

Any kind of motion attracts the human eye. We can be mesmerized by something as wacky as a rotating 3-D cow or, more commonly, an envelope opening and closing. Animations, in short, are distracting and annoying. Besides, they divert the viewer’s attention away from the web site’s content. The exception to this rule of thumb involves navigational apparatus. Having a button or menu item change color or move (once, please) alerts the viewer to the possibility that clicking on or rolling over an item might result in some response. The answer to the problem of animations is simple: except in cases in which motion adds materially to navigational recognition (or is the actual content of the site), avoid animations. Especially avoid hackneyed animations that are available from animated GIF sites; they are all over the Web.

7. Courseware Authoring Software

One of the ways in which institutions have hoped to persuade faculty to use technology or the Web in their classroom is by touting the ease-of-use of courseware authoring programs, among them WebCT and Blackboard. To be sure, these packages are generally easy to use and possess workable classroom management facilities. But, by and large, they are unattractive, exhibit poor usability, and seduce faculty into bad Web and pedagogical design. First, because the software permits the addition of chat rooms and discussions to courses, many instructors use these facilities even though they are not “hard-wired” into the course. In other words, there is no reason for the students to use them because they are not tied to the course material. Second, they segment the course into myriad areas that require multiple mouse clicks and backtracking. Consequently, it is virtually impossible to glean an overview of the course or to move easily between topical areas. A user can easily become frustrated and confused. The list could go on. Yet, with some time and effort, these problems can be overcome. We should, however, be clear on what we gain and lose by buying into “courses in a box.”

8. Scrolling or Long Pages

Because reading on a monitor is difficult or annoying, requiring viewers to scroll through long pages looking for information undermines a site’s usefulness. Visitors are likely to hit the print button and leave. Important information, moreover, may be lost as visitors scan “above the fold” or the bottom of their browser window. The solution: chunk the information into “bite-sized pieces” and place the most important navigational and information parts of the site “above the fold.”

9. Excessive Download

Human factors guidelines suggest that web visitors will lose interest in a site if the site exceeds a ten-second download time. How big, then, can a page be? The answer is: “It depends.” Download time is a function of the kind of access available to a web site visitor. Those arriving at the site via ISDN or DSL lines will see a site long before a visitor coming through on a 28.8 modem. There are several rules of thumb and strategies that help keep page size under control. First, keep the total size of a page to 40-50K. Second, provide a mechanism for downloading large items. Third, furnish users with choices. Indicate, for example, access to a larger picture or video clip by use of a thumbnail or still frame. Fourth, warn visitors about download times by indicating a size in K and an estimated download time. Video, for instance is notoriously bandwidth hungry, so show use a still frame to give the visitor an idea of what’s in store and a notation on the order of “1 MB-approx. 7 minutes download at 28.8.” Don’t expect your students to be happy about being hijacked into a long download. On the Web, small is always beautiful.

10. The Nothing Site

Luckily, most academic sites do not suffer from “bleeding edge” technology. Use of advanced technologies, while they can be engaging, take risks with the technology and can try a visitor’s patience with site additional widgets requirements and errors. While “bleeding” sites are stuffed, many academic sites suffer from the opposite syndrome: emptiness. Many academics begin with the best will in the world and put up a site. For the most part, these sites reflect “beginners’” mistakes and design errors. And that’s state of the site for years. Nothing is changed; nothing is updated.

Let’s say that all the problems have been addressed. Images are small and download in a trice. The text is legible and readable, and its appearance on both the Mac and Wintel platforms is uniform. There are no blinking or hopping items, and the site is blissfully bereft of rainbow rules and other hackneyed images. What’s next? If there were two things an instructor might want to learn to increase the usability of a site it would be to master cascading style sheets (CCS) and to understand linking databases with the Web. In the meantime, readers might find the following helpful or interesting.

Software and Web-Based Tools

1. Terry Morse Software
GoClick/Myrmidon
http://www.terrymorse.com/
GoClick and Myrmidon convert MS Word files and other formats to instant web pages. Available for purchase and electronic download at this site. At this juncture, the program is available for the Mac platform only.

2. Hot Door
Color Harmony
http://www.hotdoor.com/
Having trouble figuring out a color palette? Color Harmony suggests congenial color schemes for the color impaired. Available for electronic purchase and download at their site; it is available for the Mac platform only.

3. Tool Farm
Color Theory
http://www.toolfarm.com
Another tool for putting together a color palette by suggesting complementary color schemes. Available for electronic purchase and download at their site. Available for both Mac and PC.

Other interesting color sites include the following:

1. Paletteman
http://www.wire-man.com/paletteman/
A nifty compatible color palette generator written in Javascript. You can begin with one of the preset palettes or create your own or experiment with one of the preset and move to your own.

2. Color Matters: Colorcom
http://www.colorcom.com
Color Matters is a comprehensive site dealing with the use of color. The “Color Matters” area explores issues such as, “Color and the Brain” and “Color and Design-Art.”

3. Color Matters: Usability
http://www.colorcom.com/usability.html
Color Matters also maintains an area demonstrates the use and misuse of color. The examples are instructive and useful.

4. Ian Kelly’s Color Related Links
http://mcs.open.ac.uk/ik7/colour.html
A comprehensive list of color sites and topics. No color topic goes untouched.

5. Antimony Software
Mizer
http://www.antimonysoftware.com/

Designers constantly seek to reduce the size of their pages smaller to decrease load time. Available for both Mac and Wintel platforms, Mizer reduces the size of HTML pages by 10 percent and more.

6. ClickBook
Blue Squirrel
http://www.bluesquirrel.com/
Blue Squirrel has acquired a number of useful products, including ClickBook, which is available for both Mac and Wintel platforms.

Usability and Design

1. Patrick J. Lynch, Sarah Horton, Web Style Guide: Basic Design Principles for Creating Web Sites; (New Haven, CT: Yale University Press, 1999).

2. Crawford Kilian, Writing for the Web; (Vancouver, BC: Self Counsel Press, 1999).

3. Jakob Neilsen, Designing Websites with Authority: Secrets of an Information Architect; (New Riders Publishing, 2000).

4. Scott McCloud, Understanding Comics: The Invisible Art; (New York, NY: Harper Perennial, 1994).

Selected Syllabus Models

1. Professor Michael O’Malley
Department of History
George Mason University
“Magic, Illusion and Detection”
http://chnm.gmu.edu/courses/magic/syl.html

2. Professor Randy Bass
Department of English
Georgetown University
“A Bigger Place to Play:
Text, Knowledge, and Pedagogy in the Electronic Age”
http://www.georgetown.edu/bassr/511/bpp97.html

3. Professor Roy Rosenweig
Department of History
George Mason University
“Clio Wired:
An Introduction to History and New Media”
http://chnm.gmu.edu/courses/rr/f01/cw/