This legacy article was originally published on our blog in September 2018
When we decided to start writing this blog, one of our goals was to open the doors to our know-how and resources (without getting worried about “revealing the trick”). This is not only destined to our colleagues or peers but also our own customers. We believe that this knowledge also benefits them to better understand their users or audiences, and therefore, learn to communicate with them.
We are not here to talk about aesthetic criteria, instead, we want to mention some key principles that we always apply when designing websites and digital products in order to obtain the best possible results.
Below, you will find a list of 5 of the main design principles we put in practice, accompanied by movie stills that we love:
Mental models
People understand and interact with other systems and environments based on mental representations that they develop through their experience. When the result of your world model matches the real world, your mind map is correct. When it doesn’t match it, your map is wrong or incomplete.
In relation to User Interface design, there are two types of maps or models: one is the system model (how it works); the other is the interaction model (how people interact with the design).
This principle is related to the way we design “for” users. Our task as designers is to tie both mental models (design and interaction), creating an interface that allows the interaction between them. This is, perhaps, one of the most important principles when designing websites, apps, or any type of products (digital or physical), and its success will depend on whether both these models are compatible.
For instance: When we design UIs meant to be used by middle-aged users (40–65 years) with little familiarity with the Internet, one of our goals is to highlight the buttons or call-to-action from the rest of the content, referencing key aspects of the real world — read Skeuomorphism — (volume, shadows, textures, etc.) and behaviors (pressed, active and off) that clearly identify them as such.
Recognition over Recall
Our memory is better at recognizing than recalling.
Recognizing something is easier than remembering it. Recognition is simply our sensory memory (sight, sound, smell, touch) about something that was previously experienced, and doesn’t necessarily include memories about its origin, context or any associative exercise of memory. On the other hand, remembering something implies having learned it, requiring more effort and memorization, practice, and implementation.
On a higher plane, our own decisions and actions are affected through recognition. We will always go with a known solution when facing a problem, even though a different one could be better. They are shortcuts that our brain uses when making a decision.
How can we make use of this resource? Designing consistent interfaces and establishing a uniform navigation structure, applying the same code or logic to perform certain actions while considering he visual appearance and location of buttons, menus, or headings, in order to facilitate user navigation.
Aesthetic-Usability effect
Attractive designs are perceived as easier to use than those less attractive.
Attractive designs seem easier to use and are more likely to be used, even if they aren’t actually easier to use. These attractive or aesthetic designs generate more welcoming responses in people than those unattractive designs, making people more tolerant of any problems or errors that they may find. A similar phenomenon occurs with people and their degree of attractiveness (a similar principle called “Attractiveness Bias”).
It is common for people to stick to certain objects that have generated positive attitudes in their lives (such as naming their cars or computers). On the other side, this doesn’t happen with objects or designs that originally caused a negative response, forming a gap with its users, since they recognize these products as simple objects with no value.
An example of this is the famous Twitter Fail Whale. Although the service had problems constantly, it was thanks to this small (but well designed) detail that the users' reactions were positively influenced by this nice character, minimizing the problem and making it not so serious after all. If instead, the problem had been shown with a red warning screen, the reactions would have been quite different.
Cost-Benefit
An action will be performed only if its benefits match or exceed its costs.
This principle is used to learn the return (often financial) associated with certain actions and operations, but it can also be applied to determine the quality of a design from a user’s perspective. If the cost associated with interacting with a design exceeds the offered benefits, the design is poor. If your benefits exceed the cost, the design is good.
The quality of any design can be measured using this principle: How many clicks are required to buy something on Amazon? How long do you need to be on the Tax Agency website in order to find the information you were looking for? Using this same article as an example: How much reading do you have to do in order to reach a conclusion? The answers to these questions depend on the benefit of these actions.
Example: Let’s think about a contest hosted on our website where participants are required to take a photo and share it in order to win. If the prize in question is not attractive enough or doesn’t have enough value to make all the “effort” involved in taking a photo or selecting it from a file and uploading it, our users will have no interest in participating.
Flexibility-Usability trade-off
As the flexibility of a system increases, its usability decreases.
Flexible design allows you to do more things than a specialized design, but inefficiently. Flexible designs are, by definition, more complex and more difficult to use.
It’s a common mistake to think that designs should always be as flexible as possible. However, this flexibility implies an increase in costs in terms of complexity, usability, time, and money. On the other hand, it will be up to us to know how to anticipate the possible use cases of our product, and determine to what extent we will have to address those functionalities in our design.
Example: Instagram’s first big boom came when its creators decided to cut the original geolocation check-in feature from the app, to focus solely on the photo editing and publishing aspect. Then, when user adoption and familiarity with the overall experience started to grow, the company started adding complementary features again.
These principles are taken from the book “Universal Principles of Design”, a super recommended reading for all those fellow designers and anyone interested in learning new resources with immediate practical application, while having a much deeper and meaningful psychological background, worthy of knowing.
In a future article, we will talk about how to add value to our products using design and psychological principles (Horror Vacui, Veblen, etc.).
