Designing the Gender- Neutral User Experience
Total Page:16
File Type:pdf, Size:1020Kb
Designing the Gender- Neutral User Experience A Major Qualifying Project report submitted to the faculty of WORCESTER POLYTECHNIC INSTITUTE in partial fulfillment of the requirements for the Degree of Bachelor of Science in Computer Science by Derrick Barth April 26, 2012 Jeffrey LeBlanc, Computer Science Department, Advisor Project ID: CS MQP JLB-2012 This report represents the work of one or more WPI undergraduate students submitted to the faculty as evidence of completion of a degree requirement. WPI routinely publishes these reports on its web site without editorial or peer review 2 Abstract Ubiquitous computing and the World Wide Web were developed by predominantly male engineers. As such, a gender bias has been observed through the study of Gender Human- Computer Interaction (Gender HCI) in the area of user interface design, particularly on the Internet where a vast majority of websites are developed by men and as such are consistently scored higher by male users. The author proposed a hypothesis for creating a gender-neutral user experience that yields equal or better usability scores as more traditional, gender biased interfaces. An experiment was designed and conducted which tests this hypothesis by subjecting both male and female users to three interface types, two biased and one neutral, to see if a synthesis of male- and female-targeted design principles can be found. 3 Acknowledgements Jeff LeBlanc, my project adviser, for sharing my passion for Human-Computer Interaction and being as excited about the project as I was. Jeff frequently provided real-world examples and advice both in the classroom and in project meetings which helped keep me focused on relevant issues and constantly pointed me in the right direction. His expertise as an HCI practitioner proved to be invaluable and helped shape the experiment into something very credible and worthwhile. He provided a great example for the kind of engineer and person I hope to be over the course of my career. Professor David Brown, whose undergraduate course on Human-Computer Interaction introduced me to this amazing field and sparked a passion for what would become my favorite area of computer science. Having taken his class prior to the MQP, I was primed in the areas of task and user analysis, usability testing, and statistical analysis on data collected from HCI experiments. By taking his course I was also introduced to the book Universal Principles of Design, which I read cover to cover in one sitting and helped me see computers, and the way we use them, in the same way that a painter may see a canvas. Professor John Sanbonmatsu, whose teachings opened my eyes to gender issues and helped me become a more sensitive, thoughtful person. Thank you John for being a great mentor, friend, and making this world a better place. This university is lucky to have you. Professor Gary Pollice, whose courses on Software Engineering, Object-Oriented Analysis and Design, and Webware helped me become a better programmer and appreciate the design of software as well as the theory. His teachings have made me strive to become a better craftsman. William Barth, my younger brother and best friend, without whom I may never have been able to attend college and chase my dreams. I hope I have provided as good an example for you as you have for me. Leda Hosier, whose affection, kind heart, and unrelenting support helped keep me sane and focused during this last, grueling semester. I look forward to tackling many more of life’s challenges with you, and hope you’ll never have to see me this sleep deprived again. 4 Table of Contents Abstract ..................................................................................................................................... 2 Acknowledgements ................................................................................................................... 3 Table of Contents ...................................................................................................................... 4 Table of Figures ......................................................................................................................... 5 1 Introduction ....................................................................................................................... 6 1.1 Background ................................................................................................................. 6 1.2 Motivation .................................................................................................................. 8 1.3 General Project Description ........................................................................................ 9 2 Literature Review ............................................................................................................. 10 2.1 Ubiquitous Computing .............................................................................................. 10 2.2 Gender Human-Computer Interaction Studies ......................................................... 11 3 Problem Statement .......................................................................................................... 17 4 A Hypothesized Gender-Neutral User Experience Design ............................................... 18 4.1 Synthesis of Gender-Biased Design Principles .......................................................... 18 4.2 Requirements for Success ......................................................................................... 20 5 Designing the Experiment ................................................................................................ 23 5.1 Deployment............................................................................................................... 23 5.2 Use Cases .................................................................................................................. 24 5.3 The Male Biased Interface ......................................................................................... 24 5.4 The Female Biased Interface ..................................................................................... 25 5.5 The Gender Neutral Interface ................................................................................... 26 5.6 Experiment Procedure .............................................................................................. 28 6 Implementing the Experiment ......................................................................................... 29 6.1 HTML5, CSS3, and JavaScript .................................................................................. 29 6.2 Data Collection .......................................................................................................... 31 6.3 JavaScript Elements ................................................................................................. 32 6.4 Final Designs and Deviations from Planning Phase .................................................. 33 7 Conducting the Experiment ............................................................................................. 38 7.1 Deployment and Recruiting Test Subjects ................................................................ 38 8 Analysis of Results ........................................................................................................... 40 8.1 Average Scores and Analysis by Gender .................................................................... 41 8.2 Average Scores by Age Range .................................................................................... 43 9 Conclusion ....................................................................................................................... 45 10 References .................................................................................................................... 46 5 Table of Figures Figure 1 - User interface for Microsoft Windows XP, a popular operating system ........................ 7 Figure 2 - User interface for Apple Mac OS X, the main competitor to Windows, and know for beautiful interface design .............................................................................................................. 7 Figure 3 - The Windows error screen known as the “Blue Screen of Death”, it is widely known and reviled as it is not immediately helpful to non-technical users ............................................... 8 Figure 4 - An example of internal structures making use of nature scenery, invoking the Biophilia Effect ........................................................................................................................................... 19 Figure 5 - Mockup for initial design of the male biased website ................................................. 25 Figure 6 - Mockup for initial design of the female biased website .............................................. 26 Figure 7 - Mockup for initial design of the gender neutral website .............................................. 27 Figure 8 - The female biased website menu, with mouseover effect .......................................... 31 Figure 9 - Neutral Design front page ........................................................................................... 33 Figure 10 - Neutral Design book inventory ................................................................................. 34 Figure 11 - Male Biased design front page ................................................................................. 35 Figure 12 - Male Biased design book inventory