Tuesday, 27 February - 09:58 Category: Design

Top 5 Design Disasters

SYNOPSIS: Here are the top 5 things you should NEVER do to your website. We've backed it up with some classic heart stopping examples!

I couldn't resist the opportunity to put our Senior Designer, Matt McArdle to work on this particular subject. I've got our lawyers at the ready in case we really upset some folks out there. Please note I have no control over the websites these 3rd party sites and cannot be held responsible for their content! Visit at your own peril...

Here's my take on the just the bad and the ugly. (If you want to see the 'good' check out our portfolio!)

Everyone who uses the Internet has probably, at some time or other, come across archetypal web site design/usability horrors that have been described as ’œcar wrecks on the information superhighway? So what is it that makes them bad? Here are my personal top 5 Design Disasters:

1) Visually Horrific

Classic bad design is invariably garish and over-reliant on outdated 'attention grabbers' like blinking text, animated GIFs and very bright often clashing colours. These are typically accompanied by tiled backgrounds that obscure the otherwise large bold-face brightly coloured text. Sites like these still exist. Here are some examples:

www.neiu.edu/~flanglab
www.videosphotosanddjs.com/homeindex.html
www.yonderhollow.com
www.angelfire.com/sc/thefalcon

or virtually all the sites on MySpace!

2) Challenging Navigation

Whilst classic design disasters are often created by web design amateurs with innocent enthusiasm and a copy of Microsoft FrontPage, navigational faux pas are often put together by clever, experienced designers who have forgotten that users rarely have the time figure out their artful but obscure ways of concealing the information. A case in point may well be found here:

www.campbellmithun.com
www.frysteel.com/data/index.html

3) Unwieldy Pages

Occasionally you come across sites where for one reason or another the designer or client has insisted on vast arrays of information being contained on as few pages as possible. Whilst some page scrolling is often necessary, these examples show how exasperating it can be to have too much information in one unforgiving block:

www.hrodc.com
www.longscycle.com

4) Bad Use of Graphics

Most people like some visual interest on a web page, even if they are primarily hunting for information. But graphics as pure decoration should be minimal and quick loading, unlike this bad design classic:

www.northbridgepolice.com/headquarters.htm

Each image on this would display with the same level of detail within a few seconds if the files were ONE TENTH the size!

Inappropriately sized files are only part of the problem. Thumbnails that encourage you to "click here for a larger image" only to reveal an image barely bigger than the thumbnail itself, images that are missing, especially if they do not have ALT tags and images that are clearly too large and have caused the page layout to fall apart.

To see examples of how NOT to use images visit almost any MySpace site to reveal the full horror of their destructive power!

5) Illegible Text

This falls into two common categories; text that is too small and insufficient contrast between the text and the background.

We've mocked up some examples of small text and poor contrast here.

We have to bear in mind that younger people have less problem with text that is small or lacks contrast, so sites designed with them in mind can afford to be more adventurous. For most people however, 11-12 pixel type in a dark grey with some inter-line spacing is the preferred option.

Most of these design disasters are extreme examples and are easily avoided. If in doubt, consult friends, colleagues or just about anyone except the folks above!

Click here to see a stunning portfolio!

Posted By:Jed Wylie on Tue, Feb 27th 2007, 09:58