Principles of Interaction Design | Venturus

Principles of Interaction Design

When we interact with a product, we need to figure out how it works. This means finding out what the product is for and how to interact with it. All these issues are solved by the product’s ability to be discovered.

An object’s potential to be discovered is the result of the correct application of 6 fundamental principles of interaction. These principles are central concepts in the field of Design, described by Donald Norman in his book “The Design of Everyday Things”, published in 1988.

Donald Norman is a Designer, professor of cognitive science and computer science, and co-founder of the Nielsen Norman Group. He worked as vice president of Apple’s Advanced Technology Group in the 1990s and has several publications on the subject, as one of the indispensable figures for the study of User-centered design.

In “The Design of Everyday Things”, Norman proposes that failures in the use of objects are not the fault of users, but of the design of these products, which ignores the needs and psychology of people. The principles described by the author seek to eliminate problems in products and make them enjoyable, providing pleasure and satisfaction to its users.

With examples from everyday life, simple language and a lot of knowledge, the book is recommended for anyone who has an interest in understanding how we interact with all things around us, be it ordinary people, technical people, designers and non-designers.

In this sense, this article aims to describe these principles and exemplify them within the context of digital interfaces.

 

Affordance

Word affordance it is an appropriate term of psychology. It refers to relationship between an object and a person. Thus, it is the relationship between the properties of an object and the ability of an agent to determine how such an object works.

Its presence is directly linked to the qualities of the object and the abilities of the agent interacting with it.

Affordance exists even if it is not visible. Simply put, to designers, the visibility of affordance is paramount. Perceived Affordance provides good insight into how things work and helps people understand what actions are possible with a given object without the need for instructions and labels.

Within the context of digital interfaces, an example of perceived affordance is the size of a field in a interface: smaller fields afford smaller answers, while larger fields afford larger answers.

 

Interaction design affordance

 

Signifiers

To complement the notion of affordance, Norman incorporates a word from semiotics: signifier. It refers to any sign or mark, any indicator that communicates the appropriate use of an object to someone.

Affordance, perceived affordance and signifiers have much in common. While affordance represents the possibilities of interacting with something, signifiers are signals that indicate these possibilities.

Some perceived affordances can be ambiguous or not real, making them misleading signifiers. This can happen accidentally, but it can also be purposeful, with the aim of preventing people from doing specific, non-qualified actions.

An example of a purposely misleading signifier are the bollards that we often see in construction on the highways. The bollards clearly prevent the circulation of vehicles, however, they are made of rubber.

In practice, vehicles would be able to simply drive through them. Therefore, the rubbber bollards are a signifier that indicate a blocked area for most people, while allowing vehicles to pass through.

Signifiers can be signs, indicators, illustrations, instructions, or words (think “push” or “pull” on doors, for example). Some signifiers may simply be perceived affordances, such as door handles or the physical structure of a light switch.

For digital interfaces, a good example of a signifier is the form tips and descriptions in upload areas:

 

Interaction design signifier

 

In the design of a product, signifiers are more important than affordance, as they communicate how to use the object in question. Regardless of their nature (planned or accidental), signifiers provide valuable clues about how things work.

Therefore, signifiers must be visible, otherwise they do not work. As designers, we must incorporate signifiers cohesively into the product experience.

 

Mapping

Mapping is a technical term borrowed from mathematics. It represents the relationship between the elements of two sets of things. Basically, which control is linked to which action in the product.

Mapping is an important concept in the layout construction of controls and displays. The relationship between controls and their outcome is easier to learn when there is a coherent mapping between the controls, the actions, and the expected outcome.

Utilizing real-world spatial analogies in constructing a mapping helps in the immediate understanding of controls. Norman calls this process natural mapping.

Some natural mappings are cultural or biological: to move an object up, move the control up. Or they are universal: moving a palm up means “more”, moving down means “less”. In this sense, using vertical axis to represent intensity or quantity makes a lot of sense.

Other natural mappings follow the principles of perception and allow for the natural grouping or standardization of controls and feedback.

Grouping and proximity are important principles of Gestalt psychology that can be used to map controls to functions: related controls must be grouped. The controls should also be close to the item being controlled.

 

Interaction design mapping

 

In digital environments, we have several examples of natural mappings. In the example in above, we can observe a good natural mapping of the volume controls in a smartphone.

In addition to the sliders being on the vertical axis, the proximity between the digital component and the physical sound buttons establishes a relationship between the control and what is being controlled.

Importantly, many mappings may seem natural but are actually specific to a culture. What is natural for some is not necessarily natural for others.

To illustrate, we take as an example a progression bar made for systems with different languages. In languages where writing is done from left to right, the reading of the content and the sense of progression happens in the same direction. Therefore, the mapping of the progression bar should follow this pattern.

In languages where the script is written from right to left (such as Arabic), on the other hand, the direction of the progression bar should be reversed.

 

Interaction design progress bar

 

A system is easy to use when the set of possible actions is visible and when the controls and interfaces are based on natural mappings.

 

Feedback

Feedback is, perhaps, the principle that, when poorly executed, most often causes confusion and does not go unnoticed by the user.

You have probably been in the situation of going to a shopping mall totem to search for a specific store but not being able to finish your task because the letters typed in the search field simply do not work or take a long time to show on the screen.

What is missing in this situation is adequate feedback. Some way to communicate to the user that the system is responding to their requests and actions.

In the digital world, there numerous examples of feedback: a button changing colors when clicked, a login validation message when entering banking apps or an error messages due to lack of connection are widely used examples.

 

Interaction design feedback

 

Feedback — signaling the result of an action — should be immediate. Even a delay of a tenth of a second can be a nuisance. If the delay is too long, people usually give up and leave for the next activity.

Feedback needs to be informative. Providing a system response that means nothing to users is of no use. Bad feedback can be worse than no feedback at all, as it can be distracting, uninformative, and, in many cases, annoying and anxiety-inducing.

Additionally, too much feedback can be more annoying than too little. Many alerts cause people to ignore or disable all system messages, which means that important warnings will not be seen.

Feedback should be planned. All actions need to be confirmed, but unobtrusively. Feedback should also be prioritized so that unimportant information does not stand out from the relevant alerts. Feedback is essential, but it must be done correctly.

 

Constraints

Constraints are clues that limit the possibilities of interaction with objects and are intended to prevent users from making mistakes. Constraints can be physical, cultural, semantic, and logical, as long as they guide the user and facilitate comprehension.

In digital interfaces, in addition to preventing errors, constraining actions is extremely important to guide the user to complete their task clearly. For example, this principle can be applied to a registration divided into stages. With constraints, there is no ambiguity of what needs to be done at each step of this process:

 

Interaction design constraint

 

Constraints can also be used so that errors in one stage prevents the next step from happening. Following the same example of registration, if a field is not filled correctly, the system can restrict the user from going to the next step (this action must be accompanied by feedback from the system indicating why the action was barred so that it can be corrected, as shown in the image below).

 

Interaction design registration

 

Constraints are a valuable principle that limits the possibilities of interaction. Consequently, when used in the right way, they allow people to delimit appropriate course of action and prevents possible errors.

 

Conceptual Model

A conceptual model is an explanation, usually superficial, of how something works. It does not have to be complete or precise as long as it is useful. The conceptual model is perhaps the most important principle for having a full understanding of how things work.

For example, the file and folder icons displayed on computer interfaces help people create the conceptual template of documents inside the computer. Even if, in reality, there are no folders inside the computer, this way of presenting information is an effective conceptualization that make computers easier to use.

Conceptual models can be complex when they need to be displayed in a technical way, such as in instruction manuals. The conceptual models that are relevant in designing products are simpler and reside in people’s minds, thus, they are known as “mental models”. As they are personal, different people may have different mental models for the same product.

People create mental models of themselves, others, the environment, and all the things they interact with. These conceptual models are formed by experience, training and instructions. These models serve as guides to help people achieve goals, understand the world, and interact with objects.

When using a new product, we apply all the information that is available to us: what we know from using similar products in the past, what has been said about it in the media, by acquaintances, relatives, by articles that we may have read, by its website or instruction manual.

In addition to setting expectations, mental models help us determine what to do when problems arise. An example that many grandchildren must have already experienced: visiting a grandparent and having to solve a television problem. The problem is that “the television doesn’t work, I’ve turned it on but it doesn’t play movies.”

After a quick analysis, the problem is simple: my grandfather tried to watch movies on Netflix, but the television was disconnected from the internet. It was enough to reconnect for the problem to be solved. In short, having the understanding, even if simplified, of the operation of the device and its applications provides ways to solve the problem at hand.

Conceptual models are valuable to provide understanding, predict how things will behave, and to figure out what to do when things go wrong.

A good conceptual model allows us to predict the effects of our actions and can be the key to understandable and enjoyable products. And for good conceptual models, the key is good communication.

 

Good products are designed with users in mind

It is up to the creators of the product to provide the appropriate information to make it understandable and usable to its users. The main indications of how things work come from their perceived structure, specifically from the signifiers, affordances, mappings and constraints. It is essential to provide good feedback and conceptual model that guides the user when things go wrong.

While new technologies and systems offer the potential to improve our daily tasks, the constant evolution in their complexity causes greater difficulties and frustrations. Thus, even if technologies advance, the fundamental principles of interaction design presented by Norman remain the same and should be used to solve new problems. A good product requires care, planning, reflection and understanding of people’s behaviors.

Veja mais
Venturus Culture
Redação Venturus

How Venturus’ Design Cell works

Companies are not just companies. They are places where people meet, grow, learn, and evolve. However, for this to happen, it is necessary to invest
Leia mais »

Entre em contato

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.
Campinas / SP - Brasil

Estrada Giuseppina Vianelli di Napolli, nº 1.185
Condomínio GlobalTech Campinas
Polo II de Alta Tecnologia
CEP 13086-530 – Campinas – SP
+55 (19) 3755-8600

+55 (19) 3755-8600
contato@venturus.org.br