Menu (imagemap)

CUCS Web Training

Learning by Example
...of what not to do

The Bad Yikes!
This site could be its own training manual for bad design, it has so many problems.
  • There are too many unnecessary and large graphics, some of which are too wide for browser screens that aren't open to their full width. None really add to the look of the page.
  • It's a long page...too much scrolling.
  • There's an ever-present "Under Construction" image, and several animated GIFs.
  • If you're unfortunate enough to have speakers and the correct plug-ins in your browser, music starts playing once you've accessed the page, and the control to turn it off is way down the page. Why does a construction company need music on its site?
  • The buttons in the left-hand frame aren't at all descriptive. It turns out, they are links to information about construction projects this company does, but there's no way to know that just from looking.
  • Click on the PLAT button in the left frame. There's a great, big, ugly scanned image that won't fit in most browser windows. And the ever-present music.
  • Finally, there's almost no information here. Sure, we've got phone, fax, and e-mail information, and some (awful) links to their construction projects, but there's no real information that prospective customers might want to know about.

The most frightening thing about this site is that they had "professionals" make it!

Bad Graphics, Background, and Motion

  • The colors on this page are awful. Not only do they clash, there are far too many of them. Pick a few colors that complement your site, and limit yourself to those.
  • The background is too busy and has too much contrast, making it hard to read the text. Backgrounds should, well, remain in the background.
  • Notice that in the top image, the cards aren't white where they should be. This happens because white is set to be the "transparent" color in the image. On a white background, you'd never notice, but it's a problem here. Either the GIF file should be fixed in an image-editing program, or the image should be used on a white background.
  • The ticker (with the moving message) near the top of the page is unnecessary. It draws more attention than anything else on the page, but isn't a particularly useful selling tool. Tickers on news sites which update the latest headlines or stock quotes are useful. This one isn't.
  • The overall quality of the graphics on this page is pretty bad. They make the page less attractive than plain text alone would.
  • The biggest problem with this page might not jump out at you right away. The links to actual information, the stuff people come to see, are at the bottom of the page. Put important links at the top, rather than thinking that people are going to read your page in the order you want them to read it.

Too Much Information on a Single Page

  • This page is an example of putting too much information on a single page. While there are in-page links (called anchors or bookmarks) that allow you to move up and down it without too much scrolling, it is still difficult to navigate. It is easy to find yourself creating long pages like this when converting, say, a large Word document meant to be printed on paper into a web document. Long, long pages are like big mouthfuls of food...hard to swallow without gagging. Break it up into smaller, linked bites.
  • A second, if relatively minor, problem on this page is the use of red, underlined text (near the bottom of the page). Words that are brightly colored and underlined scream "Link!" in web browsers,  and using those visual triggers on non-linked regular text is confusing.
  • Finally, the text on the top is just too big, and ALL-CAPS ARE THE ELECTRONIC EQUIVALENT OF SCREAMING (they're hard to read and annoy people).
Tutorial
Navigation
BackForward