Enhancing the Mobile User Experience Through Colored Contrasts

Introduction

In 1940, during the Second World War, the Cambridge zoologist Hugh Cott published a textbook about camouflage, warning coloration and mimicry. He introduced the notion of disruptive coloration, which was defined as contingent on background matching, suggesting

As stated by Schaefer & Stobbe (2006), disruptive coloration and background matching are both techniques of camouflage that are often quoted as textbook examples of natural selection. For example, the experiments conducted by Cuthill et al. (2005) illustrated that artificially colored moths, which had been designed to match their background of oak trunks in terms of color and brightness, survived better if they sported highly contrasting patterns on the edge of their wings compared to moths with the same patterns inside their wings. Furthermore, this phenomenon of contrast concerns all natural species in various fields and even human beings, such as soldiers in the army or surgeons in their operating room.

For example, military camouflage patterns were worn in the army to protect personnel and equipment from observation by enemy forces. Green uniforms, especially, and later other drab colors were used depending on the field of war (in Vietnam khaki green colored uniforms were favored, whereas in Irak khaki yellow was privileged). Surgeons operate in completely green or blue operating rooms to allow them to focus on what is red, namely blood and organs. This can be explained by the physiology of the human eye, notably the retina, which is lined with photoreceptor cells known as rods and cones. The rods are stimulated by dim light. In parallel, cones run “at full throttle” in normal brightness. Because human beings have three types of cones with different levels of sensitiveness to red, green and blue - red-sensitive cones are the most numerous, followed by the green-sensitive, and finally the blue-sensitive cones - the red color captures the surgeon’s attention more easily than the other colors. Thus, having an operating room with a dominant green or blue color allows a surgeon’s eyes to focus on the red color of blood and therefore on the surgery itself. The same question of contrast occurs on a webpage such as an e-commerce webpage, enabling users to read more or less easily, thanks to a properly chosen contrast ratio between the foreground and background colors.

“A frustrating experience on a website hurts my opinion of the brand overall” says Miller (2012). The author adds that many customers of a brand are disappointed in the company itself if the mobile experience doesn’t meet their expectations. The mobile experience or “Mobile User Experience” (MUE) refers to the perception users have of a mobile product or service, such as an app, a social media or a website, for example an e-commerce website. This perception mainly leans on the sense of sight. The principal variable among the viewable features of the Cascade Style Sheet (CSS) used to write formatting instructions (rules) for websites is color. Indeed most of the information available on a website comes from what is viewable: in fact, 80% of the information processed by an Internet user’s brain results from sight (Mattelart, 1996), making color the main variable to take into account in research on consumer behavior when using a handled device for shopping purposes. Bearing in mind that the background color is the first factor to become apparent when the download of a webpage is in progress (Gorn et al., 2004), thinking about colors to improve the MUE and leverage the benefits of companies is fundamental for the Return on Investment (ROI) of an organization. Nevertheless, attention given to the background color itself and the various parameters that summarize it (such as hue, brightness and saturation) is not sufficient to improve the customer experience. In order to answer this question, the present research compares the design cues of a m-commerce website on its color contrast occurred between foreground and background. An experimental design was developed to investigate the effects of m-commerce website design on emotions and behavioral intention within the context of smartphone usage.