General principles of design — Don Norman’s principles

The design should not only be concerned with beauty, but it should also be functional.

Dave Amiana
UX Collective

--

General Design Principles

Good design is actually a lot harder to notice than poor design, in part because good designs fit our needs so well that the design is invisible, serving us without drawing attention to itself. Bad design, on the other hand, screams out its inadequacies, making itself very noticeable (The Design of Everyday Things, 2013).

The American professor and author, Don Norman noted that combination of good observation skills and good design principles are important and can benefit us all because we are all designers in the sense that all of us deliberately design our lives, our rooms, and the way we do things [1].

A good design should put an emphasis on utility, not only with beauty; it should provide a clear sense of purpose that contributes to our understanding of the set of actions possible and how to operate them. Objects that need not be complicated need not to have instructional materials to guide its user; rather, the product design should suggest the set of possible actions and intents of the design.

For example, imagine a hypothetical scenario where we, as users, are looking for a coffee cup. Here we are presented with two different designs. For our first case, in the picture below, the design clearly suggests the object’s purpose— to hold beverages — with ease of use and simplicity.

Simple coffee cup (round)
Photo by Cristian Cristian on Unsplash

In contrast, some designers would opt for aesthetics over functionality in hopes of making a positive appeal to the user’s emotion. But as we can attest for our second case, we could infer, from our mundane interaction of a coffee cup, the intended purpose of a coffee cup, being a holder of hot beverages (more generally speaking), is hardly achieved — as the edge of a cup affects the direction of the drink inside. Thus, the second cup sacrificed user experience [and functionality] over aesthetics.

Coffee cup with ragged edges
Bad Design: A Coffee Cup (source).

In our example, we learned that deciding over functionality is a critical decision made by the designers. Our simple example is an instantiation of consequences where a poor understanding of design principles is being practiced. In other cases, as discussed by Don Norman, poor designs can lead to mishaps, injuries, and even death.

Design is concerned with how things work, how they are controlled, and the nature of the interaction between people and technology. When done well, the results are brilliant, pleasurable products. When done badly, the products are unusable, leading to great frustration and irritation [1].

Human-Centeredness is a guiding principle of design

Human-centeredness is an approach that puts human needs, capabilities, and behavior first, then designs to accommodate those needs, capabilities, and ways of behaving. It can be translated to a dictum addressed to the designer as begin with the user in mind. Naturally, with this point of view, the sense of purpose is demystified. According to Don Norman, the problem of most designs is rooted in the lack of understanding of effective means to interact. In most cases, that he witnessed, engineers who design features begin with the assumption that people think the same way as they do — logical. But to err is to be human. Therefore, designers shall account for erroneous human behavior.

Principles of Human-Centered Design (2018).

In the interest of time, we shift our focus to a brief overview of the guiding principles of design.

Don Norman introduced the Five Fundamental Principles of Interaction[1]:

Affordances — the relationship between the properties of an object and the capabilities of the agent to recognize and sense as to how the object could possibly be used. The term was coined by the American Psychologist James Gibson’s theory of affordances[2]. For Gibson, Affordance is what the environment offers the individual [2-3]. There has been a lot of varying definitions of affordances that are field-specific; because of that, we focus on its relationship in design.

To be effective, affordances and anti-affordances have to be perceivable. When the object has strong affordances, it is very clear how to use it. For example, as Don Norman discussed, having doors with poor affordances can be very confusing: it is not always clear on whether the door should be pushed or pulled. Indeed, there should be a feature that suggests how an object should be used.

Simple chair
Photo by Krisztian Tabori on Unsplash

A chair affords (is for) support and, therefore, affords sitting. Most chairs can also be carried by a single person (they afford lifting), but some can only be lifted by a strong person or by a team of people. If young or relatively weak people cannot lift a chair, then for these people, the chair does not have that affordance, it does not afford lifting [1].

It is important to note that Affordances pertains to a relationship between the object and agent; not a property of the object. Because of this subtle element affordances, as a construct, bear some ambiguous interpretations and confusing use cases for designers to carry through their actions.

Designers were saying such things as, “I put an affordance there,” to describe why they displayed a circle on a screen to indicate where the person should touch, whether by mouse or by finger[1].

Clearly, this is not to be conflated with affordances which we defined as the relationship between the user and the object where it can also be translated to as a set of actions that a user can do with the object, in this case, pertains to all the possible actions that exist to the entire screen. Finally, affordances exist even if they are not visible.

As we might notice, there is a need for a term to express the idea of instructing the user towards the right combination of actions that lead to the intent of usage of the object. One has to signify to improve the object’s discoverability and understanding of the design. This is called Signifiers.

The difference between affordances and signifiers is that whereas affordances may not be directly visible to the user, signifiers has to be clear and visible. Signifiers are more important than affordances for they communicate and not only relate to the user as to how the design should be used.

Neon lights with “Go up and never stop” sign and an arrow pointing to north east direction
Photo by Fab Lentz on Unsplash

Constraints — the design concept of constraining refers to determining ways of restricting the kind of user interaction that can take place at a given moment. It is a crucial decision made by the designer to limit the set of all possible actions that are appropriate for the object. Whereas signifiers suggest the user to the right combination of actions, constraints limit these modalities. Constraints narrow the search for a set of possible actions with the object.

Sliders for adjusting volumes
Sliders from Material Design (Google)

The volume symbols suggest (signify) higher and lower volume. The Sliders limit the set of possible actions as sliding from left to right. While affordances pertain to the set of all possible actions that can be carried through the screen.

Mappings — refers to the relationship between controls and their effects in the world. This is especially useful in designing control systems. For example, the arrangement of lightswitch that corresponds to the order of the lightbulbs gives us the intuition and ease of control for ourselves.

a light switch
Photo by Karim MANJRA on Unsplash

Labels are important and often necessary, but the appropriate use of natural mappings can minimize the need for them. Wherever labels seem necessary, consider another design[1].

Conceptual Models [Consistency] — This refers to designing interfaces to have similar operations and use similar elements for achieving similar tasks. In the above image, from our example of mappings, conceptual models can be recognized as a manner of grouping objects with respect to the types of actions they carry through. Lightbulbs in the kitchen are separated from the bulbs in the dining room. This can be further improved by adding color coding and the consistent shape of switches.

Visibility. The more visible functions are, the more likely users will be able to know what to do next. Visibility is the generalization of signifiers as it pertains not only to instructional symbols but graphic design elements as well[1][5].

Feedback — is about sending back information about what action has been done and what has been accomplished, allowing the person to continue with the activity. As you scroll this article, words are popping out like popcorns. Feedback is important as the interaction happens dynamically.

The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users[4].

Telephone
Photo by Quino Al on Unsplash

Know your author

Hi, I’m Dave! This week, I decided to pick up Don Norman’s book on design principles because I think it will benefit my mindset on how to think about problems and approach them by design. My purpose is to share a few notes and clarify some important concepts through examples. I welcome your concerns and feedback. Note that I am relatively new to design, that is why I keep referring to Don Norman rather than my experiences with designing. I hope it has been worthy of your time.

Reference:

[1] Norman, D. A. (1990). The Design of Everyday Things. New York: Doubleday.

[2] Gibson, J. J. (1977). The theory of affordances. Hilldale, USA, 1(2).

[3] Gibson, J. J. (1966). The senses considered as perceptual systems.

[4] Constantine, L. L., & Lockwood, L. A. (1999). Software for use: a practical guide to the models and methods of usage-centered design. Pearson Education.

[5] Lowdermilk, T. (2013). User-centered design: a developer’s guide to building user-friendly applications. O’Reilly Media, Inc.

Further Reading

--

--

Realizing possibilities; Currently working on Matrix library and Networking.