Sachin Rekhi

When I first started learning about product design, one of the most influential books I read was The Design of Everyday Things by Don Norman. In this classic work, Don Norman sheds light on the design of every day objects like doors, stoves, thermostats, and more. He then applies these universal design principles to designing technology products. Don Norman is one of the leading thinkers on human-centered design and the principles he writes about are required reading for every product designer. I still reference these principles daily in my work designing Notejoy. So I wanted to walk through each of Don Norman's six principles of designing interactions and how they remain relevant to designing digital products today.

Visibility
Visibility is the basic principle that the more visible an element is, the more likely users will know about them and how to use them. Equally important is the opposite: when something is out of sight, it's difficult to know about and use.

As simple as this principle is, designers still struggle with adopting it. The trade-off between hamburger side-bar menus and tab-bar menus in mobile applications is a very recent design debate centered around this very principle of visibility. While the hamburger menu provides a convenient place to store a variety of menu items in a mobile app, it comes at a huge disadvantage: the lack of visibility of the contained menu items. We've seen a shift in major apps like Facebook away from hamburger menus and back toward tab-bar menus to improve the visibility of their key experiences.



The skill in applying this principle is realizing that you can't make everything visible, because it'll ultimately clutter the interface but instead need to prioritize what interface elements are by far the most important for the user experience and prioritize their visibility.

Feedback
Feedback is the principle of making it clear to the user what action has been taken and what has been accomplished. Many forms of feedback exist in interaction design, including visual, tactile, audio, and more. The key is to design the experience to never leave the user guessing about what action they have taken and the consequence of doing so.

We've established a variety of design patterns for providing feedback to the user and these feedback patterns are constantly evolving as move interfaces emerge. Here's a brief video showing the many ways that Google's Material design pattern encourages you to provide feedback to the user on the actions they are taking in a mobile app.



Constraints
Constraints is about limiting the range of interaction possibilities for the user to simplify the interface and guide the user to the appropriate next action. This is a case where constraints are clarifying, since they make it clear what can be done. Limitless possibilities often leave the user confused.

Conversational interfaces are all the rage these days because they provide the opportunity to speak to a computer via our natural language, which feels far more natural than the traditional user interface methods. However, to-date these interfaces have struggled with a lack of constraints: with limitless possibilities of what you could potentially say to the conversational interface, it becomes impossible to know what kind of queries the interface actually supports. And given the technology today fails to be able to answer every possible query, the endless possibilities are frustrating to the user since it becomes difficult to even know how to use it.



Mapping
Mapping is about having a clear relationship between controls and the effect they have on the world. You want this mapping to feel as natural as possible. Stove tops are a great example here. When you see the first image, the mapping is not very clear because it's difficult to determine which control operates each burner. Versus the second image, it's far clearer the control that controls each burner, which has a better mapping.


This slider also has a strong mapping, since it's clear moving it to the right will increase it's value versus moving it to the left will decrease it.



Apple shook up the world in 2011 when it introduced natural scrolling to Mac OS X Lion. This reversed the familiar pattern of scrolling a page down by holding your fingers on the trackpad and dragging them downward. Instead this was reversed such that you would drag your finger up on the trackpad to scroll the page down. This reversal more closely mapped with the way we used iPhones and iPads. The controversy here is really about a mapping. Was the new mapping too jarring because it changed the conventional mapping that had been used across Mac and Windows for decades? Or was it more natural because it mapped to how you would push a piece of paper up to move it down and also matched the new behavior created on mobile phones. There's no easy answer here, though I'd say I myself turn off natural scrolling on my Mac because I, like many others, prefer the convention established decades ago.

Consistency
Consistency refers to having similar operations and similar elements for achieving similar tasks. By leveraging consistent elements throughout your entire experience, you make your experience far easier to use. This consistency is important not only within your interface, but across the many interfaces users are using across their devices.

This is a simple example of poor consistency when you are using so many different styles for actions within your interface.



One of the best ways to drive consistency across applications is to make ample use of Google's Material Design Guidelines and iOS's Human Interaction Guidelines when designing mobile applications.

Affordance
Affordance refers to an attribute of an object that allows people to know how to use it. Essentially to afford means to give a clue. The physical button on a mouse gives a clue that it can be clicked to perform an action. When an object has strong affordances, it's very clear how to use it.

Don Norman talks at length about how doors often have poor affordances. When you come up to a door, it's not always clear do you push or pull the door? One convention used is to put a sheet of metal at around arm height on the side of the door that needs to be pushed to make it clear that it must be pushed instead of being pulled. When you do this, you are giving the door a strong affordance to indicate it should be pushed instead of pulled.



As web and mobile design has been evolving to more modern interfaces, in some ways we have been removing many of the common affordances we have classically used. For example, the blue underlined link used to be the strongest affordance for knowing something was a clickable link on the web. Many web experiences have moved away from this in an attempt to allow link elements to better match with the overall design aesthetic they are trying to achieve across the interface. While that's a helpful goal, we have to ensure that it's still clear what in fact are clickable links on the page using alternative affordances, like showing the underline on hover. When we remove all such affordances, the interface becomes meaningfully harder to use.

As you can see, all six of Don Norman's principles of interaction design remain as relevant today as they did when he originally authored his classic work, The Design of Everyday Things.