Website design: disciplines, subjects and integrating diagrams

Authors: Cristòfol Rovira (Universitat Pompeu Fabra), Mari-Carmen Marcos (Universitat Pompeu Fabra)

Citation: Rovira, Cristòfol; Marcos, Mari_Carmen (2013). "Website design: disciplines, subjects and integrating diagrams". Hipertext.net, 10, http://www.upf.edu/hipertextnet/en/numero-11/website_design.html

Guerrero_fotoMari Carmen_Marcos

Abstract: In this articlewe will analyze the evolution of recent years that have followed the various disciplines related to communication between a website and the user (the user experience seen from different items sight). Also, check the status of the question of the relationship between the different disciplines and the development of different professional profiles (and their function) the development trends of scientific research.

Keywords: User experience, Usability, Web design, Information architecture.


Table of contents:
 

1. Introduction
2. Human-Computer Interaction: the root discipline
3. Information architecture and navigation design
4. Usability: metrics
5. Relation among disciplines
6. Professional profiles and scientific specialization
7. Conclusions
Bibliography

 

1. Introduction

When designing any kind of product, and particularly the one we are dealing with here, which are websites, the interface is key because is the means for the user to communicate with the system. Regardless of the technology hiding behind a website, the programming and code present in its files, the “letter of introduction” and what allows all its functions to be accessible is the interface. From the very beginning, the world of design has conscientiously worked on making “usable” objects, that is to say, objects allowing to be used for the ends they were designed for, and used in an intuitive way. Computer science has not fallen behind in that regard, and already in the 1970s, when the first personal computers were reaching the market, there were designs focused on offering interfaces which helped people in their use. It is then when the expression “Human-Computer Interaction” was coined, to designate a new discipline in the making.

In the last decades, the fast evolution of the web has deeply affected website design, giving way to several disciplines, all them focused on creating websites which are easier to navigate, more usable (effective, efficient and satisfying) and able to generate a positive experience for the user visiting them. The reason why there is such a chaos of disciplines or subjects is that many professionals and scholars have tackled this same subject matter from different disciplines. Some of the most acknowledged and cited authors are, for instance, Don Norman and John M. Caroll, whose contribution stems from Psychology; Ben Schneiderman and Jakob Nielsen, who have a background on Computer Science; Brenda Laurel, who comes from Design, or Peter Morville and Louis Rosenfeld, who are Information Science graduates.

Because it still is a novel object of study, some time has to go by for every concept to fit into an order. The diagram (figure 1) from Rosenfeld and McMullin, whose authors produced more than a decade ago (2002), and which is no longer available online, tried to be thorough and present all the knowledge converging into the so called “user experience”. This is the generic denomination for the knowledge related to a kind of website design whose goal is to satisfy the user.

 

 Knowledge related to user experience

Figure 1. Knowledge related to user experience. Diagram by Rosenfeld and McMullin, 2002

 

The result of so many subjects interacting towards the same end has also led to a multiplicity of names to denominate the processes and knowledge involved. Currently, these are the most common in alphabetical order:

  1. Accessibility
  2. Human-Computer Interaction
  3. Information architecture
  4. Interaction design
  5. Navigation design
  6. Usability
  7. User-centered design
  8. User experience design
  9. User interface design

In some cases, there are plenty of coincident areas where two or more disciplines deal with the same issues, even suggesting very similar design recommendations. In other cases, the discipline offers an integrating diagram to encompass all website design and so accounts for other, more specific disciplines, as happens with User-centered design (Hassan, 2004), Human-Computer Interaction (HCI) and even Usability.

If we analyze the search volume of these terms offered by the Google Trends service, we are able to identify those subjects or disciplines which are more popular.

Considering data from the last two years, we observe that the most popular term in English is “ux design”, particularly when combined with the full expression “user experience design”. Slightly behind are the terms “"information architecture", "human computer interaction", "web accessibility" and "web usability". The rest of subjects present an inferior search volume.

When globally considering data since 2004 (figure 2), it is observed that expressions such as “web usability”, “web accessibility”, “information architecture” or "human computer interaction" have decreased in importance although the accumulated search volume of the last two terms is highly superior to the others.


Search volume on Google of the English terms related to web design.

Figure 2. Search volume on Google of the English terms related to web design. 
Source: Google Trends

 

The situation is quite different in Spanish (figure 3). The most popular searches are "accesibilidad web" (web accessibility) and "usabilidad web" (web usability), followed by "arquitectura de la información" (information architecture) and with "experiencia de usuario" (user experience) slightly behind. The searches on "interaccion persona ordenador" (human-computer interaction) are almost negligible.

Search volume on Google of the spanish terms
Figure 3. Search volume on Google of the Spanish terms related to web design.
Source: Google Trends

Some precautions have been taken for the comparison between the different searches to be equitable. For instance, searches have been restricted to exact phrases and the word “web” has been added in those cases where the discipline might be applied to several contexts, as in usability or accessibility. Finally, the highest number of data available has been counted so that the results were more significant: no filters by categories have been applied, and data have been extracted going back to the beginning of the service in 2004.  

The most significant results after analyzing the searches conducted on Google by disciplines related to web design are the following:

  1. Both the denominations "user experience design" and “ux design” are widely accepted in English. However, when translated into Spanish, “experiencia de usuario” (user experience) produces a relatively low volume of search results, and it seems that the term is yet to be consolidated.
  2. This situation becomes more accentuated in the case of “human computer interaction” which is widely accepted in English and quite unusual in Spanish.
  3. The disciplines presenting a higher volume of searches in Spanish are “usabilidad web” (web usability) and “accesibilidad web” (web accessibility).

Next we are presenting some of these disciplines, the most significant ones, to try and bring some order to the chaos. We are focusing on those subjects related to the first stages in the process of website development: the initial conception, also known as functional analysis or requirements analysis (Pedraza-Jiménez, 2013), and particularly the subsequent stage of design. The disciplines related to the implementation and monitoring stages will not be part of our analysis.

2. Human-Computer Interaction: the root discipline

Human-Computer interaction is the discipline focused on studying how people behave when using technological systems (Marcos, 2001, 2004). Its goal is to study the way in which people use computers to adapt the systems to the users. Although it was originally focused on the interaction with computers, nowadays it incorporates other technologies such as mobile telephones, tablets and so on.

Human-Computer Interaction emerges in the second half of the 20th century, at the same time as computers start to proliferate in several areas, to achieve the best profitability with the best effort, meaning an optimization of computer use. The concern for HCI has led to the development of studies focused in more specific aspects such as Usability, Accessibility and Information Architecture.

In its purest sense, HCI is a humanistic discipline, since its final goal is to improve the experience of people, but it also has to be considered as a discipline within Communication, since it tries to improve the communication between people and new technologies, and obviously it also presents a high technological component, since computer systems have to be studied and adapted to the people’s needs.

Thus, if we are to situate HCI within a typical scientific classification, there is no other option but to situate it at an intermediate position among:

  1. Human Sciences, because it studies people
  2. Communication Sciences, because it studies communication processes
  3. Information technologies, because it is focused on improving computer systems

Regarding people, HCI feeds on several sciences:

  1. Psychology: to study how people conduct their attention, perception and mental processing of information processes. For instance, to find out how we memorize information and thus design systems imposing less cognitive effort on the person.
  2. Ergonomy: to study both the cognitive aspects (cognitive ergonomy) and the mechanical processes taking place in the relation between people and objects, to make them more comfortable and adapted to us.
  3. Sociology: to study the behaviour of people within a group. It is very useful to understand the way in which people work collaboratively with computers or other technologies.

Regarding communication, HCI extracts knowledge from:

  1. Design: to improve the presentation of information and therefore the satisfaction of the user using it.
  2. Linguistics: to improve verbal communication between the systems and the people, since language is a vehicle of information.
  3. Information Science: since it is the discipline dealing with organizing, classifying and labelling information and putting it at the disposal of the users in the best way possible.

Regarding technological tools (computers, mobile devices and so on), the need for computer engineering is patent both in hardware and software aspects and when applying its methodologies (Rovira, 2003), particularly regarding all that is related to user interfaces.

Thus, Human-Computer Interaction is a general theoretical discipline which might be applied to the specific case of web design and would include other, more specific disciplines such as Usability, Accessibility and Information Architecture. These specific disciplines are more oriented towards the professional practice, but also present an important study load that has allowed for the development of design recommendations, evaluation techniques or user-centered procedures. Although not often acknowledged in an explicit way, the roots of many of these successes are in HCI proposals, some from the early 1990s or even prior to that time, as is user-centered design itself (Norman, Draper; 1986).

3. Information architecture and navigation design

For Rosenfeld and Morville (2002) (Hill, 2000), information architecture is the discipline focused on labelling and structurally designing digital information spaces to facilitate the execution of tasks and the intuitive access to content. Garrett (2003: 94) points to the same direction when explaining that information architecture deals with the creation of organization and navigation schemes allowing users to efficiently and effectively move through a website.

In the process of design and creation of a website, Lou Rosenfeld and Peter Morville identify a "gray area" where is very difficult to situate the borders of the different disciplines involved: human-computer interaction, information architecture, interaction design, information design, graphic design and usability engineering: "The design of navigation systems takes as deep into the gray area between information architecture, interaction design, information design, visual design, and usability engineering, alt of which we might classify under the umbrella of experience design." Rosenfeld and Morville (2002: 108)

On the other hand, there seems to be some consensus that navigation design is part of information architecture, a wider discipline in charge of suggesting practical principles for structuring, labelling and navigating a website. Both disciplines also feed on the results obtained by usability studies. Indeed, Usability and Information Architecture determine each other. When developing a website, Information Architecture principles are evaluated through usability tests applied to prototypes. Depending on the results of those tests, the decisions made by the information architect might be modified. In practice, both disciplines are inseparable. Both are often presented when explaining the whole development cycle of a website, including aspects which are relatively far from the central core of activity, such as the definition of the goals, the selection of content or the maintenance policies.

4. Usability: metrics

To put it simply, “Usability” is probably the most common term when referring to the ease of use of a product. Wikipedia offers a similar definition: “Usability is the ease of use and learnability of a human-made object. The object of use can be a software application, website, book, tool, machine, process, or anything a human interacts with".

But usability is much more than “ease”. As Engelbart claimed (quoted in Fischer 2001: 66), “If ease of use was the only valid criterion, people would stick to tricycles and never try bicycles”.

The ISO 9241-11 (1998) standard establishes the internationally accepted definition for this concept, according to how it can be measured: usability is "the extent to which a product can be used by specified users to achieve specified goals with effectiveness, efficiency, and satisfaction in a specified context of use”. The ISO definition highlights the three traditional metrics in usability: effectiveness, efficiency and satisfaction. To them, Nielsen (1993, 2000) adds two more qualities to be measured: learnability and memorability.

Thus, usability (Krug 2001, 2010) is a characteristic of a website and by extension also the discipline focused on evaluating it through different kinds of tests (heuristic evaluation, tests with users and others) to subsequently indicate how to make improvements.

In the context of the disciplines involved, we need to mention the relations between information architecture and usability. Baeza-Yates, Ribera and Velasco (2004) suggest a "causal model" wherein information architecture provides with the theoretical principles leading the design for quality websites. "The projects are designed with a type of user in mind, and the experience this user would have when using the system. However, the true result is unknown until real users have to deal with it. This is why at a first level the model presents a duality between design and user. Information architecture and ubiquity are situated within the design dimension. There is no ubiquity without information architecture, and the site will only be used if it is ubiquitous on the web. Usability and its evaluation appear within the use dimension, as does the activity record in the logs pending to be analyzed" (Baeza-Yates, Ribera, Velasco 2004: 178).

Finally, it is also necessary to mention the strong interrelation between usability and accessibility. Although accessibility is defined according to the personal capabilities of individuals acting as users, it also refers to the ease of use; therefore it is inevitable that both disciplines highly overlap.

5. Relation among disciplines

More than ten years ago Garrett (2003: 33) suggested a general diagram (figure 4) regarding the role of each and every one of these disciplines, and establishing the interrelations among them within the context of user experience (D'Hertefelt, 2000; Dillon, 2001; Hassan 2005). For instance, according to Garrett, navigation design depends on information architecture and is implemented at the same time as interface design and before graphic design.

Volumen de búsquedas en Google de los términos en español relacionados con el diseño web

Figure 4. Diagram of the elements involved in user experience (Garrett, 2003: 33)
Full version: http://www.jjg.net/elements/pdf/elements.pdf (2000)

This diagram was very successful and became widely reproduced and cited. Garrett’s greatest contribution was integrating almost every discipline regarding web design without demanding excessive dependences among them. Each one of them is able to sustain its own identity and also clearly integrate into the whole by following the axes of:

  1. Abstraction - concretion
  2. Conception - completion

And the two perspectives of the whole process:

  1. The web as user interface
  2. The web as hypertext system

Other authors (Olsen, 2003; Dalton, 2007; Sherwin, 2010) have expanded and redrawn this initial diagram in ways which have been very positively regarded by Garret himself (Van Geel, 2010).

Diagrama de los elementos de la experiencia de usuario

 

Figure 5. George Olsen (2003)
http://boxesandarrows.com/files/banda/expanding_the_approaches_to_user_experience/uxapproachesmodel.pdf

Olsen’s diagram (2003) keeps the main characteristics of Garrett initial proposal (2000), such as the general distribution according to the chronological process of development, from conception to completion (figure 5). The same 5 layers or stages of this process remain. Interestingly, Olsen names them with words starting with “S”: Strategy, Scope, Structure, Skeleton and Surface. Also, the disciplines mentioned in both diagrams are highly coincident: Interaction Design, Information Architecture, Interface Design, Navigation Design and Visual Design.

Olsen’s main contribution was adding a new perspective. Garrett’s initial diagram analyzed the development process of websites from two perspectives: the web as software interface (task-oriented) and the web as hypertext system (information-oriented). In fact, this duality and the confusion it generated was the main reason why Garrett created the diagram. Olsen generalizes the initial diagram by providing with a third perspective on the development of interactive multimedia (figure 5). He also adds elements to cover the more creative part of the development process, including the fiction that might be related to products such as videogames.

Expanding the approaches to user experience


Figure 6. Richard Dalton (2007)
 http://mauvyrusset.files.wordpress.com/2007/06/rainbowplanes-6-15-2007.pdf

Dalton’s diagram (2007) is relatively simpler than the two previous ones (figure 6). It keeps the 5 layers with the same names (Strategy, Scope, Structure, Skeleton and Surface), but it does not go into detail regarding the disciplines involved nor into the two or three perspectives mentioned in the previous diagrams. As Dalton himself states, the diagram’s main contribution is to emphasize some additional forces operating in the initial strategy stage, particularly the user needs and the business goals.

201301.7

Figure 7. Sherwin 2010
http://changeorder.typepad.com/files/elementsofdesignstudioexperience_v1.pdf

Finally, Sherwin (2010) reworks the previous contributions, modifies the terminology but keeps a very similar structure formed by 5 layers ordered from abstract to concrete or from conception to completion (figure 7). The perspectives change completely, are reduced to two and focused on “design as business” (money) and “design as practice” (time). The disciplines disappear or merge with the layers, which now are called Portfolio, Clients or Staff, Process or Culture, Market or Capabilities and Philosophy.

Sherwin himself (2010) acknowledges he “massacred” Garrett’s diagram, particularly by eliminating disciplines. The resulting diagram is simpler and is presented as a template with blanks for the users to fill the 5 layers with their own content.

6. Professional profiles and scientific specialization

The multiplicity of subjects included in web design goes hand in hand with the kind of knowledge required to exercise the profession in several positions. Although in many cases the same person or team is in charge of everything regarding web design, institutions and businesses of a certain size try to have more specialized profiles such as the information architect who is in charge of suggesting a structure for the website and preparing the prototypes, or the specialist on usability who is in charge of evaluating the website to suggest improvements. There as many names for these profiles as disciplines, or even more: job offers can be found asking for an interaction designer, a user-experience designer and so on. Figure 8 schematically shows the most common profiles.

Profesiones relacionadas con la web.


Figure 8. Web-related professions.
The main area presents those specific to website design. Source: UXnet

The researchers and professionals of these disciplines have several groups wherein to share their experience and knowledge. Internationally, there are the following associations:

  1. ACM SIGCHI (Special Interest Group on Computer-Human Interaction), organizes the  CHI conference. The Spanish chapter of this group is CHISPA.
  2. UPA (Usability Professionals’ Association). There is Spanish UPA, but there has been no movement in it during the last years.
  3. IAI (Information Architecture Institute), organizes the IA Submmit conference.
  4. IxDA (Interaction Design Association), organizes the Interaction conference.
  5. AIPO (Asociación de Interacción Persona-Ordenador), organizes the Interacción conference.

These disciplines develop business activity, but also academic and scientific activity which is presented in academic journals, some of them in WOS (Web of Science). Next we are going to present the most significant ones, indicating, when available, the impact factor as of September 2012:

  1. Human-Computer Interaction  (IF 4.682)
  2. Computers in Human Behavior  (IF 2.293)
  3. Journal of the American Society for Information Science and Technology  (IF 2.083)
  4. Communications of the ACM  (IF 1.919)
  5. ACM Transactions on Computer-Human Interaction (TOCHI)  (IF 1.833)
  6. User Modeling and User-Adapted Interaction  (IF 1.318)
  7. Interacting with Computers  (IF 1.233)
  8. Human Factors  (IF 1.187)
  9. International Journal of Human-Computer Studies  (IF 1.171)
  10. Journal of Collaborative Computing and Work Practices (CSCW)  (IF 1.071)
  11. Behavior and Information Technology  (IF 1.011)
  12. International Journal of Human-Computer Interaction  (IF 0.521)
  13. ACM Transactions on Management Information Systems
  14. Advances in Human-Computer Interaction
  15. Faz: revista de diseño de interacción
  16. Human Technology
  17. Human-Centric Computing and Information Sciences
  18. Interactions of the ACM
  19. International Journal of Technology and Human Interaction
  20. Journal of Usability Studies
  21. Universal Access in The Information Society

7. Conclusions

As a summary and conclusion we are presenting a graphic integrating the 4 diagrams we have previously discussed (figure 9). The goal of this “diagram of diagrams” is to show the place occupied by the several disciplines involved. This is a panoramic view which allows seeing how the root and more theoretical discipline of Human-Computer Interaction has become more specific in several, more specialized disciplines, often without the professionals that put them into practice realizing. On the other hand, the 4 integrating diagrams (Garrett’s, Olsen’s, Dalton’s and Sherwin’s) present 4 different ways of organizing these disciplines within the process of website development. In all of them, 5 layers or stages are established going from more abstract to more concrete, from intangible to tangible, from desire to fulfilment or from conception to completion.

We hope the analysis and reflections provided have contributed to somehow order the chaos of knowledge, disciplines and subjects participating in website design and allowing for the creation of quality HTML documents.

 

201301.9.eng

Figure 9. Diagram of the disciplines involved in web design. Source: Rovira, Marcos

 

References

Baeza-Yates, Ricardo; Rivera, Cuauhtémoc.; Velasco, Javier (2004). "Arquitectura de la información y usabilidad en la web". El profesional de la información, 13:3, 2004.

Dalton, Richard (2007). The Forces of User Experience. The Forces of User Experience. Junio 16. http://mauvyrusset.com/2007/06/16/the-forces-of-user-experience/

D'Hertefelt, S. (2000). Emerging and future usability challenges: designing user experiences and user communities. InteractionArchitect.com.

Dillon, A. (2001). Beyond Usability: Process, Outcome and Affect in human computer interactions. Lazerow Lecture 2001, at the Faculty of Information Studies, University of Toronto, March 2001. http://www.ischool.utexas.edu/~adillon/publications/beyond_usability.html

Fischer, Gerhard (2001). "User modeling in Human-Computer Interaction". User Modeling and User-Adapted Interaction, 11, 65-86.

Garrett, Jesse James (2003). The elements of user experience: user-centered design for the web. New York: Aiga.

Garrett, Jesse James  (2000). Los elementos de la experiencia de usuario, http://www.jjg.net/ia/elements_es.pdf

Hassan, Yusef; Martín Fernández, Francisco J.; Iazza, Ghzala. (2004). Diseño Web Centrado en el Usuario: Usabilidad y Arquitectura de la Información. Hipertext.net, 2.
http://www.hipertext.net/web/pag206.htm

Hassan Montero, Yusef; Martín Fernández, Francisco J. (2005). La Experiencia del Usuario. En: No Solo Usabilidad, 4, http://www.nosolousabilidad.com/articulos/experiencia_del_usuario.htm

Hill, S. (2000). An interview with Louis Rosenfeld and Peter Morville, http://www.oreillynet.com/pub/a/oreilly/web/news/infoarch_0100.html

Krug, Steve (2001). No me hagas pensar. Madrid: Prentice Hall.

Krug, Steve (2010). Haz fácil lo imposible. Madrid: Anaya Multimedia.

Marcos, Mari-Carmen (2001). “HCI (Human computer interaction): concepto y desarrollo”. El profesional de la información, 10:6, 4-16.

Marcos, Mari-Carmen (2004). Interacción en interfaces de recuperación de información: conceptos, metáforas y visualización. Gijón: Trea.

Nielsen, Jacob (1993). Usability engineering. Cambridge, MA: Academic Press.

Nielsen, Jakob (2000). Usabilidad: diseño de sitios web. Madrid: Pearson Educación.

Norman, Don.; Draper, S. W. (Eds.) (1986). User centered system design: New perspectives on human-computer interaction. Hillsdale, NJ: Lawrence Erlbaum Associates.

Olsen, George (2003). Expanding the Approaches to User Experience. 10 de marzo. http://boxesandarrows.com/expanding-the-approaches-to-user-experience/

Pedraza-Jiménez, Rafael; Blanco, Saúl; Codina, Lluís; Cavaller, Víctor (2013). “Diseño conceptual y especificación de requerimientos para el desarrollo y rediseño de sitios web”. El profesional de la información, enero-febrero, 22:1, 74-79.

Rosenfeld, Louis; Morville, Peter (2002). Information architecture for the world wide web: designing large-scale web sites. Sebastopol (Canada): O'Reilly.

Rovira, Cristòfol; Codina, Lluís (2003). “La orientación a objetos en el diseño de sedes web: hipertextos y representación de la información”. Revista española de documentación científica 26:3, 267-290.

Sherwin, David (2010). The Elements of Design Studio Experience. March 08.
http://changeorder.typepad.com/weblog/2010/03/the-elements-of-design-studio-experience.html

Van Geel, Eroen (2010). UX at Year X: An interview with Jesse James Garrett. March 24. http://johnnyholland.org/2010/03/an-interview-with-jesse-james-garrett/

Last updated 22-05-2013
© Universitat Pompeu Fabra, Barcelona