It’s my birthday! So today is a guest post. 

Using a web site to sell a consumer product is not as easy as buying the right domain name and setting up a PayPal account; there is a precise science behind it, with near-limitless variables dictated by your brand identity, the demographic you are targeting, rival companies and much more besides. However it is governed by one omniscient law which dictates that the consumer is looking to part with their money for a tangible product of some description. This is the constant that ties all the different approaches together.

When approaching web design from a not-for-profit perspective one must consider that this constant is, while still relevant to some extent, a far vaguer prospect. The assumption when marketing a charity has to be that the target audience are not already ‘sold’, that they need an idea planted in their head to persuade them to do something selfless. It is a science that relies on emotion rather than a materialistic need, thus a degree of humanity must be present in the design, and there is no more effective image to convey this than the human face.

Human faces are always a focus point in web design. In study after study, faces are the first on-page element that a user notices. However it’s important to think about how they are used: facial expression, context, photo background and even the direction that someone is looking towards are all signals to a user which can affect how they interact with the site. This is particularly important when dealing with sensitive issues like soliciting charitable donations. Photography for charity websites necessarily includes photos of people in very difficult circumstances, so it is important to get the balance right between empathy and action, as World Vision Canada have done here to great effect. Please see the heatmap below which shows where the eye focuses looking on their webpage.

The faces dominate the eye attention predicted by the heatmap, but are of a size that doesn’t dominate page real estate. Included in the photo panel are the main strapline, but also the main call-to-action button. Containing these elements all in the same panel creates a high level of attention for three important parts of the page design; hero image, heading and call to action. The eye of the user follows them in this order, and if one element is missing the whole panel is redundant.

Faces are not only a way to communicate context but can also be used indirectly as signposting to other elements on the page. Best practise in design is generally considered as having the face looking away from the user towards the main call to action. If used incorrectly however this can have a negative outcome, exemplified here by the University of Ontario.

Here the two subjects are looking at each other, excluding the user from their relationship therefore failing to endear them to the university’s community. In addition to this, UoOTI’s colourful top navigation bar manages to draw attention away from their faces and subsequently that large piece of ‘real estate’ is wasted. So we would suggest that if you are using faces, use them in a way to draw attention to the main purpose of your website: your call to action.

The other main factor in this ‘trilogy of faces’ is gender convention; it is crucial to know which gender you are trying to appeal to, and if the answer is male AND female you must consider which gender’s attributes are more relevant to your brand identity. Many studies show that ‘attractive faces’ create more engagement than ‘unattractive faces’, probably due to sexual selection.  Factors of attractiveness obviously vary, but facial symmetry and bone structure is considered to be one of these factors. Also, men are on average more likely to appear as just a face, whereas images of women which tend to use more of the body.

Dating sites provide useful inspiration in this area of design. The famous academic study by Archer, Iritani, Kimes & Barrios created the concept of the “Face-ism Index” , highlighting that more of a woman’s body has been used in imagery across cultures. This bias is perceived to be overly sexual. Dating sites need to achieve a delicate balance, between highlighting that their site has a large number of attractive users, but without alienating either sex. Be 2 in Canada achieves this by using a head shot of an attractive woman as the main hero image, concentrating on her face and not including the whole body.

While the use of human faces to shepherd the user’s gaze is essential to the design of your charity website, the most important thing is to promote your goals, clarify your mission statement and offer quantifiable KPIs to instil confidence in the user. Looking to another dating site for example, Badoo’s key metric is their sign-ups which they promote all across their site, and the numbers increase in near-real time. This large user base creates a feeling of inclusion at the point of sign up and the perception of membership to a large global community.

Conversely, Second Harvest have utilised the same technique in the not-for-profit industry displaying a running total for donations to their food drive. The calls to action are again prominently displayed, and there is an enhanced feeling of interactivity when the user donates and sees visible proof that they have made a difference to the charity.

Just these few examples – and there are millions more, both good and bad – show us that charity web design can learn a lot from consumer sites as long as the product is relevant. In essence, dating sites are selling human emotion and although it is for profit rather than philanthropy the principles are the same, as love and empathy are not too far apart. When taking these similarities into consideration, a charity website can really maximize their conversion and minimize bounce rate, making full use of all the traffic they receive.

This article was written by Barry Cooke. Barry has been working in search and social media for over 15 years with a number of well known household brands and currently is the production director for advanced digital marketing agency, QDOS Digital Media.

https://en.gravatar.com/barrycooke