The ability of colour to affect our moods and state of mind often goes unnoticed. The application of colour with function leads us as users of design to act or perform an action based on the colour we see and a function we associate with it, whether subconscious or not.
For me this is a very important element of real user centric web design that cannot be overestimated. Of course a brand / organisations visual identity needs to be transferred to web, whether the brand identity carries a colour palette of 3, 4,5 or more, there needs to be function application when using colours – whether this includes colour in H1, H2, or H3s, hover-over states, links, downloads or CTAs, a user centric approach to colour application in web design must give the user a sign post that ‘there is something to do here’, which must be carried across in a consistent manner across the whole site or application.
Emotions within colour theory
Colour shouldn’t only be applied in terms of function, its important to apply the psychology of colour theory in your design in terms of emotional responses to specific colours. Taking a step back for a moment from web design and thinking about brand identity, when creating a brand visually you must consider inherent emotional responses we as human beings associate with specific colours. 1stwebdesigner.com offers the below list of colours and associated emotions (please keep in mind that such colour associations can vary greatly depending on the country and culture, but I feel the below is a generally correct guide within the western world at least):
When working up your new site, app (desktop or mobile), or interactive infographic always firstly select your colour palette, taking into account any established brand identity guidings and translating these for web use (for example you may have a wider than usual brand palette, but for web its best to work to a tighter more concise palette). Once you have the palette to work from, then set functionality application to the use of your palette. This is where things become really interesting – colour emotion needs to match and marry with the applied functionality you are intending to assign to each colour. For example any CTAs you would typically want a ‘stand out’ colour, matching the nature of what a CTA is all about – so maybe orange according to the emotion table above. If you have text on top of a coloured background, avoid ever using white for a button / action colour as the cold nature of white won’t add to the user experience in terms of ‘there is something to do here – click me’, a white link will be lost, not only in terms of being difficult to read but as a sign post ‘do something here’ colour.
It really is a fascinating subject, the application of colour in web design when considering emotion and function. You may naturally consider the 2 very separate areas, emotions are what I feel, they affect my mood and illicit a real human response and are the drivers behind my brand affiliations and leave me with the long term impressions of my user experience. Functions are the physical things I do in order to reach my objectives of visiting a site, it isnt really the functions that I remember but the end result of them – the emotions of satisfaction, enjoyment or frustration from my experience on whatever site or app I have been interacting with.
BUT, the 2 are essentially a result of each other. My site experience and resulting emotions are built upon the functions I interact with / perform on any given site, but then the functions I perform, how well I perform them are driven by the emotions, comfort, familiarity, excitement I feel when visiting a site. It is here where the application of colour within the IA and design stage of a site, app, or interactive infographic needs to be planned properly and so you can look to control your users emotions and functions performed – to do this follow the simple steps below: -
1. Set your colour palette (taking into account branding)
2. Review your wireframes and confirm the list of button / link / download / CTA types you have across the site
3. Set colour usage for your final palette against the ‘actions’ list as set in step 2
4. Review your colour application rulings to ensure you arent pushing against inherent emotional attachments users may have to each colour used
5.TEST, TEST, TEST – we are always big advocates of testing your designs. What I am wanting to achieve in the steps above is improving your site UX, and dont forget this is your USERS experience. Dont ever assume what your users think, feel or want to achieve, where possible and if the project allows get them in front of your designs and find out directly from them.