Seven steps to a user-friendly website

Example of a wireframe

Designing a new website or revamping your existing one is an exercise that most organisations should really be looking to undertake every two to three years, writes Kirk Potter, research and development director of C2 Software. 

Trends and styles on the web change year-on-year and, in the case of a revamp, if you wait much longer than that, your website can end up looking dated and stale. 

So how do you set about achieving a new design? Most people will take a look around at sites of competitors or peers, and pick the bits they like best. The resulting new design ends up being a mishmash of different concepts put together in an attempt to be the best in the industry or sector.  This is all great, except one critical thing has been forgotten – the user! 

Considering the different types of users of your website and what they will be expecting from it, is critical to delivering a successful customer experience. 

1.   Design it for your user 

User-centred design (UCD) means considering the requirements, expectations and skills of end users at each stage in the design process. Getting your users to provide input into each step can help avoid rework, overruns and additional costs. This approach doesn’t have to discount what you’ve found while looking at other web sites, it merely means that you evaluate everything with the end user in mind. You should aim to produce a list of functional and content elements for your new site. 

2.   Lay it out with wireframes 

Wireframes is a way of visualising the layout and basic functional design of the website and can be as simple as a set of tree diagrams showing the relationship between pages. Using the concept of user journeys can help to embellish the detail and quantity of wireframes. If you are planning to deliver to other devices such as mobiles or tablets, now is a good time to look at this, too. 

3.   Plan your content 

Give careful consideration to content, and more specifically to the categorisation of content into a structure that most people are going to understand quickly. Be careful not to make the mistake of organising your content using internal structures and terminology. This may not make much sense to your users. 

4.   Design your navigation 

Basic usability considerations should be employed when considering navigation, including avoiding long lists of links – you should stick to five or six maximum, so your visitors can scan quickly for what they are looking for. Breaking navigation into sub-menus and context-sensitive navigation may help make this manageable on a large website. 

5.   Now think about the graphic design 

By this stage you can finally start thinking about the graphic design. This is often the starting point for many sites – but hopefully not yours. You may want to start off with some simple aesthetics and do some user testing on your concepts, user journeys, information architecture and navigation before you go headlong into polishing a design. Ideally, you’ll work with your target users to get it right. This will save you time when you get the dreaded feedback that something isn’t quite right and you need to start again. 

6.   Build a working prototype 

Developing a prototype at this stage is advisable as users will find the tactility of a clickable (or indeed touchable in the case of tablet devices) site much more informative and rewarding than looking at a PowerPoint of what the website may look like.  Prototyping doesn’t need to be massively complicated;  it only has to simulate functionality. But it must be sufficiently developed to allow the important elements to be part of the test users’ experience. 

7.   Apply the gloss 

After the feedback from your user testing, you can finally apply the gloss to your design, taking care not to undo all the good work achieved up to this point. Think carefully at this stage about accessibility in terms of colours, contrast and font sizes, or you run the risk of alienating a portion of your audience.

“You don’t need rocket science to end up with an atttractive website that makes sense to use.”

Overall, this approach will result in a better website. We’re only skimming the surface here of user-centred design, but you don’t need rocket science to end up with an attractive website that makes sense to use. 

And remember, you’re not quite finished yet, as your website should continue to evolve through user feedback gathered from commenting systems, ratings or a simple feedback form. User-centred design is not just a process you undertake at the start of a project – you should never stop.

Image by Baldiri

Related posts:

Video: How to make a good impression
Go Global via eBay and Facebook
Insurance for ecommerce: How to get protected if you’re selling online

2 Comments

  1. A good and useful article. Remember that accessibility also includes working with software that reads the text aloud – this is important when you’re captioning your pictures and creating hyperlinks, too.

  2. The excitement of creating a brand new website can overwhelm a designer and get them to jump over the first critical steps and jump straight into design/development. We need to know what the site is meant to do, who the target audience is, and the required functionality before a truly great design can be made.

    And Liz nailed it – think of WCAG when creating the design. Thanks for the article!

Add your comment