When designing web sites, and adding content, it is often hard to spot your own mistakes and bad design habits.

This article identifies common pitfalls and annoyances with web sites, and advice and tips about what you can do to ensure you do not do the same!

If this article helps you, please feel free to leave a comment.

A path of no return

How often have you visited a site where as you go deeper into the content you suddenly find you cannot go back without loading up the homepage and starting again? This is a very common annoyance, and shows terrible design and structure of the site.

A well designed site will show your position in the website, and provide ways to go back. A popular method of achieving this is by using ‘breadcrumbs’.

A breadcrumb shows your position in a website, and usually allows you to go back to a page you have been to by clicking the link in a breadcrumb. An example of a breadcrumb may look like this:

Home > Web design > Get quote

In this example, the current page would be ‘get quote’ and the path you took to get to the page would be ‘Home > web design’, so as you can see you can easily tell where you are.

Going too deep, it sure is dark in here

Websites with a lot of content can often be disorganised, and links can take you deeper and deeper into the site. If you make it go too deep even breadcrumbs can be hard to use. Therefore it is imperative that you organise and categorise your content to make it more spread out, rather than deep. An example to show what I mean, a site with tutorials on web design:

Bad structure: Tutorials > Website tutorials > coding tutorials > html coding tutorials > xhtml tutorials > view tutorial

Better structure: websites > coding > xhtml > view tutorial

Another reason for categorising, and avoiding deep content it that people often get bored with clicking and clicking, and the less clicks it takes to get to what they are looking for the better.

An even better solution to getting to the content, with the above example, would be searching, or using tags.
Searching would be useful because a user would just type xhtml tutorial, and they would be shown. This would be 2 clicks deep.
Utilising tags could also be 2 clicks deep. To utilise tags you could give the content a ‘tag’ that best describes the content, then a user clicks the tag name to see relevant subjects/content.

You may notice I use tags on this website, to help find articles with your topic of interest, rather than you navigating through the content manually.

Too many links spoil the broth

Sites that have lots and lots of links to the same page just confuse the user. For example, a contact us link in the navigation, the accessibility menu, the footer, the side bar, and in the content.

Unless you have a good reason, don’t do this. You confuse the user and clutter the page.

Bad colour schemes

This is common with sites made by people new to web design, when they use their favourite colours, even if they look terrible together. Lime green and bright red anyone? Ouch.

For tips on choosing colours read my colour article.

Carried away with custom Fonts

A common mistake is the use of custom fonts. This is bad design, as it is unlikely that everyone will have the same font on their system, so they will not see the page how you want them to see it.

To avoid this problem use the standard safe fonts where you can, good common fonts are Tahoma, verdana, trebuchet ms, Arial, Georgia, times.

If you NEED to use your custom font, the best way is to make an image with the text on it, however if you do this only do it for small amounts of text, make sure the file size is small, and ensure you use the ‘alt’ attribute in the image tag for people with images disabled.

Stuffing a site to the brim

Often, new designers can get carried away with flashy graphics and scripts that serve no purpose other than to look pretty. How many sites have you seen with thousands of gifs, and custom cursors? This can get annoying if you’ve seen it all before, therefore its best only to add things for a reason, such as a simple attention grabber.

Too many things on a page make it cluttered, hard to read, and will often result in an experienced surfer leaving your site and never returning.

Too much of a good thing is bad

This is mainly aimed at flash in particular. I have seen sites made entirely out of flash, some may argue this is fine, but I say it is only fine if there is a html alternative. I have seen websites without an alternative version for people without flash, this is terrible, especially from an accessibility point of view.

I find sites are much better when the flash is part of the content of a html page, so its not essential, and people without flash can still use the site normally.

Where’s the page?

ALLWAYS check your links! A misspelled link, or non existing page is the ultimate annoyance, no-one like seeing ’404 page not found’ errors, and often lose you visitors.

tipos tipeoos Typos

Spelling errors are perhaps the most common annoyance in websites. I for one am guilty for this quite frequently. The bottom line is, spelling errors make you look unprofessional and untrustworthy. Would you buy from a shop littered with spelling errors? I wouldn’t.

Typos can also cost business’ money, for example, what if an online store misplaced a decimal place in a price? This could prove costly.

So check your type, better still get someone else to proof read it because you often cannot see your own mistakes. Also use a spellchecker, and read through more than once.

Ads, ads, ads and more ads

Ads can be a great source of revenue, but also an annoyance and a deterrent for visitors. This includes pop-ups. If I went to a site with loads of pop ups and in-your-face flash ads, id leave in a hurry. Don’t overdue it, be subtle and include only a few targeted ads.

Loading……………………close [x]

Before adding images to your site make sure you optimise the file sizes, and use relevant file formats. I have seen bitmaps being used on websites before, which is unacceptable due to the large file size. Just remember not everyone has 10mbps broadband, so they could get fed up and close the window.

Also remember to compress css and html files, there are tools out there to do this for you, e.g. Flumpcakes css optimiser. Removing white space in files reduces the file size, so make sure you do it!

losing form content

This annoys me the most. You make a mistake on a form, go back, and the stuff you typed in the form is gone! Some major sites and apps have this problem, I noticed it today when adding Blue anvil to technorati, and even when typing this blog into wordpress (I forgot myself and went to the dashboard without saving).
When making forms on your site, try to load the values back into the text fields when a user makes a mistake, don’t make them retype it.

Payment details

My last point is with online shops. I hate it when accepted payments are not displayed, and I find out I cannot use my card/or paypal when I finally get to the check out. Have payment details clear and shown to avoid inconvenience for your customers.

Found this post useful? Why not buy me a coffee!

Related Entries

• Dont do what Anthony Dont Does
• 8 fun & useful shortcode functions for wordpress
• Wordpress development techniques #2 – Fetching RSS feeds with wordpress
• Wordpress development techniques #1 – Running custom queries using the ‘wpdb’ class
• Create a Wordpress Recent-Posts Widget