neutral colours (predominantly white
with 67 per cent of the image) intensifies
the focus on secondary non-neutral
colours. In this case, blue was the most
prevalent colour used at 5 per cent of the
screen. The overall design focuses heavily
on cool colours (91 per cent). Cool colours
tend to evoke a more calm or tranquil
mood. Which is important when looking
at the context of the design itself.
Search results pages contain a massive
amount of information. Each page
only has ten total results but includes
hundreds of words describing each page,
the website URL, the page title and
additional sidebar callout information
that may be pertinent to the user. It’s
a lot to consume when most users only
spend between 4.39s and 8.64s on the
first page of a search engine (https://
conversionxl.com/blog/how-people-view-
search-results/).
This is why colour selection plays such
a crucial role in user experience andred button doesn’t magically generate
more sales. Selecting a single colour for
an element of your design is a portion of
the collective design psychology. As with
user experience, colour theory is best
understood in context.
Bing’s blue stands out because it’s
paired with a large percentage of neutral
colours. Eighty-six per cent of the
‘above the fold’ search results on Bing
are neutral according to a study done
by UX Triggers (UXT). UXT is a colour
psychology analysis tool that breaks
down each pixel of an image to determine
the percentage of colour use in relation
to other colours and how that context
impacts the perception of different
genders and age groups in terms of
factors such as trust and quality.
In the study, which can be
seen here (https://uxtriggers.
com/analysis/10555/),design overall. It’s not about the colour
blue or red: it’s actually about all of the
colours surrounding it. Bing’s three top
colours are white (67 per cent), grey (19
per cent) and blue (5 per cent). The top
two are neutral, as already discussed.
Because of this, anything blue pulls
the user’s primary attention toward it.
When you factor in that the blue text
links are also larger than the secondary
description text (20px for the enlarged
links versus 13px for body copy), it creates
tunnel vision and enables users to focus
on the page titles, which provide the
most value on the page. All other content
becomes secondary by design. Oh, and
guess what: the size of the enlarged blue
link text (20px) is mathematically perfect
in relation to the body text (13px). The
blue text is 65 per cent the size of the
body copy – which is only 1 per cent away
from a perfect golden ratio.
That’s not to say that designers
purposely create mathematical fractions
or equations to drive their design. The
takeaway from this is that our brains
quantify what we perceive as idealNick Kolenda
https://www.nickkolenda.com/color-psychology/Like Hallock, Kolenda has curated a massive resource on colour
psychology. According to his website he compiled the findings of 50
academic studies on colour to create a full breakdown of colour
psychology, marketing applications and then an outline of how to
choose the right colour scheme.
This website focuses much more on creating Kolenda’s own
formula and chart-driven guides to help educate readers
on the context of colour psychology as it relates to a
full composition and not a single colour. It factors in
types of product, amount of content, placement of
objects on opposing planes (foreground versus
background) and more.Resources
Joe Hallock
http://www.joehallock.com/?page_id=1281In 2003, Hallock conducted research for his undergraduate
thesis at the University of Washington. Instead of publishing
a typical paper, he opted to launch a website that acted
as a dynamic document that was easily understood. On
Hallock’s website he does a deep dive into colour education,
methodology, preferences and psychology. He even provides
the data set from his surveys.
If you’re curious and need a starting point to understanding
colour at a deeper level, this is a perfect beginning. Unlike
other research papers out there this is easy to comprehend.
It’s like reading a long, detailed, blog post wrapped in a nicely
designed website structure.FEATURES
Use colour to shape UX