Redesigning an icon changes behaviour and increases user engagement

Symbols are everywhere, both in our offline and online world. You’ve probably seen and processed hundreds today without even realising. From no-smoking signs to exit signs, health warnings, food labelling, email notifications, social media and even toilet symbols.

Each of these symbols has an effect not only on the way you interact with your environment, but your behaviour and attitudes to the subjects they represent1.

Designing icons for social change that utilise behavioural psychology is a catch 22. For an icon to work it must have the right symbolism, cultural relevance and understanding, so that when viewed even at 16px people can still understand what it is. Therefore a lot of the symbols we see reinforce old connotations and beliefs that we hold, leading to reinforcement of the symbolism. Reinforcement is a powerful psychological mechanism, strengthening different behaviours and skewing people's opinions. This can be seen in the world of advertising for example2. The recent debate over gender neutral toilets and the representation of gender on toilet doors is a good example of this change in cultural significance; changing attitudes have outstripped the need to differentiate and label gender. (Here's a great article from the New York times to read more. In All-Gender Restrooms, the Signs Reflect the Times )

Gender neutrality debate aside, the two case studies below show how a change in symbol can change how the disabled are perceived in America, and increase user engagement in the case of Twitter changing its favourite star to a like heart.

Redesigning the disabled icon can change how disabled people are perceived

In 2014 America updated their symbol for the disabled, changing the behaviour of Americans in the process.
The previous version designed in 1968 by Susanne Koefoed, while universally identifiable, doesn’t adequately represent the many different levels of ability that individuals have.

Redesigning the disabled icon can change how disabled people are perceived.

Artists Sara Hendron and Brian Glenney started Accessible Icon Project as a social design project in response to this and campaigned to update the previous icon with the one below.

The icon uses a representation that is a more active, forward-moving position; directly opposing the previous stationary and passive icon used previously.

Sara and Brian outline the decisions behind the new graphic:

  1. Arm angle is pointing backwards to suggest the dynamic mobility of a chair user, regardless of whether or not she uses her arms. Depicting the body in motion represents the symbolically active status of navigating the world.
  2. Head is forward to indicate the forward motion of the person through space. Here the person is the “driver” or decision maker about their mobility.
  3. The human depiction in this icon is consistent with other body representations found in the ISO 7001 – DOT Pictograms. Using a different portrayal of the human body would clash with these established and widely used icons and could lead to confusion.
  4. The leg has been moved forward to allow for more space between it and the wheel, which allows for better readability and cleaner application of the icon as a stencil.
  5. By including white angled knockouts the symbol presents the wheel as being in motion. These knockouts also work for creating stencils used in spray paint application of the icon. Having just one version of the logo keeps things more consistent and allows viewers to more clearly understand the intended message.
  6. Accessible Icon Project

"The new design idea is related to the style of a speedy wheelchair but it's not a racing wheelchair sign we're trying to create" Barry Gray

Although some, including Barry Gray, a member of the graphical symbols committee of the International Standards Organisation, argue over the clarity of the new icon, in terms of behavioural psychology and its reception in America it is a success. It has changed people's perceptions of the disabled for the better.

Facebook expanding like to include new 5 expressions

Facebook just expanded the like button to include love, haha, wow, sad and angry. In a move to increase engagement, and enable people to express themselves more on the network Facebook will inevitably see engagement figures shoot up.

Facebooks new engagement icons

Twitter's star to heart

In the first week after twitter changed from the favourite star to a like heart, activity increased by 6% for existing users and 9% for new users. (Kavin Weil at the Open Mobile Summit. Nov 2015). This is a huge figure when it comes to considerations in UI and UX. They cited that the heart had a wider use case application and was easier for users to understand.

Twitter changing favourite to a like icon

When applying the ABC modes of attitude to the change of an icon you can see why users were able to understand the new heart more.

How does changing an icon change people’s attitudes?

The ABC model is one of the most cited3 4 models of attitude. Every attitude has three components that are represented by ABC:

  • A for affective
  • B for behavioural (or conative)
  • C for cognitive

By altering the symbolism through changing the design and meaning association of a symbol we are able to change the affective component of attitude.
For example, by changing the associations of the favourite button to a like button, Twitter in effect changed the users cognitive belief about the appropriateness and application of the action.

For example:

Old, Favourite star

Affective component: I like (favour) a tweet
Behavioural component: I will add a tweet to my favourites by clicking the star
Cognitive component: ★ means to ‘favourite’ something.

New, like heart

Affective component: I like / enjoy / laugh at / empathise / sympathise with this tweet
Behavioural component: I will ‘like’ tweets that I like / enjoy / empathise or sympathise.
Cognitive component: ♥ means I am emotionally connected to a tweet, whether through love, like, humour, enjoyment, sadness, or sympathy.

__

The cultural and symbolic psychology behind a design can completely change how people interact with it. With effects seen in icon design, signage and even logo design. As a designer we must be extra critical to dig down into the psychology behind the symbols we use in our work, to ensure that we aren’t accidentally negatively influencing the cognitive associations of the viewer.

Next time you are walking past a sign or clicking a symbol, have a close look and ask yourself: ‘how is it affecting me?’

Have you seen any icons designed for social change? Drop them in the comments below.


1 Krauss, R. Chiu, C-Y. Language and Social Behavior 1995
2 Givon, M. Horsky, D.Untangling the Effects of Purchase Reinforcement and Advertising Carryover 1990
3 Eagly, A. Chaiken, S. Attitude structure and function. 1998.
4 Van den Berg, H. The impact of affective and cognitive focus on attitude formation. 2006

Form for thought - A blog about design psychology and design thinking for graphic designers, web designers, ui designers, ux and illustrators. Looking into the psychology of colour, user behaviour and advertising psychology.