described previously, considerations and recommendations for creating gender inclusive websites may be set forth. While this chapter will focus on gender inclusivity, it’s important to note that a gendered website may preferred in some instances. The goal, however, is for designers to be intentional about the gender imparted onto their websites and avoid
unintended bias. An emphasis will be put on understanding how websites become gender biased and ways in which these biases may be counteracted. The considerations and
recommendations will be divided into three sections: Pre-Design, Design, and Post-Design. Pre-Design will focus on what needs to be considered in terms of gender before beginning the design process. The Design section will emphasize basic design elements and how their use contributes to gender and gender inclusivity. Finally, Post-Design will concentrate on examining an existing design for gender bias.
Pre-Design Know the Audience
Know the users, but recognize biases. While this idea sounds incredibly simple, in practice, recognizing unintended biases can be difficult. Most designers are familiar with the idea of “know your users” or “know your audience”. However, the idea of a “general
audience” is tricky. As has been discussed previously (Chapter 2), in website design “general” is often conflated with “men” (Broverman et al., 1972, Huff & Cooper, 1987),
leading designs that are intended to be neutral to actually be more masculine. When thinking of users for a “general” site, consider users of all genders. Consider the topic of the website
products (Epley et al., 2007). Therefore, if a product website is being designed, think about how the product itself may be gendered and its implications on users’ perceptions of its
website – a gendered product would imply a gendered website. Determine Whether Gendering the Website is Useful
When considering building a highly gendered website, determine whether gendering is the best route and why. From the results of Study 2, neutral sites are shown to be more preferred than highly gendered sites. If there is no clear reason to impart a gender onto the site, it may be best to consider neutrality.
Impart Gender Wisely and With Caution
If the website has a clearly gender biased audience, gendering may be appropriate as website appeal is maximized when it “mirrors” their target audience (Tuch et al., 2009). The key, however, is to make the gendering of the site deliberate and not a product of unintended bias. If gendering a site is chosen as the best option, it is important not to alienate the users or gender the site in a way that is perceived as offensive (such as the “Della” and “Bic for Her”
examples). Designers should be careful to avoid stereotypes or reductions to meaningful content when gendering a website (Casserly, 2009; Vinjamuri, 2012).
Design
This section will give design recommendations and points to consider when designing gender inclusive websites. The tables of Feminine, Gender Neutral, and Masculine design elements originally presented as charts in Chapter III will be reintroduced to accompany their corresponding recommendations. The tables for feminine elements are arranged in order of femininity (most feminine to least feminine) where femininity is defined as the absolute value of FPG minus MPG. Similarly, the tables for masculinity are arranged in order of
masculinity (most masculine to least masculine) where masculinity is defined as the absolute value of MPG minus FPG.
Consider Language
When creating written content for a website, the gender implications of the language used should be considered. The use of jargon and “expert language” is associated with
masculinity while emotional language (words which convey feelings, exclamation points) and abbreviations are associated with femininity (Moss et al., 2006). Language should also be examined for bias in terms of pronouns (he/she, him/her).
Keep It Simple
From the results of Study 2, viewers greatly appreciate simplicity as it makes websites easier to read and use. Furthermore, simplicity also contributes to keeping a site from becoming biased. For a gender inclusive site, avoid over-embellishing and focus on content and usefulness. A clean and simple background (such as white or another light, solid color) is recommended (as can be seen in the results of Study 2).
Color
As seen in the results of Study 2, color has a very large impact on how viewers gender a website. A darker, limited palette will imply masculinity (Table 20) while a colorful website with brighter colors (especially the use of pinks and purples) (Table 20) will imply femininity (van Tilburg et al., 2015; Xue & Yen, 2007). Choosing a main neutral color and accenting with one or two brighter colors to add visual interest can help a site stay away from bias. The use of a white (or a similar light color) background allows for high text contrast which improves readability (Cui, 1998), but also brightens a site to keep it from becoming overtly masculine.
Table 20. Feminine, Neutral, and Masculine colors.
Color FPG MPG Neutral Category
Feminine (high to low) Pastel Pink 5.7 2.3 Magenta 5.7 2.3 Purple 5.4 2.6 Mint Green 4.8 3.1 Aquamarine 4.6 3.2 Light Orange 4.3 3.3 Yellow 4.0 3.3 Light Blue 4.3 3.8 Neutral
Sky Blue 4.1 4.0 Highly Androgynous
Teal 4.3 3.9 Highly Androgynous
Maroon 4.0 4.4 Highly Androgynous
Lime Green 4.0 3.7 "Middle of the Road" Neutral
Orange 3.5 3.9 Low Androgynous
Masculine (high to low) Brown 2.0 4.5 Grey 3.6 4.9 Black 3.4 4.7 Dark Blue 3.7 4.9 Red Brown 3.5 4.4 Moss Green 3.5 4.5 Red 4.0 4.5 Green 3.9 4.2 Font
The greatest functional concern when selecting fonts to use in a website is readability (Cui, 1998). Delicate, embellished, and script fonts are considered to be feminine (Table 21) while blocky and thick fonts are perceived as masculine (Table 21). Many “classic” fonts, such as Times New Roman, Helvetica, and Garamond (Table 21), are considered to be gender neutral but also very readable and universally safe for web use (“CSS Web Safe Font Combinations”, 2014).
Table 21. Feminine, Neutral, and Masculine fonts.
Font Font Type FPG MPG Neutral Category
Feminine (high to low)
Edwardian Script 5.5 2.3
Sant’Elia Script 5.1 2.6
Felt That Script 4.9 2.9
Bradley Hand Script 4.5 3.0
Glossdrop Script 3.7 3.3
Neutral
Garamond Serif 3.7 3.7 Highly Androgynous
Times New Roman Serif 3.5 3.7 "Middle of the Road" Neutral
Brandon Grotesque Sans Serif 3.6 3.6 "Middle of the Road" Neutral
Bookman Serif 3.5 3.7 "Middle of the Road" Neutral
ITC Bauhaus Sans Serif 3.7 3.5 "Middle of the Road" Neutral
Helvetica Sans Serif 3.3 3.5 Low Androgynous
Papercute Sans Serif 3.1 3.5 Low Androgynous
Masculine (high to low)
Stencil Serif 2.3 5.1
Impact Sans Serif 2.9 4.4
Applewood Serif 2.9 4.2
Franklin Gothic Sans Serif 3.2 4.1
Courier Serif 3.0 3.7
Monospace Sans Serif 3.1 3.7
Texture
Texture can be a very highly gendered element (as seen in the results of Study 1) and exhibited the largest range of FPG and MPG values in the study. Only one texture was considered to be gender neutral – cardboard. As such, avoiding strongly gendered textures (such as wood, stone, and embellished fabric (Table 22) is recommended.
Table 22. Feminine, Neutral, and Masculine textures.
Texture FPG MPG Neutral Category
Feminine (high to low) Floral Cloth 5.7 2.1 Paper 4.2 3.1 Light Paper 3.6 3.3 Linen 3.7 3.8
Neutral Cardboard 2.9 3.8 Low Androgynous
Masculine (high to low) Rough Wood 3.0 5.1 Stone Wall 3.0 4.8 Scuffed Wood 3.2 4.8 Red Stone 3.0 4.5 Stone Path 3.1 4.7 Tree Limbs 3.0 4.5 Dark Denim 3.3 4.4 Shape
Men tend to prefer symmetry, geometric shapes, and rectilinear shapes while women prefer curvilinear and organic shapes (Xue & Yen, 2007). Consider minimizing the use of specific shapes and instead allow areas to be defined by surrounding white space (Garrett 2010; White, 2011). Alternatively, combining curvilinear shapes and rectilinear shapes (such as a rounded corner rectangle (Table 23)) may also contribute to gender neutrality.
Table 23. Feminine, Neutral, and Masculine shapes.
Shape FPG MPG Neutral Category
Feminine (high to low) Scroll 5.5 2.5 Heart 5.5 2.7 Circles 4.2 3.0 Star 3.8 3.3 Circle 3.7 3.2 Neutral
Rectangles and Circles 3.7 3.5 High Androgynous
Rectangle with Rounded Corners 3.6 3.4 "Middle of the Road" Neutral
Diamond 3.5 3.4 Low Androgynous
Masculine (high to low) Rectangle 3.1 3.9 Square 3.1 3.8 Arrows 3.2 3.9 Rectangles 3.5 4.0 Triangle 3.4 3.6 Triangles 3.5 3.7 Images
There is a tendency for designers to use images which depict people of their own gender (Moss et al., 2006). Including images of more than one gender is recommended to avoid bias. It is also important to consider the elements that make up any image that may become part of the website. Angularity, dark colors, and ruggedness imply masculinity (Table 24) while softness, light colors, and small children (Table 24) are perceived as feminine. Images of nature, general use buildings, and diverse groups of people are gender neutral options (Table 24).
Table 24. Feminine, Neutral, and Masculine images.
Image FPG MPG Neutral Category
Feminine (high to low)
Girl 5.8 2.3
Woman 5.7 2.6
Woman with a Baby 5.9 3.0
Living Room Furniture 5.2 3.2
Baby 4.7 3.6 Blue House 4.7 3.6 Cat 4.5 3.4 Woman Working 4.6 3.6 Sunset 4.5 3.9 Quinoa Salad 4.2 3.6 Bread 4.1 3.6 Neutral
Man and Woman Working 4.2 4.0 Highly Androgynous
Lake with Trees 3.9 4.3 Highly Androgynous
Horse 4.5 3.9 Highly Androgynous
Living Room with Staircase 3.9 4.5 Highly Androgynous
Couple 4.9 4.1 Highly Androgynous
Man 3.9 4.0 "Middle of the Road" Neutral
Curved Library 3.9 4.0 "Middle of the Road" Neutral
Elephant 3.8 3.8 Low Androgynous
Dog 3.8 3.9 Low Androgynous
Gophers 3.7 3.6 Low Androgynous
Sheep 3.4 3.6 Low Androgynous
Corner Shop 4.0 3.7 Low Androgynous
Fields 3.7 4.0 Low Androgynous
Diverse Park 4.0 3.6 Low Androgynous
Masculine (high to low)
Wolf 3.2 5.0
High Rise Building 2.9 4.7
Man Working 3.3 4.8 Burger 3.3 4.7 Cow 3.2 4.4 Office Interior 2.9 4.1 Mountains 3.4 4.4 Desert Highway 3.4 4.4 City Highway 3.3 4.1 Boy 3.8 4.3 Arches 3.8 4.1
Consider the Strength of Each Element
The results of Study 2 showed that the element of color had the greatest impact on determining a site’s gender. A change in color palette can make a masculine site into a
gender discordant and feminine site (as seen with the Gender Discordant website in Study 2). As such, the colors used in a website should be given great consideration. As such, when examining a website to determine its gender, consider the strength of each element. The inclusion of a few feminine shapes or lines will likely have a much weaker effect on the website’s gender than a feminine color palette.
Post-Design Include Evaluation of the Design’s Gender
Examine the design for unintended biases and collect data on perceived gender. Make notes about masculine and feminine elements used in the site and determine whether they are appropriate for the intended gender of the website. Consider including website gender with user evaluations early in the design process. Understanding the perceived gender of a website early on will prevent surprises later in the design process and ensure that the site’s gender is intentional. As shown in Studies 1 and 2, collecting data on perceived gender is not only easy, but inexpensive and simple to add to existing evaluations. Gender may be evaluated through the use of two items on a seven point Likert scale where 1 is “Not Feminine
(Masculine) at All” and 7 is “Very Feminine (Masculine)” (van Tilburg et al., 2015; Lieven
et al., 2015).
Check for Discordance
Gender neutrality is not created through the combination of highly gendered elements (such as the Gender Discordant website seen in Study 2). Significant use of multiple highly
gendered elements (like a feminine color palette with masculine textures and fonts) may strike viewers as clashing and unpleasant. Check for elements which are gender discordant and consider replacing them with elements that are neutral.
CHAPTER 6: CONCLUSION Summary of Findings
This research was broken down into two studies. Study 1 evaluated the gender and professionalism of six web design elements: Font, Texture, Image, Shape, Color, and Mixed Elements. The results showed that most of the design elements in the study were gendered- meaning that participants consistently rated them either masculine or feminine. Masculine elements included: blocky, serif fonts, wood or stone textures, rectilinear and geometric shapes, dark colors, and images depicting ruggedness or work environments. Feminine elements included script fonts, paper and fabric textures, curvilinear and organic shapes, light colors, and images depicting children and the home. Some elements were found to be gender neutral in that they were not perceived to be highly masculine or highly feminine. Neutral elements included classic fonts such as Times New Roman, images depicting both men and women, images depicting docile animals, and colors such as teal, green, and orange.
However, the study also found that some elements were simultaneously masculine and feminine – or highly androgynous.
Study 1 found that there was at a strong positive correlation between masculinity and professionalism for three elements: color, mixed elements, and shape. For the same three elements, there was a very strong negative correlation between femininity and
professionalism. In short, elements which were perceived as more masculine were perceived as being more professional and elements which were feminine were less professional.
Study 2 applied the results of Study 1 to a web design task through the creation of feminine, gender neutral, and masculine websites. The results showed that websites were perceived as having a gender. Further, the perceived gender of the websites effected
perceptions of their professionalism, workload, usability, likability and visual appeal. Neutral websites were preferred by participants and found to be the most professional, usable,
likable, and visually appealing. Feminine websites incurred the highest workload, were the least usable, least professional, and the least visually appealing.
The correlations between gender and professionalism seen in Study 1 were again observed in Study 2: there was a strong positive correlation between masculinity and professionalism but a strong negative correlation between femininity and professionalism. Similar correlations were observed for usability, likability, and visual appeal. However, in each case, the correlation between masculinity and professionalism was weaker than that between femininity and professionalism. This implies that it is not the presence of
masculinity that makes a website professional but instead the absence of femininity. Further, while masculinity was correlated to higher ratings in terms of professionalism, usability, likability, and visual appeal, highly masculine websites received low scores overall in these areas. This result implies that masculinity is preferred until it becomes overt.
Study 2 also examined the strength of the effects which design elements have on determining a website’s gender. It was found that color was most influential in determining a site’s gender followed by font. However, there was little difference among the effects of
shape and line, texture, and image.
Implications
The results of the two studies provide insights into the relationship between web design and perceived gender. Similar to products, websites become gendered through their design. However, unlike products, websites often become gendered unintentionally through biases in culture, software, and designers themselves. Because of the effect gender has on
perceptions of professionalism, visual appeal, and likability as well as usability and workload, it is important to consider how a website will be gendered during the design process.
Participants preferred websites which were gender neutral. Gender neutral websites also reduced participants’ workload and were the most usable. Therefore, in general, gender
neutral websites are recommended and may be created through the careful combination of design elements. A shift toward web neutrality is also a step toward addressing the overall masculine bias of the web. However, the combination of highly masculine and highly
feminine elements can create gender discordance – which was regarded by participants as not only visually displeasing but also difficult to use.
The strong correlation between masculinity and professionalism implies that the gender biases observed in workplaces extend into the field of web design. While femininity and gender incongruence are seen as unprofessional in the workplace, they are also perceived to be less professional when applied to websites.
Future Work
The two studies demonstrate that web sites and web design elements are gendered and, as with people, that their gender has an impact on how they are perceived. However, more research is needed in the area of gender and website design to fully understand their interactions.
The scope of Study 1 could be expanded to include more examples of design elements. Evaluating the gender and professionalism of more element examples would produce a better picture of the nuances of how design elements are gendered. A larger number of element examples with values for femininity and masculinity could also be of use
to designers looking to create both gender neutral and gendered websites. A main limitation of Study 1 is the demographic of its participants – 92% of which were United States natives. As the association of design elements with a gender differs with cultural identity, repeating the experiment with a different demographic would explore those differences. Such a repetition would also serve to generalize the results of the study.
The design of the websites in Study 2 was a key limitation of the experiment. As the websites were not designed by a web design professional, recreating the experiment with sites designed by professionals would serve to validate the results. Women and men tend to design differently and with a bias toward their own gender. As the designer of the websites evaluated in Study 2 was a woman, future work is needed to determine if the gender-bias of a designer carries over into websites which have been intentionally gendered. Furthermore, studies which show that designers impart their own gender bias onto the sites they design have used a random sampling of websites. Future work could be completed to determine if the biases are present when male and female designers each create their own versions of the same website. Finally, the recommendations set forth in Chapter 5 could be verified by applying them to a web design task and comparing the perceived gender of the resulting websites to websites designed without recommendations.
REFERENCES
Al Mubireek, K. (2003). Gender-oriented vs. gender-neutral computer games in education. (Unpublished doctoral dissertation). The Ohio State University, Columbus, OH.
Allison, N.K., Golden L. L., Mullet, G. M., & Coogan,D. (1980). Sex-typed product images: The effects of sex, sex role self-concept and measurement implications. Advances in
Consumer Research, 7, 604–609.
Bem, S.L. (1974). The measurement of psychological androgyny. Journal of Consulting and
Clinical Psychology, 42(2), 155-162.
Broverman, I. K., Vogel, S. R., Broverman, D. M., Clarkson, F. E., & Rosenkrantz, P. S. (1972). Sex—role stereotypes: A current appraisal. Journal of Social Issues, 28, 59—78. Brower, T. (2013). What's in the closet: dress and appearance codes and lessons from sexual
orientation. Equality, Diversity and Inclusion: An International Journal, 32(5), 491 – 502.
Casserly, M. (2009). Dell’s revamped ‘Della’ site for women. Forbes. Retrieved March 14, 2016, from http://www.forbes.com/2009/05/22/dell-tech-marketing-forbes-woman-time- della.html.
CSS Web Safe Font Combinations. (2014). Retrieved March 28, 2016, from http://www.w3schools.com/cssref/css_websafe_fonts.asp
Cui, S. (1998). Designing web sites with knowledge of technologies, users, and visual communication. Retrospective Theses and Dissertations. Paper 324.
http://lib.dr.iastate.edu/rtd/324
Darley J. M., & Fazio, R. H. (1980). Expectancy confirmation processes arising in the social interaction sequence. American Psychologist, 35, 867 - 881.
Deaux, K., & Lewis, L. (1984). Structure of gender stereotypes: Interrelationships among components and gender label. Journal of Personality and Social Psychology, 46, 991– 1004.
Debevec, D., & Iyer, E. (1986). The influence of spokespersons in altering a product’s gender image: Implications for advertising effectiveness. Journal of Advertising, 15, 12– 20.
Ehrnberger, K., Räsänen, M., Ilstedt, S. (2012). Visualising gender norms in design: Meet the mega hurricane mixer and the drill dolphia. International Journal of Design, 6(3).
Epley, N., Waytz, A., & Cacioppo, J. T. (2007). On seeing human: A three-factor theory of anthropomorphism. Psychological Review, 114, 864–886.
Fiske, S. T., & Taylor, S. E. (1984). Social cognition. Reading, MA: Addison-Wesley. Flanagin, A. J., & Metzger, M. J. (2003). The perceived credibility of personal Web page
information as influenced by the sex of the source. Computers in Human Behavior, 19(6), 683-701.
Forsythe, S.M. (1990). Effect of applicant’s clothing on interviewers’ decision to hire.
Journal of Applied Social Psychology, 20(19), 1579-1595.
Friedman, B. & Nissenbaum, H. (2007). Bias in computer systems. ACM Transactions on
Information Systems, 14(3), 330-347.
Fugate, D. L., & Phillips J. Product gender perceptions and antecedents of product gender congruence. (2010). Journal of Consumer Marketing, 27(3), 2010, 251-61.
Garrett, J. J. (2010). Elements of User Experience: User-Centered Design for the Web and
Beyond. IN: New Riders.
Gehrke, D., & Turban, E. (1999). Determinants of successful Website design: Relative importance and recommendations for effectiveness. Proceedings of the 32nd Annual
Hawaii International Conference on Systems Sciences. HICSS-32.
Gentry, J. W., Doering, M., & O’Brien, T. V. (1978). Masculinity and femininity factors in product perception and self-image. Advances in Consumer Research, 5, 326–332. Golden, L. L., Allison,N.,&Clee, M. (1979). The role of sex-role concept in masculine and
feminine product perceptions. Advances in Consumer Research, 6, 599–605.
Govers, P. C. M., & Schoormans, J. P. L. (2005). Product personality and its influence on consumer preference. Journal of Consumer Marketing, 22, 189–197.
Govers, P. C. M., Hekkert, P., & Schoormans, J. P. L. (2002). Happy, cute, and tough: Can designers create a product personality that consumers understand? In D. McDonagh, P. Hekkert, J. van Erp, & D.Gyi (Eds.), Design and emotion: The experience of everyday
things (pp. 400–405). London: Taylor and Francis.
Hart, S. G., & Staveland, L. E. (1988). Development of NASA-TLX (Task Load Index): Results of empirical and theoretical research. Advances in Psychology, 52, 139–183. Heilman, M. E., Block, C. J., Martell, R. E., & Simon, M. C. (1998). Has anything changed?