• In total there is 1 user online :: 0 registered, 0 hidden and 1 guest (based on users active over the past 5 minutes)
  • Most users ever online was 52 on Fri Oct 26, 2012 5:12 pm
  • Users browsing this forum: No registered users and 1 guest

Christian Web Hosting and Designs Community forum Gabriel Web Hosting & Designs

It is currently Mon Apr 24, 2017 1:06 pm
Change font size
Preset Styles:

Top Ten Mistakes in Academic Web Design

Top Ten Mistakes in Academic Web Design

Postby admin » Sun Oct 21, 2012 2:29 am

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.
User avatar
Site Admin
Posts: 193
Joined: Fri Oct 19, 2012 4:25 pm

Return to Web Designing Errors