Design of Everyday Things in 16 visuals

16 key insights from one of my favorite design books with examples of digital design elements.

If you are like me, who reads books and makes notes just to never look at them again, then this article is for you. According to research, we forget most of the things we read/learn within the first 24 hours. I read “The Design of Everyday Things” by Don Norman two years ago, and when I re-read the book recently I found out that I had forgotten most of the stuff.

Also, as opposed to text, visuals are processed 60,000x faster by our brain. Thus, I have started creating a visual summary of my favorite design books. If you have any suggestions or requests for the next book, you can mention them in the comments. Hopefully, by doing this, I can help you and me both remember more stuff. So without further ado, let’s get into it.

Disclaimer: This article is my interpretation of the book, and the example I have given here is different from what Norman has given in his book, so I highly recommend you to go and read the full book as it has so many good insights and you might find different meanings and lessons from the book.

Norman starts the book by talking about the psychopathology of everyday things. Norman says that two of the most important characteristics of good design are discoverability and understanding.

Discoverability: Can users figure out what actions they can take with that product?

Understandability: Can users easily understand how to use the product?

For example, if doors are required to be pushed, then a vertical plate with “Push” written on it is a good design, and if it is required to be pulled, then provide a handle that naturally indicates the behavior of pulling.

To make sure your design is discoverable and understandable, Norman gives 7 principles to follow. We will deep dive into each of them with an example of digital design elements like an input box.

The reason why I have chosen the input box as an example is that it is something we use almost every day of our lives and it is so well designed that we rarely even notice interacting with it. As Norman famously said,

“Good design is actually a lot harder to notice than poor design, in part because good design fits our needs so well that the design is invisible.”

Now you feel I might be contradicting what Norman said, but there is a key difference. Good design is easy to find but hard to notice.

As you can see in the above image, when the input box is in an idle position, it has a different color, border, and subtle drop shadow, which makes it easy to find, but while interacting with it, the user can hardly notice these things.

For example, tell me when you log into Amazon or any other website, which border color they use when it is clicked. Although you don’t notice it, they change things like border color, drop shadow, or background opacity when you interact with them.

Another reason why input fields are so well designed is that they are easy to predict. Even though most of the input fields are now in the shape of boxes, in the early days when we transformed from a paper to a digital world, most of the input fields were just underlined. That was extremely well designed because it mimics the behavior of a similar real-life activity, writing on paper.

Conceptual models represent a user’s understanding of how things work. A user may have multiple, often conflicting, models for the same item.

One way Norman suggests to create a better conceptual model is by using knowledge of the world and knowledge in the head.

Great precision of these two is not required. One does not need to recall exactly what a coin looks like to pay for things; knowledge that it is a coin is enough.

The possible tasks a person can carry out with a specific item or service are called affordances. For example, when you click on the input box, it erases the placeholder and shows the cursor, which is blinking, and on mobile, it automatically shows the keyboard. Both of these interactions suggest that this element can afford to be written.

Signifiers are used to communicate with the user about possible actions. Having a placeholder in the input box communicates what a user should write. Caption text below the input box helps a user perform an action more effectively.

Any action can be performed effectively when there is an understandable mapping between the control and its results. As Norman mentioned, a left switch should control the left side of the light and a right switch should do the same for the right side of the light.

Similarly, when you have a submit button for any form, it should not have any other elements in between that are not going to be affected by the action of that button.

As the name suggests, constraints are limitations in application or use that can help with the formation of conceptual models. There are four types of constraints, and we will go over each one in detail.

Physical constraints are limitations that are physically impossible. For example, if the length of the text is longer than the length of the input box, it should not overlap with it, but rather it should move to the next line and the size of the input box should increase.

Cultural constraints mean limitations based on culture. As humans, we have culturally accepted red as a bad color and green as a good color. Thus, by using red as a success message, we are breaking cultural constraints.

Similarly, when you are creating designs for Arabic culture or any other culture where the language is written from right to left, it is important to follow the layout and design patterns in such a manner that it does not break the cultural limitations. Since users are reading their language from right to left, they interact with the design from right to left as well.

Semantic or situational constraints are limitations that are based on the current situation. For example, when a date is required, it is better to provide a preferred format, and for a phone number, rather than saying ‘enter your phone number’, showing the format of a preferred phone number makes it more usable design. Additionally, showing the numeric keyboard over the standard keyboard is advised for mobile users.

Logical constraints mean using logic to determine the range of action. For a given example, we can say that when submitting a form, the message is expected to be longer, so by default, providing a bigger input box for the message is logical.

Feedback means communicating the results of an action back to the users. Immediate feedback is ideal. Delayed feedback can be disconcerting and lead to user abandonment or failure.

Feedback should communicate clear, unambiguous information back to the user in order to be effective. There is a delicate balance in the amount of feedback:

• Too much feedback can be annoying and irritating to users.
• Too little feedback can be as useless as no feedback at all.
• Feedback also needs to be prioritized (important messages/alerts vs. unimportant).

Norman says, “Learn to see human errors as design problems rather than human incompetence.”

Designers should make every effort to identify the root cause of any problems that arise when users misuse a product or when a product fails. Most errors are the cause of multiple failures.

One of the methods we can use to determine the underlying cause of failure is to make use of the “Root Cause Analysis” method. When looking for a reason, the Root Cause Analysis method recommends asking the ‘Why’ five times.

As Norman says, “One of my rules in consulting is simple: never solve the problem I am asked to solve… because, invariably, the problem I am asked to solve is not the real, fundamental, root problem. It is usually a symptom.”

We often rush to solve a problem without questioning whether or not we are solving the right problem. Thus, Norman suggests using the double-diamond process.

There are two main phases of this process,

1. Find the right problem
2. Find the right solution

The double diamond design process is widely used in the design industry. Even though it is widely used, there is lots of criticism around it as well. I also believe that it is not completely practical and does not cover all the aspects of the design process from a real-world project. But it still provides the right structure to design, and it is very helpful for beginners.

These are all the key insights that I found helpful, but I still recommend you to go and read the full book by yourself as these are not all of the good learning from the book.

As I mentioned earlier, I have decided to create a visual summary of my favorite design books. If you like this idea and want me to continue, please share and show some support.

If you have any suggestions or requests for me to create something similar for your favorite book, then you can mention them in the comments, and hopefully, I can make this an entire series here.

If you don’t want to miss any upcoming design-related topics, you can follow me on Medium or LinkedIn.