corporate design agency | company logo design | corporate graphic design | corporate website design | greensplash design UK
corporate design agency | company logo design | corporate graphic design | corporate website design | greensplash design UK

Website navigation and usability: the basics
Read our latest enlightened design ramblings

Option

Author: Nathan Pace (Lead Developer)
Date: 18 Oct 2009

Categories: Other articles  Web design articles  

The immediate nature of the web means that the vast majority of web users are in a hurry.  With users being a mere one click away from your competitor's site, a great deal of consideration should be given to designing a website that delivers the best experience for the user.  Integral to an effective design is effective navigation.

Website navigation offers the user different options for moving through a website.  It is fundamental for a good website experience and, absolutely, should be a key consideration in the planning stages of a web design project.  It's all well and good investing time and effort on SEO to achieve decent rankings, but the benefits of a high-ranking search will disappear quickly if the navigation system on your site only succeeds in frustrating and alienating your visitors due to being too confusing and counter-intuitive!

People don't tend to read through everything on a webpage (indeed, the concept of actually reading a web page in a similar way to reading a book is unusual).  They scan quickly for the relevant information.  So, in light of this assumption, there are three things that a navigation system should be: clear, simple and consistent.

Let's take a closer look at these requirements:

A clear navigation system

A navigation system should be able to answer three basic questions without any thought required from the user:

  • Where am I?
  • Where have I been?
  • Where can I go?

Most web browsers address the first two points above by changing the colour of previously visited links on pages with no CSS styling on the links, although it's important to ensure that links styled with CSS also adhere to this.
Underlining of text links has been convention for several years and it's a concept that nearly all web users will be familiar with and also expect to find on any site they visit.  If this rule is ignored for style reasons it's important to ensure that links are made obvious in some other consistent way (usually by CSS styling). 
A breadcrumb trail (when used in conjunction with the primary navigation) is a useful aid as it shows at a glance both where the user is and how they got there in the first place.  Ideally these should be used at the top of a page with a > sign between the levels and the last item (the name of the current page) in bold.

A simple navigation system

Although a fancy looking dynamic menu using AJAX can look good, consideration should be given to users who may have problems interacting with such navigation types.  Basic text links supplementing a dynamic menu, therefore, should be used to allow those users to get around a bit easier. 
Giving users a couple of different ways to navigate through your site is a good idea in order to appeal to those users who, as determined by their own personal preference, either 'browse' or 'search' a site first.  When designing the 'browsing' element of the site, ensure that the browse menus offered to the user are simple (but intuitive as well) and that the text inside the links relates to its destination - web users want to be able to anticipate where their next click will take them.
Users who 'search' a site first will inevitably look for a search box.  Keep it simple by just referring to it as 'search' (instead of embellishing the name as 'Quick Find' or 'Keyword Search'.  These days, pretty much everyone knows how to perform simple searches, so there's no real need to add instructions such as 'type a keyword'.

A consistent navigation system

Keeping the navigation consistent across the site is reassuring for the user.  It also means that they are not forced into having to figure how the navigation works on each page they find themselves on.  (From a development point of view, it also means changing just one file, should the navigation need changing!).  One idea that is becoming the norm is that the site ID or logo (usually found in the top left hand corner) is itself a link which takes you back to the home page of the site.  Allowing a home page link within the main navigation is also a good idea.

 

These are basic principles of what should be considered when designing navigation from a usability point of view.  A very good resource for further reading is Steve Krug's book "Don't Make Me Think - A Common Sense Approach to Web Usability".  Another resource is Jakob Nielsen's website - a website that clearly advocates usability principles over design ones.

If you have any questions on any of the above, then please get in touch.

 

 

Share this...

 del.icio.us   Reddit   StumbleUpon   Digg   Facebook   Twitter  

Marketing Tips | Marketing design company | greensplash | Cheshire UK

Sign up for our free top marketing tips here:

Latest branding, graphic and web design projects by design company greensplash

Experience is everything. Take a look at a selection of our current work featuring our most recent projects...

Creative design company | Design company Cheshire | greensplash

Free design quote | Design agency Cheshire | Design services

Get your design quote here. No hassle. No obligation...

Design quote | Cheshire design | greensplash design UK

Registered and office address:
greensplash Limited | Paddock View | 308 Chester Road | Hartford | Cheshire | CW8 2AB | UK
Registered in England & Wales | Company no: 4169857 | VAT no: 775205720
Click here

Top Marketing Tips

Sign up for our free top marketing tips here:

Marketing Tips From Cheshire Design Agency greensplash