Examples of bad website navigation system

By: Deepu Balan    |    In: Tips & Tricks, Web Design       

There’s a practice among instructor-pilots in the air-force. Whenever they would make a mistake while demonstrating a manoeuvre to a student, they would say, “This is how you do it; now, I’ll show you how you should do it”. They say this to hide the embarrassment and get another shot at the manoeuvre, but the truth is we can learn to do things right by looking at how not to do them.

There’s goodness in everything, and while the following websites might reinforce the belief that there are no limits to human stupidity, there are lessons to be learnt here. Let’s take a look at some of the worst navigable websites out there, and the lessons that you can learn from them before unknowingly including some of their traits in your own website.

Computer Physicians

Well then, it’s a website that supposedly belongs to computer physicians, but it looks more like a graveyard than a clinic. The header has a bizarre picture showing someone trying to diagnose a laptop using a stethoscope. The design looks like these guys haven’t been within 10 miles radius of a computer.

These people have tried their best to confuse the craps out of the visitor. Right below the image, they have placed a number of links; except after trying to click on them, you realise that they are not links. The physicians have been thoughtful enough to show the only three links available on the page with red colour. Red, incidentally, is the colour of danger, so it took me some courage to click on one of them. The results were benign, though, and I just ended up on the About page, which was practically a dead-end except for the “Back to home” link at the bottom.

The website says these guys have been around since 1999. I can bet they haven’t updated their website since then.

computerphysiciansLessons:

  1. Have a clear Menu right upfront
  2. Don’t have dead text that looks like links
  3. Have the menu on all pages
  4. Update your website regularly

eSuperSoft

The next disaster of a website on our list today is eSupersoft, a name that might make you think it’s a company that makes software, which in fact it does. However, you are surprised when you see moving images of huge machinery lifting timber and trucks moving out. Before you can get over your astonishment, the audio track begins playing, which sounds somewhat like 2nd World War news bulletins. The shocking-green background is another major turn off.

If you are still undeterred, skip the intro and jump to the home page. It’s like diving into a bowl of green jelly. The green gets worse, and so does the commentary. The computerised voice announces all the 16 links on the 2nd page before you can move on to the next level, which is a contact page that leads to nowhere.

There are no links where I’ve ended up, and the thought of replaying the JigSaw-inspired voiceover is scary, so I decide to give up on esupersoft, for good.

esuper softLessons:

  1. Don’t have gaudy colours on your landing pages
  2. Don’t have a voiceover unless you feel it’s absolutely necessary
  3. Have fewer, easy-to-read buttons
  4. Provide information rather than just telling people what you do
  5. Have a contact form

Smashwords

The famous self-publishing website is smashing new records at sloppy website design. Navigating this website is a test of IQ, comprehension, and eyesight. There are hundreds of links splattered all over the frontpage, and the colour -scheme and the fonts aren’t making the job any easier. Even serious book buffs will avoid getting stuck in here.

Smashwords IT department has probably tried to provide convenience by sorting the titles in a hundred different ways, but have made the website look daunting to browse. I still can’t figure out why someone would search for a book by entering a price range!

No one has time to spend reading small-print, and people want to see upfront what they are looking for. By comparison, Amazon is doing a wonderful job with their Kindle Store. No wonder, that Smashwords is eating humble pie.

smashwordsLessons:

  1. Have legible font sizes
  2. Do not provide unnecessary functionality that creates clutter
  3. Have more of clickable pictures, less of small-print
  4. Do not clutter your pages

SHMarketing

SHMarketing  website shows that the UK has got talent too. In fact, it’s one of the worst examples of how not to design website navigation. To start with, the website seems to think my PC is a smartphone, as it’s showing in a 6-inch window instead of the whole screen. But, the most bizarre feature of this weird design is the absurd grid that has big and small circles marked on it, with a challenge thrown at the visitor to “click on the circles to find out more”.

People wouldn’t usually click a circle, a triangle or a square unless they know where it’s going to take them. Yet, the audacious designers at SHMarketing seem to think people are visiting their website for some sort of treasure hunt, and would be intrigued by this mysterious feature. The funny thing is that the smaller circles just keep running around as you scroll over them, so you can’t click any of those.

I would love to see the stats on how many people get past the home page on this website. Lora Croft would love it, though.

shmarketing

Lessons:

  1. Keep the navigation simple and upfront
  2. Don’t be mysterious or weird with your links
  3. Use a responsive site design that adapts to all screen sizes
  4. Don’t make life hard for the visitors

There’s no dearth of bad website navigation examples on the Internet. Most of them are widely ignored and head for oblivion, while some do get traffic, albeit from articles like this one. I don’t think this is the kind of traffic anyone would desire.

This guest article was written by Evans, who is a 27 years old marketer and blogger from Nottinghamshire, UK. He regularly contributes to leading websites like – WDR.
Written by Deepu Balan

Deepu Balan is a self-taught web UI designer and developer who is really passionate about web design related stuffs. You can follow his updates on twitter @bdeepu