UX/UI Design: the Bedrock Principles

These principles below were first compiled by the talented Jon Yablonski.

Great UX/UI design starts with applying the foundational principles. Here are the 10 abstract principles upon which all other UX/UI guidelines are based. Some of these principles may seem obvious—but they're all critical ingredients of a great design. Let's go.

1. Jakob's Law

Premise: "Users spend most of their time on other sites, and they prefer your site to work the same way as all the other sites they already know."

It originates from a 2000 publication by Jakob Nielsen where he suggests that users develop expectations of design conventions based on their experience using other interfaces.

Jakob explains the law in another way: "websites do more business the more standardized their design is."

For example, most of us have come to expect that green represents "good" or "on" and that red represents "off" or "error"—and not the other way around. This is common knowledge.

But designers must be even more sensitive to users' expectations. Here you can see how both Etsy and Amazon have nearly identical price filters. By sticking to convention they have reduced the users' cognitive load, resulting in a more frictionless shopping experience.

Designers should also be sensitive about pushing design changes without deep consideration for the user. Reddit still allows users to access the "old Reddit"—four years after the redesign.

2. Fitt's Law

Premise: "The time to acquire a target is a function of the distance to and size of the target."

Fitt's Law started with psychologist Paul Fitts in 1954, who posited that the larger a target is, the quicker it is to move to that target—and vice versa. This is why "Emergency Stop" buttons on industrial equipment are larger than the on/off switch.

Under this law, designers should make targets (such as buttons or links) large enough, with ample space between them.

Amazon's "car mode" in the Audible app is a brilliant example of using Fitt's Law: tap targets are dramatically enlarged.

Nielsen Norman Group recommends a minimum touch size of 1cm x 1cm on mobile devices.

(However, designers should be aware that location on the screen affects tap accuracy. "People are better at tapping at the center of the screen, so touch targets there can be smaller—as small as 7 millimeters, while corner target sizes must be about 12 millimeters," says researcher Steven Hoober.)

3. Hick's Law

Premise: "The time it takes to make a decision increases with the number and complexity of choices available."

"Decision Fatigue" is a popular term these days, and it's exactly what Hick's Law is referring to.

Google Ads serves two major markets: small businesses (not marketing experts), and larger corporate accounts (marketing experts). They have developed an interface with two modes of complexity: Smart Mode (limited feature set) and Expert Mode (full feature set). By defaulting to Smart Mode, Google has reduced decision fatigue among their new users.

4. Miller's Law

Premise: "The average person can keep only 7 (± 2) items in their working memory."

As Jon Yablonski points out, this law is often misunderstood. It's not about using fewer items; rather, it's about chunking them.

Chunking is used all around us. Phone numbers are divided into 3 chunks of digits, as are our Social Security numbers. Applied in interface design, chunking can help the user to digest your content.

5. Postel's Law

Premise: "Be conservative in what you do, be liberal in what you accept from others."

Or in the words of F. Scott Fitzgerald, "carpe diem for herself and laissez-faire for others."

In design, this means anticipating and accepting device variants and human error while still producing a flawless result. "Anyone, regardless of device size, feature support, input mechanism, assistive technology, or even connection speed, should be served something that works," says Jon Yablonski.

Under Postel's Law designers should create an interface that is accepting of bad inputs. Google Search is the best example: it autocorrects search queries that are likely to be misspelled.

6. Peak-End Rule

Premise: "People judge an experience largely based on how they felt at its peak and at its end, rather than on the total sum or average of every moment of the experience."

The Peak-End Rule states that our experience of an event isn't rational, but heavily informed by the most intense moment and the end of the experience.

Great designers use this rule to create a delightful ending to a user flow. The Robinhood app displays confetti when a purchase is completed. This satisfying ending subconsciously affects the user's evaluation of the entire buying process.

7. Aesthetic-Usability Effect

Premise: "Users often perceive aesthetically pleasing design as design that’s more usable."

Good-looking designs are seen as easier to use. If a product has competitors with similar functionality, an edge can be gained by designing a sexier product—it will be perceived as easier to use.

I've written more in-depth about the Aesthetic-Usability Effect here.

8. von Restorff Effect

Premise: "When multiple similar objects are present, the one that differs from the rest is most likely to be remembered."

The von Restorff Effect is why you can remember Snow White's name, but not the names of all seven dwarves. It's also the principle behind the red alert badges on iPhones.

Do not include too many points of emphasis, as this will introduce competition between items.

Many designers understand this effect intuitively—it's why "Sign Up" is often shown as a large button, but "Log In" is shown in plain text.

9. Tesler's Law

Premise: "Tesler’s law, also known as the law of conservation of complexity, states that for any system there is a certain amount of complexity that cannot be reduced."

Design a product that assumes as much complexity as possible instead of shifting it to the user.

Tesler himself said, “if a million users each waste a minute a day dealing with complexity that an engineer could have eliminated in a week by making the software a little more complex, you are penalizing the user to make the engineer’s job easier.”

Shopify's Shop Pay is a great example of complexity that cannot be eliminated, but rather shifted from the user to the software by pre-filling shipping and payment details.

10. Doherty Threshold

Premise: "Productivity soars when a computer and its users interact at a pace (<400 ms) that ensures that neither has to wait on the other."

Two IBM researchers from the 1980's discovered that “when a computer and its users interact at a pace that ensures that neither has to wait on the other, productivity soars, the cost of the work done on the computer tumbles, employees get more satisfaction from their work, and its quality tends to improve.”

When physical limitations prevent interactions from happening in under 400 milliseconds, designers can compensate by making something happen within this timeframe. Skeleton screens such as this one from LinkedIn are a great way of signalling progress.

Rideshare apps can sometimes take several minutes to find a driver. Lyft respects the Doherty Threshold by providing step-by-step updates as well as a progress bar.

Optimistic UI is used when the software assumes that an action has taken place successfully in order to maximize interface speed. Only if the action subsequently fails, does an error show. With optimistic UI, the interface takes on slightly more risk in order to provide a more seamless user experience. Amazon's one-click Kindle purchases are a great example of this: as soon as an ebook is purchased it is delivered to the Kindle App for reading, regardless of whether the credit card transaction is approved. Only in the event of a failed transaction is the book removed from the Kindle library.

In some unusual cases it is advisable to create an artificial delay to signal that a significant task is being performed by the software. Spokeo uses this effectively to make the user feel that an in-depth service is being performed. (This is also designed to give the user a sense of "sunk cost" so that they follow through with an account creation at the end of the user flow.)

Summary

User experience and interface design are built on dozens of rules and guidelines, but almost all of them originate from these ten bedrock principles. Knowing these rules will help you to design great products—and help you defend your work to clients and stakeholders. Let's design interfaces with a deep awareness of our users.

‍