Element 84 Logo

Designing From First Principles

02.07.2019

A first principle is a basic concept or assumption we know to be true, that is not deduced from anything else. First principles help us solve problems by avoiding generalities that can lead to poor decision making. Applying first principles thinking is a two part process:

  1. Question assumptions about a problem or scenario until you’ve reached some fundamental truths.
  2. Rebuild your solutions from scratch.

What are some common best practices that designers fall back on without too much thought?

  • Make sure there’s a hamburger menu when the site displays on a mobile phone or tablet.
  • All the call-to-action buttons need to be above the fold.
  • Our website needs a native app on all platforms.
  • Tech companies have blogs; we should have a blog.

These are all design assumptions we’ve made before–often without too much thought. When was the last time you questioned your assumptions when faced with a new project or problem? When was the last time you took a 5-year-old’s approach and asked: “But why?” ad nauseum until your parents (or boss) sighed and quipped: “Because!”

Humans (especially adults) need to think in abstractions. The more of the world we can abstract away, the more time we can spend doing higher-level thinking. This is what makes us human and why we’ve been successful as a species. On a daily basis, we don’t concern ourselves with why gravity exists–just that what goes up, must come down.

When we design, we tend to solve problems using concepts and analogies that already exist. We disguise these mental shortcuts as best practices without ever questioning how they got there in the first place. Let’s take the mobile “hamburger” menu for example. The assumption goes:

Website navigation should use a hamburger menu to hide navigation options on mobile devices.

Step 1: Question your assumptions and ask: “But Why?”

Why the hamburger menu?
It’s become the standard in web design. People know to look for the hamburger menu on their phones.

Why does the navigation need to look/behave differently on mobile devices?
There isn’t enough horizontal space to display the navigation links. If you try to display a typical desktop site on a phone, the text and click targets are too small.

Why isn’t there enough space?
Generally, you can only fit 1 to 2 words across the top of the mobile screen at a resolution that’s readable. Most websites have more than two navigation options.

Why do most websites have more than 2 navigation options?
You need some form of logical organization to the information on your site. Most sites need more than two “buckets” to contain that complexity.

How does the hamburger menu reduce the complexity of our navigation?
Actually, according to NNGroup: “Discoverability is cut almost in half by hiding a website’s main navigation. Also, task time is longer and perceived task difficulty increases.”

Why can’t we simplify our mobile content to reduce complexity?

Step 2: Rebuild your solution from scratch

Our “but why” exercise has netted an interesting question. Why can’t we simplify our mobile content to reduce navigation complexity? Is there a good reason why we can’t show mobile users a subset of the content and organization we show desktop users? It might be worth exploring a mobile first content approach and removing the navigation completely.

Although the example above is a bit contrived, you can see how the “but why” questioning can help you rethink your assumptions about a design problem. The next time you reach for a design best practice, ask yourself why this is the preferred solution? You might be surprised what you find.