The Five Smallest Web Design Mistakes

A list of the five smallest mistakes web designers make when building websites, and how to avoid them.

We've all come across these. They say the little things are the most important, but many web developers often overlook this obvious piece of advice. As a web developer myself, I find myself constantly looking to improve how my sites work. Could I make things easier for the user? Can I make things more robust? Does the site annoy me in anyway while I'm using it?

But we all miss things, and here's my list of the top 5 smallest mistakes websites can make.
1. Forms with amnesia

We've all had this before in one way or another, and it drives people to madness (And away from the site). You've spent 10 minutes of your time filling in a form on a website only to have your details rejected because of some mistake, but when you're sent back to the form all your precious details are gone! Even worse than this is when you added an image or video to the form and you had to wait 5 minutes for the submission to upload before it completely forgets who you are and makes you start all over again.
Real world example:

You fill out a credit application form to buy a car, but you forget to put your date of birth on it. The salesman tears the form up, and gives you a fresh one to fill out. In a fit of rage, you buy a bus pass.

The simplest way to avoid this is to use JavaScript checking in page, so the browser will not automatically clear all the information out. If you need to use bullet-proof server-side checks, ensure you re-populate all form elements with what the user entered. If you need to upload files as part of the process, separate this onto another page to avoid annoying users.
2. Intro pages

No sane person would think that a user would want to see a picture before they are allowed to enter a website. But there is obviously a minority of people who think it's a great idea, and commit this atrocity of form over function on a regular basis. Most people don't even enter sites through the homepage anymore, Google being the main referrer or just specific links from other sites, so there ultimately an annoyance for regular visitors who have seen the intro page 10 times already. These pages serve no purpose other than to annoy people. They're the Simon Cowells of web design.
Real world example:

You go to your local cinema but are forced to stand outside the front door and watch the first 5 minutes of a movie before they let you in, even though you only wanted to buy a drink. Cinemas across the country close down as most people don't get past the front door.

Stop doing it! If you really want to introduce people to your site with a flashy bit of design create a custom home page that maintains the general layout and function of your site, but which leaves more space for a bit of graphical showboating.
3. Disguised links

One of the things I hate about websites created by "designers", is the complete lack of attention to styles on links(hrefs). When a user is browsing a site they need to be able to pick links out of the background noise, because users tend to just skim the actual text. Removing the underscore and making links the same colour as the normal text is going to leave most links unclicked.
Real world example:

You try to go and get lunch at McDonalds, but the front doors have been disguised as a window leaving you debating which pane of glass to push. Pick the wrong one and you'll end up with a face full of glass.

People like to find and click on links, so make them stand out! Leave them underlined until they are clicked or if you really hate those little lines, make a style that bounces out of your standard text and have a hover style.
4. Image alt tags

This is a very old problem with websites, and one which has become more important (With the introduction of WAP), then less important(With the death of WAP), then more important(Disability rights) and now it is super important! With the increase in hand held internet devices (Such as the iPhone and G1) people are looking to browse faster and on smaller screens. This means a lot of people these days are not seeing your images, and the alt tag is vital for users to navigate around your site.
Real world example:

Roads are designed with tracks in the lanes, because everyone is in a car and won't have a problem with it. Motorbike fatalities rocket overnight,

This is a no brainer, stop being lazy and put in the tags. If you don't have the time, use an online A compliance site to test your site for compliance. Without alt tags it won't pass.
5. Flash menus

I feel stupid explaining this one; it should be as obvious as the nose on your face. Flash is a luxury, to be used sparingly and with caution. You should always assume that your users do not have it, and great pains are made to create alternate content for flash that does not load, but there is no 100% reliable method of doing this. If your intro animation
and it's alternate content does not load then that is no big loss, but if your menu is completely missing you will lose a visitor immediately. Is it really worth that just to use your favourite font?
Real world example:

You design your front door with a complicated locking system that can only be opened by people who are right-handed. Left-handed people can get in, but there not happy. People missing an arm just give you a wide berth.

Do not use flash for your menus. Menus should be the most functional element of your site, and the easiest to use.


Copyright © PcBerg