As we explored in our previous post, it’s important to make sure that the most important elements of your site – your content and your services – are at the heart of any information architecture you develop.

Web design can be an immensely powerful beast, and as we’re about to see, the worst thing you could do is waste that power on a design that’s bloated, unintuitive, and slow. To finish this two-parter, we’re going to look specifically at what not to do when it comes to site navigation.

Don’t use ‘mega menus’. I repeat, DO NOT use ‘mega menus’

If you’ve ever been on a site that offers a wide range of products and services, you’ll no doubt have come across giant networks of drop-down menus, or ‘mega drop-downs’. These are the worst thing to happen to web design since the days of Flash sites, and must be stopped at all costs. They consist of lots and lots of drop-down menus within drop-down menus, in some sort of labyrinthine Inception-type navigation cardinal error catastrophe.

Let’s put it this way. A user is highly unlikely to click on more than three menu items (at most) in order to find what they’re looking for. They will switch off immediately. Nobody wants to have to trawl through Household > Bathrooms > Plumbing > Bath > Taps just to find some taps. I bet you’re bored just having to read through that list!

If you absolutely need a lot of pages for lots and lots of products, you will need a solution in order for users to navigate these products easily. When a tonne of pages is a necessity, throw in a search bar and integrate some multiple-choice type menus that categorise the results (think Amazon). Cut out the fluff and make it as easy for your users to find what they need as easily as possible.

Designing an interface

Colour matters

Too many web designers make life difficult for themselves by failing to utilise colour properly. If used poorly, navigation elements like links and menus will be indistinctive and blend too much with the other elements around them. On the other hand, if used correctly, colour can be an immensely powerful design tool, defining everything from navigation to brand identity. So use it!

Make hyperlinks a distinctive colour throughout your site so that users can find them easily (internal and external links really help to boost traffic). Make your navigation bar its own colour to tell users very clearly “this is the navigation bar”. Make text easy to read and simple by leaving it black – this will make your navigation elements stand out. All of this should be worked out when you develop a colour scheme for your site (more on that in the future).

Keep it clear and simple

All these touch upon a pretty basic rule: keep it simple. Your menu items shouldn’t be more than a couple of words long at most. Your menu shouldn’t have lots and lots of navigation points. Your colour scheme and layout should be concise and easily comprehensible. Cut out the bulk, or your users (and potential customers!) are going feel alienated very quickly.

However, you don’t just want your menu items to be simple and straightforward. They should also be descriptive enough that a user is able to understand exactly what is on the page in question before they visit it. A page about all the work you do with icons, for example, shouldn’t just be called “icons” – call it icon design to make it clear that it’s about a design service you offer, rather than just icons in general. It shouldn’t just be purely utilitarian – it should lead users to the answers they are looking for.

Not only does straightforward and effective navigation help you hook users – it also helps Google a lot in its indexing, which in turn helps your to drive traffic to your site!

Adam Parrish

Owner and creative director at Creative Freedom Ltd. Unbelievably cool icon design expert, husband, and father of two awesome girls. A proper decent chappy and thoroughly fab to work with. Ok, so I wrote my own bio…

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.