The rise of personal computing during the late 1970’s within the mass market brought new challenges for the laymen who weren’t familiar with this new technology. Until back then, computers were only in use by professionals and scientists in laboratories, and so for the novice user, who wished to perform simple tasks, perceived as overcomplicated and hard to learn.
As a consequence, and an attempt to solve some of those problems, a new academic discipline was emerged: Human Computer Interaction. The discipline aimed to better understand the interaction between humans and computers by researching human behaviors and the ways of which computers could adopt to those and not vice versa.
The challenge grew with the advance of microprocessors and commercial internet which helped implementing personal computing into everyday life products and machines. Tools and products such as: cars, phones, and even dishwashers and refrigerators slowly became unfamiliar and difficult to operate.
All of a sudden there was a real need to simplify the way products were designed. The solution could not come from the engineers who build those products and knew very little about their users. It destined to come from a new field that rooted in the theory and practice of art and design, and thus Interaction Design was born.
This essay will explore the ways in which the discipline of Interaction Design is relying on visual perception and the way humans see and perceive abstract forms, shapes and colors of graphics to
communicate meanings and guide users to successfully preform their tasks and simplify the interactions between humans and computers.
Interaction Design is an umbrella concept for a set of disciplines such as product design, communication design and computer science. The term Interaction Design was coined by Bill Moggridge in 1990, who was back then the principle of IDEO, the well-known design firm. The term basically refers to the design and development of how people connect with the product they use, and their interactions with ‘smart’ objects that are interactive.
In his book the Design of Everyday Things author Donald Norman define the goal of interaction design as to make people understand what can be done with the technology they are interacting with, understand what happened during the interaction, and to realize what just occurred in reaction to their behavior (Norman, 2013: 5).
The main challenge of describing interaction design, is that it deals with users’ behaviors which are harder to observe and understand. Unlike other visual disciplines such as print design, the appearance of the object is not static, and can transform and react according to the user interaction with it. Because it is invisible and happens behind the scenes, it is harder for designers to predict users’ exact behavior while interacting with their design. Therefore, interaction design is more of a “form of art and not a clear science” (Ware, 2013).
Users’ goals and needs
In his book About Face, author Alan Cooper suggest that when users interact with computers or machines, either if they do that to accomplish a task or merely as an entertainment form, they act as part of a greater motive to satisfy one or more of their needs. Cooper suggest that “most of us share these, simple, personal goals” (Cooper, 2014: 13).
Cooper, and many others in the field of interaction design often refer to Abraham Maslow Theory of Human Motivation (figure 1) when they describe users’ needs. Maslow’s theory, which he proposed in 1943 break down human needs and motivations into five levels of hierarchy:
- The Physiological needs (food, water, sex)
- The Safety needs (security, feeling safe)
- The love / belonging needs (intimate relationships, friends)
- The esteem needs (feeling of accomplishment)
The self-actualization needs (achieving one’s full potential) According to Maslow’s theory, an individual can reach his or her full potential once all his or her needs have been met (Sullivan, ca2007).
Figure 1 Maslow’s Hierarchy of Needs – Saul McLeod, 2017 (source: simplypsychology.org)
To design successful, useful, efficient and engaging digital products, interaction designers strive to better understand their users’ needs and goals so they could design interactions that help those users to achieve these goals and satisfy their needs. Their aim is to optimize interactions into minimum distractions and creating seamless flow of actions that can help users complete their tasks.
To do that, interaction designers analyze and understand users’ deeper motives for interacting with their products, and what is it that they are wishing to accomplish. By understanding these deeper levels of needs, designers can then devise interactions that aid users in their journey to complete a task.
Creating experiences which are more ‘human’ and emotional and less ‘cold’ and logical (as computers and inanimate products tend to be), is yet another aspect of interaction design. In his book Emotional Design, Donald Norman describe the challenge of eliciting emotional reaction from digital interfaces: “Although software and computers have become indispensable to daily life, too adherence to the abstraction of the computer screen abstract from emotional pleasure.” (Norman, 2005: 80)
Visuals, and more importantly their meaning, take a major part and consideration when an interaction is being designed. It is one of the tools designers use to guide users and help them to complete their tasks, or elicit an emotional reaction.
Visual perception and the way we form meaning
One way for designers to better understand the meaning of a specific visual element and what does it ‘tell’ the user, is by examining it through the Semiotic Theory. The Semiotic is a theory that deal with the meanings of things and how those meanings have been created. The way we attach a meaning to objects and things rely on our cultural and social influence, and on our ideology and the things we believe in and are familiar with. The theory was essentially developed by Ferdinand de Saussure and emerged from the study of linguistics and brought into the design and art world to better explain signs and their meaning.
According to the semiotic theory, there are two main components for each sign, the signifier – in which how something looks like (the shape and form of it), and signified – the represented idea by the object or thing.
Figure 2 How To Design Error States For Mobile Apps – Nick Babich, 2016 (source: smashingmagazine.com)
Colors can simply signify a status or call for users’ attention. For instance, messages displayed in red color grab users’ attention and inform them that something went wrong (figure 2). By itself as a sign, the color red has no meaning, however due to our past associations of the color with blood, and therefore its connotation with danger, it affects us as users and stop us to carefully think about our next steps and if we should take one action or another. In that case, the color red is the signifier, and the danger in the consequence of our action, or what just resulted from our action, is what being signified.
However, that meaning is not always absolute or completely universal, and can be influenced by context and culture: “In China, red implies good luck and is used for weddings” (Weger, 2013). Therefore, the target audience must always be considered when making those choices.
Driving behavior with abstract forms and shapes
Icons are another tool the interaction designer use to direct users’ behaviors and action. Simplified abstract shapes are used to convey a meaning or suggest an action to take. For example, the left side pointing arrow at the top of a web browser imply to the users that clicking on it will navigate the browser to the previous page (figure 3).
Figure 3 Web browsers: a brief history Rhiannon Williams, 2015 (Source: telegraph.co.uk)
To examine the meaning of visuals and how can they affect our behavior, we can look at it through the concept of Iconography which developed by the German-American art historian and essayist Erwin Panofsky. Panofsky suggested that when we see a visual object, we automatically try to give it a meaning and that this meaning can be broken into three levels of interpretation:
- Familiarity – we recognize the shapes and colors and perceive them as they are
- Iconographic – the artistic characteristics of the visual and the way they connected to themes and motifs that connote with us as users and affect us.
- Iconological interpretation – in this level we attach a meaning that is based on how we connote with the visual object, or what it reminds us from our past experience, cultural and social ideology.
In the case of the back arrow button on the web browser (figure 3), we first recognize the pointing shape of the combined lines into an arrow. The converged points at the sharp angle of where the lines are connected perceived to us as if the lines are in visual movement towards it. In their paper work: “Semantics of Simple Arrow Diagrams”, authors Yohei Kurata and Max J. Egenhofer examine how: “Despite their simple shapes, arrows capture a large variety of semantics, such as directions, movements, changes, temporal orders, interactions, and binary relations.” (Kurata, Egenhofer, 2003).
Our interpretation of the arrow as a symbol for movement can be associated with road signs directions, implying our movement towards one point or another. The meaning can be even linked back to our ancestors’ usage of the bow and arrow to hunt and fight, and our universal perception of the pointing objects as dynamic and in constant movement.
However, the perceived exact action of the back arrow in web browsers, as in navigating one web page back, is considered as design pattern that had to be learned first by early users of the technology, and only later on become an understood convention.
Link to my practice
As a user experience and interaction designer I am expected to influence users’ behaviors and help them to accomplish tasks and achieve their goals. By understanding how visual perception affect us and how complex concepts and ideas can be simplified into simple abstract shapes and colors to guide and inform users, I can come up with creative solutions that are more effective and efficient and can drive positive change. By thinking about how meaning is created, and how users attach that meaning to one thing or another, I can use elements in my design that communicate a specific intended message that could resonate with the users’ needs and help drive them to take an action or influence their behaviors while interacting with a product, website or app.
Interaction design is relatively a new discipline that deal with the challenges of predicting and understanding human behaviors while they interact with products and interactions. However, the basic concepts and theories of art and design that have been developed and researched through the history of human kind can still be used and help designers to influence and predict users’ behaviors when needed. By simplifying complex messages and meaning into simple abstract visuals such as shape, form, color and other design and art elements, interaction designers are able design more efficient and useful products that adopt to humans and not require humans to adopt to them.
However, to be able to successfully design a useful and efficient interaction, designers must better understand their direct users’ connotation and the way in which they perceive one interaction element or another. The way users’ attach meaning to objects or visuals is not always universal and can be effected by many factors. Through comprehensive and meticulous users’ research, interaction designers are able to find some of these meanings and design accordingly.
- Arnheim, R. (2011). Art and visual perception. Berkeley: University of California Press.
- Cooper Alan (2014). About Face. Indianapolis, Indian: John Wiley & Sons Inc.
- Norman, D. and Norman, D. (2013). The Design of Everyday Things. New York: Basic Books.
- Norman, D. (2004). Emotional design. Milano: New York: Basic Books.
- Ware, C. (2013). Information visualization. Waltham: Morgan Kaufmann.
- Bang, M. (2000). Picture this. San Francisco: Chronicle Books LLC.
- The Interaction Design Foundation [Online] Available at: https://www.interaction-design.org/literature/article/a-brief- history-of-human-computer-interaction [Accessed Dec, 5 2017]
- Tidwell, J. (2006). Designing interfaces. Beijing: O’ Reilly media. [online] Available at: https://www.safaribooksonline.com/library/view/designing-interfaces- 2nd/9781449379711/ [Accessed Dec, 5 2017]
- Semantics of Simple Arrow Diagrams, Yohei Kurata and Max J. Egenhofer, 2003 [online] Available at: http://www.aaai.org/Papers/Symposia/Spring/2005/SS-05- 06/SS05-06-020.pdf [Accessed Dec, 5 2017]
- History of the Arrow, 2015 Robert J. Finkel [online] Available at: https://printinghistory.org/arrow/ [Accessed Dec, 5 2017]
- Colors and Culture: Points to Consider By Bill Weger, M.A, 2013 [online] Available at: http://apps.prsa.org/Intelligence/Tactics/Articles/view/10356/1083/Colors_and_Cultur e_Points_to_Consider#.WkN9hlT1W8o [Accessed Dec, 21 2017]
- Self-actualization, ca2013 Erin Sullivan [online] Available at: https://www.britannica.com/topic/self-actualization [Accessed Dec, 21 2017]
- How To Design Error States For Mobile Apps, Nick Babich, 2016 [online] available at: https://www.smashingmagazine.com/2016/09/how-to-design-error-states-for-mobile- apps/ [Accessed Dec, 21 2017]
- Web browsers: a brief history, Rhiannon Williams, 2015. [online] Available at: http://www.telegraph.co.uk/technology/microsoft/11577364/Web-browsers-a-brief- history.html [Accessed Dec, 21 2017]