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
Inspiration is all around us.
Looking back enables us to learn from the past and then to look forward. It's true that nothing is ever really new. It's the combination of past and present that creates the future.
Throughout history great artists and innovators all over the world have been inspired by combinations of the now, what was and what could be.
Whenever I hit a blank wall in the design process I stop, look around and look back. Research and reinterpretation are the key fuels for the future.
Open your mind and embrace the past. Allow it to fuel your future.
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/
This fantastic phrase coined by the late great Colin Chapman inspires much of my thinking and approach to design projects.
To Simplify, then add lightness. So simple yet effective. Making the right choice with the minimum of options is tricky. Engineering the lightest most efficient solution takes skill. It’s years of experience that gives us and the confidence to successfully employ this strategy. To fine tune what works best, you need instinct feel and experience. It’s a process of streamlining and selecting from the massive range of ingredients and options we now have access to. After all it’s far easier to add than take away.
Perhaps the easiest thing one can do to ensure lightness and simplicity when working on a design project is to constantly ask,
"Why?"
Why are we adding this?
Why are we taking this away?
Why would users care?
Why would people share this?
Why will people do this?
Why can they do this?
Why will they still do this?
After all... the question is half the answer.
I'm not a fan of rules being imposed on designers. I feel it stifles creativity and the 'question everything' ethos involved in the creative process. But essentially this statement defines the design process in a nutshell. The process of researching, inspiring, channelling and filtering the options into the most efficient effective solution. This takes skill, talent and time to make effective and informed choices. This is of course essential in all areas of design but even more so in the fast pace of the digital world.
Efficient well designed 'Honest' experiences, products, applications and devices enable business and life in general to operate more efficiently and effectively. Good design feels good and makes you feel good. It's this honesty that helps make the world a better place to be.
I recently read this great article on honest web design.
I was also quite surprised to find some interesting principles from the team working at Microsoft on Metro:
Clean, Light, Open and Fast
We took an approach that we call “Fierce Reduction” to remove any elements in the UI that we felt were unnecessary; both visual elements and feature bloat. It allows us to shine a focus on the primary tasks of the UI, and makes the UI feel smart, open, fast, and responsive.
Alive in Motion
The transitions between screens in a UI are as important the design of the screens themselves. Motion gives character to a UI, but also communicates the navigation system, which helps to improve usability.
Celebrate Typography
Our design inspiration is very typographic, and it felt like it was time for User Interfaces to be uncompromising about type as well. Type is information, type is beautiful.
Content, Not Chrome
It’s the content on the phone that people want, not the buttons. Reducing the visuals on the phone that aren’t content will help you create a more open UI, and it also promotes direct interaction with the content.
Authentically Digital
Finally, we believe in honesty in design. A user interface is created of pixels, so in Metro we try to avoid using the skeumorphic shading and glossiness used in some UI’s that try to mimic real world materials and objects. I agree with a lot of what is mentioned here and it's great to see such core design principles great being embraced in the digital world more seriously that it used to.
