How Color Choice Influences the Functional Aspects of Website User Experience
As a salient part of a website or mobile application’s aesthetic, colors play a significant role in forming a user’s first impression of the website or app. However, the role of color in a user’s digital product experience is not limited to the aesthetic aspect – color can also contribute to many functional aspects of user experience, including ease of navigation, perceptions of website responsiveness, and aggressiveness of users' purchasing behavior. Consequently, color palette choice can impact a user’s interaction with a digital product in a variety of ways, which may impact the product’s adoption and profitability. This article summarizes some of the findings that elucidate the way that color can influence users’ experience with digital products.
More “relaxed” colors cause users to feel that a website loads more quickly
It’s well-established that “loading time affects your bottom line.” However, it’s not the loading time itself that influences your users to leave or stick around – it’s the user's perception of loading time that influences their decision. If two websites take the same amount of time to load, it’s possible for users to perceive one of the sites as having loaded more quickly than the other one did, based on aspects of the sites’ designs.
There’s a body of research indicating that a website’s color scheme contributes to perceptions of the website’s loading time. Gorn et al. (2004) found that website hue influenced perceived page loading speed, and that this effect was mediated by users' state of relaxation (colors influence people’s state of relaxation; we’ll discuss that in Part 2 of this article). Of the components of the Hue-Value-Chroma method of specifying color, Value (i.e. lightness) had a greater effect on users’ relaxation state and perceived website loading speed than did Hue or Chroma, supporting Gorn’s previous findings. Gorn’s team also found that website loading speed, in turn, can influence users’ willingness to recommend a website to others, and to their overall appraisal of the website.
The researchers recommend that web designers select Chroma and Value levels that promote relaxation:
In terms of specific levels to choose, our research provides some grounds to believe that higher levels of value and lower levels of chroma are, in general, associated with greater feelings of relaxation, and should thus produce quicker perceived downloads... In terms of hue... the results point to the potential effectiveness of blue (rather than red or yellow) background screen color in inducting feelings of relaxation and reducing the perceived download time. As has blue, green has been found to elicit feelings of relaxation and thus might be considered as well...”
The takeaway: Color choices may influence users’ perceptions of a website’s loading time. Users who perceive a lower loading time may be less likely to be frustrated with their experience with a website.
Colors can modulate the aggressiveness of buying behavior
In humans, the color red is linked to competitiveness and dominant behavior, and thus, may be linked to behaviors that may be characterized as aggressive. In turn, aggressiveness can manifest itself in a number of online situations, including those where purchasing decisions may be made. Bagchi and Cheema (2013), hypothesizing that through aggression, color may influence willingness to pay for products online, examined customers’ online purchasing behavior in the presence of red vs. blue backgrounds. The researchers believed that greater levels of aggression, induced by the presence of the color red, would increase competitiveness in auction environments; this, in turn, would increase willingness to pay, resulting in higher auction bids.
Bagchi and Cheema also studied the effects of color-mediated aggression in fixed-price situations (where the price cannot be changed) and in negotiations, where the buyer has the opportunity to bargain-down the price. They expected that in negotiations, greater aggression should cause people to seek the best possible deal, which may result in seeking lower prices. Similarly, in fixed price environments, aggression was expected to reduce willingness to pay, because in the fixed-price case, similar to negotiations, the buyer competes against the seller.
- Auction: red color -> increased aggressiveness/competitiveness -> higher bids
- Negotiation: red color -> increased aggressiveness/competitiveness -> more haggling (lower prices)
- Fixed price: red color -> increased aggressiveness/competitiveness -> lower prices
A set of experiments conducted by Bagchi and Cheema confirmed their expectations. The researchers present the following advice to both brick-and-mortar and online retailers:
... in situations in which consumers compete with each other to buy a scarce or a limited-edition product, firms may increase consumers’ willingness-to-pay by exposure to red versus blue backgrounds. By contrast, in situations in which a product is readily available and the consumer competes with the seller to get a lower price through extended price search or through haggling, consumers’ willingness-to-pay may be enhanced via exposure to blue versus red color backgrounds.
The takeaway: color influences emotion, and emotion influences behavior. By modifying the color scheme of their website, developers can influence their users’ mood in subtle way, and can modulate customers’ willingness to buy a product.
Stay tuned for Part 2 of our discussion on color's influence on the functional aspects of websites' user experience.