BA THESIS IN INFORMATICS
15 POINTS Spring term 2017 Department of Health and Society Design and Computer Science Digital Design
Hue combinations in web design for Swedish and Thai users
Guidelines for combining color hues onscreen for Swedish and Thai users in the context of designing web sites
Hue combinations in web design for Swedish and Thai users
Guidelines for combining color hues onscreen for Swedish and Thai users in the context of designing web sites
Author: Vidal Ruse
Advisor: Montathar Faraon Examiner: Kerstin Ådahl
Abstract
Users can assess the visual appeal of a web page within 50 milliseconds and color is the first thing noticed onscreen. That directly influences user perception of the web site, and choosing appealing color combinations is therefore crucial for successful web design. Recent scientific research has identified which individual colors are culturally preferred in web design in different countries but there is no similar research on hue combinations. Currently no effective, scientifically based guidelines on combining hues for web designers exist either, since recent research by Ou et al and Szabo et al, among others, proves the classic color harmonies invalid. Therefore this study aims to identify guidelines for culturally appropriate hue combination in context of web design. The study is limited to culturally appropriate combining of hues in Thai and Swedish web design.
Keywords: hue combinations; color onscreen; Thai design; Swedish design; web design; culturally appropriate color use
TABLE OF CONTENTS
1. Introduction 3
1.1. Background and Informatics as the discipline of this study 4
1.2. Problem statement 6
1.3. Research goal 7
1.4. Research question 8
1.5. Delimitations 8
1.6. Definitions 8
2. Literature review 9
2.1. Colors 9
2.2. Cultural differences in color perception and preference 10
2.3. Culturally appropriate color use in web design 12
2.4. Search words 13
3. Method 13
3.1. Participants 14
3.2. Materials 14
3.3. Procedure 17
3.4. Ethical considerations 19
4. Results and analysis 19
4.1. Large data sets from Thai and Swedish websites 19
4.2. Guidelines for hue combinations for Thai and Swedish web design 21
4.3. User survey results 22
4.4. Findings from the user survey 23
5. Discussion 25
5.1. Discussion of method 25
5.2. Discussion of results 27
6. Future work 31
7. Conclusion 31
References 33
APPENDIX A. 38
APPENDIX B. 44
APPENDIX C. 46
1. Introduction
1.1. Background and Informatics as the discipline of this study
Bo Dahlbom (1996) describes informatics as “a theory and design oriented study of information technology use ”. Digital designers use information technology in order to design digital artifacts - which in their turn constitute information technology, - and the users use these artifacts. Web designers use information technology to combine colors in order to produce digital artifacts - such as websites - for users to use.
Knowledge about color plays an important role in informatics as further indicated by the established Erasmus Mundus Master program in Color in Informatics and Media Technology. It is interdisciplinary and covers “color, photonics, computer vision and imaging science, computer science and multimedia technology” (Trémeau et al 2011).
The absolute majority of websites have color, and the color influences the users (Bergström 2009:256) that perceive these digital artifacts. Color is the first thing noticed onscreen, in an app or on a website, even before the users see what language is being used, or start reading the message (De Bortoli & Maroto 2001).
Based on three studies that were conducted to identify how long does it take for users to form an opinion about the visual appeal of a web page, it was determined that the visual appeal can be assessed in 50 milliseconds (Lindgaard et al. 2006). Reinecke et al (2013) emphasizes that the initial impression the users get within a short moment of viewing the website later influences their opinion about how usable or trustworthy the site is, and attempted to predict this initial impression based on website’s colorfulness. During further research Reinecke & Gajos (2014) identified significant effect of colorfulness on appeal along with the finding that “preference for different levels of colorfulness is highly influenced by a person’s country of residence.” Reinecke & Gajos (2014) had a goal to improve the information technology so that web designers could benefit from their findings in order to design more appealing websites for their target audiences.
June Kaminski, PhD(c), an authority in Nursing Informatics, also notes that color is one of the first impressions users receive about a web site, and argues that research shows that people subconsciously make a judgement about an environment or artifact in first 90 seconds and about 62-90% of this assessment is based on color (Kaminski 2016). The body of research allows to conclude that color directly influences user perception of the website. Studying the color use in digital artifacts - websites - can therefore add to the knowledge about color which leads to an improvement of information technology use when designing websites.
Dahlbom (1996:42) emphasizes that the interest in information technology use in informatics is design oriented. “We are interested in the use of technology because we are interested in changing and improving that use,” he adds. Therefore it can be said that informatics strives to improve the use of information technology while maintaining focus on design. Pelle Ehn (1995) even argues that informatics can be seen as a design discipline.
An analysis of graphic design and web design forums such as designerstalk.com, webdesignforums.net, as well as design groups on Facebook and LinkedIn reveals that the designers either use the classic color harmonies such as complementary or analogous, or “follow their gut” (B 2014) when combining colors for use onscreen.
Looking closer into the design discussions in the aforementioned forums, a clear pattern emerges in which designers generally do not know about the recent research in color, and can be confused about what the best practice of combining colors would be. As an example of this existing problem, one of the forum users states: “ One good indication of how arguable this all is, and of how much it depends what you are describing and for what purpose: not even the "standard" RGB hue wheel has 100% support among practitioners such as visual artists and designers” and “the multiplicity of attempts at [color] system is actually a truer and a more useful outcome, IMO [in my opinion] - than if there existed only one approved system which had defeated all others, and to which everybody gave complete unquestioning credence. Who SAYS a particular purple is the complementary of a particular yellow?” (richardplondon 2016). This indicates that the present use of information technology with focus on design concerning color combinations needs improvement.
Dahlbom (1996:37) writes that the information society is now turning into a communication and media society. In such society, the existing organizations, businesses, and now with the emerging of Web 2.0 individuals as well would benefit greatly from informed use of color combinations in their communication with their target audiences, such as guidelines for culturally appropriate color combinations in the websites targeted for their users.
Recent research has established guidelines for combining colors concerning user preference for two characteristics of color - chroma and lightness (Ou & Luo 2006; Szabo et al. 2010; Camgöz et al. 2002), but not concerning the third - hue. The classic color harmonies that are still the most used practically in order to combine colors are proven to be invalid by the recent color research by Ou & Luo (2006), Szabo et al. (2010), and Camgöz et al. (2002). Furthermore, both Ou and Szabo’s color harmony models failed to predict the results in the research of color harmony of juice packaging (Wei et al 2015), which means that even these models for combining color aren’t optimal. Therefore all abovementioned research leads to a conclusion that no effective scientifically proven framework for combining hues has been identified at the moment.
There is no consensus in recent research concerning which color combinations users prefer based on hue difference. However, scientific evidence (O’Donovan et al. 2011;
Ruse 2015) exists on the grounds of which it is possible to consider that the preference for hue combinations might be individual and rotationally-invariant about the color wheel.
To improve web designers’ use of information technology with focus on design when combining colors, which in its turn translates into an improved user experience when using a website, it would be necessary to identify guidelines on how to combine hues,
since no such effective, scientifically proven guidelines exist at the moment. The color combinations including blue having higher preference (Ruse 2015) can indicate that the preference for color combinations might be based on single hue preference, since blue is the most preferred single color (Camgöz et al. 2002:204; Blanchard & Kabene 2010:325).
It can also indicate that hue combinations might be individual. In such a case it is harder to find a scientific base on grounds of which it would be possible to identify guidelines for combining hues. Yet, if the preference for hue combinations would be individual, individuals belong to different cultural backgrounds. Researching preferences for color combinations which are based on the individual’s cultural background could lead to a possibility to identify such guidelines.
Goldkuhl (1996) states that informatics doesn’t study people in general, but people in specific roles related to the use of information technology, primarily the roles of system developers and users. For the purpose of this study web designers would assume the role of developers and the target audience of the websites - the role of users.
To sum it up , current research (Lindgaard et al. 2006; De Bortoli & Maroto 2001;
Kaminski 2016; Sillence et al 2004) proves that users can make a judgement about websites in 50 milliseconds - whether they will want to interact with a particular website or not, how do they experience it - and color plays a big part in it. Current research (Ou
& Luo 2006; Szabo et al. 2010; Camgöz et al. 2002; Wei et al 2015) shows no effective scientifically proven guidelines on combining hues has been identified. Researching cultural preferences for color combinations could lead to a possibility to identify such guidelines. Which individual colors are culturally preferred in web design in different countries has been researched already (Kondratova & Goldfarb 2006) but there is no similar research on hue combinations. Since color directly influences user perception of the website, informed guidelines for choosing hue combinations would be crucial for successful web design. Therefore, in order to improve the use of information technology with focus on design, it is a task of current importance to identify such guidelines in the context of web design.
1.2. Problem statement
The subject area of this study is culturally appropriate hue combinations in web design.
It is paramount for a web designer to design a website that is attractive to the target audience since the visual appeal of the website strongly influences users’ early decisions whether or not to reject the website and to leave (Sillence et al 2004). Color plays an important role in this appeal.
Recent research has established guidelines for combining colors concerning user preference for chroma and lightness (Ou & Luo 2006; Szabo et al. 2010; Camgöz et al.
2002), but not concerning hue. Since scientific evidence (O'Donovan et al. 2011:11; Ruse 2015) shows that user preference for hue combinations might be individual, the current thesis sets out to investigate a possibility to identify effective guidelines for combining
hues based on cultural differences in the context of web design, and to test the effects of these guidelines.
Research indicates that color perception (Jantathai et al. 2014) and color preference is different in different cultures (Blanchard & Kabene 2010:325). Therefore individual preferences for hue combinations might be influenced by the individual’s culture. Since culture is a factor that unites individuals, using this approach it could be possible to reveal hue combination preference patterns that would be helpful for web designers combining colors for users in different countries.
In my research I pay more attention to hue preference than harmony, based on preference being a more important factor for designers when choosing a color scheme that would be appealing to the target audience in the context of web design.
The thesis is delimited to identifying guidelines for designing websites for Swedish and Thai users.
1.3.
Research goal
The goal of this research is to research if there is a possibility to identify effective, culturally appropriate guidelines for combining hues for digital artifacts for onscreen use, namely web sites that are targeted for Swedish and Thai users.
There are certain steps to be implemented to reach the goal. First the necessary data has to be obtained to answer the question whether such guidelines can be identified or not. If it is possible, the next step is to identify what are these guidelines. Then the identified guidelines have to be tested to determine their effectivity. Without identifying the guidelines in order to test them it is impossible to answer the question concerning effectivity of the guidelines.
The research topic is of current importance since web designers would highly benefit from scientifically based guidelines on combining hues in web design.
With the globalization and increasing amount of designers working internationally, guidelines about how to combine colors for users of different cultural backgrounds are very useful. Moreover, Sweden and Thailand are countries with many ties between them.
These guidelines are intended to serve as support for web designers, but even other professionals could benefit from scientifically grounded guidelines for combining colors onscreen, since informatics is interdisciplinary. The findings of this study can as well contribute in estimating whether color combinations are culturally dependent, and can support further research.
1.4. Research question
Can effective guidelines for combining color hues onscreen be identified that are based on cultural background for Swedish and Thai users in the context of designing websites?
1.5. Delimitations
The current study is delimited to studying color combinations in web design context.
Since the scope of studying all the cultures is too large for this study, it is also delimited to studying color combinations in only Thai and Swedish culture-specific web design.
1.6. Definitions
Color is characterized by hue, chroma and lightness.
Hue is an ”attribute of a visual perception according to which an area appears to be similar to one or to proportions of two, of the perceived colours, red, yellow, green, and blue” (Hunt & Pointer 2011:440).
Chroma is the ”colourfulness of an area judged in proportion to the brightness of a similarly illuminated area that appears to be white or highly transmitting” (Hunt &
Pointer 2011:433).
Saturation is ”colourfulness of an area judged in proportion to its brightness” (Hunt &
Pointer 2011:448). Saturation is very similar to chroma.
Lightness is the ”brightness of an area” (Hunt & Pointer 2011:442).
Monochromatic is “the state of containing only one color” (Stone 2006).
Hue contrast refers to the perceptually different hue values (Itten 1973), not considering lightness or saturation, only hue value. One example of high hue contrast is a complementary hue combination, of hues across from each other on the color wheel.
When hue contrast is low, the hues are within a narrow range. One of the leading UX specialists Gabriel-Petit (2006) emphasizes the parallels between high hue contrast and complementary color combinations, as well as low hue contrast and analogous color combinations. Constable et al (2015) used the definition of perceptually different hue values as well as referred to the values on opposite sides of the color wheel to determine hue contrast. Different color wheels have different complementary hue pairs; the strongest perceptual hue contrast is widely assumed to exist in the complementary combinations of RYB hue wheel but this assumption hasn’t been researched with
modern scientific methods because it is experimentally difficult to measure maximum difference (Constable et al 2015).
Hue difference is the difference between two hue angles. In color theory the perceptual hue difference is normally measured in equal perceptual steps, but spatial distribution of hues is different in different hue wheels. There is, for example, a larger green sector in RGB hue wheel than in RYB hue wheel (Constable et al 2015), which is explained by the fact that human eye is more sensitive to green than any other wavelength (Nondestructive Testing Resource Center, n.d.).
2. Literature review 2.1. Colors
Classic color harmonies is a well known concept to every designer; it is based on the thought that the preference and harmony of color combinations is rotationally variant along the color wheel - the angle and distance between two hues on the color wheel determine if they would be perceived as harmonious and attractive for the user. Two examples of classic color harmonies are complementary and analogous color schemes.
The founding documents of color theory that the classic color harmonies are based upon are Theory of Color by Goethe (1810) The Principles of Harmony and Contrast of Colors by Chevreul (1855), both based on personal observations and ideas instead of scientific research. There is an emphasis on complementary colors - hues opposite on the color wheel, in these books. As an example Goethe (1810) states that colors situated opposite of each other on his color wheel would be harmonious. Classic color harmonies are still taught in study books for design students (Stone 2006:42).
Recent research proves the classic color harmonies invalid. The findings of the research by Ou et al. (2011) where color wheels and complex images were studied showed negative harmony response for complementary hue combinations in color wheels and neutral - in complex images (Ou et al. 2011:366). In the research by Szabo et al (2010:48) two-color combinations proved harmonious if they were monochrome - shared the same hue. The findings of this study invalidated the assumption that complementary or triadic hue combinations would be harmonious (Szabo et al. 2010:48-49). Moreover, both Ou and Szabo’s color harmony models showed higher color harmony scores than the classic color harmonies (Szabo et al 2010:46).
However if guidelines for combining colors - such as user preference for color combinations of high chroma and large brightness contrast - have been established in recent research as far as it concerns preference for chroma and lightness(Ou & Luo 2006;
Szabo et al. 2010, Camgöz et al.2002, Schloss & Palmer 2011:569), it is not the same concerning hue. Szabo et al (2010:46-48) identified that users prefer neighboring hues, Schloss & Palmer (2011:567) - that users prefer color combinations of colors that are
most similar in hue. Concerning the preference of color combinations based on hue difference, no preferable color combinations with larger than minimal hue difference between the colors combined were identified in current research. Furthermore, both Ou and Szabo’s color harmony models failed to predict the results in the study of color harmony of juice packaging, even if the principles of equal-hue and equal-chroma [that two colours that have similar hue or chroma appear harmonious (Wei et al. 2013)]
proved somewhat true (Wei et al. 2013).
All the abovementioned leads to a conclusion that no effective scientifically proven framework for combining hues is identified at the moment. Only the principle of equal-hue has enough scientific proof to be considered valid as research by Schloss &
Palmer (2011:567), Szabo et al. (2009:46-48), Wei et al.(2013) indicates.
There is some scientific evidence (O’Donovan et al. 2011; Ruse 2015) pointing to a possibility that the preference for hue combinations might be individual and rotationally-invariant about the color wheel. O’Donovan et al. (2011) studied color preference researching color themes and user-created color combinations online. The findings of O'Donovan et al. present that ”contrary to belief, preferences are not rotationally-invariant about the color wheel: green’s complement is purple, yet these plots suggest users prefer to pair green with blue or yellow instead. On the other hand, orange often pairs with cyan, its complement on the hue wheel” (O'Donovan et al.
2011:11).
In my research on preferred hue combinations onscreen, which I conducted for my undergraduate thesis (Ruse 2015), I studied two-color combinations in order to discover a pattern in onscreen color preference based on hue difference. The findings showed that the preference for hue difference was divided almost even along the color wheel, as well as that each tested color combination had received a large variation of ratings from different observers. I also identified that the combinations including blue had overall higher preference (Ruse 2015), which could indicate that the preference for color combinations is based on single hue preference, since blue is the most preferred single color (Camgöz et al. 2002:204; Blanchard & Kabene 2010:325).
2.2. Cultural differences in color perception and preference
There is a large body of research proving cultural differences in color perception, preference and use. Most research into culturally appropriate color use involves focus on individual colors such as culturally influenced user preference of individual colors.
A few studies are conducted even from a cross-cultural perspective. A comparative study between Japanese and Thai university students by Maruyama et al (1984) showed cultural differences between Thai and Japanese students. The findings also showed that Thai students preferred cold colors when choosing bright colors, warm colors, when
choosing dark colors, and white or black to grey colors. This information can be interesting when discussing the results of current study.
The perception of colors is also influenced by the perceiver’s cultural background as f.ex. a survey conducted among students from 20 different countries as well as a research in 8 countries in 1999 demonstrates (De Bortoli & Maroto 2001).
One of the most prominent researchers studying cross-cultural color preference is Saito, who through years of research has demonstrated distinct cultural differences in color preference among observers of different cultural backgrounds (Saito 2015). Saito has identified f.ex. a distinct Japanese preference for white color, where the observers of other, by Japanese culture not influenced cultural backgrounds, didn’t show such a high preference for white (Saito 2015). To determine whether preference for white was present in countries strongly influenced by Japanese culture, Saito (1996) carried out comparative studies on color preference in Japan, Korea (Seoul) and Taipei. The preference for white was present in Seoul and Taipei as well. I t is necessary to add that vivid blue color was also preferred highly in all researched areas (Saito 1996). Saito (2015) emphasizes that v ivid blue is the only color that all cultural groups usually prefer highly, and that also indicates that color preference is strongly influenced by the cultural variables. The global preference for blue, or the “Blue-Seven Phenomenon”, has been scientifically proven and thoroughly studied (Saito 2015; Suk & Irtel 2010:76; Camgöz et al. 2002:204). Blue has been identified in scientific research as the most preferred hue since 1934 (Camgöz et al. 2002:204).
The preference for blue is interesting concerning the current study as well. Ou & Luo (2006:201) in their research identified that blue is the hue that most likely creates harmony in color combinations. Schloss & Palmer (2011) agree that harmony and preference are closely related, but have also identified differences: preferred color combinations have bigger difference in brightness, while harmonious color combinations tend to be more similar in hue. Moreover, since it is also possible for a user to find a hue combination harmonious but unappealing. Ou et al. (2012:37) notes that the responses for color harmony and color preference are highly correlated and can be predicted from each other. Therefore it is possible to deduct that color harmony and color preference are different terms and shouldn’t be used interchangeably, but have much in common.
According to Schloss & Palmer (2011:568), user preference for color combinations is influenced by their preference for individual colors. According to O'Donovan et al (2011:11) though the preferences of single colors and the preferences of color combinations aren’t the same. The abovementioned indicates that a possibility exists that users might prefer color combinations including blue because blue is their preferred individual color, but it isn’t necessarily so.
Research studying the cultural influence on the use of individual colors in context also exists. F.ex. Jantathai et al (2014) studied color perceptions of colored Thai desserts and
the findings showed that Austrian users preferred yellow desserts while Thai users preferred green.
The only identified existing research of combining hues in the context of cultural differences is from 1999. Participants from 8 countries were asked to match colors for a logo, and the findings showed both cultural similarities and differences in combining colors (De Bortoli & Maroto 2001).
2.3. Culturally appropriate color use in web design
The research question of this study is focused on web design, therefore existing research about culturally appropriate color use in web design is of utmost relevance.
No research studying influence of cultural differences on combining hues in web design has been found. The most similar study to current research is Cultural Interface Design:
Global Colors Study conducted by Kondratova & Goldfarb (2006). Kondratova &
Goldfarb studied large data sets of country-specific websites in order to identify culturally appropriate color usage in web design for fifteen countries. The findings showed a color palette that was used in web design in all the countries studied, as well as country-specific color palettes. The international color palette - the colors preferentially used in all the countries studied - consisted of “white, black, different shades of grey, different shades of blue and a light yellow color” (Kondratova & Goldfarb 2006). Based on their research, Kondratova & Goldfarb (2006) recommended web designers to use their identified international color palette when designing for international target audience, rendering the design appropriate for cultural multitude.
When localization would be necessary, such as designing for a country-specific target audience, they recommended web designers to add country-specific colors. Kondratova
& Goldfarb didn’t research color combinations though, so no guidelines for culturally appropriate color combinations were identified.
Reinecke & Gajos (2014) collected “2.4 million ratings of the visual appeal of websites from nearly 40 thousand participants” researching colorfulness, visual complexity and visual appeal of websites in order to contribute to scientifically based guidelines for web designers on how to design more appealing websites for their target audiences. Reinecke
& Gajos (2014) identified that colorfulness had a large main effect on appeal, and that “a preference for different levels of colorfulness is highly influenced by a person’s country.“
For example, Macedonians found highly colorful websites more appealing than any other nationality in the researched dataset. Reinecke & Gajos (2014) also discovered that Northern Europeans preferred lower colorfulness than Asians such as Chinese, Singaporeans and Malaysians which might be of relevance for the current study.
Another research which is somewhat related to culturally appropriate color use in web design is the research of colors of the historical Yugoslav web domain (Ben-David et al 2016). Analyzing the visual data of the Yugoslav web domain, Ben-David et al (2016)
identified that “ color plays a non-arbitrary role as a characterizing element of a national Web domain. In particular, the combination of color and other structural elements of the domain (distribution of sub-domains and hyperlink topology) reveals patterns that distinguish between Websites and yields a dynamic view of the changes in the visual appeal of the national domain over time.” Color use in a national web domain and color use that’s culturally based have some differences mostly because a nation such as Yugoslav nation included many different cultural backgrounds. Yet, there are definite similarities, and research by Ben-David et al showed that color was a characterizing element of a national web domain. That can indicate that color can play a role in culturally appropriate color use in web design as well.
2.4. Search words
Following databases have been used in order to find previous research that would be relevant for the current study: ACM Digital Library, DOAJ (Directory of Open Access Journals), Wiley Online Library.
Following search words and combinations of search words have been used in order to find previous research that would be relevant for the current study: informatics color, informatics color research, informatics color onscreen, color use, informatics color use, color web design, color web cultural, color web, web color combination, color combination cultural, hue combinations, color combinations, hue cultural, cross-cultural color, informatics web design color, informatics web design user response, website first impression, website user response, thai color, swedish color, thai design color, swedish design color, thai web design color, swedish web design color, comparative web color cultural, color harmonies, web color use, web color use cultural, informatics design improvement, culturally appropriate color use, color cultural perception, digital color use.
3. Method
In order to answer the research question whether effective guidelines for combining color hues onscreen can be identified that are based on cultural background for Swedish and Thai users in the context of designing websites, the current thesis employs quantitative methods. The research question is of such a character that it demands employing quantitative methods. Quantitative methods provide a possibility to reveal patterns as well as secure a broad scope in the resulting data. The research question doesn’t demand a particular depth of the resulting data, therefore qualitative methods don’t need to be employed. The obtained data forms a base to support the identifying and testing the guidelines in this study. In order to identify the guidelines - to answer the question whether such guidelines can be identified and if it is possible, what are they (otherwise it wouldn’t be possible to test their effectivity) - large data sets: 250 country specific websites per country were analyzed. In order to test the guidelines - to answer
the question whether these guidelines are effective - a user survey was conducted on Swedish and Thai users.
3.1. Participants
49 users participated in the survey to evaluate the created guidelines. 24 of them self-identified as belonging to Swedish culture, 22 - as belonging to Thai culture. 3 users self-identified as belonging to another culture than Swedish or Thai and therefore were not included in processing of the results as this survey was targeted specifically to research the response of Swedish and Thai users.
10 users of Thai cultural background were male and 12 - female. The known age range of the Thai users was between 22 and 43 years old. 7 were in their 20’ies, 8 in their 30’ies and 7 in their 40’ies. The age of one user is unknown as this user chose not to answer the question about age.
9 users of Swedish cultural background identified as male, 12 - as female, 3 - as other.
The known age range of the Swedish users was between 25 and 67 years old. 4 were in their 20’ies, 13 - in their 30’ies, 1 - in 40’ies and 1 - in 60’ies. The age of 5 users is unknown as these users chose not to answer the question about age.
To reach potential participants, an open call to the online survey including a link and an invitation to share in social media was released. Since the initial response from Thai participants was low, in order to boost the participation I also contacted Thai universities, posted in different relevant groups on Facebook, as well as posted the invitation to participate including a link in Thai forums such as Sanook.com.
3.2. Materials
For gathering the information on the basis of which the guidelines are generated large data sets were needed. Dominant color combinations in 250 country specific websites per country (Sweden or Thailand) were analyzed, which amounts to 500 websites in total. The selection criteria for these websites to be included into the sample frame is that the website has to be country specific, i.e. targeted for the respective country’s users.
With regards to cultural preferences, the color combinations on websites are chosen by designers, not the users themselves. Yet, the body of designers as an information resource can reveal a certain knowing-in-action (Schön 2003:50), a cultural tacit knowledge. The paramount factor is using large data sets in order to eliminate mistakes, just like in Culturally Appropriate Web User Interface Design study (Kondratova &
Goldfarb 2006). That’s because, as indicated before, no effective, scientifically based guidelines on how to combine hues exist, designers are often confused about combining colors, and it would be very misleading to assume that every designer combines colors effectively for their target audience. Therefore it is only from a large data set and not
from small or medium amount of websites that there is a possibility to identify any culturally preferred hue combinations or potential hue combining patterns. And therefore it is even more important to test the guidelines developed based on the collected data extracted from these large data sets.
In order to test if the guidelines are effective, a set of concept designs for user tests were created using different color combinations based on the identified guidelines. The concept designs were essentially web page mock-ups where the color combinations were presented in the appropriate web design context. The HSB values of the colors utilized in creating the concept designs are included in Table 1. The actual survey including the images of concept designs is presented in Appendix C. 16 different designs were developed. 5 of these designs were developed according to the guidelines to be culturally appropriate for users with Thai background, and 5 of these designs were developed according to the guidelines to be culturally appropriate for users with Swedish background. Since the large data sets even indicated that Thai websites use much more visual contrast (for the purposes of this study, the term ‘visual contrast’ is used to describe visually perceived sense of contrast) than Swedish websites, the colors are often highly saturated and bright, and dark colors are contrasted with saturated, bright colors, while Swedish websites have much lower visual contrast, colors have lower saturation, dark colors can be paired with very light colors of low saturation, additional 5 designs were developed using the same, lower saturated hues.
To ensure the content validity of the study it was necessary to decrease the possibility of other variables than hue influencing the user preference while retaining the capacity to measure user preference according to different variables. All the samples have brightness difference of either 60 or 25 steps according to HSB scale. The reason for that is to provide a possibility to measure whether Swedish users indeed prefer darker colors paired with light ones, since it was observed that dark colors are combined differently in Swedish and in Thai web design. The third color - a tint - used in order to give the website mockups more realistic look and more acceptable readability, is a constant in all non-monochromatic samples with saturation of 10 and brightness of 95 according to HSB scale.
The non-monochromatic samples are divided into ‘high visual contrast’ (hues of high saturation 95 & 75 on HSB scale) and ‘low visual contrast’ (hues of saturation 85 & 35 on HSB scale) samples, which are targeted to represent Thai high visual contrast and Swedish low visual contrast combinations according to the identified guidelines.
The colors of the same hue in the monochromatic samples have saturation difference of 70 steps according to HSB scale. The accompanying neutral color - grey, black or white - is chosen depending on which neutral color was more popular for the relevant cultural background in the collected data from Thai and Swedish websites.
Table 1. HSB values of color combinations used in creating web mock-up samples for user survey
HSB values
Sample Nr 1st color 2nd color 3rd color
10 272-75-35 272-10-95 43-95-95
11 272-85-30 272-10-95 43-35-90
20 80-75-70 80-10-95 30-95-95
21 80-35-65 80-10-95 30-85-90
30 215-95-25 215-10-95 75-75-85
31 215-85-30 215-10-95 75-35-90
40 135-95-60 135-10-95 215-75-35
41 135-85-65 135-10-95 215-35-90
50 30-95-100 30-10-95 215-75-75
51 30-85-95 30-10-95 215-35-70
60 0-75-85 0-10-95 110-95-60
61 0-85-50 0-10-95 110-35-75
82 300-85-40 300-15-100 0-0-85
83 272-85-40 272-15-100 0-0-100
84 175-30-100 175-100-40 0-0-38
85 205-100-40 205-30-100 0-0-100
3.3. Procedure
The sampling strategy chosen to research the color combinations on the websites was pseudo-random sampling. This strategy was chosen because it was not possible to survey all the country specific websites of Sweden and Thailand: there are too many for it to be effective as well as the existence of websites is dynamic - new ones are constantly added and removed. Random sampling as a method allows for very unbiased selection and should result in a representative sample (Patel & Davidson 2011:56) so that the findings concerning this sample could be generalized to all the country specific websites of Sweden or Thailand.
To be considered a country specific website, the website had to be clearly designed for respectively Thai or Swedish users. One indicator for this was a country-specific domain name extension, such as .se or .co.th, but it couldn’t be the only indicator as the website could be still targeted specifically for foreigners (such as Bangkok Post’s PostPublishing.co.th). Swedish and Thai languages were used as indicators. Clearly international websites (such as Toyota.co.th) were not included in the study because their international graphic corporate identity could easily override country-specific design decisions.
To describe colors the current study uses HEX triplets - hexadecimal numbers used in programming languages HTML and CSS to represent colors since the HEX triplets are used to code websites and therefore are the most straightforward choice. HSB color space is used in order to identify hue, chroma and brightness. Both HEX triplets and HSB are converted within Adobe Photoshop software and that eliminates the need for excessive external conversion that would reduce precision. Moreover, primarily it is web designers who would benefit from the guidelines, and web designers are using HEX triplets and have much better working understanding of HSB than CIELAB, a color space dominant in research.
An automatic method exists to crawl the websites with a web spider application to extract the HEX triplets - but the web spider application cannot take into consideration the color coverage and therefore there would be a lack of credibility of the study.
Therefore, another method was employed that captured a “snapshot” image of the home page (in this research home page means the main page of the website that presents the main concept of the site and facilitates navigation to all the other pages) of each website.
The dominant color combination in each image was analyzed manually, extracting 2 dominant colors from each website.
The criteria for the extraction of colors are as follows:
● the colors have to rank high among all the other colors on the page in visual hierarchy (for instance, covering a large area, coloring a visually dominant element on the page, perceptually standing out),
● the colors have to have been actively chosen by a designer or be an element of the website design, such as the color of a background, a table, a font, as opposed to colors of content or photos used on the page which might have been uploaded without designer’s intention or knowledge,
● the color combination has to have a hue, since the research question is about combining hues. When the dominant color combination includes one neutral color such as black or white which has no hue, and one color which has a hue, the color combination can be seen as consisting of a single hue (monochrome).
When any of the colors in the dominant color combination have extreme HSB values (such as saturation with value of 1) which leads to no perceptual hue - they are perceived as grey, black or white (i.e. de-saturated), they were categorized as such.
Both colors of the dominant color combination extracted from the website have to be present on the screen simultaneously, which is ensured by both colors present on a screen capture of the homepage of each website from which the colors are extracted.
FIG. 1: HSB color wheel (Adobe Systems Inc. 2000a)
In order to analyze the extracted dominant color combinations, HSB color wheel (Adobe Systems Inc. 2000a) was used. Twelve main hues of the color wheel (yellow, yellow green, green, blue green, blue, blue violet, violet, red violet, red, red orange, orange and yellow orange) were categorized based on their HSB hue values. A hue combination was evaluated as having high hue contrast if both hues were across each other on the color wheel - and, keeping in mind that different color wheels exist, at least three other hues had to be between two hues to classify them as a high hue contrast combination. A hue
combination was evaluated as having low hue contrast when hues were either adjacent or having maximum one another hue in between them on the color wheel.
Guidelines were developed, based on the collected quantitative data. An online study was conducted using Swedish and Thai participants to measure the effects of the use of the identified guidelines. The study measures the user preference for color combinations created using the identified guidelines for their respective cultural preference: Thai or Swedish, with special focus on how highly they rate the combinations created for their cultural preference. The participants rate each color combination on the scale from 1 to 5, 1 being the least appealing, and 5 being the most appealing.
3.4. Ethical considerations
All the important ethical considerations were observed when designing the survey. In the beginning of the survey the potential participants were informed about what their task is and the conditions of their participation, according to the recommendations set by the Swedish Research Council (2012) . They were informed that the participation is voluntary and that they are entitled to interrupt their participation at any time if they so wish. Therefore also the demand for consent is fulfilled: the users decide themselves whether they wish to participate, and they know they can withdraw at any time during the survey.
All the data obtained is anonymous which fulfills the demand for confidentiality. The data available to the researcher is only the data the users provide in the survey questions, and there is too little personal information to identify any of the participants. Moreover, the users are offered a possibility to not disclose background variables (age and gender) that are not crucial for the research. And as for the last requirement - the demand for correct use - data collected is only used for research purposes, and the potential participants are informed about that (Swedish Research Council 2012).
4. Results and analysis
4.1. Large data sets from Thai and Swedish websites
The analysis of all the dominant hue combinations extracted from the researched Thai and Swedish websites is included in Appendix A in order to provide an overview of the results for every identified hue combination. This study is delimited to identifying effective guidelines for hue combinations based on Thai or Swedish cultural background, therefore more weight is put on cultural differences. Appendix A leaves a useful possibility to see how widespread is the use of any identified hue combination in either Swedish or Thai websites.
Analyzing the large data sets of dominant hue combinations in Thai and Swedish websites, several cultural differences were identified. The dominant hue combinations in both Thai and Swedish websites proved to be different, as presented in Table 2.
Table 2. Dominant hue combinations in the researched Thai and Swedish websites (monochromatic color combinations excluded)
Dominant hue combinations
Thai Swedish
hue combination
nr of websites where it is
dominant
hue combination
nr of websites where it is
dominant
red - blue 12 yellow orange - blue 11
yellow orange - violet 11 yellow green - blue 9
yellow orange - blue 10 red - blue 8
orange - blue 8 yellow orange - red 8
yellow orange - red 7
orange - yellow green 6
Several culture-specific hue combinations emerged. In Thai websites a combination of violet and yellow orange was one of the most used (11 websites), while in Swedish websites it was completely absent. The other two hue combinations culture-specific for Thai websites were: orange and blue (used in 8 Thai websites and only 1 Swedish website), and orange and yellow green (used in 6 Thai websites and 1 Swedish website).
In Swedish websites two culture-specific hue combinations were identified: yellow green and blue was dominant in 9 Swedish websites and 1 Thai, green and blue - in 5 Swedish and 1 Thai website. Two additional potentially culture-specific hue combinations were identified: red and green, and yellow and red orange, but the difference of use in Thai and Swedish website (these combinations were dominant in 4 Swedish and 1 Thai website each) was smaller.
Additionally, when analyzing hue contrast in the dominant hue combinations, another pattern emerged. The use of medium and low hue contrast combinations in both Swedish and Thai websites was approximately the same, but Thai websites used twice as much (81 Thai websites against 41 Swedish websites) high hue contrast combinations. Swedish websites used much more monochromatic color combinations with only one dominant
hue than Thai websites (157 Swedish websites against 95 Thai websites). That indicates that comparatively in Swedish web design there is a preference for monochromatic color combinations and in Thai web design there is a preference for high hue contrast combinations.
There were differences even in monochromatic (i.e. with black, white, grey or the same hue) color combinations; the more significant of those are presented in Table 3.
Table 3. The biggest differences between Thai and Swedish websites in monochromatic color combinations
the dominant hue in the monochromatic color combination
nr of Thai websites where it is dominant
nr of Swedish websites where it is dominant
green 5 10
red 23 39
red violet 20 6
violet 5 0
blue 18 51
green blue 0 9
Other observations during the study of Thai and Swedish websites include: Thai websites use much more visual contrast than Swedish websites, and the colors are often highly saturated and bright. Very little colors of low saturation are used in Thai web design and dark colors are contrasted with saturated, bright colors. Swedish websites on the average have much lower visual contrast, less saturated colors and darker colors are used much more than in Thai web design. It is also often one can see a dark color paired with a very light color of low saturation.
4.2. Guidelines for hue combinations for Thai and Swedish web design
The following guidelines form part of the answer to the research question of this study:
whether effective guidelines for combining color hues onscreen can be identified that are based on cultural background for Swedish and Thai users in the context of designing websites. In order to answer whether such guidelines exist and, if they do, what are they, 250 country specific websites per country were analyzed. The results of the analysis allowed to identify the following guidelines for Thai and Swedish web design.
The recommended hue combinations for Thai web design are:
● red & blue,
● yellow orange & violet,
● yellow orange & blue,
● orange & blue,
● yellow orange & red,
● orange & yellow green.
Monochromatic color combinations (with black, white, grey or same hue) are preferred as well as high hue contrast combinations (consisting of hues across the color wheel from each other, with at least 3 other hues in between them on a 12-hue color wheel). In monochromatic color combinations the preferred hues are red, red violet and blue. Even violet can be used in monochromatic color combinations which would not be recommended for Swedish web design. Additionally, high visual contrast and saturated, bright colors are recommended. If using dark colors, it is advisable to contrast them with saturated, bright colors.
The recommended hue combinations for Swedish web design are:
● yellow orange & blue,
● yellow green & blue,
● red & blue,
● yellow orange & red.
Hue combinations such as green & blue can also be used, which would be less recommended for Thai web design. Monochromatic color combinations (with black, white, grey or same hue) are highly preferred. In monochromatic color combinations the preferred hues are blue and red. Even green blue can be used in monochromatic color combinations which would not be recommended for Thai web design. Additionally, very high visual contrast such as visual contrast created by combining bright colors of high saturation is rarely recommended. Usage of low saturated or darker colors is fully acceptable. A dark color can be paired with a very light color of low saturation.
4.3. User survey results
In order to test whether the identified guidelines for hue combinations for Thai and Swedish web design are effective, a user survey was conducted.
All the data received by conducting the user survey is included in Appendix B for transparency purposes. The results of the survey using Thai and Swedish participants are presented in Table 4.
Table 4. The findings of the user survey: average preference for the tested color combinations among Thai and Swedish users
Nr Image
file nr
Fits guidelines
for ...
culture
Specifications*
Average preference
among Thai respondent
s
Average preference
among Swedish respondent
s
1 10 Thai HVC 3,64 2,63
2 11 LVC, BrD 60 3,41 2,75
3 20 Thai HVC 3,55 2,46
4 21 LVC, BrD 25 2,64 2,29
5 30 HVC, BrD 60 2,23 2,58
6 31 Swedish LVC, BrD 60 2,23 2,88
7 40 HVC, BrD 25 2,36 2,58
8 41 Swedish LVC, BrD 25 2,32 2,33
9 50 Thai HVC, BrD 25 3,41 2,5
10 51 LVC, BrD 25 2,23 2,38
11 60 HVC, BrD 25 2,46 1,88
12 61 Swedish LVC, BrD 25 2 2,04
13 82 Thai monochromatic 3,64 3
14 83 Thai monochromatic 3,64 3
15 84 Swedish monochromatic 2,68 2,79
16 85 Swedish monochromatic 2,64 2,79
*BrD = brightness difference (HSB scale); HVC = 'high visual contrast' sample (saturation high, 95
& 75 on HSB scale) , LVC = 'low visual contrast' sample (saturation low, 85 & 35 on HSB scale)
4.4. Findings from the user survey
The analysis of the data obtained through the user survey leads to the following findings.
Thai culture-specific hue combinations yellow orange & violet, yellow green & orange and orange & blue proved to be more preferred by Thai than Swedish users. Low visual contrast samples, more targeted for Swedish users, of yellow orange & violet and yellow green & orange hue combinations were also more preferred by Thai than Swedish users,
indicating the preference of culture-specific hue combinations might override the preference for visual contrast and saturation. The low visual contrast samples of Thai culture-specific hue combinations were though less preferred by Thai users than the high visual contrast samples, which were more targeted for Thai users. There was one exception, when a low visual contrast sample of Thai culture-specific hue combinations was more preferred by Swedish than Thai users - it was the low visual contrast sample of orange & blue. It could be explained though by the low saturation of the sample where the blue (saturation 35 on HSB scale) was more similar to grey, which would’ve rendered the sample much less appealing to Thai users. In the analyzed 250 Thai websites blue &
orange hues were almost always both high saturated.
Swedish culture-specific hue combinations yellow green & blue and green & blue also proved to be more preferred by Swedish than Thai users. The preference for low visual contrast samples among Swedish users weren’t so clearly expressed as among Thai users. In the analyzed 250 Swedish websites there were not only websites with low visual contrast, many websites had quite high visual contrast too, which could explain the user preference here.
The results were interesting for hue combination green & red. It was listed under Swedish country-specific hue combinations, although the difference between how dominant it was in the researched Swedish and Thai websites was not so prominent.
Therefore it wasn’t recommended as a Swedish culture-specific hue combination. The survey proves that it couldn’t be recommended as a Swedish culture-specific hue combination. The high visual contrast sample is more preferred by Thai users than by Swedish users; it can be easily explained by the sample’s unusually high visual and hue contrast, - the colors in it almost produce visual vibration. Samples of so high visual contrast were rather often found among analyzed Thai, but not Swedish websites. The low visual contrast sample of green & red was slightly more preferred by Swedish users but the preference for both Swedish and Thai users for this sample was very low.
For the monochromatic color combinations Thai users showed higher preference for Thai culture-specific hues violet and red violet than Swedish users did, and Swedish users shower higher preference for Swedish culture-specific hues blue green and blue than Thai users did.
In the analyzed Swedish websites observed practice to combine dark color with low saturated very light colo r was tested. The first low visual contrast sample of brightness difference of 60 steps on HSB scale proved more preferred by Thai users than Swedish users, that can be explained by it employing Thai culture-specific hue combination. That can once again indicate that the preference of culture-specific hue combinations might override the preference for contrast and saturation. The second low visual contrast sample of brightness difference of 60 steps on HSB scale employed Swedish culture-specific hue combination of blue & yellow green, and Swedish users preferred it more than Thai users.
Determining the most preferred and the least preferred of all the samples among Thai users, it was identified that Thai users preferred Thai culture-specific hue combinations and Thai culture-specific monochromatic color combinations the most. The highest rated were the violet & yellow orange high visual contrast sample (the average rating among Thai users 3.64), monochromatic violet combination (3.64), monochromatic red violet combination (3.64), yellow green & orange high visual contrast sample (3.55) and blue &
orange high visual contrast sample (3.41).
Determining the most preferred and the least preferred of all the samples among Swedish users , it was identified that interestingly and unexpectedly the highest preference among Swedish users was for monochromatic Thai culture-specific violet and red violet samples (the average rating among Swedish users 3 for each of the samples).
That was closely followed by Swedish culture-specific monochromatic green blue (2.79) and blue (2.79) samples. These findings prove that monochromatic color combinations indeed are the most preferred among Swedish users. They also confirm a deviation from the guidelines and signify that Swedish users are open for monochromatic violet and monochromatic red violet color combinations, and find them appealing. The sample with similarly high average rating from Swedish users was low visual contrast Swedish culture-specific hue combination of yellow green & blue (2.88). The least preferred of all the samples by Swedish users was the high visual contrast red & green sample, which is easily explained by very high visual contrast in this sample which has been unidentified in the researched Swedish websites.
5. Discussion
5.1. Discussion of method
The manual method of extracting data about dominant color combinations from websites was a correct method choice. It would be impossible to determine the visual hierarchy and evaluate which colors are dominant using an automatic method, and the results would’ve had low validity. The manual evaluation helped to determine how perceptual hues had to be categorized: f.ex.a color which has a hue value of 60 that would correspond to yellow hue according to HSB color wheel, but has saturation value of 1 and lightness 96, is perceived not as yellow but as grey and should be categorized as such.
Several Thai websites were black and white due to passing of the King of Thailand.
These websites couldn’t be included in the study. In a few cases it was necessary to visit more pages of the same website to determine if the initial conclusion about which color combination is dominant, is correct or wrong.
The visual evaluation, of course, opens the question about subjectivity choosing which colors form the dominant color combination on the website. To ensure higher objectivity
