Top Ten Mistakes in Academic Web Design
From CUNY Academic Commons
by Paula Petrik
History Computer Review (May 2000)
Faculty usually make their first foray into integrating technology into their teaching by putting their syllabus on the Web. Changing a word-processed syllabus into a web page renders it accessible to students and solves a number of logistical and routine problems for the instructor. But if they want students to take interest in their online courses and learn from them, faculty need to do a lot of reading and learning first. Unfortunately, when it comes to learning about technology, most faculty are as resistant as the students they complain about. Consequently, their online courses consist almost entirely of static and boring text that makes no use of the interactive, multimedia, hyperlinked characteristics of the medium.
Here are other problems that characterize many academic online courses:
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 programs 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: copy the image into an image-editing program (like PaintShop or PhotoShop) 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
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 scholars have pointed out, writing for the Web is different from writing for print. And faculty are resistant to learning this new style of writing. They are like ancient scribes who resisted the printing press. They write lengthy blocks of text that readers who are 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 (1012 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 attach 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 source in this fashion is unacceptable 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 all web user. Many academics who create their pages in Word 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 PC machine. And both look distorted and awful in Netscape. he easiest solution: Use FrontPage or Composer to create web pages, use Internet Explorer to view them, and check them in Netscape, Mozilla, and every other browser on a PC and on a Mac.
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. However, they have problems: For example, they segment the course into myriad areas that require multiple mouse clicks and backtracking, so it is virtually impossible to glean an overview of the course or to move easily between topical areas. On the other hand, if an entire university buys into a single system, then all the faculty should use it in order to provide consistency for students.
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 4050K. 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.
Back to Blackboard Course Design