Beruflich Dokumente
Kultur Dokumente
net/publication/312146392
CITATIONS READS
0 3,062
1 author:
Sarosha Imtiaz
McMaster University
3 PUBLICATIONS 0 CITATIONS
SEE PROFILE
All content following this page was uploaded by Sarosha Imtiaz on 08 January 2017.
Sarosha Imtiaz
McMaster University
A website is a powerful tool which can be used to implement a wide array of marketing
strategies to grow a business. The design of a website itself is a crucial element in establishing
trust since 94% of users do not trust poorly designed ones and leave without taking action
(Sillence, Briggs, Fishwick & Harris, 2004). This decision is made quite quickly, in fact, researchers
Dudek & Brown, 2011). Websites with low visual complexity (the simpler, the better) and high
prototypicality (how representative a design looks for a certain category) are more likely to be
perceived as appealing design (Tuch, Presslaber, Stöcklin, Opwis & Bargas-Avila, 2012). Everyday,
consumers use the Internet to purchase goods and services, gather product information or even
Websites have naturally led to the creation of online shopping environments which are
used by consumers to understand or further explore its content and products. Some factors that
enhance user experience are cues as navigation buttons, the overall spacing of screens, product
information, transactions and shipping information (Demangeot & Broderick, 2007). These enable
consumers to make sense of the website, describe its services/products and make it easy to
purchase them. Other cues which encourage consumers to further explore the environment
include visually aesthetic icons and layouts that invoke the feeling of shopping and links to
additional product information alongside relevant user reviews. (Demangeot & Broderick, 2007).
Therefore, it has become critical to understand how consumers perceive online environments,
especially for marketing professionals who want to keep upto date with the latest digital trends.
By adopting psychology based design tactics, website owners can provide an engaging
experience for their users (Elder & Krishna, 2012). A website should accurately depict its products
to encourage mental interaction from their visitors (Verhagen, Boter & Adelaar, 2010). Once users
can envision themselves interacting with a product, they become more likely to purchase it (Elder
& Krishna, 2012). Furthermore, testimonials and user reviews have proven to be powerful
1
messages that can convince over 63% of customers to buy a product (Wang, 2002). Endorsements
made by influencers and experts in the field are valuable as people are conditioned to seek the
opinions of authority for guidance (Robins & Holmes, 2008). By surfacing multiple testimonials,
website owners can craft a positive perception in the minds of their audience (Wang, 2002). Their
audience also looks at the contextual information associated with the review such as the
reviewers reputation, exposure and relevance to the product (Hu, Liu & Zhang, 2008). If a
business owner is working with higher level partners/influencers, their logos are usually displayed
to gain credibility and trust (Robins & Holmes, 2008). For example, if a site uses a payment portal
that people respect on the web, their logo is prominently displayed prior to purchase for instant
Implementing other tactics which invoke feeling of scarcity and urgency have shown to
increase sales (Herpen, Pieters & Zeelenberg, 2005). Scarcity can be used in marketing to invoke
anxiety and leverage the fear of a shortage in order to sell more (Venkatesh, 2000). A limited time
offer or a time sensitive discount both use urgency and the concept of fear of missing out (FoMO)
to convince visitors to act (Cialdini, 2006). Scarcity can also be used to increase the perceived
value of a product since a limited supply conveys that other people are interested and can
consequently make a customer purchase it quicker and with less thought (Herpen et al., 2005).
The concept of anchoring an option plays a key role in the consumer decision making process
(Dodonova, 2009). This can be applied on the pricing page of websites by placing the cost of one
pricing tier dramatically higher than the other. The higher tier allows the users to perceive a
greater value for a lower priced tier, especially if the offerings are relatively the same (Dodonova,
2009). Another example of anchoring commonly seen is sales promotions where the price of the
product before and after the discount are emphasised. This makes a visitor more inclined to
purchase it since they are saving money by buying at a better value (Dodonova, 2009). A known
tactic that many retailers use on their sites are “end of the month sales”, where subscribers get
emails reminding them that a big sale will be coming very shortly and invoke feelings of
2
anticipation in their customers (Fogg, 2009). In addition to getting people excited about their sale,
they also use this opportunity to grow their subscribers list and get more people registered to
nurture a potential sale. These tactics trigger pleasurable emotions that users associate with a
brand and eventually buy from them (Fogg, 2009). Business owners also apply reciprocation which
is the idea that if you give something to a prospective customer, they will give you something in
return, i.e. a sale (Flemming, 1998). Similarly, when free gifts are offered before or with a
purchase, prospects tend to feel committed to a brand and are more likely to stay loyal.
Website owners can leverage human psychology when designing layouts by using the
Gestalt Principles. This is a way for any website environment to establish visual hierarchy, which is
the arrangement of elements in a way that implies importance (Demangeot & Broderick, 2007). It
is the core technique that draws attention to a call to action (CTA) on a page and is a reason why
headlines are always bigger and bolder than the subline. There are eight distinct methods to show
visual hierarchy in design principles which are: size, contrast, similarity, symmetry, unity, grouping,
style and colour (Djamasbi et al., 2011). Each of these methods play a crucial role in designing an
(Djamasbi et al., 2011). An example of visual hierarchy using size and dominance can be seen on
various blog posts across the web which have “Previous” and “Next” buttons to explore additional
content. The “Next” button should theoretically be bigger and bolder compared to “Previous”
button, since it will be seen as the more prominent option and will urge users to continue reading
the blog.
Comparing how one colour stands apart from another is called contrast. High contrast is
when colours easily stand apart from each other while low contrast is when they do not. Low
contrast makes text or objects distinguishable from the background which is important for reading
and consuming content. Contrasting elements draws attention to certain regions, thus a call to
3
action (CTA) will convert the best if it contrasts with the rest of the page (Petrie, Hamilton & King,
2004). Researchers claim that a primary, contrasting CTA has to appear multiple times on a
website, since more placements result in a higher likelihood to capture attention (Josephson &
Holmes, 2012). For example, visitors might miss a CTA in the upper right corner, but they might
see and interact with the same CTA at the bottom of the page. Also, the timing at which a CTA
appears impacts interaction since visitors may not be ready to take action at the top of the page,
but more comfortable by the time they reach the middle or bottom of the page (Josephson &
Holmes, 2012). This is due to the mere exposure effect which is why people develop a stronger
affinity towards a stimulus if they are repeatedly exposed to it (Bornstein & D’Agostino, 1992).
Research shows that visual fixations can influence choice behavior since users are more likely to
choose a certain option if they spend more time viewing and contemplating it (Armel, Beaumel &
Rangel, 2008). A website’s target plan should be in the centre of the page as it captures attention,
adds visual contrast, and when a stimulus is visually salient, people spend more time looking at it
(Parkhurst, Law & Niebur, 2002). Researchers have found a center-stage effect which is why
objects/elements centrally located attract more attention and influence users to choose that
option (Atalay, Bodur & Rasolofoarison, 2012). It is important to identify this central target plan as
“most popular” to encourage users to naturally choose that option. This is because humans
experience an innate desire to follow the crowd or the socially accepted path (Asch, 1956).
Similarity plays a large role in perceiving related items based off size, colour, proximity and
shape of the objects compared to others on the page. A marketer can orient a visitor's gaze
towards a call to action (CTA) by adding visual cues like arrows or using images on a website where
the model is looking at the CTA itself (Djamasbi, Siegel & Tullis, 2012). The direction of the face is a
powerful visual cue that directs the attention of a visitor (Djamasbi et al., 2012). We have a
natural, inborn tendency to follow people’s gazes and this tendency is an evolutionary trait that
helped us learn about the world and is ingrained in our amygdala (Emery, 2000). This increases a
visitor’s processing fluency and helps them quickly understand that they are supposed to click on
4
it (Djamasbi et al., 2012). Using asymmetrical designs can gain interest and direct focus to one
section of a page over another. Symmetrical designs, on the other hand, help visitors remember
Unity holds designs together both visually and conceptually. For example, visual unity can
include a group of elements that are all aligned to a common axis while conceptual unity can be an
image of a diamond, a mansion, and a pile of money which is unified conceptually around wealth
(Couper, Traugott & Lamias, 2001). Features that impact user satisfaction while using websites
include easy navigation, accurate information, an attractive screen background, overall colour use,
and screen layout (Zhang & Von Dran, 2000). Conventional navigation menus, which have links
located on the top or the side of the page allow users to easily browse a website. Website owners
environments, to prevent users from facing difficulties and abandoning their site (Palmer, 2002).
Users also prefer to know the number of steps within a sequence, such as filling a form or buying a
product so designers should consider being more attentive to user interface and personalization
features while developing a website (Palmer, 2002). Examples of these features include the overall
colour and layout, the arrangement and content of information displayed on the screen,
techniques used to correct wrong inputs, and an easy to use shopping cart (Kumar, Smith &
Bannerjee, 2004).
Grouping elements together can reduce the cognitive load on a visitor since it is easier for
them to process information on a page and understand it better (Graham, 2008). Encapsulation is
a design technique which provides immediate separation of a group of elements from the rest of
the page and is very powerful in directing a visitor's attention (Cober, Brown, Keeping & Levy,
2004). It is important to simplify choices to take on a website by limiting the number of options
(Schaik & Ling, 2011). Psychologists William Edmund Hick and Ray Hyman conducted choice
reaction experiments to assess cognitive information capacity. They found that increasing the
5
number of choices consequently increased the time that it took to make a decision logarithmically
(Hick, 1952; Hyman, 1953). Following this theory, website owners should force users to either
accept or reject a CTA (Schaik & Ling, 2011). If visitors are given the choice to reject an option, it
prompts them to reconsider the benefits that they are giving up, which can trigger loss aversion
(Levin, Schreiber, Lauriola & Gaeth, 2002). They accept the offer because they do not want to lose
the perceived benefits. With more options, people are often less likely to make a decision (Hick,
1952; Hyman, 1953). This can be applied when creating One Step or Two Step opt-in calls to action
(CTA’s); where One Step presents input fields directly on the page and Two Step displays a link or
button which then proceeds to a page with input fields. These input fields capture information
such as the name, email or phone number of their visitors. Two Step opt-ins are more powerful
because when users click the initial button in the two-step process, they are more committed to
accomplish a goal (e.g., create an account, receive bonus content, etc.). Once they reach the
second step, they experience a dilemma. They clicked a button because they were interested in
the CTA, so if they do not complete it, their behavior will be inconsistent with their attitude. Thus,
they feel cognitive dissonance and will want to solve it, in this case, by completing the opt-in
(Veen, Krug, Schooler & Carter, 2009). To simplify the decision making process for a consumer,
website owners can add a decoy option (Zhang & Zhang, 2007). Decoys are targeted towards
being an absurd option to users and therefore increases the chance they pick another option more
beneficial to the website owner (Rooderkerk, Heerde & Bijmolt, 2011). An example is a study with
Economist magazine where they had three subscriptions: OPTION A: Online subscription for $59,
OPTION B: Print subscription for $125, OPTION C: Online and print subscription for $125 (Cialdini,
2006). At first glance, OPTION B seems like a mistake since no rational human would choose to
purchase it while the online and print subscription was the same price, effectively none were
bought. However, OPTION B shifted choice share away from OPTION A allowing more people to
chose OPTION C, the more expensive subscription, generating more overall revenue.
6
A website owner can place additional emphasis on one piece of information over another
by changing its style. It is an easy way to make one piece of information stand out from other
pieces that are similar (Djamasbi et al., 2011). Affordances are visual clues in an object’s design
that suggest how one can use it (Robertson, 2016). For instance, the 3D style of some buttons
makes it clear they are meant to be clicked and these styled buttons have high affordance. On the
other hand, low affordance does not clearly indicate action and some examples include ghost
buttons or links which rely solely on their proximity with other content on the page for
comprehension (Robertson, 2016). Call to action (CTA) buttons should be designed using 3D
characteristics which include borders, shadows and bevels as these cues represent depth and
make it seem like a clickable button (Cebi, 2013). It is also important to have different hover
states such as fading, transparency or increasing in size to indicate action being taken (Cebi, 2013).
When a stimulus subtly changes in the environment, for example the hover state, a visitor
develops a stronger affinity toward that stimulus, invoking action (Shapiro, Nielsen, 2013).
Common website styles include the E, F and Z patterns (Castagnos & Pu, 2010). The Z-Pattern is
applicable to almost any web interface since it addresses the core website requirements such as
hierarchy, branding, and calls to action while the F pattern is for text heavy sites such as a search
engine page (Nielsen, 2006). The Z-pattern is perfect for interfaces where simplicity is a priority
and the call to action is the main focal point. However, forcing a Z-pattern for a website with
complex content may not work as well as the F-pattern, but a Z-pattern can help bring a sense of
order to simpler layouts and increase conversion rates (Castagnos & Pu, 2010).
Lastly, of all the visual hierarchy methods, colour is the most impactful on website design.
Colours are a powerful communication tool and can be used to invoke action, influence one’s
mood, or even cause physiological reactions (Singh, 2006). Experts have found that although
colour can have an influence on our feelings and actions, these effects are due to personal,
cultural, and situational factors. Up to 85% of consumers base buying decisions on colour (Singh,
2006). Given the impact of colour, one would expect colour psychology to be a heavily studied
7
area, but researchers claim that little theoretical or empirical work has been conducted on colour
psychology and the work that has been done has been driven mostly by practical concerns, not
There are two areas that are relevant to the understanding of the effects of colour in
e-commerce. The first relates to the effects of colour on purchase-related behavior, and the
second relates to the effects of colour in website design (Elliot, 2015). All colour effects
undoubtedly depend on certain conditions – culture, gender, age, type of task, variant of colour,
etc. – and understanding these conditions will represent an important marker of maturity for this
Colour is vital in creating effective designs that appeal to consumers. The human eye is
able to see over 7 million colours (Aves & Aves, 1994). These colours are originating from the basic
blocks of the primary, secondary, and tertiary colours. The primary colours consists of the three
basic hues red, blue, and yellow. Tints, shades and tones are created when white, black and grey
are respectively added to a pure colour. These tints, shades and tones help create the colour
wheel (Levkowitz & Herman, 1993). Neutrals are subtle shades from the palest colour range such
as beige or cream and are used for balancing vibrant or rich colours. There are eleven basic
universal colour words in the English language which have fundamental psychological properties
regardless of any shade, tone or tint. Each of these colours invoke positive or negative
psychological reactions which are dependent on the the colour combinations used (Wright, 2009).
According to the Munsell System, colour has three basic properties: hue, value, and
chroma (Fairchild, 2013). Hue is the colour name, value is the level of brightness and chroma is the
level of saturation. Variation in any or all of these properties can influence decision making,
cognition, or behavior, yet only hue is considered as the only theoretically viable option since it is
the most experimentally salient colour property (Fairchild, 2013). Value and chroma also
8
undoubtedly have implications for psychological functioning which yet need to be studied
(Kareklas, Brunel & Coulter, 2014). Studies have shown that brightness and saturation also have
substantially greater effects on emotions than hue (Rider, 2009). Colour perception is not only a
combination of value, chroma, and hue, but also of factors that are not taken into account, such as
the distance and angle the colour is seen, the amount and type of ambient light, and presence of
A study from the University of Toronto showed how people using Adobe Kuler preferred
simple colour combinations that relied on only 2 to 3 favorite colours (Donovan, Agarwala &
Hertzmann, 2011). Since each colour has a meaning that adds or takes away from a brand
message, a web audience prefers simplicity because it makes content easier to understand. Many
colour schemes. Monochromatic colour schemes use different variations of the same hue. Due to
its simplistic nature, monochromatic colour schemes are very useful in communicating simple
messages or even conveying a sophisticated brand (Rider, 2009). Analogous colour schemes use
similar hues in close proximity on the colour wheel. This scheme has been known to increase the
visual harmony of a design because of the similarity in hue (Rider, 2009). Triadic colour schemes
use three colours situated at a 120 degrees interval on the colour wheel. This works well since one
colour can be chosen for a background and the remaining two can be chosen for content due to
the contrast. Complementary colour schemes use colours on opposite sides of the colour wheel
and have high contrast. A complementary colour is mainly used to gather attention towards an
element, for example, a call to action (CTA) button. By choosing a colour that contrasts with the
surrounding content, a CTA button will naturally guide attention toward it (Petrie et al., 2004).
When it comes to invoking action, It is not that a red button or green button that converts better,
but a contrasting button colour on a website. This is because our eyes are naturally drawn toward
stimuli that are visually salient (Parkhurst et al., 2002). This can be accomplished by increasing the
visual saliency of a CTA button by choosing button colours that contrast with the rest of a page.
9
This contrast will naturally attract attention from visitors and increase their processing fluency
(Alter & Oppenheimer, 2009). Also, increasing the amount of whitespace increases processing
fluency and creates prominence and readability (Alter & Oppenheimer, 2009). This allows the act
of clicking a button to enter a visitor’s mind easily and generate a pleasant sensation in their brain
to make the interaction seem more appealing, and thus they will be more likely to engage with it.
There are many ways to track the changes of mood resulting from a difference in colour
through both the body and brain. The body sends out waves which consist of magnetic fields, also
known as a person’s aura, and the brain sends out waves which are essentially electrical currents
(Birren, 1984). When colours are seen, the brain tells the body, mainly the heart, how to react.
Blood pressure and breathing rate are the results of the brain telling the heart how to respond to
certain colours (Birren, 1984). One colour may speed up the heart rate, while another slows it
down. Apart from brain waves and auras, there are tests which anyone can take such as the
Luscher Test, which organizes nine colours based on one's choice and preference (Birren, 1984).
Colour Psychology
Science recognizes four psychological primary colours, based on the way that colour is
processed in the eye and the brain which are red, blue, yellow and green (Wright, 2009). These
four colours relate respectively to the physical, mental and emotional areas of psychology. Beyond
that, the other seven spectral hues have distinct psychological properties of their own. Although
the principles have long been accepted, more recent work demonstrates that colour perception
and colour preference are not a matter of response to one colour in isolation, but to all the
Wright in the early 1980’s. It applies to interior and product design, web design, uniforms,
packaging, corporate identity and branding. The “Colour Affects” system works on two distinct
levels (Wright, 2009). One is based on the psychological properties of each hue such as red, blue,
10
green etc. The other is the combinations of specific shades, tones and tints that achieve a balance
of good design and the desired psychological effect. The system has almost twenty years of
successful application behind it and major corporations such as Shell, Motorola, Procter & Gamble
and The Body Shop to name a few attest to its effectiveness, most notably in sales of their
There are three theories that shape our colour preferences. Evolution states that since
females were the gatherers, they developed the ability to identify red and yellow food sources
(Alexander, 2003). The Gender Schema states that from a young age, males are guided toward
blue, whereas females are guided toward pink (Alexander, 2003). The Ecological Valence theory
states that based on our experience, we attach positive emotions to certain colours (Palmer &
Schloss, 2010).
Studies have shown association between colours and emotions. They designated yellow,
orange, and blue as happy colours, and red, black and brown as sad colours (Cimbalo, Beck &
Sendziak, 1978). These findings also replicate across all age groups and had the same type of
sentiment associated with each colour (Cimbalo et al., 1978). Atmospherics such as sizes, shapes,
and colours help create attention, convey messages, and create feelings that might increase the
atmospheric cues that could have a positive influence on website users organismic states: the
websites information richness, its visual aspects such as colour, background patterns, fonts and its
social elements such as shopping agents, web-counters and online communities (Eroglu, Machleit
& Davis, 2001). The effects of such atmospherics have been demonstrated to influence emotional
Past experiences have an impact on how each colour is perceived (Palmer & Schloss,
2010). For example, the colour green can vary from being associated with wealth to an investor
and healthy vegetables to a farmer. The context of a colour is vital in how it is perceived (Schmidt,
11
Ruskell & Kohl, 2013). In a dating context, red creates feelings of passion and attraction. This is a
key reason why women find men to be more attractive in online dating if those men are wearing
red in their pictures. However, in the context of achievement, we associate red with failure due to
the frequent use of red pens in grading. This is also the reason people perform worse on
achievement tasks (e.g., IQ tests) after being exposed to the colour red (Schmidt et al., 2013).
Research proves that semantically congruent colours help process information faster (Kealy,
2000). It is important to differentiate elements that trigger an error by using the colour red or a
star and this can be seen when input fields are marked incorrect. Around 8% of males are
colorblind, so it is important to not convey meaning through colour alone (Chan, Goh, & Tan,
2014). Offering additional cues like an “X” or a star when things are incorrect are more important
Colour produces two reactions, an arousal reaction and an evaluative reaction. Arousal is a
physiological state and is characterized by higher adrenaline, blood pressure, and heart rate.
Multiple studies have shown that warm colours increase arousal (Crowley, 1993). An evaluative
reaction is a key way of determining whether a consumer likes a website’s colour scheme. Figure 1
shows a positive linear trend between evaluation and colour wavelength and that people tend to
12
Figure 1: Crowley’s "Two Dimensions” model - hypothesis regarding consumer response to colour (1993)
Colours are influential depending on the emotional and semantic meanings that are
associated with them (Kealy, 2000). A study was conducted to understand the association
between a type of product, hedonic or utilitarian, and its colour. Hedonic goods are desirable
objects purchased for luxury purposes that allow the consumer to feel pleasure, fun, and
enjoyment from buying the product (Dhar & Wertenbroch, 2000). On the other hand, utilitarian
goods are purchased for their practical use and are based on the consumer's needs (Dhar &
Wertenbroch, 2000). Research has proven that functional colours enhance utilitarian products and
social-sensory colours enhance hedonic products (Bottomley & Doyle, 2006). These findings
conclude that functional colours are gray, black, blue and green while the social-sensory colours
are red, yellow, pink and purple (Bottomley & Doyle, 2006). People develop a stronger affinity
toward products when colours are congruent with them (Palmer & Schloss, 2010). If the design of
a company’s website is complex or heavy on content, then reducing colour levels by shading and
13
tinting will increase content consumption. If their design is simple or light on content, then
increasing colour levels will increase content consumption (Levkowitz & Herman, 1993).
Colour research in the design of websites relates mostly to website usability. The usability
stream of research focuses primarily on readability and legibility of the site. Website designers
indicate that colour is a key characteristic in improving the segmentation of the information
displayed on the screen (Tan, Tung & Xu, 2009). Other researchers studied the readability of
websites with various foreground and background colour combinations. They primarily used
response time as a measure of readability and found that a contrast between background and
foreground colours significantly affect response time (Hill & Schraff, 1997). It is considered a
curvilinear relationship, with maximum readability for medium contrast. They also found that the
direction of the contrast dark on light or light on dark made a difference, with dark text on a
Colour Symbolism
There have been numerous attempts to classify individual colours to consumer responses,
feelings. However they still play a fairly substantial role in purchasing and branding. Research has
shown a connection between the use of colours and customers' perceptions of a brand's
personality (Aaker, 1997). Colours represent brands such as Facebook’s distinct blue, Coca-cola’s
red, Shell’s yellow, or Cadbury’s purple. The high importance placed on colour by website
designers and manufacturers show they understand that colour has strong emotional loading and
is able to prompt a swifter response than either the written work or imagery (Tutssel, 2000).
Most marketers use colour to convey the personality of their brand. There are 5 key
Sophistication (Aaker, 1997). An experiment was conducted to examine how colour affects
consumer perceptions by analyzing how they react to different coloured logos (Labrecque &
14
Milne, 2012). A summary of their findings indicate what emotion each colour is associated with
(Labrecque & Milne, 2012). The colour red predominantly represents love, power, strength, anger,
has an arousal effect, promotes anxiety, excitation and is associated with fear. The colour orange
is considered energetic, fun, confident and is used to grab attention. The colour yellow represents
happiness, friendliness and optimism. Using yellow too much can make a consumer more critical
and anxious, so finding the right balance to use on a website is important. The colour green
represents balance and harmony and is associated with the environment, life and the concept of
growth. Blue is the most liked colour across the world and represents trust, competence and
reliability. It decreases arousals and causes one to relax but can also be perceived as cold,
unfriendly and sad. The colour purple represents loyalty, luxury, mystery and magic. Using it too
much can cause introspection and be distracting. Pink is a soft, feminine, gentle colour that is
soothing. Using it too much can be draining, show lack of power and even be immature. Brown
represents the outdoors and the concept of ruggedness. It can also bring feelings of loneliness and
isolation and is considered a boring colour. The colour black represents sophistication, elegance
and seriousness but on the other hand is associated with negativity and death as well. Black is a
great colour to use for high contrast and easy legibility. The colour white represents purity,
cleanliness, equality, peace and innocence. It is a great colour for simplicity but using it too much
can cause feelings of isolation and emptiness. These findings are commonly accepted, but it also
needs to be understood that these associations are made with the hue and neglect value and
The difference between colour symbolism and colour psychology is an important one.
Colour symbolism is a conditional response since it derives from our conscious associations
(Wright, 2009). It is focused on the different beliefs about colour that culture, religion or history
determine. This is an entirely different process from colour psychology, which is what happens on
15
an unconscious level (Wright, 2009). For instance, the colour purple symbolizes royalty, but in
In a survey, people were asked to choose the colour they would first associate with
particular words such as Trust, Security, Speed, Cheapness, High-Quality, High Tech, Reliability,
Courage, Fear and Fun (Hallock, 2003). A summary of the findings are shown below in Figure 2.
Figure 2: Result of Hallock’s survey in a graphical format to show the percent of participants association of
The results indicate that participants commonly associate the colour blue with words like Trust,
Security and Reliability while yellow and orange are seen as colours which represent the word
Cheap. The colours red and black both represent Fear, but also have other associations since red
also represents Speed, while black on the other hand is associated with High Technology and
16
Recommendations for the use of colour in websites have emerged based on
commonsensical arguments such as colour should be balanced, low saturation pastel colours
should be used for backgrounds, and designs should not use more than 2 or 3 fully saturated
intense colours, but these claims need more evidence (Sutcliffe, 2004). The role of colour in
website design needs to be better understood, both from an academic and a practical perspective.
From the academic standpoint, there is a need for theoretical development of issues related to
colour and from the practical perspective, it is necessary to develop recommendations for the use
of colours in websites.
While the perception of different colours is somewhat subjective, there are some
psychological effects that have a universal meaning. Colours in the red area of the colour
spectrum are known as warm colours and include red, orange and yellow. These warm colours are
known to invoke emotions ranging from feelings of warmth and comfort to feelings of anger and
hostility. Colours on the blue side of the spectrum are known as cool colours and include blue,
purple and green. These colours are often described as calm, but can also bring feelings of sadness
or indifference.
Colour has the ability to subconsciously capture a human’s attention and is used to trigger
behavioral responses which range from encouraging the sale of a product, sharing content, or
subscribing to a blog (Eroglu et al., Machleit & Davis, 2001). To achieve that goal, colours that
increase arousal are effective, such as warm colours with high saturation and low brightness
(Bakhshi & Gilbert, 2015). Since these colours trigger impulsivity, they tend to increase behavioral
responses. People are also more likely to share images that contain warm colours and less likely to
share images that contain cool colours. The heightened activation of the brain may be the factor
17
Warm colours, such as red and yellow, increase arousal more than cool colours, such as
green and blue (Birren, 1984). Physiologically, warm colours tend to exhibit excitatory effects
such as higher blood pressure, higher respiratory rates, rapid eye blink frequency, and greater
hand tremor etc. Similarly, from a psychological standpoint, warm colours are associated with
elated mood states, activity, vitality, anxiety etc. while cool colours have an opposite effect
Cool colours decrease arousals and encourage shopping behaviors, while warm colours
increase arousals and lead to impulse buying (Mattila & Wirtz, 2008). Arousal increases impulsivity
because it inhibits cortical functioning (Walley & Weiden, 1973). People spend much less time
rationalizing or debating and are more likely to act now. Overall, research indicates that cooler
colours are reflective of increased levels of shopping as it is demonstrated that blue has a calming
effect and decreases perceived wait times (Gorn, Chattopadhyay, Sengupta & Tripathi, 2004).
processing which is a quick and simple-minded analysis. The other is called systematic processing
which is a thorough and rational analysis of information. If a website owner has weak arguments,
they would use heuristic processing. This requires using warm colours to increase arousal and
distract visitors by decreasing their cortical functioning in order to generate action quickly
(Bakhshi & Gilbert, 2015). If a website owner has strong arguments, they would want people to
use systematic processing to spend more time understanding the information. They would use
cool colours to decrease their arousal and allow them to take their time and understand the
content easily (Bakhshi & Gilbert, 2015). In situations where consumers compete with each other
There have been studies on the emotional responses to cyber-banking interfaces which
include colour as a factor (Kim & Moon, 1998). In general, they reported that visual design factors
18
of the customer interface could be used to induce a specific emotion. They also showed that
cooler colour tones correlated with greater trustworthiness. They conducted an experiment by
creating two websites with identical elements but differed in colour; blue and green. The results
indicated that 65% of subjects preferred the blue website over the green website (Kim & Moon,
1998). The majority of studies done prior to this compared websites with distant colours on the
spectrum, but this study tested adjacent spectral colours. A website colour is an important
determinant of store choice, even when the colours are close to each other on the spectral range
(Lee & Rao, 2010). Findings such as these cannot be generalized since research has shown that
Different colours can carry unique values in certain cultures to invoke a specific emotion
(Elliot, 2015). For example, many Western European countries see the colour white to represent
purity and innocence, but on the other hemisphere, it is seen as a symbol of mourning. In the
West, families dress in black for funerals and throughout time have unconsciously recognized
black as an appropriate colour for mourning (Birren, 1984). In Asia, orange is a positive, spiritually
enlightened, and life-affirming colour, while in the United States, orange symbolizes road hazards,
traffic delays, and fast-food restaurants (De Bortoli & Maroto, 2001). The Ndembo in Zambia do
not even acknowledge orange as a colour (Tektronix, 1988). In a cross-cultural study, it is found
that blue was the most preferred colour across cultures (Wiegersma & Van Der Elst, 1988).
Another example showed that the colour blue is voted as the most liked colour in Western
countries, especially America but in East Asia is considered to be a cold colour and carries
colours and their interpretation in any particular geographic area (Singh, 2006). Researching
19
culture-specific colours before choosing to either distribute their product or create marketing
campaigns targeted toward specific ethnicities is essential. Colour choice can backfire if it
Males and females are impacted by colour in different ways. A study found that both
genders favour the colour blue with 57% of men and 35% of women preferring it over other
colours, though it is more heavily favored by men (Hallock, 2003). Men dislike brown the most
while women dislike orange the most. The main reason these colours are disliked was because
they are seen as “cheap” (Hallock, 2003). Women prefer tints while men prefer pure or shaded
colours (Hallock, 2003). Orange and yellow grow increasingly disliked as both genders get older
(Hallock, 2003). Men are also more tolerant of gray, white or black than women (Khouw, 2002).
The average female preference is highest in the reddish-purple region, and falls rapidly in the
greenish-yellow region, whereas the male preference is primarily in the blue-green region
(Hurlbert & Ling, 2007). Males also prefer high value and high saturation, contrarily females prefer
Men are more likely to buy products when prices are displayed in red as it becomes a focal
point of attention, thus the only information they use to evaluate their purchase (Puccinelli,
Chandrashekaran, Grewal & Suri, 2013). They also believe innately that red prices are associated
with savings. Generally, women are able to see more colours than men and this means that they
are more aware of slight colour differences within a colour range (Copeland, 2013). When
choosing a colour for an audience consisting of primarily women one must carefully choose
colours that are not too raucous. If one is attempting to sell a luxury product, they will want to
avoid colours that are seen as cheap. Taking into account how colour plays a significant role in
one’s purchasing behaviour, website owners should design their websites to suit their traffic.
20
In conclusion, the psychology of web design is based on the overlap of design principles
and human behavioral factors. Over the last decade, e-commerce has increased dramatically and
so has the importance of understanding effective web design practices for marketers, designers
and researchers. It appears that the next evolution for design is geared toward small screens and
sites that are responsive (Cyr, 2014). With this growing trend of having to capture a user's
attention is a short period of time, design has become integral to captivate users. The quest for
further knowledge pertaining to how culture, gender and age impact technology use and
satisfaction heavily implies that these relationships are dynamic and subject to constant change
(Simon, 2001). An enhanced understanding of subtle details related to specific user groups will
eventually fulfill the expectations that services offered will be relevant to each group. Researchers
expect that websites with a diverse set of users will cater to their target groups with designs which
resonate differently for each and will ultimately create a more personalized experience for all
21
References
Aaker, J. L. (1997). Dimensions of Brand Personality. SSRN Electronic Journal. 34(3), 347-356.
Alpert, J.I. and Alpert, M.I. (1986), The Effects of Music in Advertising on Mood and Purchase
Intentions. University of Texas, Austin, TX.
Alter, A. L., & Oppenheimer, D. M. (2009). Uniting the Tribes of Fluency to Form a Metacognitive
Nation. Personality and Social Psychology Review, 13(3), 219-235.
Armel, K., Beaumel, A., Rangel, A. (2008). Biasing simple choices by manipulating relative visual
attention. Judgment and Decision Making, 3(5), 396-403.
Atalay, A. S., Bodur, H. O., & Rasolofoarison, D. (2012). Shining in the Center: Central Gaze Cascade
Effect on Product Choice. Journal of Consumer Research, 39(4), 848-866.
Aves, M., & Aves, J. (1994). Interior designers’ showcase of colour. Gloucester, MA: Rockport
Distributed by AIA Press.
Bagchi, R., & Cheema, A. (2013). The Effect of Red Background Color on Willingness-to-Pay: The
Moderating Role of Selling Mechanism. Journal of Consumer Research, 39(5), 947-960.
Bakhshi, S., & Gilbert, E. (2015). Red, Purple and Pink: The Colors of Diffusion on Pinterest. Plos
One, 10(2).
Bellizzi, J.A. and Hite, R. E. (1992). "Environmental Colour, Consumer Feelings, and Purchase
Likelihood," Psychology & Marketing, 9, 347-363.
Birren, F. (1984). Colour and Human Response. New York: Van Nostrand Reinhold Company.
Bornstein, R. F., & D'agostino, P. R. (1992). Stimulus recognition and the mere exposure effect.
Journal of Personality and Social Psychology, 63(4), 545-552.
Bottomley, P. A. (2006). The interactive effects of colors and products on perceptions of brand
logo appropriateness. Marketing Theory, 6(1), 63-83.
Castagnos, S., & Pu, P. (2010). Consumer decision patterns through eye gaze analysis. Eye Gaze in
Intelligent Human Machine Interaction Proceedings.
22
Cebi, S. (2013). Determining importance degrees of website design parameters based on
interactions and types of websites. Decision Support Systems, 54(2), 1030-1043.
Chaiken, S. (1980). Heuristic versus systematic information processing and the use of source
versus message cues in persuasion. Journal of Personality and Social Psychology, 39(5), 752-766.
Chan, X. B., Goh, S. M., & Tan, N. C. (2014). Subjects with colour vision deficiency in the
community: What do primary care physicians need to know? Asia Pacific Family Medicine, 13(1).
Cimbalo, R.S., Beck, K.L. and Sendziak, D.S. (1978), Emotionally toned pictures and colour selection
for children and college students, Journal of Genetic Psychology, 33(2), 303-4.
Cober, R. T., Brown, D. J., Keeping, L. M., & Levy, P. E. (2004). Recruitment on the Net: How Do
Organizational Web Site Characteristics Influence Applicant Attraction? Journal of Management,
30(5), 623-646.
Copeland, L. (2013, March). Where Men See White, Women See Ecru. Smithsonian Magazine.
Couper, M. P., Traugott, M. W., & Lamias, M. J. (2001). Web Survey Design and Administration.
Public Opinion Quarterly, 65(2), 230-253.
Crowley, A. E. (1993). The two-dimensional impact of color on shopping. Marketing Letters, 4(1),
59-69.
Cyr, D. (2014). Return visits: A review of how Web site design can engender visitor loyalty. Journal
of Information Technology, 29(1), 1-26.
De Bortoli, M., & Maroto, J. (2001). Colours across culture: Translating colours in interactive
marketing communications. European Languages and the Implementation of Communication and
Information Technologies Conference Proceedings, 3-4. UK: Paisley University Language Press.
Demangeot, C., & Broderick, A. J. (2007). Conceptualising consumer behaviour in online shopping
environments. International Journal of Retail & Distribution Management, 35(11), 878-894.
Djamasbi, S., Siegel, M., & Tullis, T. (2011). Visual Hierarchy and Viewing Behavior: An Eye Tracking
Study. Human-Computer Interaction. Design and Development Approaches in Computer Science,
331-340.
Djamasbi, S., Siegel, M. and Tullis, T. (2012). Faces and Viewing Behavior: An exploratory
investigation, AIS Transactions on Human-Computer Interaction, 4(3), 190–211.
Dodonova, A. (2009). An experimental test of anchoring effect. Applied Economics Letters, 16(7),
677-678.
23
Elder, R. S., & Krishna, A. (2012). The “Visual Depiction Effect” in Advertising: Facilitating Embodied
Mental Simulation through Product Orientation. Journal of Consumer Research, 38(6), 988-1003.
Elliot, A. J., & Maier, M. A. (2007). Colour and psychological functioning. Current Directions in
Psychological Science, 16(5), 250-254.
Emery, N. (2000). The eyes have it: The neuroethology, function and evolution of social gaze.
Neuroscience & Biobehavioral Reviews, 24(6), 581-604.
Herpen, E., Pieters, R., and Zeelenberg, M. (2005). How Product Scarcity Impacts on Choice: Snob
and Bandwagon Effects. Association for Consumer Research, 32, 623-624.
Eroglu, S. A., Machleit, K. A., & Davis, L. M. (2001). Atmospheric qualities of online retailing: A
conceptual model and implications. Journal of Business Research, 54, 177–184.
Fairchild, M. D. (2013). Colour Appearance Models, 3rd Edn. New York, NY: Wiley Press
Fleming, J., & Koman, R. (1998). Web navigation: Designing the user experience. Beijing: O'Reilly.
Fogg, B. (2009). A behavior model for persuasive design. International Conference on Persuasive
Technology Proceedings.
Gorn, G.J., A. Chattopadhyay, J. Sengupta and S. Tripathi. (2004). Waiting for the Web : How
Screen Colour Affects Time Perception. Journal of Marketing Research, 41(2), 215-225.
Graham, L. (2008). Gestalt Theory in Interactive Media Design. Journal of Humanities and Social
Sciences, 2(1).
Hill, A., Scharff, L. V. (1997). Readability of screen displays with various foreground/background
color combinations, font styles, and font types. Proceedings of the Eleventh National Conference
on Undergraduate Research, 2, 742-746.
Hu, N., Liu, L., & Zhang, J. J. (2008). Do online reviews affect product sales? The role of reviewer
characteristics and temporal effects. Information Technology and Management, 9(3), 201-214.
Hurlbert, A. C., & Ling, Y. (2007). Biological components of sex differences in color preference.
Current Biology, 17(16).
24
Josephson, S. & Holmes, M. E. (2002). Visual attention to repeated images on the World-Wide
Web: Another look at scanpath theory. Behavior Research Methods, Instruments, & Computers,
34(4), 539-548.
Kareklas, I., Brunel, F. F., and Coulter, R. A. (2014). Judgment is not colour blind: the impact of
automatic colour preference on product advertising preferences. Journal of Consumer Psychology,
24, 87–95.
Kealy, W. A. (2000). The role of semantic congruency in the design of graphic organizers. Quarterly
Review of Distance Education, 1(3), 205-14.
Khouw, N. (2002), The meaning of colour for gender. Colours Matters. – Retrieved from:
www.colourmatters.com
Kiang, M.Y. and R.T. Chi. (2001). A Framework for Analyzing the Potential Benefits of Internet
Marketing, Journal of Electronic Commerce Research, 2(4), 157-163.
Kumar, R. L., Smith, M. A., & Bannerjee, S. (2004). User interface features influencing overall ease
of use and personalization. Information & Management, 41, 289–302.
Labrecque, L.I. & Milne, (2012). Exciting red and competent blue: the importance of color in
marketing. G.R. Journal of the Academic Marketing Science, 40, 711.
Levin, I. P., Schreiber, J., Lauriola, M., Gaeth, G. J. (2002). Tale of Two Pizzas: Building Up from a
Basic Product Versus Scaling Down from a Fully-Loaded Product. Marketing Letters, 13(4), 335.
Levkowitz, H., & Herman, G. (1993). GLHS: A Generalized Lightness, Hue, and Saturation Color
Model. CVGIP: Graphical Models and Image Processing, 55(4), 271-285.
Lin, J., Lu, Y., Wang, B., & Wei, K. K. (2011). The role of inter-channel trust transfer in establishing
mobile commerce trust. Electronic Commerce Research and Applications, 10(6), 615-625.
Lindgaard, G., Fernandes, G., Dudek, C., & Brown, J. (2006). Attention web designers: You have 50
milliseconds to make a good first impression! Behaviour & Information Technology, 25(2),
115-126.
Mattila. A. S., Wirtz J., (2008) The role of store environmental stimulation and social factors on
impulse purchasing, Journal of Services Marketing, 22(7), 562 - 567.
Mikellides, B. (2012). Colour psychology: The emotional effects of colour perception. Colour
Design, 105-128.
25
O'Donovan, P., Agarwala, A., & Hertzmann, A. (2011). Color compatibility from large datasets.
ACM Transactions on Graphics, 30(4).
Palmer, J. W. (2002). Web site usability, design, and performance metrics. Information Systems
Research, 13, 151–167.
Palmer, S. E., & Schloss, K. B. (2010). An ecological valence theory of human color preference.
Proceedings of the National Academy of Sciences, 107(19), 8877-8882.
Parkhurst, D., Law, K., & Niebur, E. (2002). Modeling the role of salience in the allocation of overt
visual attention. Vision Research, 42(1), 107-123.
Petrie, H., Hamilton, F., & King, N. (2004). Tension, what tension? Proceedings of the International
Cross-disciplinary Workshop on Web Accessibility - W4A, 13-18.
Puccinelli, N. M., Chandrashekaran, R., Grewal, D., & Suri, R. (2013). Are Men Seduced by Red? The
Effect of Red Versus Black Prices on Price Perceptions. Journal of Retailing, 89(2), 115-125.
Radeloff, D. J. (1990). Role Of Color In Perception Of Attractiveness. Perceptual and Motor Skills,
71(5), 151.
Ravi Dhar, Klaus Wertenbroch (2000) Consumer Choice Between Hedonic and Utilitarian Goods.
Journal of Marketing Research: February 2000, 37(1), 60-71.
Rider, R (2009). Color Psychology and Graphic Design Applications. Liberty University.
Rigas, D., & Ghandour, R. (2016). Communicating Product User Reviews and Ratings in Interfaces
for e-Commerce: A Multimodal Approach. HCI in Business, Government, and Organizations:
ECommerce and Innovation Lecture Notes in Computer Science, 82-93.
Robins, D., & Holmes, J. (2008). Aesthetics and credibility in web site design. Information
Processing & Management, 44(1), 386-399.
Rooderkerk, R. P., Heerde, H. J., & Bijmolt, T. H. (2011). Incorporating Context Effects Into a Choice
Model. Journal of Marketing Research, 48(4), 767-780.
Satyendra Singh, (2006). Impact of color on marketing, Management Decision, 44(6), 783 - 789
Schaik, P. and Ling, J. (2011). An Experimental Analysis of Experiential and Cognitive Variables in
Web Navigation. Human–Computer Interaction, 27(3), 199-234
Schmidt, D. R., Ruskell, T. G., & Kohl, P. B. (2013). Effect of paper color on students’ physics exam
performances. AIP Conference. Proceedings, 1513, 374.
26
Schmitt, B. H. (1995). Language and visual imagery: Issues of corporate identity in East Asia. The
Columbia Journal of World Business, 30(4), 28-36.
Shapiro, S. A., & Nielsen, J. H. (2013). What the Blind Eye Sees: Incidental Change Detection as a
Source of Perceptual Fluency. Journal of Consumer Research, 39(6), 1202-1218.
Sillence, E., Briggs, P., Fishwick, L., & Harris, P. (2004, April 25). Trust and mistrust of online health
sites. Proceedings of the 2004 Conference on Human Factors in Computing Systems, 663-670.
Sutcliffe, A. (2001). Heuristic Evaluation of Website Attractiveness and Usability. Lecture Notes in
Computer Science, Volume 2220, 183-198.
Tan, F.B., L.-L. Tung and Y. Xu, A Study of Web-Designers' Criteria for Effective
Business-to-Consumer (B2C) Websites Using the Repertory Grid Technique. Journal of Electronic
Commerce Research, 10(3), 155-177.
Tektronix (1988), The Color Connection, Catharine & Sons, Morton, IL.
Tuch, A. N., Bargas-Avila, J. A., & Opwis, K. (2010). Symmetry and aesthetics in website design: It’s
a man’s business. Computers in Human Behavior, 26(6), 1831-1837.
Tuch, A. N., Presslaber, E. E., Stöcklin, M., Opwis, K., & Bargas-Avila, J. A. (2012). The role of visual
complexity and prototypicality regarding first impression of websites: Working towards
understanding aesthetic judgments. International Journal of Human-Computer Studies, 70(11),
794-811.
Tutssel, G. (2000). But you can judge a brand by its colour. Brand Strategy, 8-9.
Veen, V. V., Krug, M. K., Schooler, J. W., & Carter, C. S. (2009). Neural activity predicts attitude
change in cognitive dissonance. Nature Neuroscience, 12(11), 1469-1474.
Verhagen, T., Boter, J., & Adelaar, T. (2010). The Effect of Product Type on Consumer Preferences
for Website Content Elements: An Empirical Study. Journal of Computer-Mediated
Communication, 16(1), 139-170.
Walley, R. E., & Weiden, T. D. (1973). Lateral inhibition and cognitive masking: A
neuropsychological theory of attention. Psychological Review, 80(4), 284-302.
Wang, S. A. (2003). Customer Testimonials and News Clips as Contextual Cues in the Consumer
Cognitive Processing of Online Shopping. Journal of Promotion Management, 9(1-2), 145-162.
27
View publication stats
Wiegersma, S., & Elst, G. V. (1988). "Blue Phenomenon": Spontaneity Or Preference? Perceptual
and Motor Skills, 66(1), 308-310.
Wright A. (2009). The Colour Affects System of Colour Psychology. AIC Quadrennial Congress.
Zhang, P., & Von Dran, G. M. (2000). Satisfiers and dissatisfiers: A two-factor model for Website
design and evaluation. Journal of the American Society for Information Science, 51, 1253–1268.
Zhang, T., & Zhang, D. (2007). Agent-based simulation of consumer purchase decision-making and
the decoy effect. Journal of Business Research, 60(8), 912-922.
28