Image 1. Example of the use of a form.
doi.org/10.4185/RLCS-2021-1492
Article
Usability as a communication problem
La usabilidad como problema de comunicación
Daniel Palacio Samitier1
Francisco de Zulueta Dorado1
Rebeca Diez Somavilla1
José Luis Giménez1
1Polytechnic University of Valencia. Spain. jogilo@upvnet.upv.es
Abstract
Introduction: A graphical interface, in order for it to be considered truly “usable”, must provide the user with sufficient information, both about the possible functionalities of the application and how to interact with it. This article addresses this issue from the point of view of communication. Understanding the interface as a means that seeks communication between two systems (man and machine) through its own language. This language has its own characteristics inherent to the medium. Methodology: This is a comparative analysis, exploring co-relational aspects of the use of usability in screen design. Conclusions: We observe how usability, in addition to the problems of understanding the interface and its interaction, also results in problems such as uniformity in design and lack of creativity in the creation of new interfaces.
Keywords: usability, communication, Interface, user, design, standardization, patterns.
Resumen
Introducción: Una interfaz gráfica, para que pueda ser considerada realmente “usable”, debe proporcionar al usuario información suficiente, tanto sobre las posibles funcionalidades de la aplicación como de la forma de interactuar con ella. En el presente artículo se aborda esta cuestión desde el punto de vista de la comunicación. Entendiendo la interfaz como un medio que busca la comunicación entre dos sistemas (hombre y máquina) a través de un lenguaje propio. Este lenguaje posee características propias inherentes al medio. Metodología: Este es un análisis comparativo, explorando aspectos co-relacionales del uso de la usabilidad en el diseño de pantallas. Conclusiones: Observamos cómo la usabilidad, además de los problemas propios de comprensión de la interfaz y su interacción, también se derivan problemas como la uniformidad en el diseño y la falta de creatividad en la creación de nuevas interfaces.
Palabras clave: usabilidad, comunicación, interfaz, usuario, diseño, estandarización, patrones.
Content
1. Introduction. 2. Objectives. 3. Methodology. 4. Discussion 5. Conclusions. 6. Bibliography 8. Curriculum Vitae.
Correspondence
Daniel Palacio Samitier. Polytechnic University of Valencia. Spain. dapasa@har.upv.es
Francisco de Zulueta Dorado. Polytechnic University of Valencia. Spain. frazudo@har.upv.es
Rebeca Diez Somavilla. Polytechnic University of Valencia. Spain. rdiez@har.upv.es
José Luis Giménez. Polytechnic University of Valencia. Spain. jogilo@upvnet.upv.es
Received: 01/06/2020.
Accepted: 04/01/2021.
Published: 24/03/2021.
How to cite this article
Palacio Samitier, D., de Zulueta Dorado, F., Diez Somavilla, R., y Giménez López, J. L. (2021). Usability as a communication problem. Revista Latina de Comunicación Social, 79, 135-150. https://www.doi.org/10.4185/RLCS-2021-1492
Translation by Paula González (Universidad Católica Andrés Bello, Venezuela).
1. Introduction
Any professional who works in web usability expects their products to be easy to use, that their interfaces are easily understandable, and, ultimately, that the customer's intentions are successful. In short, create a good user experience. To do this, it faces innumerable conceptual and formal challenges for which it must use a myriad of computer tools.
In general terms, a graphic interface can be defined as a formally represented space in which three elements converge: a) the person who interacts with the computer system, b) the device that enables interaction with the object, and c) the object towards which the action is directed (Bonsiepe: 1999, p.18). In all this process, the interface is the element that mediates between the person and the computer (or information system). And from the point of view of usability, the best interface is an element that should not exist, in that it should be transparent so that the user can focus all their efforts on meeting their objectives. Thus, we would achieve a series of benefits that result in the design of our web pages or documents: satisfied users, users who prefer our interface to that of the competition, less cost in support since customers need less help to carry out tasks, and fewer revisions in the interface design.
In order to achieve these objectives, some of the first aspects that should concern the professional are: ensuring that users know how to navigate in a simple, pleasant, and efficient way; that their forms are filled in as naturally as possible; and that it is quickly recognized which button to press to perform a specific action, among others.
The interface designer has tools that facilitate his work when dealing with these problems: design patterns and templates. The use of these resources facilitates the design of usable interfaces since it is based on solutions that have already been tested and that even the user already knows (Google: 2020, Toxboe: 2019, Van Welie: 2007, Watson: 2020).
However, the use of these predesigned solutions can lead to certain shortcomings when facing problems that are out of the ordinary and, very commonly, to the achievement of a repetitive design lacking personality. An interface designer has to discover how the different elements that participate in his design contribute to the interface behaving as something psychologically transparent to the person who uses them.
2. Objectives
Our purpose is to analyze how the established solutions that follow the usability standards can influence the communication between the interface and the user and how it affects the fact of the communication between the screen and the user. For this, the following specific objectives are established:
3. Methodology
Following the methodological approaches widely described by Hernández Sampieri, this work began with extensive exploratory work to later focus on a practical comparative and correlational analysis about the application of usability techniques in screen design. For this, we have relied on documentary observation techniques (especially those that are structured around Human-Computer Interaction, Usability Engineering, Visual Information Architecture, and Web Design). But in a way, and given the profile and professional background of the group of researchers, this methodology would have been insufficient if participant observation techniques had not been taken into account.
4. Discussion
Usability is an elusive intangible, which provides benefits in the medium and long term, so faced with the dilemma of choosing between two applications before knowing them in-depth, users do not have the tools to distinguish the one that is easy to use from the one that is not.
In the context in which Usability is developed, taking as a starting point the activity of a user when using a computer system (Sánchez, 2011). We distinguish between:
Computing has a huge task and it concentrates on the machine, it does not have its focus on the user.
What happens between the system and the user is the interaction (Oviatt, S., 1997). The process in which the user receives the signals emitted by the system, decodes them, and interacts with it, generating new responses and stimuli. One of the pillars of this interaction is usability (Krug, S., 2018).
The most important activity of the user in his interaction with the system is perception. This is a vision that emphasizes that interaction has its main axis in the user's ability to receive, through their senses, the stimuli that the system generates, decode and interpret these stimuli, and act accordingly (Mordecki, 2012).
The designer of the interaction must help the user to perceive the interface in such a way that he can interpret in his brain the most useful way to use it. Thus, together with perception, memory and learning come into play, giving way to interaction patterns (Hassan, 2011), creating standards and conventions that facilitate widespread use in applications. When the user is able to understand these concepts, interaction with the physical world comes into play, that is, with the interface.
4.1. Communication on the interface
We have two systems, the man system (from now on, the user) and the machine system (from now on, the machine). The objective of the interface is to communicate both systems (Fernández, M. 2001).
The interface is part of the machine, therefore we can say that the machine completely knows the interface, while the user has to learn it to a greater or lesser extent. We can say that the interface is natural1 for the machine, but not for the user (“natural interfaces”, such as voice control, would deserve a separate mention).
From this point of view (that of communication), the various attempts to improve interface design are attempts to make the interface more natural for the user. How to achieve this is what differentiates one from the other.
Designing an interface means designing a communication system, in which it will be necessary to determine:
[1] Not in the strict sense of formal vs. natural language, but in that of being its own.
4.2. Between whom is communication established?
In our case, point a) has no discussion, the communication takes place between a human being (the user) and a computer system (the machine, typically a computer, but also a mobile device, etc.) and must be in both directions.
When creating an interface, you can have a high degree of confidence in the behavior and response of the machine system, however, the user is more unpredictable and will be influenced by the environment and their previous experiences.
4.3. What information is to be communicated?
Regarding the point, what information is to be communicated?, we can divide the information to be transmitted into three levels, namely:
In our case we are interested in this third level, and, depending on how it works in it, we can divide the interfaces into two categories:
Introverted (or opaque) interfaces that do not provide information about their use
Extroverted (or transparent) interfaces that offer information about their use.
An example of an introverted (or opaque) interface, the command-line interface (CLI) is based on written language.
The user must know a series of commands and parameters (vocabulary) as well as the rules for their combination (syntax) and write them correctly (spelling) for the machine to execute the corresponding actions. The machine will respond by displaying written messages on the screen.
In this case, we can say that, under the illusion of a natural language (usually English), a formal language is used.
An example of an extroverted (or transparent) interface, the graphical user interface (GUI) is based on graphic language (or more precisely, multimedia).
The machine shows (communicates) the user the options available at all times through their graphic representation (buttons, icons, text boxes, etc.) The user, using hardware devices (for example the mouse), acts on these graphic elements to request certain action to the machine, and it responds by changing the appearance (state) of the interface to a greater or lesser extent.
A well-implemented graphical interface should be able to be used by any user without the need for help or explanations.
For example, a login form can be identified and used by any user even if its texts are written in another language (see Image 1).
Source: http://www.weibo.com.
Image 1. Example of the use of a form.
4.4. How is this information to be transmitted?
If we are to be able to make the interface, by itself, be able to communicate its functionalities and processes to the user, we must know the elements that are part of this language. When dealing with graphical interfaces, obviously, most of these elements are common with the graphic language used in other media (graphic design, drawing, painting, etc.), but with their own characteristics and influences from others, due to the interactive and multimedia nature of these interfaces.
As an example of these particularities, we can review some elements of the interface language, which, although they are not exclusively theirs, do have their own uses.
4.4.1. The box
The box allows identifying a part of an interface as a unit with its own entity. They are usually defined by using a line that defines the border or by using their own background color.
We can take as a reference the previous image of a login form of a Chinese website.
In the original, the type of information requested in each field can be inferred without much difficulty from the icon associated with it. This association is represented by, for example (see image 2), the alignment of the elements, and reinforced by the boxes in which they are inscribed.
Source: http://www.weibo.com.
Image 2. The boxes relate each icon to a text.
With a simple redesign of the boxes (see image 3), that relationship can be broken, if not completely, at least enough so that the interface can be very confusing.
Source: http://www.weibo.com.
Image 3. The boxes relate the icons to each other and the texts to each other.
4.4.2. Color
Color also has a very important use in graphical interfaces, and in this sense, two ways of using it can be distinguished, depending on whether it is denotative or connotative.
When the use of color provides its own meaning, we speak of its denotative value. For example, if we take a specific icon (see Image 4):
Source: self-made.
Image 4. Icon based on lines.
In this case, it could signal an attention call. Depending on the color of this icon, the specific meaning may vary substantially (see Image 5).
Source: self-made.
Image 5. According to the color, its meaning changes.
On the other hand, the concrete meaning of the use of color can be given by the context, which would be its connotative value. For example, the color of the links in a menu on a website (see image 6).
Source: self-made.
Image 6. Menu bar of a website.
The different colors allow you to visually establish groups of links, which could point to related content. Also, the fact that one of these groups uses the corporate color of the website could indicate that the associated content refers to the company itself.
4.4.3. Relief
Graphic effects that contribute to creating the sensation of relief, or, in general, that break the two- dimensionality of the interface, can be used to give information about the use of the interface. For example, let's take a simple shape, a box with rounded corners (see image 7).
Source: self-made.
Image 7. Box with rounded corners.
If we add an inner shadow to it, it can be interpreted as a text input box. (see image 8).
Source: self-made.
Image 8. Menu bar of a website.
If we add an outer shadow to it, it can be interpreted as a button, a “clickable” element, (see Image 9).
Source: self-made.
Image 9. Menu bar of a website.
4.4.2. States (mutability)
One of the characteristics of graphical interfaces, not present in other media, is that they can change their appearance, they are not fixed objects. Each of the different aspects that an interface, or an element of it, can take are known as states.
An example would be the “Rollover” effect on buttons. When you place the mouse cursor over the button, it changes its appearance, to indicate that it is an interactive element (see image 10).
Source: https://dribbble.com/shots/3063144-UI-Kit-Button-States
Image 10. Menu bar of a website.
All or a large part of the interface itself can change, as, for example, in the wizards, in which a complex process is broken down into several steps, modifying the interface to adapt at each step to its requirements (see Image 11).
Source: https://dribbble.com/shots/3813658-Insure-Landing
Image 11. Example of a wizard.
In these wizards, there is usually also an element that shows the number of steps that it is composed of, those that have been completed, and those that remain to be completed.
4.4.4. Movement
Another characteristic of graphical interfaces is movement. This can be used in the transitions between states, which can serve to facilitate the user to visualize this state change. For example, when minimizing a window, it does not directly disappear, but an animation is played in which the user can see how it "hides" in the taskbar in Windows or the Dock in Mac.
It can also be used to highlight certain information to the user, as in the case of a login form that, if not filled in properly, shakes to highlight the error (a real example, the login in the WordPress control panel).
4.4.5. Sound
Talking about sound in the context of graphical interface design can be paradoxical. In fact, it is an element that, because of its nature, is rarely discussed in this area of design. And although during the 1990s sound became a crucial element for the development of multimedia interfaces, the truth is that it is used less and less in Web development (except as audiovisual content that is accessed through the said interface).
In a recent study, Ritwik Dasgupta (2018: pp. 6-8) exposes some of the advantages of using sound, such as achieving a more natural and faster interaction, making the interface more transparent, or introducing emotional elements that intensify the involvement of the user with the actions they perform (issues already discussed previously by specialists in sound design in the film industry and, more recently, in video games (Collins: 2008 pp. 107-122, Holman: 2010 pp. 23-38, Beauchamp: 2017 pp. 16-23). For example, the use of certain sounds in response to the user’s actions when pressing a button. Actions that can also have a connotative and emotional value, so that when associating a high-pitched sound with it, it is interpreted as something positive (a correct action), while when associating a low sound with it, it is interpreted as something negative (an error or an incorrect action). The same happens when musical elements are associated: by associating a major chord or arpeggio with it, it is interpreted as something positive (a correct action), while by associating a minor chord or arpeggio with it, it is interpreted as something negative (an error or an incorrect action).
4.5. Study of cases
In general, as we have seen previously, there are very localized usability problems, each time one of these problems is solved, the page becomes more usable. It facilitates communication with the user and helps him achieve his goals.
Each of these errors can be repeated throughout the page which can cause a serious problem. Each problem that is solved improves usability, generates a more usable page. But there is no global solution that makes the page usable in a single stroke.
An example of these types of considerations is found on the landing page of the Yale art school (see image 12) in the United States.
Source: https://www.art.yale.edu/
Image 12. Home page of the official website of Yale University of Art.
We can observe the numerous problems that this page has to communicate with the user. The fonts, the interpretation of the buttons, the use of the colors, the readability... Here the value of usability is demonstrated when communicating which are the tasks to be carried out within this page.
But on the contrary, if we, as a rule, use design patterns, we can have nondescript, invariable interfaces. Let's take an example, image galleries. Currently, applications such as Pinterest (see image 13) or Google Images (see Image 14) have monopolized the way of presenting image galleries, and the public has become accustomed to handling images in a certain way. And design patterns that work consistently have been established, but the problem is that it has been monopolized and there is no other way of displaying images that is understood.
Source: https://www.pinterest.es
Image 13. Example of Pinterest image gallery.
Source: http://www.google.es
Image 14: similarity between the representation of Pinterest image gallery versus Google pages highly demanded by the public.
In images 13 and 14 we can see the similarities when locating the search field, search filters, and the arrangement of the presentation of the images. As we indicated, this leads to a typing of interaction patterns, usability is observed and it works. The user can quickly carry out his objectives. The interface communicates perfectly. But this leads us to a design that prevails over creativity. Of not looking for new ways to create new solutions.
5. Conclusions
By way of conclusions, we could point out that an interface, to be usable, should be able to "explain itself" to the user; that when building a graphical interface, we use a language with its own elements and elements taken from other media, and, therefore, that the correct use of that language facilitates the creation of usable-interfaces.
The correct use of this language and its elements brings benefits to both the end-user and the interface designer. For the end-user, these benefits translate into easier-to-understand interfaces, even if they are new to him. For the designer, it represents a fundamental tool to enhance his creativity and his ability to solve those problems that the development of new interfaces presents, either for established media or for emerging media such as augmented and virtual reality, touch devices, etc.
On the contrary, not taking them into account, or not understanding them sufficiently, can be a significant formal limitation when creating new interfaces. Ultimately, we can find designs based on templates in which the necessary process of analysis and understanding of the characteristics of each case has not been carried out. Templates that, although they can basically comply with the principles of usability, lack their own personality and can even be unsuccessful when facing problems for which they had not been foreseen. All this leads to increasing uniformity in interfaces and standardization of design patterns.
We, therefore, consider that a later, more in-depth, detailed, and formalized study of the elements of this language may be interesting. Likewise, it would be advisable to include their study in the education of future designers of graphical user interfaces.
6. References
1. Beauchamp, R. (2017). Designing sound for animation. Taylor & Francis.
2. Chen, W., Shidujaman, M., Jin, J., & Ahmed, S. U. (2020). A Methodological Approach to Create Interactive Art in Artificial Intelligence. In International Conference on Human-Computer Interaction. Springer, Cham.
3. Collins, K. (2008). Game sound: an introduction to the history, theory, and practice of video game music and sound design. Mit Press.
4. Cremonesi, P., Elahi, M., & Garzotto, F. (2017). User interface patterns in recommendation-empowered content intensive multimedia applications. Multimedia Tools and Applications, 76(4), 5275-5309. https://doi.org/10.1007/s11042-016-3946-5
5. Dasgupta, R., Dasgupta, R., & Srivastava. (2018). Voice User Interface Design. Berkeley, CA, USA: Apress.
6. Fernández Ruiz, M. J.; Angós Ullate, J.M. & Salvador Oliva, J.A. (2001) Interfaces de usuario: Diseño de la visualización de la información como medio para mejorar la gestión del conocimiento y los resultados obtenidos por el usuario. V congreso Isko-España. 10 (7-8) https://dialnet.unirioja.es/descarga/articulo/1456152.pdf
7. Google (2020). Material Design. https://material.io/
8. Haaksma, T. R., de Jong, M. D., & Karreman, J. (2018). Users’ personal conceptions of usability and user experience of electronic and software products. IEEE transactions on professional communication, 61(2), 116-132. http://dx.doi.org/10.1109/TPC.2018.2795398
9. Hassan Montero,Y.(2011), Introducción a la interacción persona-ordenador. PID_00176056 https://www.exabyteinformatica.com/uoc/Informatica/Interaccion_persona_ordenador/Interaccion_persona_ordenador_(Modulo_1).pdf
10. Hernández Sampieri, R. (2018). Metodología de la Investigación: Las rutas cuantitativa y mixta (McGraw Hill)
11. Holman, T. (2012). Sound for film and television. Taylor & Francis.
12. Krieg-Brückner, B., & Mossakowski, T. (2017). Generic Ontologies and Generic Ontology Design Patterns. In WOP@ ISWC.
13. Krug, S. (2018). Don’t make me think!: Web & Mobile Usability: Das intuitive Web. Ed.: MITP-Verlags GmbH & Co. KG. 978-3-95845-766-9.
14. Lewis, R., & Luciana, J. (2020). Digital Media Foundations: An Introduction for Artists and Designers. Routledge.
15. Oviatt, Sharon (1997). Multimodal Interactive Maps: Designing for Human Performance. In Human-Computer Interaction, 12 (1) 93-129. http://dx.doi.org/10.1080/07370024.1997.9667241
16. Sánchez, W., (2011) La usabilidad en Ingeniería de Software: definición y características. Ing-novación. Revista de Ingeniería e Innovación de la Facultad de Ingeniería, Universidad Don Bosco. 1 (2) 7-21. http://hdl.handle.net/10972/1937
17. Shan ben tu shu (2015) GUI Design. SendPoints Publishing Company Limited.
18. Tilak, G., & Bhaumik, A. A Review on Security and Usability of Graphical User Interface Design.
19. Toxboe, A. (2019) Design patterns. http://ui-patterns.com/patterns
20. Van Welie, M. (2007), Interaction Design Pattern Library - Welie.com. http://www.welie.com/patterns/index.php
21. Watson, C. (2020). Elements of Design. https://www.smileycat.com/category/elements-of-design/
22. Wu, L., Su, Y., & Wang, J. (2020). Influence of Visual Symbol’s User Background and Symbol Semantic Abstraction Level on User’s Cognition in AR Auxiliary Assembly Environment. In International Conference on Human-Computer Interaction (pp. 127-137). Springer, Cham.
23. Zheng, R. Z., & Greenberg, K. (2019). Leveraging Computer Interface to Support Creative Thinking. In Interface Support for Creativity, Productivity, and Expression in Computer Graphics (pp. 246-265). IGI Global.
Authors
Daniel Palacio Samitier
Higher Polytechnic School of Gandía, Polytechnic University of Valencia. Department of Audiovisual Communication, Documentation, and Art History
Bachelor’s degree in Fine Arts. For several years I worked in pre-production for animated series and feature films. Since 2000, I have been working as a designer and developer of websites, applications, and videogames, at the time with Flash and now with HTML5/PHP and Unity. Since 2004, I have been an associate professor at the Polytechnic University of Valencia where I have taught various subjects in the degrees of Audiovisual Communication, Computer Engineering, and Interactive Technologies.
dapasa@har.upv.es
Orcid ID: https://orcid.org/0000-0001-9146-4262
ResearchGate: https://publons.com/researcher/2276385/daniel-palacio-samitier/
Francisco De Zulueta Dorado
Higher Polytechnic School of Gandía, Polytechnic University of Valencia. Department of Audiovisual Communication, Documentation, and Art History
Ph.D. and Lecturer at the Department of Audiovisual Communication (DCADHA) of the Polytechnic University of Valencia. As a professional, he has developed multimedia projects for companies such as Evax (Arbora group), Pau Education, FirstClass, Dideco, Danone, Petit-Suisse, Nokia, General Óptica, or Grupo Editorial NG. He has also collaborated in the development of the SIES-data project of the Ministry of Culture, Education, and Science of the Generalitat Valenciana and the computerization of the Metro Valencia Emergency Plan, among others. More recently, he has participated in the research project “Hybrid and Inter-recipient Synchronization (IDMS) to Enable Personalized, Immersive, and Shared Enriched Multimedia Experiences” (2014-2017) subsidized by the Ministry of Economy and Competitiveness of Spain.
frazudo@har.upv.es
Orcid ID: http://orcid.org/0000-0003-0538-8481
ResearchGate: https://publons.com/researcher/2276364/francisco-de-zulueta-dorado/
Rebeca Diez Somavilla
Higher Polytechnic School of Gandia, Polytechnic University of Valencia. Department of Documentation, Communication, and Art History
Ph.D. from the Polytechnic University of Valencia. She is currently an assistant professor at EPSG in the degree of Audiovisual Communication and the Master’s Degree in Transmedia Communication. Her publications focus on the teaching world and the interaction of different social networks in an educational, political, and social context with more than 15 articles in journals and 8 book chapters. She is co-director of the International Congress on Communication and Technology, Comunica2, which in November 2020 celebrated its 10th edition, and editor of the annual publication. She collaborated in several European projects: O-City, Eid4Spain-19, and Edihosp. As a professional, with 25 years of experience, I have directed the communication of European projects, press offices, specialized tourism and decoration magazines, television, radio, and collaborator of media such as ABC, Levante-EMV.
rdiez@har.upv.es
Orcid ID: https://orcid.org/0000-0002-2620-5229
Google Scholar: https://scholar.google.es/citations?user=7InBQPsAAAAJ&hl=es ResearchGate: https://www.researchgate.net/profile/Rebeca_Diez2 Academia.edu: https://upv.academia.edu/RebecaD%C3%ADezSomavilla
Jose Luis Giménez López
Higher Polytechnic School of Gandía, Polytechnic University of Valencia. Department of Graphic Engineering
Ph.D. from the Polytechnic University of Valencia, member of the Graphic Technologies Research Center. He currently is an associate professor at EPSG in the degrees of Audiovisual Communication and Interactive Technologies. I have made numerous educational and research publications. Working on various projects of European and national nature. Professional with more than 20 years of experience as project director, art director, Development and Design department; Graphic, multimedia, web design projects. I have collaborated in projects of architectural infographics, videogames, and interactive multimedia for companies such as Mini, Fivia, Dotahur, Corporación Dermoestética, Hero Baby, Telefónica, Bancaja, Movistar, as well as for institutions such as the Ministry of Industry, Tourism, and Commerce, or the Ciudad de las Ciencias y las Artes. jogilo@upvnet.upv.es
Index H: 5
Orcid ID: https://orcid.org/0000-0003-1762-3071
Google Scholar: https://scholar.google.es/citations?hl=es&user=unonXVEAAAAJ ResearchGate: https://publons.com/researcher/2492713/jose-luis-gimenez-lopez/ Scopus ID: https://www.scopus.com/authid/detail.uri?authorId=26656726900