Image © Volvo

The 80/20 Rule

Defining the small yet critically important interactions in your digital interfaces.

I recently found myself sitting behind the wheel of a brand-new Volvo SUV. Beautiful thing. I haven’t driven a brand new car in ages, and experiencing an interior that was 20 years more advanced than my own truck’s interior helped crystallize a concept about Interactive Design I’ve been thinking about for some time:

As designers, we want to be novel in our work — our nature is to think we can solve a problem in a way that is wholly better than those that have solved it before us. This is why we do what we do. But the rules of evolution apply here — the longer a form exists, the more ideally suited to its environment it becomes.

Take the automobile, which is going on a good 130 years of existence. In that time it has gone from a handful of unique answers to the question “how should a motorized carriage convey humans?” down to a fairly well-resolved answer. No new car on the market today has tried to answer the original question in a wholly unique and original way.

That is not to say, however, that there are not interesting and beautiful and particularly focused solutions to that question. It’s just to say that the things that made up those traits were a minority of the overall design equation, something I’ve taken to calling the 80/20 rule (not particularly catchy, but hey).

So, back inside the Volvo. Here I found myself in an environment that was in its general form absolutely familiar: I sat in a seat with a steering wheel, there were a set of gauges ahead, a center console to control auxiliary behaviors to my right, a windshield, a rear-view mirror. You could draw that with your eyes closed, right? But the 20% of that design solution made that particular interior a Volvo interior. The choice of materials, the architecture and spatial dynamics. The use of a portrait-oriented tablet interface element in the center dash. Even the little Swedish flags stitched into the upholstery. All of these elements, all of these touches of thoughtful, practical, and truly interactive design added up to a 100% that could only be expressed by that brand. I resist using the word emotional to describe the 20% because it connotes some frivolity, but if 80% gets you most of the way, the remaining 20% closes the gap between the user and the machine. Ergo, the 80/20 Rule.

What is the 80/20 rule?

Simply stated, the 80/20 rule means that when you are solving a mature design problem, 80% of the solution will rely on the conventions established through the collective refinement of a form, while 20% of the solution should be novel to the particular question/client.

To continue with the initial metaphor of the automobile-as-design-problem, 80% of an automobile’s design will have some common traits: a steering wheel in front to the driver, at least two seats, 4 wheels, headlights at the front, taillights at the back, &c. This is not only smart from a design perspective, but it is practical from a user perspective: If we rely on models that have effectively solved certain aspects of a design problem, we eliminate the need for a user to relearn how to interact with said model. If a person knows how to drive an automobile, then that knowledge can be transferred from automobile to automobile with minimal discomfort (manual transmissions notwithstanding #savethemanuals).

The same is true of designing for digital interfaces: Our users do not interface with our work in an experiential vacuum. It is not the first website they come across (probably), nor is it the last (hopefully). They bring to the experience a collective knowledge of how a website is supposed to work: how to scroll, how to make an image bigger, how to save something, how to share it.

It’s true that the Internet hasn’t been around nearly as long as the automobile, and therefore the patterns and models might not be so well-established. We’re also still experiencing upending periods of volatility that shift how we interact with computers, like the invention of the mouse or the mobile web or touch (in evolutionary biology this phenomenon is known as punctuated equilibrium). But the medium is mature enough that we can begin to rely on the solutions of our predecessors. These forms have become well established.

Hence the 80% part of the 80/20 rule. If, as a Product Designer, you attempt to rewrite established and well-worn patterns for the sake of being cute or novel, you’re doing a disservice to your user. That is not to say these forms should not be questioned and examined. By all means, if you believe the current way we scroll is inherently broken and your research and testing backs up a better solution, be that pioneer. But understand that to change something expected for the sake of novelty is counterproductive to your true goal.

And but so that remaining 20%: I would argue that that 20% of a design solution is the most critical thing to get right. If we concede that 80% of any established interaction is universal, the true brand experience lives in that 20%. That is where the light gets in, to borrow a line.

Here at Hard Candy Shell, we have countless hours of discussion and debate with clients and internally about details that could have easily been dropped: how a date picker works within a calendar, or the way a menu opens on a mobile device, or how best to support a user who is listening to a song on a site and wants to save it to a Spotify playlist. Those things are not make-or-break UI challenges. But those things, those little specific design touches that say “even this was considered, was thought through”, that 20% is the difference between a memorable, enjoyable experience, and a generic one.

Those are the details worth fighting for.