You’ve got an idea for a great Website. You write your content, add an interesting graphic or two, make sure your meta tags and alt text do their job, get your audience …and that’s it, right?
Wrong.
Of course, all these elements are important. But mounting evidence suggests that how you make your users feel is as crucial as what you tell them. And it’s the appearance of your user interface that can significantly affect their mood. So, if you want your users to feel positive about your site, and motivated about returning, you’ll need to understand which elements of your interface can affect the mood of your visitors.
Key Takeaways
- The appearance of a website’s user interface can significantly affect the mood of users, and therefore their behavior and decision making. This is especially important for ecommerce, internet banking, and educational software.
- The color of a website can influence users’ emotions. For example, blue, blue-green, green, red-purple, purple, and purple-blue are generally seen as the most pleasant hues, while yellow and green-yellow are considered the least pleasant. The color red can induce feelings of excitement and energy, while pink and soft green can soothe and calm users.
- The shapes used on a website can also evoke certain emotions. For example, lines directed downward from left to right can represent sadness, while horizontal or upward lines can symbolize happiness. Sharp-angled and jagged lines can represent anger.
- Sound effects and music can enhance the emotional impact of colors and shapes. For example, classical music can promote concentration, and tranquil sounds can contribute to a feeling of motivation for positive change.
Why are Users’ Feelings Important?
Emotions influence behaviour.
There’s growing demand for research into the effect of the interface on users’ emotional responses. Why? Because emotions influence behaviour: they
‘play an essential role in decision making, perception, learning, and more…they influence the very mechanisms of rational thinking’
(Oostendorp et al, 1999). This has huge implications for ecommerce, Internet banking and educational software, as commercial organisations are now beginning to realise. As Rose (2001) points out:
‘As multimedia is known to create affective responses, potential exists for multimedia to alter recall patterns and influence decision-making’.
Consequently, it is primarily the ecommerce sector that leads the way in research, and the current studies suggest that target emotions can be induced via the interface. Kim and Moon (1998), for instance, found that manipulating visual design factors of the customer interface in an ecommerce system could induce a target emotion such as trustworthiness, while Rose (2001) found that affective responses could be induced using multimedia to influence investment decisions. But it’s not all smiles and sales — your page could just as easily have a negative effect! Kraut et al’s (1998) study found that heavy use of the Internet was associated with increases in depression and loneliness.
So I need to pay attention to visual design factors and multimedia elements, but how do I know what works?
The Importance of Colour
In 1996, Jakob Nielsen observed that because
‘we are in the very early stage of discovering systematic methodologies … no hard guidelines are available’.
In such a new and dynamic area of research, this is still largely the case, but today there is some general consensus about what works in the industry. High quality graphics are recognised as having real importance in the creation of a pleasant experience. And there’s also real evidence that colour has a significant role to play in influencing emotions.
That we associate colours with emotions is without question — how often have you heard people say ‘I’m feeling blue’, ‘I’m seeing red’ or ‘I’m in a black mood’? This has been exploited in advertising for years, with colours used to encourage particular associations with products. Pink, representing softness and gentleness, is used for baby and bath products while orange, symbolizing potency, power and vigour, is frequently used in the packaging of health products and vitamins, protein-packed snacks, energy-giving drinks, and oven cleaners.
Research supports these associations: Jolley and Thomas (1994) found that moods in artworks were read through colour associations, and Ellis (1997) found that even from childhood pink is associated with peaceful/happy; blue with peaceful/sad; green with happy and black with sad/angry.
It is revealing that artists suffering from autism (in which a central characteristic is a lack of interest in communicating with others) seem to have no interest at all in portraying colour in their pictures (Thomas and Silk 1990 p135). Their lack of regard for colour seems to underline the idea that for the rest of us, colour is a useful tool in the depiction of feelings and moods on paper. There is no reason to suppose that this association of colour with mood is any less potent when the colours are on a computer screen, and that by using appropriate colours on-screen, the associated moods will be communicated to the user in just the same way as in product, TV and magazine advertising.
Putting the Research to Work
More importantly, though, there is increasing evidence that colour is not only associated with mood, but that it can be used deliberately to produce particular emotional and physiological states. Schauss (1979) reports that a particular shade of pink (Baker-Miller) can relax hostile or agitated behaviour in approximately ten to fifteen minutes. Hamid et al (1989) found that physical strength and a highly positive mood were demonstrated in a pink-coloured room while the reverse was found in a blue-coloured room.
Chronicle and Wilkins (1991, p890) found that the colour red increased visual discomfort in migraineurs, and Kaiser (1984, in Davidoff 1991 p113) reports the effects of colour in the treatment of jaundice and the production of epileptic seizures. Valdez et al. (1994) found that colour saturation and brightness evidenced strong and consistent effects on emotions, with blue, blue-green, green, red-purple, purple, and purple-blue being the most pleasant hues, and yellow and green-yellow the least pleasant. Green-yellow, blue-green, and green were the most arousing, whereas purple-blue and yellow-red were the least arousing.
There is nothing magical about this ability of colour to affect emotional response. Davidoff (1991, p114) points out that, as
‘…colour is an important warning signal for many subhuman species… it could be innately determined that warm colours have a different arousal value than cold colours’.
There is some evidence that bright colours enhance cortical arousal (e.g. Edwin et al, 1971, and Jacobs and Hustmyer, 1974 both in O’Hare 1981 p83). If these findings translate to interface design they present some interesting possibilities. Emotions could be targeted, for instance, to enhance the effectiveness of multimedia for particular purposes, such as learning, or motivation for positive change.
Early indications are that colour does continue to have an effect when viewed on screen. Wolfson and Case (2000) manipulated background colour (red/blue) and sound (loud/quiet) in a series of computer games. Players using a blue screen improved gradually over the session, while red screen players peaked midway and then deteriorated. A similar pattern for heart rate was found, suggesting that arousal was implicated in the effect. Sound alone had little impact, but the red/loud combination was associated with perceptions of excitement and playing well. The results suggest that the aura of a computer game may affect cognitive and physiological responses. In another study, Passigand and Levin (1999) found that, on learning interfaces, boys preferred green and blue colours, while girls preferred red and yellow screens full of drawings that changed slowly.
The Shape of Things to Come?
There is also evidence of a relationship between shape and emotion. Kreitler and Kreitler (1972, p112) mention a study by Lundholm (1921) who found that most of his subjects tended to represent the meaning of ‘sadness’ by lines directed downward from left to right, and of ‘gayness’ by lines that were horizontal or directed up from left to right. ‘Anger’ was represented by irregular, sharp-angled and jagged lines; ‘graveness’ and ‘idleness’ by gently curving or relatively straight lines. A study by Peters and Merrifield (1958, in Kreitler and Kreitler 1972, p112) supports these results.
Blank et al (1984, p129) surmise that ‘at least in our culture, acute angles are more ‘tense’ than right angles or curves, crowded compositions are more ‘excited’ than ones with a great deal of empty space’, and posit a developmental explanation:
‘…perhaps shapes express because they remind us of postures associated with particular moods…droopy forms look like the sagging posture associated with sadness’.
Since a multimedia product is inevitably concerned with the arrangement of shape and form, the effect on the user could make a difference to the effectiveness of a site. But don’t overdo it: animations that perform infinite loops on the screen seem to be less appealing than those that are fleeting (Nielsen, 1996).
Sounds Like…
The effect of colours and shapes can be enhanced with sound effects. Nielsen (1996) talks about the ‘satisfying thud’ when the user throws something into the trashcan, and there is a volume of research on the effect of music on mood.
For instance, McCraty et al (1998) found that grunge rock music increased hostility, sadness, tension, and fatigue, and reduced caring, relaxation, mental clarity and vigour. In contrast, ‘new age’ music (such as the sounds of pan pipes and rain forests) produced significant increases in caring, relaxation, mental clarity, and vigour, and decreased hostility, fatigue, sadness, and tension. Lai (1999) found significant post-test differences in experimental group participants’ heart rates, respiratory rates, blood pressure, and tranquil mood states after a music/sound intervention.
Other studies suggest that particular types of classical music promote optimum conditions for concentration. Hughes (2001) reviews the ‘Mozart Effect’, an improvement of performance (improved spatial temporal reasoning, improved IQ test results, neurophysiological changes and increased coherence) while listening to Mozart music. All this suggests that the inclusion of tranquil sounds and certain classical pieces in an interface may contribute to a feeling of motivation for positive change.
Trying it Out
If you care about how your user feels while visiting your site, why not put yourself in their shoes? Try visiting the site yourself, with colour, sound and shape in mind. It’s a complicated business, with shade, saturation, shapes, animation, sound, position — and of course, your content – all working subtly together. But going through the following checklist could reveal some interesting insights:
How would you like your users to feel?
Pleasant
Try using blue, blue-green, green, red-purple, purple or purple-blue, with gently curving or relatively straight lines.
Happy and positive
Be generous with the blue, green and pink; try directing their gaze upwards from left to right, avoid sharp angles.
Stimulated
Try green-yellow (but see ‘unpleasant’ below), blue-green, and green colourings.
Able to concentrate for improved learning and performance
Us blue tones; play classical music
Initially strong, ready for action in short bursts
Try lots of red!
Excited, upbeat, energetic
Use orange, strong red (not too much — see ‘uncomfortable’ below), loud sounds
Soothed, calmed, relaxed, poised for positive action
Colour with baby pink, soft green
Soothed, calmed, relaxed, lulled into a stupor
Use baby blue, purple-blue, yellow-red
Caring, relaxed, with mental clarity, and vigour
Use soft blues, pinks, greens; play ‘new age’ music
Hopefully, you don’t want to produce negative feelings in your users. But you might want to check your site for the following:
Sad, unhappy
Results from large chunks of black; lines directed downwards from left to right
Angry
Produced by large expanses of black; irregular, sharp-angled and jagged lines
Unpleasant
Generated by yellow and green-yellow hues
Uncomfortable
Created by strong reds
Hostile, sad, tense, fatigued
Encouraged by grunge rock music
I’d be interested in hearing about any changes you make to your site as a result of this article, and whether the changes you make produce any differences in the reactions of your users.
References
Blank P, Massey C, Gardner H and Winner E (1984) Perceiving What Paintings Express in Crozier W R and Chapman A J (Eds) Cognitive Processes in the Perception of Art p127-143 (Elsevier Science Publishers BV)
Chronicle E P and Wilkins A J (1991) Colour and Visual Discomfort in Migraineurs (The Lancet 338 p890)
Davidoff J (1991) Cognition through colour (MIT Press)
Ellis A (1997) Seeing red or feeling blue? A psychological study of children’s sensitivity to metaphorical expression of mood (Unpublished MA dissertation, Lancaster University Department of Educational Research)
Hamid P N and Newport A G (1989), Effect of colour on physical strength and mood in children (Perceptual and Motor Skills Volume 69 Issue 1 August p179-185)
Hughes J R (2001) The Mozart Effect (Epilepsy & Behavior, October 2:5 p396-417
Jolley R P and Thomas G V (1994) The Development of Sensitivity to Metaphorical Expression of Moods in Abstract Art (Educational Psychology 14:4 p437-450)
Kim J and Moon J Y (1998) Designing towards emotional usability in customer interfaces–trustworthiness of cyber-banking system interfaces (Interacting with Computers Volume 10 Issue 1 March p1-29)
Kraut R, Patterson M, Lundmark V, Kiesler S, Mukophadhyay T, Scherlis W (1998) Internet paradox: A social technology that reduces social involvement and psychological well-being? (American Psychologist September Volume 53:9 p1017-1031)
Kreitler H and Kreitler S (1972) Psychology of the Arts ((Duke University Press)
Lai Y M (1999) Effects of Music Listening on Depressed Women in Taiwan (Issues in Mental Health Nursing, May 20:3 p229-246)
McCraty R, Barrios-Choplin B, Atkinson M, Tomasino D (1998) The effects of different types of music on mood, tension, and mental clarity (Alternative Therapies in Health and Medicine Volume 4, Issue 1 January p75-84)
Nielsen J (1996) Seductive User Interfaces (online at www.useit.com)
O’Hare D (1981) Psychology and the Arts (Harvester)
Oostendorp H van, Preece J and Arnold A G (1999) Designing multimedia for human needs and capabilities (Guest editorial, Interacting With Computers Volume 12 Issue 1 September p1-5)
Passigand D and Levin H (1999) Gender interest differences with multimedia learning interfaces (Computers in Human Behaviour Vol.15 Issue 2 March p173-183)
Rose J M (2001) The effects of multimedia -induced affective states on recall and decision-making by individual investors (International Journal of Accounting Information Systems Volume 2, Issue 1 January p22-40)
Schauss A G (1979) Tranquilizing effect of color reduces aggressive behavior and potential violence (J. Orthomol. Psychiatry Volume 8 Issue 4 p218-221)
Thomas G V and Silk A M J (1990) An Introduction to the Psychology of Children’s Drawings (Harvester Wheatsheaf)
Valdez P and Mehrabian A (1994) Effects of color on emotions (Journal of Experimental Psychology: General Volume 123 Issue 4 December p394-409)
Wolfson S and Case G (2000) The effects of sound and colour on responses to a computer game (Interacting with Computers Volume 13 Issue 2 December p183-192)
Ann is a psychologist, writer and lecturer who's interested in HCI issues and the effect of computers on human emotion. After building up a successful therapy practice, she's dedicated to helping people achieve their goals, the pursuit of happiness – and to finding out how computers can help.