UX Design Principles: Part 2 of 3

Don Norman’s seven fundamental design principles

A user interaction guide to design efficient, effective, and delightful products using Don Norman’s principles.

Ian Batterbee
UX Collective
Published in
7 min readFeb 4, 2020

--

An abstract illustration of different design principle icons with overlaying text: seven UX design principles
Looking at Don Norman’s seven fundamental design principles

In part one, we analysed seven important questions within an Action Cycle from Don Norman’s best-selling book, The Design of Everyday Things.

“Anyone using a product should always be able to determine the answer to all seven questions.” — Don Norman.

To help determine the answers to his seven questions, Norman has devised a list of seven fundamental design principles. We can apply each principle as a special design strategy to make products or things efficient, effective, and delightful.

1. Discoverability

A website design made with a navigation bar, and prominent headers, buttons and images
Design by Outcrowd. The landing page uses focal points, such as calls to action, images and headers, navigation, visual hierarchy, and spacing. Doing so makes it easier for users to determine the possible actions.

Whenever we engage with an everyday thing such as a TV remote control, or a product like a website or an application, we figure out where and how to perform various functions. Through good discoverability, we can consider the different options and choose the one that should work to meet our goal. However, we cannot do this if the actions are not discoverable.

Norman describes good discoverability as: “it is possible to determine what actions are possible and the current state of the device.” Clear focal points (calls to action, images, and headers); visual hierarchy (content structured in order of priority); and transparent navigation systems all constitute good discoverability and understanding within a design.

However, when a design lacks discoverability, we must work harder to understand how something works. Take a website hamburger menu, for example; it is a convenient place to store multiple items, but it obscures key offerings and essential information.

Other design principles, particularly signifiers, feedback, and constraints (we’ll come across these soon), can also increase discoverability and reduce possible errors.

2. Feedback

An animated gif of a success message returned upon a user’s search query
Animation by Hoang Nguyen. Feedback updates users on the status of their meeting requests.

When we interact with an everyday thing or product, we need feedback to communicate the result of our actions. Without any immediate response, we wonder if our performed action has had any impact.

Norman describes feedback as “some way of letting you know that the system is working on your request.” He also explains that feedback must be immediate, informative, discreetly planned, and prioritised.

Important information should be immediate and clear. For example, when something goes wrong, an error dialogue forces our attention to critical feedback on what has just happened and what to do next.

Subtle feedback, however, can inform us that our action has worked without interrupting our flow. For example, the Twitter mobile app displays a small, animated message at the bottom of the screen to confirm successfully executed tweets.

3. Conceptual model

A concept of a mobile app on boarding experience, providing the user with an explanation of how something works
Design by Divan Raj. Onboarding experiences are good examples of how conceptual models can provide users with an explanation of how the product or service works.

A conceptual model is a simple and helpful explanation of how something works. For example, a website or application onboarding experience demonstrates how to use the product or service. Norman explains, “the design projects all the information needed to create a good conceptual model of the system, leading to an understanding and a feeling of control.”

We can find other examples of conceptual models in packaging, instruction manuals, and iconography. Digital interfaces use visual metaphors to help us understand what we can achieve; for example, the trash can icon depicts the idea of deleting unwanted files.

When a conceptual model is unclear, it could go against our mental model (our expectation of how something should work). For example, A trapezoid-shaped USB connection might conflict with expectations for a reversible design that enables a single orientation for insertion.

4. Affordance

A 3D image of a dial or knob
Design by Vectary. The thermostat knob’s design suggests what it can do, i.e., turn to increase the temperature.

Affordance is an object’s perceived action and properties that help us determine its operation. Norman states, “The term affordance refers to the relationship between a physical object and a person.” For example, door handles and pull chain designs relate to their intended action; hence, form follows function.

Let’s take a chair, for example; its shape allows sitting. Then some chairs come with casters that afford to push and pull. And, in the extreme case of a fire, we might even perceive the chair’s size and weight as an opportunity to break a window.

We should note that affordance relies on knowledge in the head (what we already understand) and cultural relevance. Without these properties, an object’s desired action will be harder to perceive. Take flat design, for example; novice users may not immediately distinguish between buttons and nonfunctional rectangular boxes.

5. Signifiers

A mobile app concept that includes clearly labelled buttons instructing the user on the exact type of actions they imply
Design by Nhat M. Tran. Signifiers, such as buttons and visual cues, tell users where different actions can take place.

A signifier communicates to us where the action should take place. Norman explains, “The term signifier refers to any mark or sound, any perceivable indicator that communicates appropriate behaviour to a person.” For example, a button label tells us precisely what action the corresponding control takes.

In the film, Penguins of Madagascar, an Arctic critter steps on a big red button without noticing its action. Then, during flashing alarms, the Penguin exclaims, “They really should put a label on these things.”

A big red button usually affords that it will perform a critical action, such as an emergency exit. However, in the Penguin’s case, there was no clear indication of the true intent of the button.

While signifiers clarify where to act, they also rely on cultural understanding. For instance, when Amazon launched its website in India, users mistook the search icon for a ping pong bat. This story proves that signifiers must hold relevant meaning to be recognised by the target user.

6. Mapping

An animated gif of colour switchers and sliders showing the effects of the user’s changes
Animation by Rhema Leverett. The colour picker depicts the relationship between the controls and the corresponding elements they affect.

Mapping is the relationship between controls and their effect on the world. For example, the arrow buttons on an arcade claw machine correspond to the movements of the toy grabbing mechanical arm. Norman explains, “when mapping uses spatial correspondence between the layout of the controls and the devices being controlled, it is easy to determine how to use them.”

Natural mapping enables us to subconsciously change the effects of our world, such as flicking the appropriate light switches. We can particularly find good mapping behaviours within the iOS control centre, which utilises sliding bars to communicate the effect of our actions.

Conversely, unnatural mapping increases cognitive and physical effort. For example, an unclear cooker layout makes it difficult to determine which knobs control the corresponding hobs.

Please note that if a natural mapping is impossible, use signifiers to clarify where the relationships exist.

7. Constraints

A concept of a website that contains a stepped progress bar with small chunks of information
Design by Walid Ghazzo. A simple process for creating and managing an event. Small steps provide users with enough information to complete one task at a time.

Long forms, complicated layouts, and heavily written descriptions can increase distraction and cognitive load (working memory).

Constraints, however, can restrict the kind of interactions that can take place and therefore help reduce the amount of information we process. Norman explains, “physical, logical, semantic, and cultural constraints guide actions and ease interpretation.”

There are different forms of constraints, including physical, semantic, cultural, and logical. Each can help focus our attention on an important task and help reduce the chance of human error.

Physical constraints restrict the possible operations; for example, we cannot move a mouse cursor outside the screen. Semantic limitations are clues to where we can perform actions; for instance, a socket has meaning to where we can insert the plug pins. Cultural restrictions are social conventions, such as waiting in a queue to be served. And finally, logical constraints help determine the alternatives; for example, scrolling is how we know how to see the rest of the screen.

Summary

Norman’s seven fundamental design principles can help users determine the answers to their questions, whether they are using an everyday thing or a product. In summary, here are the principles we observed:

  • Discoverability increases understanding of the available options and where to perform them.
  • Feedback communicates the response to our actions or the status of systems.
  • Conceptual models are simple explanations of how something works.
  • Affordance is the perceived action of an object.
  • Signifiers tell us exactly where to act.
  • Mapping is the relationship between the controls and the effect they have.
  • Constraints help restrict the kind of interactions that can take place.

We can apply Norman’s design principles as a strategy to communicate our intention for using a product or thing with users. With appropriate application, we can meet people’s expectations and enable them to use design efficiently, effectively, and delightfully.

To understand how to apply Norman’s design principles and answer the seven important user questions, we will study a practical use case in part 3 of UX Design Principles.

--

--