5 Principles of Product Design

Introduction

In 2018, I graduated with a degree in Human-Computer Interaction and since then have been working as a UX/UI design consultant at Thoughtworks. There are some insights, techniques, and ways of thinking that I continuously return to in both my work and everyday situations.

In this article, we’ll cover these principles of product design:

• Mental Models

• Conceptual Models

• Undocumented Features

• Affordances

• Signifiers

1. Mental Models

Although similar to a pencil, the Apple Pencil doesn’t exactly behave like one

A mental model is a representation of how a person believes something works, which can be different from how it actually works.

Perception is rarely reality

When a mental model differs from the actual model, this is seen as a mismatch. Let’s examine the Apple Pencil. My first time using the Apple Pencil in store, I made a mistake while drawing and wanted to erase it by using the end, like an eraser on a regular pencil. A salesperson saw me struggling. They told me to switch to eraser mode by tapping the side indent twice. I realized my confusion was because my mental model was based on a standard pencil.


It says pencil, it looks like a pencil …




But, it’s not quite a pencil

Why does this matter? The bigger the difference between a person’s understanding and reality, the bigger possibility for error, confusion, and frustration. How does this happen? You may have forgotten to consider a specific persona and research their use case in user testing.

The good news is that mental models aren’t permanent. They change as a person’s understanding changes through usage, explanation, and documentation.

2. Conceptual Models

Parody IKEA instruction manual for blowing bubbles by Becky Yiu

On the other hand, a conceptual model is how a product actually works. It’s the creator’s intended use of the product. An example of a conceptual model is an instruction manual which outlines the correct usage of a product.A mental model can be the same as a conceptual model if the user’s understanding matches the actual system. Otherwise it is considered a mismatch. But having a mismatch is not always a bad thing. It can lead to discovery of new features the creator may have not considered.

A perfect match is overrated

3. Undocumented Features

Victorinox Swiss Army Knife package hook used to perch a phone for optimal Netflix viewing

Yes, a user misunderstanding your product can lead to misuse, but misuse can lead to the discovery of new practical uses! Undocumented features are functionalities that you, the product creator, may not have originally considered.

The Victorinox Swiss Army Knife (SAK) corkscrew was originally added to the knife in 1897, and was intended for, well, opening corked bottles. However, when Victorinox performed research to see how people use their knives, they found something unexpected. They realized that some were using the corkscrew to loosen tight knots and store tiny screwdrivers for their eyeglasses.

What did Victorinox do? The right thing. They documented the undocumented features — literally. They added knot loosening to their documentation. They also created a proprietary mini-screwdriver in 1983 that twists into the coil of the SAK’s corkscrew. Proprietary, but originally thought of by clever users.

No idea is original



(Left) Pictorial documentation of the corkscrew loosening knots. (Right) Victorinox Screwdriver-Mini and Corkscrew

The moral of the story is that it’s important to ensure people know how to use your product properly and understand how they use it improperly. To discover this, it’s crucial to do research before, during, and well after the release of your product.

If you’re lucky like Victorinox, your users’ ingenuity might inform new features.

4. Affordances

“An escalator cannot break. It can only become stairs. Sorry for the convenience” — Mitch Hedberg

An affordance is a dependent relationship between the characteristics of an object and the user. The actions you can do with an object (either a physical or digital) are the object’s affordances to you. It relies on the object’s form, features, and functionalities. It also relies on the user’s background, intuition, and ability. It’s a two-way street.

Affordances frame the possibilities of interaction with a particular user.

Here’s where things get fun…

Modern pill bottle caps are double sided; one with childproofing and one without

Anti-affordances are the “prevention of interaction” (DOET 11). They are the absence of a feature in an object inhibiting your ability to perform a certain action. For example, the safety cap on pill bottles is an anti-affordance to children — and to some adults and elderly people who may be suffering from arthritis.

Here, the caps are flipped to the side without childproofing

However, there’s a hidden feature in most modern pill caps. If you don’t have children around, after opening the bottle, you can flip the cap and twist it closed. This flipped side does not have the child-proofing and is much easier to pop open.

Be omniscient

The point is to know your user and their abilities. Be omniscient (or at least try to be). Know what you want users to do with your product and how you want them to do it. Know what could go wrong and how you can prevent errors through limitations.

5. Signifiers

Tesla door handles retract when locked

Signifiers are perceptible cues hinting what actions a user should take. In other words, the object is letting you know what to do with it. A designer’s job is to make deliberate signifiers that are intuitive and helpful.

Let your design speak for itself

Have you ever impatiently waited for your friend to unlock a car door?  Ever yanked the handle until it’s finally unlocked?

The image above is a Tesla Model S door. The handle is retracted into the door, making it an anti-affordance; it stops you from even trying to grab the handle until the door is unlocked. Your inability to grab the retracted handle is an anti-affordance. The retracted handle also acts as a visual signifier. Further, if you’re approaching your car and see that the handles don’t extend, that’s another visual signal to you that you may have forgotten your keys.

The lesson here is to let your product speak to its users through cues. 

Closing Words

At this point, you may have figured out the five topics we covered are dependent on each other. The best way to fully understand this schema is to reverse design a product you admire. Take note of the role of these principles and your experience with the product.

Happy Designing ✨