Common Design Mistakes

If you want visitors to come back and visit your site again – do not annoy them. If you can keep most of the following off your webpages then you should make some happy surfers (although there will always be someone you annoy). Note that this list is in no particular order, some sites give a top top 10 of do’s and don’ts but your pet hate may not be the same as mine (which happens to be flash animation).

Click here to Enter

Do not welcome visitors to your site with an image and invitation to enter, these ‘splash pages’ add zero value to a site. Even worse, do not greet them with a flash animation or force them to register to enter the site. More on homepage usability here.

Slow download times

Not everybody has broadband. Keep your pages small and they will download quicker. Seems simple to say but just think about how many websites you have visited which creep into your screen and then don’t actually tell you what you want to know. Keep it quick and snappy. At the very least, make sure the homepage as a minimum loads quickly. Visitors do not like to be kept waiting. The secret of fast downloads: send less data – a theme you will find repeated through out this site. If you want to check how fast your pages download, try this resource: web.dev/measure/. It also contains a lot of useful data about performance.

Inaccessible Content

Make sure the website is accessible to all users. There are so many browser and platform variants it is a constant wonder how anything works. Equally, the number of applications required to run all the various multimedia options is huge. So test the site on as many browser types as possible and on as many platforms (PC and MAC at least) as possible. And make sure you do not rely on visitors having the latest XYZ application just to see your site navigation. And although getting at bit old, the www.w3.org still offers good accessibility advice.

Irrelevant Information

Do not clutter up your site with great swathes of text – break it up, use headings or better still put it on different pages. Do not use jargon, cyberspeak or technical terminology that only you understand.

Placing key information below the fold

This means make sure the visitor does not have to scroll down to find the key links and messages. By all means place the important links at the bottom of the page – but make sure they are at the top as well.

Horizontal scrolling

This one is so bad it doesn’t warrant a real comment. Never, ever force horizontal scrolling on a visitor.

Irrelevant Graphics

If the graphic does not have a use then remove it. Graphics should only enhance a site – visitors have seen it all before so a jolly image of a seagull on a site promoting beaches doesn’t really do much except slow down your download times. All you need it the picture of the beach. And make sure you include ‘height’, ‘width’ and ‘alt’ tags.

Non-optimized images

The bigger the image the larger the filesize. The higher the quality, the bigger the filesize. The bigger the filesize the longer it will take to load. So make them as small as possible and you can usually reduce the quality quite a bit without affecting the on-screen resolution.

If of course you want the crystal clear image of your toenails to be available then use a thumbnail image on the content page and link to the high quality image.

Animated graphics and scrolling text

Especially attention getters that blink at you. Nuff said.

Flash

Some love it, others hate it. Great if you have broadband and like fancy graphics. Pants for everybody else. Flash is not accessible or usable. This is an excellent explanation from www.alistapart.com. That being said, there are some uses for Flash, it can be used to demonstrate a sequence of operations for example. But if it just used to make a site look pretty then why bother – experience shows that good navigation and usable content are far more important.

Site counters

Do you care how many people have visited this site? Probably not. In which case visitors are not interested in how many people have visited your site. If you want site statistics then there are plenty of free options available.

Fixed-width tables

If you must use tables then make them relative-width tables that automatically size to fit the browser window. If your fixed-width table is wider than the browser window then you end up with horizontal scrolling. See above. Better to use Cascading Style Sheets.

Browser download link

It is a pretty good bet that your visitor is using the browser they prefer. I like to use Firefox so I do not like being told that a website is best viewed using IE. Your site should be enjoyed on any platform and browser combination. There is no need to ask your visitors to a download a browser.

Broken Links

Visitors expect things to happen when they click on a link. When it doesn’t they feel cheated. It’s bad enough that an external link (to another site) is broken but to have broken links on your own site is sloppy. Maintain your site – if you use a good editor, it will check all your links and report back.

Incomplete pages

Make sure everything works – check all the links and ensure images and multimedia load properly. Ensure that alternate pages are available for users who don’t use Java, JavaScript, Shockwave Flash etc.

Pages that open in new windows

This prevents the use of the BACK button, eats up RAM, fills up the taskbar and generally annoys the hell out of everybody. If you really want to give them the option to open a new window then suggest ‘right-clicking’ and choosing the ‘open in new tab’ option. But is it really worth it? Probably not.

Frames

Go to any major website and you will not find frames. Why not? Because frames suck. Find out why here.

Cutting-edge Technology

You will not win friends by loading your site with cutting edge technology. For starters they will probably have to download some application or another and the technology itself may be unsupported by many browsers and simply cause the thing to crash. In any case, it will bloat your pages and slow down download times (have we mentioned this before?). The only exception would be if you were promoting the aforementioned technology.

Bells and whistles

Having a little chain of stars follow your mouse pointer around is amusing for about 1 nanosecond, after which it just becomes annoying. The same goes for background music. All these gimmicks take time to download and loose their novelty value very soon afterwards.

Unless of course you have a page on Myspace. But there again, if you do then you are not likely to be reading this article.

Indecipherable URLs

Call your files and folders something sensible. All of these files are in a folder called ‘articles’ because that’s what they are. This file is called ‘common-design-mistakes’ because that’s what it is about. It also means that visitors have a better chance of typing in the URL if they need to. I reckon:

www.site.com/cars/images/porsche.jpg

is a bit more usable than:

www.site.com/mainx1/4wpersv1/img_set_2003/ge/p001.jpg.

And don’t not use special characters, there are still those out there who don’t know where the tilde is on their keyboard.

Note: this is one of the biggest drawbacks when using an open source or free application like os commerce or zencart.

Orphan Pages

Make sure that all pages link back to somewhere. STBO but it still happens – you click on the link, up comes the report on irradiated peppermints and discover there is no way back to the homepage. OK they can use the back button but what if they got to the page through a site engine. Orphans are particularly relevant to pdf files. If you must use pdf then tell the visitor so they know that they will become marooned from from the rest of the site.

PDF Files

PDF (Portable Document Format) files are an excellent way of presenting documents. They can reduce the size of a document thereby speeding up downloads. That do however need the visitor to have Adobe Acrobat Reader installed and it is near impossible to incorporate hypertext links that lead back to your website. Avoid if possible unless you are a document provider.

Links that aren’t and links you can’t find

Links are blue (normally). And until the advent of styles were underlined. Some usability sites still advocate the use of ‘standard link colours’ but as long as it is clear what is content and what is a link, most visitors don’t seem to mind. But try not to change the style within the site. And make sure you do not suggest a link that isn’t – coloured or blocked text within your content could be mistaken for a link, best to leave it out.

Links that surprise

When linking to large files, such as .avi or .pdf, provide a KB size in brackets next to the link so visitors know how large the file is before downloading it.

Outdated Information

Do some gardening occasionally. Trawl round the site and get rid of the outdated information, check all your links, tidy up the folders and so on, especially on the less well visited pages. A report on Netscape 7 ain’t much use now that Netscape 8 has been launched. New content is much more exciting but search engines do remember what used to be there. So if you move stuff, make sure you have some redirection pages in place.

Complicated Pages

Like cutting edge technology, complicated pages have a greater chance of failure. Keep the layout simple, avoid JavaScript, layered navigation, nested tables and so on. It also means that maintenance will be simpler when things go wrong, as they are prone to. There is little point in showing off your amazing graphic design and programming skills if the potential customer gets bored and wanders off somewhere else. Simple is usually best.

Hidden Features

Do not hide the useful features. If you have a search facility then put it at the top of the page. Visitors do not want to navigate through the site to find the ‘search’ button.

Small text and dodgy fonts

The text on this page is about as small as you want to go. Anything less than 12 pixels is tiring on the eyes. Better still, make sure the font is sizable by defining in percentage or em sizes. And stick with the standard font families, not everybody has the same fonts loaded on their computer that you do.

Pop-up windows

Evil and unwanted, pop-ups are associated with advertising and are to be avoided at all costs. Better to link to a new page and provide a ‘previous page’ link

Background Images

Often the last thing to load, background images can ruin a page. Using a very light colour for your text over a dark background image means that nothing is readable until the background has loaded. And yes I know that I use a background image but the site still works without it and the file size is only 5kb (or less than 2 seconds on dial-up).

Bad Spolling

Use a spoll chucker. And get someone you don’t like to check the grammar – don’t use a friend because they will try to be nice. A page with spelling errors and poor grammar indicates someone who really doesn’t care.

Wonky Navigation

Check the navigation. If you did your preparation this should be fairly easy but things do sometimes end up in the wrong place. And make sure that the navigation makes sense. If visitors cannot find their way around they will leave. Loads of stuff about navigation here.

I am sure if you sat down, as I did, and thought about all the things that really annoy you about website you will be able to add to my list. If you find something that irritates then make sure it stays off of your own site. Simple really.