Why Good Product Design Needs Good Patterns

Use patterns to minimize the work the brain needs to do and make your products simple and easy to use.

Some products support an entire business and some just one person, but most successful products are used by people every day to perform a critical job or function. In a product, there are things to be created and managed, visualized and absorbed, cleaned up and removed. There are instructions to be shared, messages to be sent, things to be hidden from some and shown to others. A product is often linked to other systems that in turn have an effect on how the product works and how users see it. There’s a lot going on in even the simplest of products. A product is a complex system.

Think of the process of using a transit card, if you’re like me and you have it auto-loaded from your paycheck with pre-tax dollars, money comes onto the card, you swipe it on a train or a bus, and money goes off of the card. Each day you swipe the card without thinking, the transaction happening seamlessly as you go about your daily commute. It’s straightforward and good design.

There’s a lot that goes on to make that transaction happen, the card has to connect to a system, understand what the fare is, determine if you have enough to pay the fare, deduct the fare or add more money, making many other connections and calculations that happen all while (if you’re using it on a bus) on a moving vehicle. It’s pretty amazing. It happens seamlessly because the system understands the cognitive model of a person using a public transit system. Not everything is as frictionless.

Where Does Friction Come From ?

Think back to the last time you felt frustration with a product. The friction you felt probably came from one of a few basic problems:

• It was unclear how to use the system.
• It didn’t do what you expected in the way that you expected it.
• It did too many things in too many different ways.
• It wasn’t ordered or categorized in a way that made sense.

We notice bad design because it’s jarring, it doesn’t make sense. It is the job of the product designer to anticipate these obstacles and design a pathway through them. But, how do we do that when we’re dealing with something so complex? By understanding the patterns formed by the system. We can then harness those patterns to shape the connections and tame complexity. The end result? Simplicity.

Why Patterns ?

The human brain is an amazing pattern recognition machine. A human can take in an incredibly complex set of information and make a decision based on comparison to information that the person has encountered before. For example, Chase and Simon (1973) found that expert human chess players don’t win based on reason but rather based on pattern recognition.¹ The more success we have applying certain patterns and the better we get at recognizing them, the quicker we can make decisions.

In his article on How Experts Think Kevin Ashton discusses how elite quarterbacks and chess players beat the competition by their superior pattern recognition ability. So what do quarterbacks and chess masters have to do with our users? If we design our products to repeat recognizable patterns, the product will be more predictable and our users will be able to more easily make decisions. Like the expert quarterback or chess player, they will get better at it over time. By creating consistent pathways we push our users toward increased learning and a sense of mastery. This is an important secondary effect because mastery leads to greater satisfaction², and in turn customer loyalty.

Using Patterns

It all seems so simple, but how do we identify and utilize patterns? First, we have to look at the full breadth of the system and find things that perform similar actions. For example, if John clicks on an add button on one page and it opens a modal window, clicking on an add button on another page should do the same thing. If a table functions similarly to a spreadsheet, it should include all of the standard navigational elements that users expect from a spreadsheet, tab to move through cells, arrows to go up and down, etc. If a piece of text opens a panel, it should have an affordance that tells the user to expect this action and that affordance should proliferate in all instances where the panel opens.

This sounds straightforward, but in modern products with many developers and designers on staff that are shipping new features constantly, this can be hard to do. There are so many layers to the system. Something that was introduced several years before may not have been designed by the same designer or developed by the same person, and may not even use the same technology.

It is the role of the product designer to understand the whole product and not only create a solution to a particular problem, but to review the system for similar experience paradigms and extract the pattern that applies to all of the interactions. Equally important, is the need to codify and share that pattern so that the next time someone designs for that interaction they don’t have to do the work of understanding the pattern all over again. Great design systems catalog these patterns and include them in a shared pattern library that both designers and developers can reference. Every time a designer designs a new piece of functionality or a developer implements it, they reference the pattern library, keeping the system cohesive.

Really understanding and utilizing patterns will make the difference between a confusing system and one that embraces its complexity, but makes it seem simple.

¹ A New Kind of Social Science Hudson, Schrodt and Whitmer

² Drive, Daniel Pink