design
September 10, 2022

10 Laws of UX: The Psychology of User Interaction

UX Design Principles for Better User Experiences

The Laws of UX. These aren't legal mandates, but rather insights based on psychology and research that help designers create user-friendly interfaces.

This article aims to shed light on these fundamental principles, equipping you with knowledge to understand how UX design works and the thought process behind successful interfaces. By applying these principles, designers can craft interfaces that users find intuitive, efficient, and simply enjoyable to use.

Let's look at 21 UX laws—originally curated by product designer, Jon Yablonski, in his book and the resource Laws of UX. We’ll also look at examples so you can better understand how to put each law into practice.

1. Aesthetic-Usability Effect: The Power of Visual Appeal

First impressions matter, especially in the digital world. When encountering a new site or app, users form instant judgments based on its visual appeal. This instinctive reaction has a surprising impact on their perception of how well it works – a phenomenon known as the Aesthetic-Usability Effect.

  • Attractive design creates a good first impression: Users feel more engaged and motivated to explore.
  • Minor usability issues are forgiven: A visually pleasing interface can soften the blow of occasional hiccups.
  • Testing can be blind to beauty's influence: Users become so captivated by aesthetics that underlying usability problems might go unnoticed.

The Origin: In 1995, researchers Masaaki Kurosu and Kaori Kashimura put it to the test. They asked hundreds of people to rate different ATM interfaces for both usability and visual appeal. Interestingly, the stronger correlation wasn't between aesthetics and actual ease of use, but between aesthetics and how perceived ease of use was. This confirmed that our brains are easily swayed by visual beauty, even in practical matters.

The Takeaway: Invest in making your product beautiful, but don't forget the foundation. Combine stunning visuals with intuitive interaction, clear functionality, and user-centered design to create a truly satisfying experience. Remember, beauty without brains might turn heads, but it won't keep users coming back for more.

2. Doherty Threshold: Speed Matters

Ever notice how a website that responds instantly feels more enjoyable to use? This isn't just a whim, it's a scientifically proven principle known as the Doherty Threshold. Essentially, when systems respond to user actions within 400 milliseconds, users stay engaged and productive. Here's what the research tells us:

  • Quick feedback keeps users attentive: Delays beyond 400 ms can disrupt focus and engagement.
  • Perceived performance is key: Slow-looking animations can decrease satisfaction.
  • Visual cues can bridge the gap: Simple animations or progress indicators can make the wait feel shorter.
  • Transparency builds trust: Progress bars offer a sense of control and understanding.
  • Delayed gratification can add value: A slight, intentional delay can create anticipation.

The Origin: The Doherty Threshold was established in 1982 by researchers who challenged the then-accepted standard of 2 seconds for computer response time. Their findings showed a dramatic improvement in user experience when response times dropped below 400 milliseconds.

The Takeaway: Prioritize quick response times and clear visual feedback. Every millisecond counts when it comes to user experience!

3. Fitts’s Law: Adjusting sizes to success

Ever struggled to tap a tiny button on your phone? Fitts' Law explains why. By applying Fitts' Law, you can design interfaces that feel intuitive and effortless. Users navigate faster, make fewer mistakes, and ultimately enjoy a smoother experience.

  • Bigger targets are easier to hit: Larger buttons take less time and effort to tap.
  • Space matters: Leave enough room between buttons to avoid accidental selection.
  • Position wisely: Place important buttons within easy reach of the user's typical hand position.

The Origin: In 1954, psychologist Paul Fitts discovered that the time to reach a target depends on both its distance and size, forming the core of Fitts' Law.

The Takeaway: Prioritize clear visual hierarchy, generous tap targets, and logical placement to create an efficient and satisfying experience.

4. Goal-Gradient Effect: The Power of Progress in User Motivations

It simply means people tend to work harder and faster the closer they get to achieving their goals.

  • Progress fuels motivation: Clear progress indicators tap into users' desire to finish.
  • Artificial progress can be a boost: Even showing artificial progress can motivate users.
  • Clarity is key: Make progress indicators easy to understand.

The Origin: First explored by psychologist Clark Hull in 1932, who observed rats running faster in a maze as they neared the reward.

The Takeaway: Use clear progress indicators and gamification strategies to push users toward completing goals.

5. Hick’s Law: Less is More

The more choices you offer, the longer it takes someone to make a decision.

  • Less is fast: Present essential choices when speed matters.
  • Break it down: Divide complex tasks into smaller steps.
  • Highlight helpful hints: Offer clear recommendations to guide users.
  • Ease them in: Simplify onboarding to prevent overwhelm.

The Origin: In 1952, William Edmund Hick and Ray Hyman showed that decision time increases with the number of choices, now known as Hick's Law.

The Takeaway: Streamline menus, simplify tasks, and balance control with clarity to minimize choice overload.

6. Jakob’s Law: Leveraging Existing Mental Models

Users prefer your site to work the same way as other sites they already know.

  • User Expectations Travel: Familiar designs meet user expectations.
  • Tap into Mental Models: Build on what users already understand.
  • Smooth Transitions: Offer transition periods when updating interfaces.

The Origin: Jakob Nielsen introduced the idea that users lean toward familiar designs, co-founding Nielsen Norman Group and promoting discount usability engineering.

The Takeaway: Align your design with existing mental models and provide transition periods to minimize confusion.

7. Law of Common Region: Creating Visual Order

Elements sharing a defined boundary tend to be perceived as a group.

  • Structured Understanding: Common regions act as visual organizers.
  • Simple Implementation: Add borders to define regions.
  • Background Definition: Use background blocks to group elements.

The Origin: Gestalt psychologists introduced grouping principles like Prägnanz, forming the basis of the Law of Common Region.

The Takeaway: Use clear boundaries and backgrounds to guide users through your interface.

8. Law of Proximity: Streamlining Visual Connections

Objects near each other tend to be grouped together.

  • Establishing Relationships: Proximity creates visual connections.
  • Functional Perception: Nearby elements imply similar functions.
  • Swift Understanding: Proximity helps organize information quickly.

The Origin: Gestalt psychologists’ grouping principles, including Proximity, explain how our minds organize stimuli.

The Takeaway: Use spacing to clarify relationships and streamline navigation.

9. Law of Prägnanz: Guiding Through Simplicity

People perceive complex images in the simplest form possible to minimize cognitive effort.

  • Preventing Overwhelm: Simplicity defends against information overload.
  • Research-Backed: The brain processes simple shapes more easily.
  • Simplification Process: Complex shapes are seen as unified forms.

The Origin: In 1910, Max Wertheimer’s observations of flashing lights led to core Gestalt principles, including Prägnanz.

The Takeaway: Prioritize clear visual communication to aid comprehension and retention.

10. Law of Similarity: Enhancing Visual Bonds for User Understanding

The human eye perceives similar elements as part of a group, even if separated.

  • Visual Bonds: Similar elements signal connection.
  • Signals of Unity: Use color, shape, or size to show grouping.
  • Differentiate Navigation: Make links stand out from text.

The Origin: Gestalt psychologists’ principle of Similarity, alongside Proximity and Prägnanz, explains how we naturally organize visual information.

The Takeaway: Leverage similarity to guide comprehension and create cohesive interfaces.