You can have a delicious looking website, that truly has the wow factor, but if your visitors find it hard to use, navigate or understand then it’s not doing you any good.  This is why as web designers we should have it drilled in to us that truly decent web design, and, in fact any design, comes from understanding it’s function and how your users see and use your website.

Part of the problem is many web designers create websites the wrong way around: they fit the content into the design, perhaps even providing a design without any knowledge of its content.  As you’ve probably heard many times before, content really is king, so before even touching photoshop or equivalent and banging out a nice design, first get the content.   Understand the websites intention and who its users will be.  Once you have this knowledge work a design that compliments the content and works with it.

A great read on the subject is Donald A. Norman’s “The design of everyday things”.  Just as we are surrounded by objects in our everyday life that have flawed usability design (push doors with handles?), there are some pretty basic mistakes that a surprising number of websites demonstrate.

1. Navigation

One of the key elements of web design is navigation, it is there to make life easier, so why make it harder than it should be? Of course there are those that want to be daring and different – but seriously, be daring and different elsewhere, if you don’t demonstrate a fundamental understanding of usability from the get go then say goodbye to converting any traffic and hello to high bounce rates!  This is why tabbed navigation is so effective, we naturally associate new pages with tabs, and with a rollover it becomes very easy to understand and use well designed tabbed navigation.

Back of a Napkin – looks quite nice but it’s pretty confusing and the main navigation is at the bottom of the page, which for users with smaller screens may not even be visible.

Guide to Prague – fully vertical navigation, whilst looking a little different, really does become a pain in the ass, especially if there are 5+ navigational items, having to tilt your head to read them becomes more and more frustrating.  It’s just not worth the hassle.

Design for Fun – using icons instead o f words for navigation is a pet hate of mine.  Although here design for fun have used rollover text to give meaning to the icons, plenty of websites use potentially meaningless icons (with no text) and expect users to understand what they mean.  By all means use icons to compliment textual navigation!

2. Understanding Colour & Its Meanings

There is a chapter dedicated to this in the aforementioned book.  This is so important.  Everyday we are bombarded with colours with meanings, traffic lights, warning signs, televisions, on off buttons..the list goes on.  The most basic of which are; green is positive and means go or correct, red is a negative, and provides warning or stop.  Do not mess with these principles.

3. Using Pagination As It Should Be Used

Pagination is extremely useful when used correctly, its function is to split pages with long lists of items into manageable pages, for example Google results, or galleries.  However, I’ve come across quite a few blogs where they’ve used pagination to split up one post.  They do this mainly in a bid to boost ad clicks but really it’s quite frustrating getting  a quarter of the way through an article and having to click for the next page.  Avoid doing this, please!

4. Maintaining the Look of the Page and Navigation Throughout

This is a big mistake, mainly older websites make; when you click from the homepage (or inner page) you are taken to what looks like a different website, or it suddenly has different navigation.  This can be confusing to say the least.  This is why breadcrumbs are popular, they show the user where they are and where they’ve come from.

5. Attacked by an Onslaught of Content

Very popular usability nightmare, where the content presented is far too text heavy.  It’ll put your users off, no doubt – much better to break up the information (especially on the homepage) into manageable, meaningful chunks.  It’s important to make a good first impression, so make sure the homepage conveys the meaning of the website and, essentially sums up the reason for it being there.

Lord Likely – great example of a content heavy page that’s been split up nicely.  You can easily see how a website with a lot of content can come across as “too much effort” to read, but when it’s presented well it is far more likely to be read.

CG Inspired -  a shameless example of my homepage split up chunks below the fold, with nice icons to boot.

6. Long Winded Sign-up/Registration Forms

Typically if a customer/user wants to purchase or sign up they want to do it in the shortest possible time, instead of being confronted with a beast of a form.  Large forms with loads of inputs can be pretty daunting and quite a few users will simply go elsewhere to another service provider.

Digg – have you seen their registration form, it’s tiny and only takes a few seconds to sign up.  You can then add optional further info later.  A lot of websites are now using facebook as a login option.

7. Overly Complex/ Unreadable Captcha

I’ve found this to be a true usability nightmare.  In a bid to beat xrumer, or other spam programs, captcha are becoming harder and harder to read, not to mention longer.  Many don’t even offer a sound clip which is an accessibility nightmare too!

Anti-spam is a necessary evil, but really, the user comes first.. sort it out!

These are just a few examples, but the premise is to allow the user to get to where they want to go easily and quickly without making them frustrated.  Sure impress them with your design skills, but impress them more with how easy your website is to use!