Usability Principle 4: Keep it short (and use white space)

Our 4th and final principle in our series on web usability is about keeping it short. This can be hard. You’ve spent ages crafting some great content and when you put it on the web page it’s way too long. The truth is your punters aren’t going to read it. They’ll scan it quickly and look for words or phrases that are useful. So make all your words and phrases useful and cut out the stuff you don’t need. Steve Krug’s book Don’t make me think which inspired these article targets two types of useless text: happy talk and instructions.

White Space by Dermot Kennedy, 2012

Happy talk is the welcoming introductory stuff at the top of a page which doesn’t tell you anything. Instructions try to explain how the website works but if your website is easy to use they are unnecessary – and nobody will read them anyway. Web users are looking for the important stuff so make it easy for them by ditching the stuff that doesn’t matter.

Going hand-in-hand with keeping your text short is avoiding the temptation to fill every free space on your page with more text or an image. Don’t do it – it will just add to the clutter! White space will give your site a clean look which will draw people to the important content and make it easier to read.

Categories: Web usability
Tags: , , ,
Comments: 1 Comment

Web Usability Principle 3: Breadcrumbs

You are here image to illustrate breadcrumbsIn part 3 of our series on web usability we’ll look at another aid to navigation known as breadcrumbs. The term comes from the trail of breadcrumbs left by Hansel and Gretel in the popular fairytale. Breadcrumbs are about knowing where you are and are a bit like the “You are here” arrows you see on maps in town centres.

They typically show a path from the home page to the page you are on and they look something like this: Home > Sport > Football > Championship > Leeds United. Each of the breadcrumbs apart from the last one links to the page so in this example you could jump straight to the Sport page. It’s a simple idea which is easy to implement and doesn’t take up much space. You will usually find breadcrumbs near the top of the page; you’ll see one on this page just beneath the red menu bar.

They are usually in small type to indicate that they are an accessory rather than the main navigation. To make it even clearer what they represent you could put the words “You are here” just before the start of the breadcrumb trail.

Categories: Web usability
Tags: , ,
Comments: Leave a comment

Usability Principle 2: Make it easy to find your way around

Signpost to web pagesContinuing our series on making your site easy to use we’re now going to look at website navigation. This is about showing people where to find pages on your site in the same way that you would use the contents page or index in a book. There are three main ways of doing this: menu bars, search boxes and breadcrumbs. In this post we’ll talk about menu bars and search boxes and in the next post we’ll look at breadcrumbs.

Dropdown menu

Horizontal menu

You’re all familiar with menu bars – they list the pages or topics on your site with a link to the relevant page and almost every website has a one. The trick is to make them both useful and easy to use. Unless your site has hundreds of pages, make sure that there is a link to every page on your site from your menu bar.

Vertical menu

Vertical menu

If all your pages won’t fit on your menu bar, have a list of main topics with drop-down or fly-out lists of sub topics. Show your visitors which of the main topics has a sub-menu by using an arrow next to the topic. Another convention which helps your users is a “rollover” where hovering on the link makes it change colour. If you want some ready-made CSS coding for drop-down and fly-out menu bars complete with arrows and rollovers, Stu Nicholls has a great selection at http://www.cssplay.co.uk/menus/.

Place your menu bar clearly on every page of your site, and place it where your visitors expect to find it. This means either a horizontal bar near the top of the page or a vertical one to the left of the page. A horizontal bar gives you more space on the page but the number of main headings is limited by the width of the page. For a longer list of main headings a vertical bar will work better. The convention with blogs is to have the menu bar to the right rather than the left so stick with this.

Search box for Bonsai Guitars

Search box top right

Some people prefer to search rather than browse so even if your site is small place a search box on every page. Place the search box at the top right of the page – this has become the convention and it is where users expect to find it. Keep it simple – a text box with button saying “Search” is all you need. It’s easy to add one by inserting some code in the right place and if you don’t mind the ads on the results page Google do a very good one for free: http://www.google.com/cse/.

Categories: Web usability, Website design
Tags: , , ,
Comments: Leave a comment

Web Usability Principle 1: Be Conventional

In the last post Conventional website layoutwe looked at web usability and introduced Steve Krug’s influential book Don’t make me think. We’re going to look now at four of Krug’s principles for usable websites and we’ll start with why’s it’s good to have a conventional layout.

This may sound dull, and graphic designers will probably run a mile, but users expect a website to be laid out in a certain way. A conventional layout helps them understand where everything is and where to find what they are looking for. If they have to spend too long working it out they’ll just move on somewhere else. So what do we mean by a conventional layout? Here are some basic guidelines:

  • Place your header with your logo at the top of the page so people know where they have landed and what your site is about. A good strapline or tagline reinforces this. Ours is “Creating Websites that Work” and it sits right next to our logo.
  • Place your main navigation or menu bar either beneath the header or to the left of the page. A horizontal bar beneath the header is probably more popular at present but if you have a lot of things to fit on your menu a vertical bar to the left may work better. Web users are familiar with both so take your pick.
  • Place your main content in the middle of the page beneath the header and if your page has columns make it the largest column and place it in the centre or to the left.  This is where people expect to find the useful part of the page, the bit you really want them to read. If you put it somewhere else they probably won’t read it.
  • Make the links in your main content area obvious. People want to click and find out more so make sure they know where to click. If you use a colour to indentify text links don’t use the same colour on text that isn’t a link.
  • Don’t put too much on the page and avoid the temptation to fill every bit of space. If your page is too busy it will take people longer to find the interesting bits, so don’t be afraid of white space.

You will all be familiar with these basic conventions but they’re important because they help your website visitor have a good experience. And  there’s no reason at all why any of them should limit your scope for a classy design.

Categories: Web usability, Website design
Tags: ,
Comments: Leave a comment

Web usability – still the key to a website that works

In these articles we’re going to look at four simple principles for designing a usable website. The idea of web usability was first popularised by Jakob Nielson way back in 1984 with his influential website useit.com, which is still going strong today.  However it was the publication of Steve Krug’s brilliantly simple Don’t make me think in 2000 which made it clear what we should be doing to design a website that is easy to use. Web usability is less of a talking point today but it’s still absolutely crucial to good web design. Read more →

Categories: Web usability, Website design
Tags: , , ,
Comments: Leave a comment