The users’ perspective and preference on three user interface website design patterns and their usability - Part 3
Публикувано: 2018-10-05 16:21:56
7.1 Contribution
I have strived to contribute to the issues emerging from these three hotly discussed website user interface design patterns. Some light was shed on the usability of the ‘hamburger’ icon, CAPTCHAs and returning to the homepage as experienced by the average young user nowadays and potential changes that could enhance this usability were presented. An issue unexplored in past research is the lack of standards of returning to the Homepage of a website and the potential differences in handling that action between websites. As exemplified with the BBC website, some ‘Home’ buttons would actually link to the ‘Home’ part of the section that the user is currently browsing. Furthermore, ‘Home’ was found to bring issues for the users as it can mean different things to people such as a page leading to products or information related to their home, such as home interior and ‘homepage’ turned out to be less confusing. Past researches on the ‘hamburger’ icon which pinpoint that a “Menu” text is necessary were confirmed when taking into account the perspective of the interviewees’ in the interviews but they did not encounter any practical issues in using it. The research and the conclusions herein may be useful to designers, web designers and developers, website owners, user experience and usability researchers, entrepreneurs of all sorts and to the general informatics community and can help to craft a better Web for the future.
7.2 Reflections
It was interesting to do this research and it gave me some interesting insights. It seems like the younger generation, at least in Bulgaria, has started using the Internet in its early days and the chosen participants, 5 of which are ordinary Internet users which do not work in the sphere of technology, cope with design patterns which are seen as contradictory without the mistakes that were expected (I expected the ‘hamburger’ icon to at least confuse one of them due to literature which shows that an actual majority struggled with it). Some of the participants were not very talkative and only replied with a few words so a thing that I would do differently is find a way to extract more useful information and try to find the right questions to get the people to open up and share more of what they experience, perceive and hope for in regards to the user interface elements.
7.3 Further research
One of the limitations of this study was that it only included people with a sound background in using the Internet and that it covered mostly people in their twenties. Further research can pinpoint the difference in usability between these people and people of older age or of little technological experience and compare or contrast their usability, their perceptions on usability and their desired improvements.
Factors that can drastically change the outputs of this research besides age and technological experience include the availability of Internet and the time the users spend online so the outcomes of variations in any of these factors can produce useful comparisons. For example, the difference in usability between people who are experienced in using the Web and the ones who are not can pinpoint the effects and the degree of change of experience on the perception of usability of the users.
Further research can also be carried out regarding the ways to return to the homepage, their differences and the user’s actual usability with those techniques for returning to the homepage as there are some edge cases and slight differences between the ways which has troubled the participants in this research. Though, due to the qualitative nature of the research and the small number of participants involved, generalizations cannot be made which is why a quantitative research may be especially beneficial to pinpoint the seriousness of the issue.
As the ‘hamburger’ icon is mostly used in mobile environments, it might be fruitful to carry out future research which analyzes users who are only desktop users regarding their user experience with the icon. Desktop-only users may provide valuable insight into the user experience and usability of the ‘hamburger’ icon as they are likely to have good experience with technology but poor knowledge of the patterns found in the mobile web.
A mixed study on CAPTCHAs which examines objectively which are the CAPTCHAs that are the quickest to complete and which CAPTCHAs the users prefer after being shown versions of all common forms of CAPTCHA out there could be undertaken. Such a study could not only find which is the optimal CAPTCHA to show to users but it can pinpoint if users take into account some other factors than speed and accuracy when rating the different types and which could be a better choice. The current research did not show many different alternatives regarding CAPTCHA types and this possibly affected the participants’ responses in terms of preferences as they might have had little experience with some of the types.
Dinet et al. (2013) pinpoint a number of studies which reveal that there is an important relationship between the culture of the user and the people behind its creation and that this relationship has a huge effect on usability. Therefore, culture appears to be a variable which could drastically change the perspectives and the preferences of the website users regarding the examined website design patterns, or any set of website design patterns and websites which could be further researched.
8 References
ACM CHI Conference, 1990. Xerox star menu buttons. [online] Available at: <https://vimeo.com/61556918#t=1265s> [Accessed 24 April 2016]
Alday, G., 2014. The origin of the hamburger icon [online]. Available at: <https://www.evernote.com/shard/s207/sh/022f2237-4b4f-4096-87f2-053acd228c2d/ede2672bc3f39a1b0232f84e01ca0a83?utm_content=buffer84840&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer> [Accessed 19 May 2016]
Alonso-Rios, D., Vazquez-Garcia, A., Mosquieira-Rey, E., & Moret-Bonillo, V (2010). “Usability: A critical analysis and a taxonomy” International Journal of Human-Computer Interaction, 26(1), pp. 53–74
Anderson, J. and Aydin, C., 2005. Evaluating the organizational impact of healthcare information systems. New York, NY: Springer.
Archer, J., 2015. The Hamburger Menu Doesn't Work. [online]. Available at: <https://jamesarcher.me/the-hamburger-menu/> [Accessed 23 May 2016].
Badre, A. (2002). Shaping Web usability. Boston: Addison-Wesley.
Barros, A. C. d., Leitão, R., & Ribeiro, J., 2013. “Design and evaluation of a mobile user interface for older adults” Procedia Computer Science, 27, pp. 369-378
Bedford, A., 2016. Usability Testing of Icons. [online] Nngroup.com. Available at: <https://www.nngroup.com/articles/icon-testing/> [Accessed 22 May 2016].
Bian, P., Jin, Y. and Zhang, N, 2010. “Research on human-computer interaction design for distance education websites” 5th International Conference on Computer Science & Education. Hefei, China, 24-27 August 2010. New York: IEEE
Bursztein, E., Moscicki, A., Fabry, C., Bethard, S., Mitchell, J. and Jurafsky, D., 2014. Easy does it. Proceedings of the 32nd annual ACM conference on Human factors in computing systems - CHI '14. Toronto, Canada. 26 April 2014 – 01 May 2014. New York: ACM
Campbell-Dollaghan, K., 2014. Who Designed the Hamburger Icon? [online] Available at: <https://gizmodo.com/who-designed-the-iconic-hamburger-icon-1555438787> [Accessed 3 Feb. 2016].
Chowdhury, G. and Chowdhury, S., 2011, “Information users and usability in the digital age”. London: Facet Publishing
Chuttur, M., 2009. “Overview of the Technology Acceptance Model: Origins, Developments and Future Directions” Sprouts: Working Papers on Information Systems, 9(37), pp.1-21.
Crang, M. & Cook, I., 2007. Doing Ethnographies. Thousand Oaks, CA:Sage Publications
Creswell, J.W., 2009. Research Design: Qualitative, Quantitative, and Mixed Methods Approaches, 3. ed. Thousand Oaks, CA: Sage Publications
De Villiers, M., 2005. Interpretive Research Models for Informatics: Action Research, Grounded Theory, and the Family of Design- and Development Research. UNISA Institutional Repository.
Demerson, H., 2014. Who started the trend of using the hamburger icon as a menu button? [online] Available at: <https://www.quora.com/Who-startedthe-trend-of-using-the-hamburger-icon-%E2%98%B0-as-a-menu-button> [Accessed 1 May 2016]
Dinet, J., Vivian, R., Lamantia, K.,et al., “Understanding the cultural dimension on the Web homepage preferences and visual exploration”,Proceedings of ICDS 2013, The 7th International Conference on Digital Society. Nice, France, 24 February – 1 March 2013. s.n.
Fichter, D. and Wisniewski, J., 2016. Emotional Design, Storytelling, 'Slippiness,' and Understandable Icons. Online Searcher, 40(1), pp.74-76.
Finn, K. and Johnson, J., 2013. A Usability Study of Websites for Older Travelers. Universal Access in Human-Computer Interaction. User and Context Diversity, pp.59-67.
Georgsson, M. and Staggers, N., 2016. An evaluation of patients’ experienced usability of a diabetes mHealth system using a multi-method approach. Journal of Biomedical Informatics, 59, pp.115-129.
Giorgi, A., 1997. The Theory, Practice, and Evaluation of the Phenomenological Method as a Qualitative Research Procedure. Journal of Phenomenological Psychology, 28(2), pp. 235-260.
Griffen, L., 2015. ‘Touch-screen tablet navigation and older adults: an investigation into the perceptions and opinions of baby boomers on long, scrolling home pages and the "hamburger icon”’.Thesis. Iowa State University.
Hall, E., Maujood, M., Voychehovski, S., Shtuhl, O., Lichaw, D., Wachter-Boettcher, S., Meyer, E., McPheeters, M. and Wachter-Boettcher, S., 2013. Interviewing Humans. [online] Alistapart.com. Available at: <https://alistapart.com/article/interviewing-humans> [Accessed 30 Apr. 2016].
Harms, M., & Adams, J., 2008. Usability and design considerations for computer-based learning and assessment. Annual Meeting of the American Educational Research Association. New York, United States of America. 23-28 March 2008. Washington: American Educational Research Association.
Holden, H. and Rada, R., 2011. Understanding the Influence of Perceived Usability and Technology Self-Efficacy on Teachers’ Technology Acceptance. Journal of Research on Technology in Education, 43(4), pp.343-367.
Internetlivestats.com, 2016. Total number of Websites - Internet Live Stats. [online] Available at: <https://www.internetlivestats.com/total-number-of-websites/> [Accessed 3 Feb. 2016].
Jokela, T., Iivari, N., Matero, J. and Karukka, M., 2003. ‘The standard of user-centered design and the standard definition of usability: analyzing ISO 13407 against ISO 9241-11’, CLIHC ’03 Proceedings of the Latin American conference on Human-computer interaction, Rio de Janeiro, Brazil. 17-20 November 2003. New York: ACM pp. 53–60.
Keenan, S., Hartson, H., Kafura, D. and Schulman, R., 1999. Empirical Software Engineering, 4(1), pp.71-104.
Keenan, S., Hartson, H., Kafura, D. and Schulman, R., 1999. The Usability Problem Taxonomy: A Framework for Classification and Analysis, Empirical Software Engineering, 4, pp.71-104.
Khan, M., Sulaiman, S., Tahir, M. and Said, A., 2013. A Study on Usability Factors for Haptic Systems. IJCTE, pp.500-502.
Klein, H. and Myers, M., 1999. A Set of Principles for Conducting and Evaluating Interpretive Field Studies in Information Systems. MIS Quarterly, 23(1), p.67.
Lichtman, M., 2010. Qualitative Research in Education: A User's Guide, 2nd ed. Los Angeles: SAGE.
Lichtman, M., 2006. Qualitative research in education. Thousand Oaks: Sage Publications.
Lindgaard, G., Fernandes, G., Dudek, C. and Brown, J., 2006. Attention web designers: You have 50 milliseconds to make a good first impression!. Behaviour & Information Technology, 25(2), pp.115-126.
McCusker, K. and Gunaydin, S., 2014. Research using qualitative, quantitative or mixed methods and choice based on the research. Perfusion, 30(7), pp.537-542.
McKay, E., 2008. The human-dimensions of human-computer interaction. Amsterdam: IOS Press.
Merriam, S. and Tisdell, E., 2015. Qualitative research: a guide to design and implementation. San Francisco, CA:Jossey-Bass.
Mingers, J. and Willcocks, L., 2004. Social theory and philosophy for information systems. Chichester, West Sussex, England: J. Wiley.
Montero, F., Lozano, M., González, P., Ramos, I., 2002. “A First Approach To Design Web Sites By Using Patterns.” Second Latin American Conference on Pattern Languages of Programming. Rio de Jainero, Brazil. 5-7 August 2002. s.l: s.n.
Myers, M. and Avison, D., 2002. Qualitative research in information systems. Thousand Oaks, CA: Sage Publications.
Nielsen, J., 1999. 10 Good Deeds in Web Design. [online] Nielsen Norman Group. Available at: <https://www.nngroup.com/articles/ten-good-deeds-in-web-design/> [Accessed 7 May 2016].
Nielsen, J., 2008. Middle-Aged Users' Declining Web Performance. [online] Nngroup.com. Available at: <https://www.nngroup.com/articles/middle-aged-web-users/> [Accessed 29 Sep. 2016].
Nisbett, R. and Miyamoto, Y., 2005. The influence of culture: holistic versus analytic perception. Trends in Cognitive Sciences, 9(10), pp.467-473.
Orfanou, K., Tselios, N. and Katsanos, C., 2015. Perceived Usability Evaluation of Learning Management Systems: Empirical Evaluation of the System Usability Scale. International Review of Research in Open and Distributed Learning, 16(2), pp. 227-246.
Pernice, K. and Budiu, R., 2016. Hamburger Menus and Hidden Navigation Hurt UX Metrics. [online] Nngroup.com. Available at: <https://www.nngroup.com/articles/hamburger-menus/> [Accessed 28 Sep. 2016].
Pogue, D., 2012. Time to Kill Off Captchas. Sci Am, 306(3), pp.23-23.
Rosenthal, M., 2016. Qualitative research methods: Why, when, and how to conduct interviews and focus groups in pharmacy research. Currents in Pharmacy Teaching and Learning, 8(4), pp.509-516.
Lauesen, S. and Younessi, H., 1998, Six styles for usability requirements, Proceedings of the Proceedings of REFSQ'98, Presses Universitaires de Namur, pp. 155-166.
Schutt, R., 2001. Investigating the social world. Thousand Oaks, Calif.: Pine Forge Press.
Shneiderman, B., 2006.Research-based web design & usability guidelines. Washington, D.C.: U.S. Dept. of Health and Human Services.
Shultz, S. and Hand, M., 2015. Usability: A Concept Analysis. Journal of Theory Construction & Testing, 19(2), pp.65-70.
Sørum, H., Andersen, K. and Vatrapu, R., 2012. Public websites and human–computer interaction: an empirical study of measurement of website quality and user satisfaction. Behaviour & Information Technology, 31(7), pp.697-706.
Thielsch, M., Engel, R. and Hirschfeld, G., 2015. Expected usability is not a valid indicator of experienced usability. PeerJ Computer Science, 1, p.19.
Toxboe, A., 2016. Home Link design pattern. [online]. Available at: <https://ui-patterns.com/patterns/HomeLink> [Accessed 24 Apr. 2016].
Toxboe, A., 2016. UI Patterns [online]. Available at: <https://ui-patterns.com/> [Accessed 10 Apr. 2016].
Trends.builtwith.com, 2016. Twitter Bootstrap Usage Statistics. [online] Available at: <https://trends.builtwith.com/docinfo/Twitter-Bootstrap> [Accessed 23 Feb. 2016].
Usabilitynet.org, 2016. UsabilityNet: Definition of usability. [online] Available at: <https://www.usabilitynet.org/management/b_what.htm> [Accessed 3 May 2016].
Ux.stackexchange.com., 2010. Home button vs Logo link?. [online] Available at: <https://ux.stackexchange.com/questions/5003/home-button-vs-logo-link> [Accessed 7 May 2016].
Wagner, N., Hassanein, K. and Head, M., 2014. The impact of age on website usability. Computers in Human Behavior, 37, pp.270-282.
Willig, C., 2008. Introducing Qualitative Research in Psychology. Adventures in theory and method. 2nd ed. Berkshire: McGraw-Hill, Open University Press.
Yan, M., 1995. A Semiotic Analysis of Icons on the World Wide Web., Eyes on the Future: Converging Images, Ideas, and Instruction. Selected Readings from the Annual Conference of the International Visual Literacy Association. Chicago, United States of America. 18-22 October 1995. Chicago: International Visual Literacy Association.
Appendix A: Consent form
The research’s title: The users’ perspective and preference on 3 website design patterns (CAPTCHAs, hamburger icon and returning to the homepage) and their usability
The research’s aim: To better understand what users think of 3 widely used design patterns and how the design patterns can be ameliorated
The research’s benefits: The findings can serve the purpose of showing the actual usability impact of the chosen design patterns and particular ways to enhance them. Those findings can pinpoint if the chosen patterns have low usability and need to be avoided or not and it can pinpoint how to create better design patterns in the future. This can not only impact the actual participants but the wide Internet audience which uses websites regularly and is in a constant need of easier to use, learn and memorize user interfaces and which may struggle with using some of the established website design patterns.
Contacting the researcher: Ivan Dimov, id222ca@student.lnu.se, ivan@dimoff.biz
The research’s description: You will be interviewed and asked questions regarding websites, their user interface and three (3) user interface elements that are found in many websites, in particular. A few demographic questions will also be posed to you initially. Before or after the interview, a short observation will take place where you are going to be given a handful of tasks and will have to think aloud - what you are doing, trying to do and so on.
Potential risk and discomfort: No risk or discomfort can be foreseen. Only your age, gender, education level, technological experience and country of birth will be utilized for the purposes of the research.
Your right to the information: Participation in the research is entirely voluntary. You can choose not to participate in the research at any point of time without having to provide any reasons for this decision. After participating, the themes that were extracted from your data will be shown to you to determine whether you believe that they correctly represent what you have communicated.
Confidentiality: The information which will be collected from the interviews will be used only for the purposes of the research and it will not be provided to any third-parties. The audio recordings of the interview and any notes or transcripts will be only accessed by the researcher and his supervisor and examiner.
Feedback and questions regarding the research: You can contact Ivan Dimov (the researcher) at any time by using one of the provided email addresses in this form.
○ I have understood what the research is about and I chose to participate in it.
○ I agree for my interview and observation to be recorded
○ I am aware that my participation in this research is voluntary and that I can choose to withdraw at any time without having to provide explanations
Name of Participant Date Signature
Name of Person Date Signature
taking consent.
Appendix B: Interview Questions
Demographic questions
1. What is your sex?
2. What is your age?
3. What is your highest level of education?
4. From how long do you use the Internet?
5. How many hours do you spend on the Internet daily?
6. What is your country of origin and the country you currently reside in?
Research questions
1. What do you usually do to return to the homepage of a website?
2. What actions do you ideally want to take to return to the homepage of a website?
3. How satisfied are you with the ways to return to the homepage of websites that you are using and why?
4. How easy do you think returning to the homepage of most websites is and why?
5. What changes may be made so that returning to the homepage is easier, faster and satisfying?
The hamburger icon is shown to the user
6. What does this icon do when used in a website or an application?
7. What icon do you think would be a better fit for the purpose of opening up the navigation and what would it consist of and look like, if any?
8. How easy do you think it is to learn what the icon does and why?
9. How satisfied are you with websites which use the icon to show their navigation and why?
10. How do you think that the icon affects your speed when browsing through websites when compared to websites which do not use it and why?
11. What changes may be made to the icon to be easier to understand and use, according to you?
12. What do you think of the icon’s visual appearance?
13. Can you briefly explain what do you think a CAPTCHA is, have you ever encountered such a thing in websites and if so, when and why?
14. How do you think a CAPTCHA affects your speed in dealing with websites?
15. How easy it is to complete the different CAPTCHAs?
16. What ways can you think of that would ease the completion of CAPTCHAs?
17. Tell me about the CAPTCHA that you saw and found easy, satisfying and quick to complete? What characteristics did it have, what did you have to do and why you liked it the most?
18. Do you have anything else to add or comment on the topic?
Appendix C: Observation Questions
Open https://www.paypal.com/bg/webapps/mpp/buyer-protection
● Return to the homepage of the website using only the provided user interface
Open https://en.m.wikipedia.org/wiki/Main_Page
● How would you login into Wikipedia without switching to the desktop website?
Open https://m.9gag.com/
● How would you select funny images on the given website?
Open https://smallseotools.com/plagiarism-checker/
● How would you check some text for plagiarism?
Open https://www.bbc.com/news/technology
● Return to the homepage of the website using only the provided user interface