Case Study: Bad Website #1

As though one were looking through a crystal ball, back in time to 1992, the following sample site puts on a clinic of poor design. As always, real names and URLs have been omitted to protect the offenders.

Usability Issues

Frames

Can you believe people still use frames? Well, it's sad but true. This particular site has the old left navigation frame, with content appearing on the right. In today's day and age of includes, templates, content management systems and the like, the use of frames just isn't necessary.

• Anyone who finds an 'interior' page in search engine results will view it without the accompanying navigation pane. They'll be left thinking that the site only has one page.
• Bookmarking. You can only bookmark the home page. Not very good marketing, or usability for that matter.

Relative Page Width

While there may be some debate about using a fixed vs relative width for a website's design, there is one glaring problem with using a relative width: readability. For those of with monster monitors operating at obscene resolutions, a website with a relative width can be a pain. If you expand your browser to full screen (which most of us do) you end up with lines of text that are about 6 feet wide, give or take. Just try finding your place after reading across a page of that size.

Now, obviously one could simply not expand their browser to full screen. But as of the present day, most browsers lack a button for 'optimal reading width', while most do have a button for 'maximize'.

All arguments of principles aside, the relative width on this particular site does it no favours.

File Size

The use of images for the main navigation is unnecessary. Coupled with equally unnecessary hover state images, you end up with a website that is much slower to load than it needs to be.

This particular company has also won a Consumer's Choice Award; good for them! But the image has not been properly resized. It has simply had its size attributes altered within the HTML so that it fits on the left side of the page. Bad designer... bad!

Design Issues

Poor Use of Colour

Oi, what a mess. We've got a lovely mix of yellow, red, blue, teal and purple. We've got some lovely gradients in the navigation buttons, and even better gradients when you hover over them. Not to mention the ultra-modern background courtesy of FrontPage 98.

Outdated Effects

While you can't see it, every page on this website makes use of an old Internet Explorer "feature" - screen transitions. The text will 'wipe' or 'fade in' on every page. Very distracting and adds no value whatsoever. And it's a classic implementation of a bad feature, as well - every page uses a different transition. Remember the old design adage, "Just because you can, doesn't mean you should."

Lack of Alignments

As you can see, there isn't a single navigation graphic that shares a right-side alignment. The effect of this is a 'scattered' presentation, difficult to read and very unattractive.

Inconsistency

Within the main navigation, we have different font sizes, different general look and feel, and different 'hover' states for certain images, if they have a 'hover' state at all. The result is unexpected behaviour of the images, potentially confusing the user.

Font Mixing

While all fonts are, technically, sans serif, this site uses at least three different font faces. The rule of thumb is one primary font and one secondary font, usually the opposite style of the primary (i.e. if your primary is sans serif, your secondary should be serif or script, etc. - just not sans serif).

The final word

This website is not only unattractive, distracting, has poor usability, poor readability, and poor search engine visibility, it's slow to load to boot. As we suggested at the top of this page, this site could put on a clinic of poor design.