hackproject.com

Usability Heuristics in Web Design

These days everything comes with comprehensive instructions. Whether it’s a TV, a Fridge or a car, you’ll get a book full of detailed instructions in 10 different languages. When it comes to Web Design though – this is not the case. Unfortunately you can’t go to the shops and buy ‘Web Design’ with a full set of instructions on how to use it. It’s something that is learned on the job, through peers and through hours of research, trial and error.

When developing software applications, there are usability heuristics which have become standard. I’ve been analysing these recently and looking at how they can be used to improve web design – my findings are below. Think of these as a set of instructions that should be followed when developing applications or sites for the web.

Visibility of system status

Make sure you show the site is up to date and working. I’ve lost count of how many times I’ve come across a site that I’ve found in Google which I’ve visited for information that is completely out of date and hasn’t been updated for several years.

Visibility of system status in web design is as simple as making sure the visitor can see the website (system) is up to date and running with the times. This gives confidence that the site is maintained and relevant.

Try: putting a ‘last updated’ box on the homepage showing when the site content was last updated.

Match between the system and the real world

In application design, this is to do with making sure the application speaks the user’s language, and uses concepts familiar with the user. In web development, this means we need to ensure the site is developed with the target niche market in mind. If designing a technology forum – there’s is no need to use layman terms for tech that your niche market will already have a great understanding of. Speak your niche markets language – as these are the visitors that need to be happy with the site – and are the purpose of the sites web presence.

User Control and Freedom

This really refers to giving users freedom to use the site, free from complicated click routes to get to a certain article or page. If a user needs to leave the webpage, don’t block them with annoying pop ups asking if they’re sure they wish to leave. Likewise, pop ups asking them to sign up are just as bad. Give the user the freedom to make these choices – don’t force them into it.

Don’t add scripts to the site which may prevent core browser functions operating. I know a pet hate of many website visitors is a site which stops the back button working on the browser due to some JavaScript. Only use this if it’s completely needed for security or similar.

Make sure your click through routes to each article or page are minimal. 2 clicks to get to every page on the site from the homepage would be ideal!

Consistency and Standards

In web design, this simply means getting a colour pallet, a font style, and a font size – and STICKING TO IT. With consistent styling, the site will immediately convey a much higher standard of design, and will be a much more comfortable place for the visitor to be. It will also keep the flow of the site consistent – Visitors will begin to learn what a “quote” looks like, what a “title” looks like and what colour background to look for in the comments section for the author!

Error prevention

Check a website fully before signing it off and putting it live. The last thing you want is a visitor clicking a link to your home page to look for more articles, only to be presented with a 404 error page. It’s an easy mistake when developing a site with thousands of lines of code – so complete a full site test before putting it live on the internet. Look to fix the errors before it goes live – not after!

Recognition rather than Recall

If you’re developing a graphical website with lots of buttons that complete commands like ‘home’ or ‘comment’ – make them uniform and easy to remember. Don’t have different icons for the same function on different pages. You need users to be able to use controls on the website without having to look for help on the site to understand what they mean. In the real world – this means having a picture of a ‘home’ for the homepage, and not something like a picture of a duck.

Likewise –if your site needs instructions for use, make them visible on all pages, and easily retrievable – be it by a permanent instructions area, or a pull down menu with the instructions list.

Flexibility and efficiency of use

As users become more familiar with your site, they’ll be quicker at using it. They’ll get used to where certain shortcuts are that they regularly use, and will want to be able to use them quickly. Of course not ever visitor is a ‘regular’, so a balance needs to be found between making the site quick to use for experienced visitors, as well as obvious to use for the new visitor. Leave back and forward links at the bottom of an article, but always make sure they’re at the top as well, as this is something a new user will always expect.

Ensure you have a Home button on EVERY page of the site, as well as the basic menu showing the visitor to the main pages like ‘about’ and ‘contact’.

Aesthetics and Minimalist Design

Don’t cover your site in information that isn’t relevant to your niche. If you’re starting a site about technology, don’t talk about poems (unless they’re tech poems!). If you’re starting a site on design, don’t cover it in information about carpet cleaners. Keep the design tidy and minimalist – there’s nothing wrong with making it loud and vibrant, but keep it relevant to your niche and concentrate on great content that the site promotes – and doesn’t hide.

Not all sites will follow this rule completely – but generally for a site that’s new to the web and looking to pull in an audience – you’ll want users to find the site and pull something useful from it. This will be far easier if they’re eyes are directed straight to the content, and not the sidebar graphics!

Help users recognize, diagnose, and recover from errors

If your users are going to come across a dead link or shortcut which gets them to a 404 error page – make sure they have a way out (back!). You don’t want a user getting a 404 page and clicking ‘close’. Offer them a search box to find what they were looking for – and if not offer them a ‘back’ link to the previous page.

Don’t just assume they’ll use the back button in their browser – they could be using a browser with the back button disabled – or not available.

Also ensure they understand the error message they receive. If they follow a link that isn’t alive – tell them the content they were looking for has expired or may have moved – don’t leave them guessing.

Help and Documentation

This is more relevant to sites that offer subscription or premium membership. If a user takes the time to join a site – return the favour by ensuring they always have a helping hand when they come across a problem. If they forget their password or can’t find their profile page – ensure there’s documentation available at arm’s length that they can click to and read to answer their questions.

This not only is convenient for the user, but will also save the webmaster hours in answering problem emails.
Consider opening a public forum to discuss technical problems and allow experienced users to answer the questions!

Summary

Of course there are many more aspects to cover when developing for the web. Following the above ten is a great start though, and should really be the basis of any website. If you want to read more on these Usability Heuristics in Application Development, they’re covered on Wikipedia at the following link Wikipedia Heuristic Evaluation.

As this blog is new, we’d really appreciate your support. If you liked this post, please consider publishing it to your Social Networks using the buttons below. Please also consider subscribing to our RSS feed to be kept up to date with how we’re doing! Thanks in Advance!