Alan Dix > 2011

Human-Computer Interaction and Web Design

Alan Dix1,2 and Nadeem Shabir2

1 Computing Department, Lancaster University, Lancaster, UK
2 Talis, Birmingham, UK

Chapter 3 in Handbook of Human Factors in Web Design, second edition. Kim-Phuong L. Vu and Robert W. Proctor (eds). CRC Press. ISBN: 1439825947

Introduction

On a web site for a U.K. airline there are two pull-down menus, one for U.K. departure airports and the other for non-U.K. destinations.  When you select a departure airport the destination menu changes so that only those with flights from the chosen departure airport are shown in the second menu.  So if you live particularly close to a single airport you can easily ask "where can I fly to from here?"

However, you may be willing to travel to an airport and what you really want to know is how to get to a particular destination such as "where can I fly from in order to get to Faro?"  The web site did not support this.  You can select the second menu first, but the first list does not change, all the options are there, and, as soon as you select anything in the first list, your selected destination disappears and you are back to the full list.

Now, in retrospect it seems like common sense that it is reasonable to want to ask "how do I get to Faro?", but the designer simply thought logically: 'from' then 'to'.  The execution was technically flawless.  Many similar sites fail completely on some browsers due to version-specific scripts.  This worked well, but did the wrong thing.  The site was well designed aesthetically and technically, but failed to deliver an experience that matched what a reasonable user might expect.  Even more surprising is that this problem was present at the time of the first edition of this book and is still there.  Since then the website has been redesigned, and the appearance of the menus has changed, but the behavior is the same.

Human-Computer Interaction is about understanding this sort of situation and about techniques and methods that help avoid these problems.  The adjective most closely linked to HCI is 'usability'.  However it often has almost Taylorist* overtones of efficiency and time and motion studies.  This is not the only aspect that matters, and there are three 'use' words that capture a more complete view of HCI design.  The things we design must be:

useful
users get what they need – functionality
usable
users can do these things easily and effectively
used
users actually do start and continue to use it

Technical design has tended to be primarily focused on the first of these and HCI on the second. However, the third is also crucially important. No matter how useful or usable it is, if a system is not used then it is useless.

For an artifact to be used it often needs to be attractive, to fit within organizational structures, and to motivate the user.  For this reason, the term 'user experience' is often used rather than 'usability', especially in web design, emphasising the holistic nature of human experience. We will look at some of these issues in more detail for the web later in this chapter.

The remainder of this chapter is split into three main parts. First, in section 3.2, we will consider the context of the web, some of the features that make applications designed for the web special. Then, in section 3.3 we will look at the nature of human–computer interaction itself as an academic and design discipline: its roots, development, links to other disciplines, and at a typical HCI design process and the way different techniques and methods contribute to it. Many of the human design issues of web design can be seen as 'special cases' of more general usability issues and can be tackled by the general HCI design process. However, as we discuss in section 3.2, there are special features of the web, and so in section 3.4 we discuss a few more particular HCI issues for the web. Of course, this whole book is about human factors and the web, and some issues are covered in detail in other chapters; hence the latter part of the chapter tries to complement these. This chapter concludes with a brief view of the directions in which HCI is developing within the context of the web and related networked and mobile technologies.

 

References

  1. AAAI (1998).    AAAI-98 Workshop on Recommender Systems. http://rsv.ricoh.com/~marko/rec98/

  2. Adar, E., Teevan, J., and Dumais, S. 2009. Resonance on the web: web dynamics and revisitation patterns. In Proceedings of the 27th international Conference on Human Factors in Computing Systems (Boston, MA, USA, April 04 - 09, 2009). CHI '09. ACM, New York, NY, 1381-1390. DOI= http://doi.acm.org/10.1145/1518701.1518909

  3. Apple Computer (1996).  Macintosh Human Interface Guidelines. http://developer.apple.com/techpubs/mac/

  4. archive.org (2003).  Internet Archive: Wayback Machine.  http://web.archive.org/

  5. Berners-Lee, T., (1998) Hypertext style: Cool URIs don't change. W3C.org. Page dated 1998. Accessed 20/12/2009.  http://www.w3.org/Provider/Style/URI

  6. Berners-Lee, T., Hendler, J. and Lassila, O. (2001). "The Semantic Web". Scientific American Magazine, 17th May 2001

  7. Blythe, M. , Overbeeke, K. , Monk, A., & Wright, P.  (Eds.) (2003). Funology: From Usability to Enjoyment. Dordrecht, the Netherlands: Kluwer

  8. BrowserCam (2009).  BrowserCam - Cross Browser Compatibility Testing Tools.  dated 2002-2009.  acessed 6/3/2010. http://www.browsercam.com/

  9. Carroll, J. (Ed.) (2000).  Making Use: Scenario-Based Design of Human-Computer Interactions. MIT Press.

  10. Carroll, J. (2010).  Conceptualizing a possible discipline of human-computer interaction, Interacting with Computers, Volume 22, Issue 1, Special Issue: Festschrift for John Long, January 2010, Pages 3-12, ISSN 0953-5438, DOI: 10.1016/j.intcom.2009.11.008.

  11. Catledge, L., & Pitkow, J. (1995). Characterizing browsing strategies in the World-Wide Web. In Proceedings of the Third International World Wide Web Conference, Darmstadt, Germany.  http://www.igd.fhg.de/www/www95/papers/

  12. Chen, C., & Czerwinski, M. (1998).  From Latent Semantics to Spatial Hypertext – An Integrated Approach, Hypertext'98 (pp. 77–86). ACM Press.

  13. Clark, J. (Ed.) (1999).  XSL Transformations (XSLT) Version 1.0. W3C Recommendation. 16 November 1999.  http://www.w3.org/TR/xslt

  14. Clark, H. (1996). Using Language. Cambridge University Press.

  15. Crabtree, A. (2003).  Designing Collaborative Systems: A Practical Guide to Ethnography,  Springer.

  16. DataPortability (2010) The DataPortability Project. accessed 11th March 2010.   http://www.dataportability.org/

  17. Diaper, D., & Stanton, N. (Eds.) (2004).  The Handbook of Task Analysis for Human-Computer Interaction. Lawrence Erlbaum Associates.

  18. Dix, A. & Mancini, R. (1997).  Specifying history and backtracking mechanisms, In P. Palanque and F. Paterno. (Eds.), Formal Methods in Human-Computer Interaction (pp. 1-24). London: Springer-Verlag.
    http://www.hcibook.com/alan/papers/histchap97/

  19. Dix, A. (1998).  Hands Across the Screen - why scrollbars are on the right and other stories.  Interfaces, 37, 19–22. http://www.hcibook.com/alan/papers/scrollbar/

  20. Dix, A. (2000a).  Designing a virtual fridge (poster).  Computers and Fun 3, York, 13th December 2000.  (abstract appears in Interfaces vol 46, 10–11. Spring 2001). http://www.vfridge.com/research/candf3/

  21. Dix, A. (2000b).  Welsh Mathematician walks in Cyberspace – the cartography of cyberspace, (keynote).  Proceedings of the Third International Conference on Collaborative Virtual Environments - CVE2000, (pp. 3–7). ACM Press. http://www.hcibook.com/alan/papers/CVE2000/

  22. Dix, A. (2001).  artefact + marketing = product.  Interfaces, 48, 20–21. http://www.hiraeth.com/alan/ebulletin/product-and-market/

  23. Dix, A. (2003a).  In a strange land. http://www.hiraeth.com/alan/topics/cyberspace/

  24. Dix, A. (2003b).  Deconstructing Experience - pulling crackers apart. In M. Blythe, K. Overbeeke, A. Monk and P. Wright (Eds.), Funology: From Usability to Enjoyment (pp. 165-178). Dordrecht, the Netherlands: Kluwer.   http://www.hcibook.com/alan/papers/deconstruct2003/

  25. Dix, A., Howes, A., & Payne, S. (2003).  Post-web cognition: evolving knowledge strategies for global information environments International Journal of Web Engineering Technology, 1(1), 112–126. http://www.hcibook.com/alan/papers/post-web-cog-2003/

  26. Dix, A., Finlay, J., Abowd, G., & Beale, R. (2004).  Human–Computer Interaction, third edition.  Prentice Hall. http://www.hcibook.com/e3/

  27. Dix, A., Levialdi, S., & Malizia, A. (2006). Semantic Halo for Collaboration Tagging Systems. in Proceedings of Workshops held at the Fourth International Conference on Adaptive Hypermedia and Adaptive Web-Based Systems (AH2006), S. Weibelzahl and A. Cristea (eds.) - Workshop on Social Navigation and Community-Based Adaptation Technologies, Lecture Notes in Learning and Teaching, Dublin: National College of Ireland. pp. 514-521

  28. Dix, A. (2010). Human-computer interaction: A stable discipline, a nascent science, and the growth of the long tail, Interacting with Computers, Volume 22, Issue 1, Special Issue: Festschrift for John Long, January 2010, Pages 13-27, ISSN 0953-5438, DOI: 10.1016/j.intcom.2009.11.007.

  29. DMOZ (2003). Open Directory Project.  http://www.dmoz.org

  30. Facebook (2010).  Facebook Connect. accessed 6th March 2010. http://developers.facebook.com/connect.php

  31. Fielding, R. T. (2000).  Architectural Styles and the Design of Network-based Software Architectures.  PhD Dissertation.  University of California, Irvine

  32. Fisher, A. (1990). Labyrinth - solving the riddle of the maze, New York: Harmony Books.

  33. Fitts, P., & Posner, M. (1967). Human Performance. Wokingham, UK: Wadsworth.

  34. Flanagan, D., Farley, J., Crawford, W., & Magnusson, K. (1999).  Java Enterprise in a Nutshell.  O'Reilly.

  35. Fuchs, T. (2010).  script.aculo.us - web 2.0 javascript. accessed 6th March 2010. http://script.aculo.us/

  36. Google (2010). Gears: Improving Your Web Browser. accessed 6th March 2010.  http://gears.google.com/

  37. HP (2009).  HPL India: Innovations for the Next Billion Customers. Hewlett Packard Development. dated 2009. accessed 1/1/2010. http://www.hpl.hp.com/research/hpl_india_next_billion_customers/

  38. Hughes, J., O'Brien, J., Rouncefield, M., Sommerville, I., & Rodden, T.  (1995).  Presenting ethnography in the requirements process.  In Proc. IEEE Conf. on Requirements Engineering, RE'95 (pp. 27–34). IEEE Press.

  39. Hyde, L. (1983) The Gift. Random House.

  40. Inxight Software (1999).  Hyperbolic Tree.  http://www.inxight.com/

  41. ITU (2005).  ITU Internet Reports 2005: The Internet of Things. International Telecommunication Union, Geneva, Switzerland.

  42. jQueryUI (2009).  jQuery User Interface.  dated 2009.  accessed 6th March 20010. http://jqueryui.com/

  43. Keen, A.  (2007) The Cult of the Amateur: How Today's Internet Is Killing Our Culture and Assaulting Our Economy. Nicholas Brealey Publishing.

  44. Krasner, G., & Pope, S. (1988). A cookbook for using the model-view-controller user interface paradigm in Smalltalk-80. JOOP, 1(3).

  45. Larson, K., & Czerwinski, M. (1998). Web Page Design: Implications of Memory, Structure and Scent for Information Retrieval, In Proceedings of CHI98, Human Factors in Computing Systems (pp. 25-32). ACM Press.

  46. Lohr, C. (1998). Alexa Internet Donates Archive of the World Wide Web to Library of Congress.  Alexa Internet Press Release, 13th Oct. 1998.
    http://www.alexa.com/company/inthenews/loc.html

  47. Long, J. & Dowell, J. (1989).  Conceptions of the discipline of HCI: craft, applied science, and engineering, in: A. Sutcliffe and L. Macaulay (Eds.), Proceedings of the Fifth Conference of the British Computer Society, Human-Computer interaction Specialist Group on People and Computers V (Univ. of Nottingham), Cambridge University Press, New York, 1989, pp. 9–32.

  48. Lynch, P., & Horton, S. (2002).  Web Style Guide: Basic Design Principles for Creating Web Sites, Second Edition
    http://www.webstyleguide.com/

  49. MacKenzie, I.S. (2003). Motor Behaviour Models for Human-Computer Interaction. In John Carroll (Ed.), HCI Models, Theories, and Frameworks: Toward an Multidisciplinary Science. Morgan Kaufman

  50. Mauss, M. (1925), The Gift: The Form and Reason for Exchange in Archaic Societies.  Originally entitled: Essai sur le don. Forme et raison de l'échange dans les sociétés archaïques.

  51. McCormack, D.  (2002).  Web 2.0: 2003-'08 AC (After Crash) The Resurgence of the Internet & E-Commerce. Aspatore Books.

  52. Mayer-Schönberger, V. (2009).  Delete: The Virtue of Forgetting in the Digital Age.  Princeton University Press.

  53. Miller, G. (1956).  The magical number seven, plus or minus two: some limits on our capacity to process information. Psychological Review, 63(2), 81–97.

  54. Monk, A., Wright, P., Haber, J., & Davenport, L. (1993). Improving your human computer interface: a practical approach. Hemel Hempstead, UK: Prentice Hall International.

  55. Monk, A. (2003).  Common Ground in Elecronically Mediated Communication: Clark's Theory of Languge Use.  Chapter 10 in HCI Model, Theories and Frameworks: Towards a Multidisciplinary Science.  J. Carroll (Ed.). Morgan Kaufmann. pp. 263–289.

  56. Morville, P. (2005). Ambient Findability: What We Find Changes Who We Become.  O'Reilly Media, 2005

  57. Nardi, B. (2010). My Life as a Night Elf Priest: An Anthropological Account of World of Warcraft. MIT Press.

  58. Nelson, T. (1981). Literary Machines: The Report on, and of, Project Xanadu, Concerning Word Processing, Electronic Publishing, Hypertext, Thinkertoys, Tomorrow's Intellectual Revolution, and Certain other Topics Including Knowledge, Education and Freedom. Sausalito, CA, USA: Mindful Press.

  59. Netcraft (2009). November 2009 Web Server Survey.  Dated 10/11/2009. Accessed 19/12/2009.  http://news.netcraft.com/archives/web_server_survey.html

  60. Nielsen, J. (1994). Heuristic evaluation. In Usability Inspection Methods. New York, USA: John Wiley.

  61. Nielsen, J. (1996). Why Frames Suck (most of the time). http://www.useit.com/alertbox/9612.html

  62. Open Software Foundation (1995).  OSF/Motif Programmer’s Guide, Revision 2. Prentice Hall

  63. OpenID Foundation (2009).  What is OpenID?  dated 2003-2009.  accessed 6th March 2010.  http://openid.net/get-an-openid/what-is-openid/

  64. O'Reilly, T.  (2005). What Is Web 2.0: Design Patterns and Business Models for the Next Generation of Software. O'Reilly Media.  dated 30/9/2005.  accessed 4/1/2010. http://oreilly.com/web2/archive/what-is-web-20.html

  65. Palanque, P., & Paternó, F. (Eds.) (1997). Formal Methods in Human-Computer Interaction. London, Springer-Verlag.

  66. Pfaff, P., & ten Hagen, P. (Eds.) (1985). Seeheim Workshop on User Interface Management Systems. Berlin: Springer-Verlag.

  67. Pixlr (2009). Pixlr photo editing services.  accessed 5/1/2010.  http://pixlr.com

  68. Raymond, E. (1999). The Cathedral and the Bazaar. O'Reilly

  69. Resig, J. (2010).  Test Swarm Alpha Open. accessed 6th March 2010.   http://ejohn.org/blog/test-swarm-alpha-open/

  70. Resnick, P., & Varian, H. (guest editors) (1997). Special Issue on Recommender Systems. CACM. 40(3), 56–89.

  71. Rouet, J-F., Ros, C.,  Jégou, G., & Metta, S. (2003).  Locating Relevant Categories in Web Menus: Effects of Menu Structure, Aging and Task Complexity.  In D. Harris, V. Duffy, M. Smith and C. Stephandis (Eds.), Human-Centred Computing: Cognitive Social and Ergonomic Aspects.  Vol. 3 of Proc. of HCI Intnl (pp.  547–551). New Jersey, USA: Laurence Earlbaum.  .

  72. Sas, C, Dix, A., Hart, J., & Ronghui, S. (2009). Emotional Experience on Facebook Site. In: CHI '09: CHI '09 Extended Abstracts on Human factors in Computing Systems, 4-9 April 2009, Boston, MA, pp. 4345-4350

  73. Sears, A. & Jacko, J. (eds.) (2008). Human-Computer Interaction Handbook: Fundamentals, Evolving Technologies and Emerging Applications – 2nd Edition. New York, USA: Taylor & Francis Group.

  74. Seow, S. C. (2005). Information theoretic models of HCI: A comparison of the Hick-Hyman Law and Fitts' Law. Human-Computer Interaction, 20, 315-352.

  75. Shore, J. (2007). The Art of Agile Development. O'Reilly Media

  76. Silva, P., & Dix, A. (2007).  Usability – Not as we know it! In Procedings of BCS HCI 2007, People and Computers XXI, BCS eWic.

  77. Sommerville, I. (2001).  Software Engineering, 6th Edition. Addison-Wesley. http://www.software-engin.com

  78. Suchman, L. (1987).  Plans and Situated Actions: The problem of human–machine communication. Cambridge, UK:  Cambridge University Press

  79. Sun, C., & Ellis, C. (1998). Operational transformation in real-time group editors: issues, algorithms, and achievements. Proceedings of CSCW'98. Seattle, USA. ACM Press pp. 59-68.

  80. Talis (2010). Project Cenote. http://cenote.talis.com/

  81. Tauscher, L., & Greenberg, S. (1997).  How people revisit web pages: empirical findings and implications for the design of history systems. International Journal of Human Computer Studies, 47(1), 399–406.
    http://www.cpsc.ucalgary.ca/grouplab/papers/1997/

  82. Taylor, F. (1911). The Principles of Scientific Management.

  83. Thompson, J. (2003). What is Taylorism?
    http://instruct1.cit.cornell.edu/courses/dea453_653/ideabook1/thompson_jones/Taylorism.htm

  84. Thompson, A., & Kemp, E. (2009). Web 2.0: extending the framework for heuristic evaluation. In Proceedings of the 10th international Conference NZ Chapter of the Acm's Special interest Group on Human-Computer interaction (Auckland, New Zealand, July 06 - 07, 2009). CHINZ '09. ACM, New York, NY, 29-36. DOI= http://doi.acm.org/10.1145/1577782.1577788

  85. vfridge limited (2003).  Virtual Christmas Crackers. http://www.vfridge.com/crackers/

  86. von Ahn, L., Maurer, B., McMillen, C., Abraham, D. and M. Blum, M. (2008). reCAPTCHA: Human-Based Character Recognition via Web Security Measures. Science, 321(5895):1465--1468

  87. W3C (2007). SOAP Version 1.2. dated 27th April 2007. accessed 6th March 2010. http://dev.w3.org/html5/webdatabase/

  88. W3C (2010a). Web SQL Database (Editors Draft). dated 4th March 2010. http://dev.w3.org/html5/webdatabase/

  89. W3C (2010b). Web Storage (Editors Draft). dated 4th March 2010. http://dev.w3.org/html5/webstorage/

  90. WebAIM (2010). WAVE - Web Accessibility Evaluation Tool. WebAIM. accessed 5/1/2010. http://wave.webaim.org/

  91. Wright, P., Finlay, J., &  Light, A. (Eds.) (2003).  HCI, the Arts and the Humanities. York, UK. July 2003.
    http://www.hiraeth.com/conf/HCI-arts-humanities-2003/

  92. Vodafone (2010).  Vodafone 360. accessed 5/1/2010. http://login.vodafone360.com/

  93. Yahoo! (2003).  Web Site Directory.  http://www.yahoo.com

 
Full reference:
A. Dix and N. Shabir (2011). Chapter 3: Human-Computer Interaction and Web Design. In Handbook of Human Factors in Web Design, second edition. Robert W. Proctor and Kim-Phuong L. Vu (eds). Lawrence Erlbaum. pp.35-61.
http://www.hcibook.com/alan/papers/
web-hci-2011/
* Taylorism
Frederick Taylor wrote The Principles of Scientific Management in 1911, a seminal work that introduced a philosophy of management focused on efficient production.  Taylorism has come to represent  a utilitarian approach to the workforce including practices such as time and motion studies (Taylor, 1911; Thompson, 2003).

 


Fig 3.1. Airport selection on a Web site.

 


Fig 3.9. A virtual fridge door on the Web
www.vfridge.com   |   zoom image

 

Acknowledgements

Work gathered for this chapter was originally supported by a number of sources including the UK EPSRC funded projects EQUATOR (www.equator.ac.uk) and DIRC (www.dirc.org.uk).

Several illustrations are taken with permission from Human-Computer Interaction, Third Edition, A. Dix, J. Finlay, G. D. Abowd, and R. Beale, Prentice-Hall, 2004. www.hcibook.com/e3

 

http://www.hcibook.com/alan/papers/web-hci-2011/

Alan Dix 14/4/2010