Category: Design exploration

A user focused approach to web design

Website design is essentially a solution-based discipline – a rational, logical, sequential process that is intended to solve problems and satisfy a need.

The key then to successfully designing to maximise online engagement is to put the focus on the user, the human, the decision maker. A user centred design will focus and respond to the needs, wants, and limitations of that user, encouraging them to stay on your site and delve deeper.

Taking the first step towards implementing fundamental design strategies that improve engagement, requires you to research and understand your customer from a rational and emotional perspective. This will allow you to carry out a critical review of your site from your end user’s perspective and identify key areas for improvement.

As a good starting point here are a few basic common barriers to engagement that we typically see from a design and layout perspective.

No clear calls to action
A big issue on many sites is a lack of clear calls to action. ‘What do you want me to do? What’s in it for me? Your visitors don’t have much time so simplify things – don’t make them work!

Confusing customer journeys
Is it clear what a potential customer is supposed to do on arriving at your site? Your visitors are coming for a reason – they have a need and your site design should clearly direct them to where they can find the information that answers that need.

Positioning statement lost, branding poorly executed
On arrival at your site a visitor will make an incredibly quick decision about whether you offer what they want and if you are better than your competitors. If they can’t decipher who you are or what you do, they’ll quickly lose patience and confidence in your brand – be upfront and clear.

No real animation or interaction
Does your site inspire and encourage interaction? This is incredibly important for customer engagement because the more it does, the longer a user will spend on your site interacting with your product and brand… and the more they do this, the more likely they are to fulfill your call to actions and come back.

Typography needs to work harder
Typography can play a critical role in signposting user journeys and scent trails throughout the site. Clear, well designed typography complements a user’s journey taking them deeper into the site, whereas confused, badly executed typography can actively confuse and discourage them to continue their journey.

Inconsistent and confusing use of colour
Colour doesn’t just make a site look good. Colours have particular emotional associations which help to draw the eye. It’s also a very important tool for categorising multiple products in multiple categories. Sites which don’t recognise these associations or use colour inconsistently create a confusing and off-putting user experience.

Site real estate needs to be better utilised.
Ever been faced with a webpage that is so jam packed full of information that you have no idea where to start? Having lots of content is great but too much in one place is overwhelming. Give your content space to breathe, create an information hierarchy that breaks it into manageable chunks and directs your visitor towards the bit that they need – if you make it logical and don’t waste their time, they’re far more likely to persevere, clicking through to other pages to find more detail.

They may sounds obvious but these mistakes are all too common. Getting the basics right can make a significant difference to your sites success or failure.

And as ever simplification and honesty are key…

“Any idiot can make things complicated, it takes a genius to make things simple”
A. Einstein

Effective use of colour online.

I believe that effective use of colour is key to a successful and accessible website. Communication and brand recognition is greatly aided by the use of a simple, relevant and effective colour scheme throughout the site.

Optimising design for the screen based medium is something many print designers take a while to get to grips with as designing for websites involves dealing with backlit luminescence, which can vary from monitor to monitor and from platform to platform. Colours are RGB not CMYK. Therefore effective and use of limited colour with emphasis on contrast is very important. An understanding of how certain colours perform on screen compared to when they are printed helps avoid communication and branding mistakes. In general it’s a good idea to restrict the number of colours used and isolating areas involving large amount of colour variation i.e. colour-coded section dividers, navigation elements and photography. Other points to note are that: large areas of text are more readable on black on white than white on black. Sites can involve movement as well as clever use of colour to emphasise important points and branding truths.

Colour tips and guidelines

  • Understand your site’s message and brand
  • Choose colours that reinforce your message. For instance, if designing a site for a financial institution hoping to convey stability, choose cool, muted colours such as blue, grey, and green. In this case, using warm, vibrant hues would undermine the site’s brand.

Understand your audience

Cultural differences can lead to unexpected responses to colour. Additionally, demographic segments and age groups respond to colours differently. Younger audiences generally respond to more saturated hues that are less effective with older segments.

Use contrast for readability

Colours similar in value do not provide enough contrast and hinder legibility and accessibility. Black text on white backgrounds provides the highest degree of contrast.

As ever its important to test and test early… here is a useful tool to use as a guideline/reference point:http://leaverou.github.com/contrast-ratio/