Neddar Islam
0%
Software Engineering
Featured

Essential UX Laws Every Software Engineer Must Know

Master Jakob's Law and Fitts' Law to build intuitive interfaces that users love. Learn practical implementation strategies for better UX design.

Islam Neddar
8 min read
ux-design
user-interface
software-engineering
web-development
design-principles
usability

Essential UX Laws Every Software Engineer Must Know

As software engineers, we often focus on clean code, performance optimizations, and scalable architectures. But there's another critical aspect that determines whether users love or abandon our applications: user experience design.

Two fundamental laws govern how users interact with digital interfaces, and understanding them can dramatically improve the usability of everything you build. Whether you're developing a complex enterprise dashboard or a simple mobile app, these principles will guide you toward creating interfaces that feel natural and effortless.

In this guide, we'll explore Jakob's Law and Fitts' Law - two powerhouse principles that can transform how users perceive and interact with your software. You'll learn not just what these laws are, but how to implement them practically in your daily development work.

Jakob's Law: Users Prefer Familiar Patterns

Jakob's Law states: Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.

This law is a powerful mandate for convention over unnecessary novelty in user interface design. It posits that users have built a powerful mental model for how the web works based on their cumulative experience across thousands of other applications.

Your application is a guest in their digital life. To be a good guest, you must follow the house rules they have already learned. Violating established patterns forces users to learn a new model, creating friction and cognitive load that drives them away.

Why Jakob's Law Works

Understanding the psychology behind Jakob's Law helps you apply it more effectively:

Conservation of Cognitive Energy

Users do not want to spend their limited mental energy learning how your unique navigation menu works. They want to spend it achieving their goal (e.g., buying a product, reading an article). By using familiar patterns, you lower the cognitive cost of using your application, making it feel intuitive and effortless.

The Power of Habit

Common interactions are deeply ingrained habits. Users instinctively look for:

  • A logo in the top-left to go home
  • A shopping cart in the top-right
  • A search bar near the top of the page
  • Settings in a hamburger menu or profile dropdown

Deviating from these conventions doesn't feel creative; it feels broken.

Transfer of Expectation

When a UI element looks like a standard component (e.g., a dropdown menu), users expect it to behave like one. If your "creative" dropdown violates those behavioral expectations, you create confusion and erode the user's trust in your interface.

How to Apply Jakob's Law

Here are practical strategies for implementing Jakob's Law in your development workflow:

Default to Convention

When designing any standard UI component—be it a login form, a data table, or a settings page—your first step should be to research how the most popular applications handle it. The problem has likely already been solved. Adopt the prevailing pattern.

Example: Instead of creating a unique pagination component, use the standard pattern:

jsx
// Standard pagination pattern users expect
<div className="pagination">
  <button>← Previous</button>
  <span>Page 1 of 10</span>
  <button>Next →</button>
</div>

Focus Innovation on Your Core Value

Do not waste your team's limited creative budget on reinventing the date picker. Save your innovative energy for the parts of your application that are truly unique to your domain and deliver your core value proposition. For everything else, be boringly predictable.

Use a Design System to Enforce Consistency

A robust design system is the most effective tool for implementing Jakob's Law at scale. It provides a canonical, pre-vetted, and conventional component for every common UI need. This prevents individual teams from introducing novel (and likely confusing) patterns, ensuring a consistent and intuitive experience across your entire product.

Use Usability Testing to Confirm, Not Discover

If users are consistently struggling with a basic element in your UI, the problem is not the user. It is almost certainly a violation of a design convention they have learned elsewhere. Use testing to identify and eliminate these moments of friction, bringing your design back in line with user expectations.

Fitts' Law: Target Size and Distance Matter

Fitts' Law states: The time to acquire a target is a function of the distance to and the size of the target.

This is a predictive model of human movement that has profound implications for all interface design. It states that hitting a target—be it a button on a screen or a physical object—is faster and easier when the target is larger and closer.

This isn't a suggestion; it's a fundamental principle of human biomechanics. Ignoring it results in interfaces that feel clumsy, slow, and frustrating.

The Science Behind Fitts' Law

Motor Precision

Small, distant targets require more precise motor control and finer adjustments, which takes more time and increases the probability of error. Large, close targets can be acquired with faster, less precise movements.

Cognitive Effort

While rooted in motor skills, the law has a cognitive component. Interfaces that adhere to Fitts's Law require less conscious thought to navigate. Users don't have to carefully aim their pointer; they can move quickly and confidently, reducing mental friction.

The Magic of Edges

The edges and corners of a screen are effectively "infinitely large" targets in one dimension because the pointer cannot overshoot them. This makes them the fastest possible targets to acquire, a principle leveraged by macOS's top menu bar and the Windows Start button.

Implementing Fitts' Law in Your Interfaces

Prioritize by Size and Position

Make your most important and frequently used UI elements (e.g., the primary call-to-action on a page) the largest and most prominent targets. Place them in positions that are easy to reach from the user's likely previous point of interaction.

Example: A well-designed button hierarchy:

jsx
// Primary action - large and prominent
<button className="bg-blue-600 hover:bg-blue-700 px-6 py-3 text-lg">
  Save Changes
</button>

// Secondary action - smaller but still accessible
<button className="bg-gray-200 hover:bg-gray-300 px-4 py-2 ml-2">
  Cancel
</button>

Make Destructive Actions Harder to Hit

Conversely, use Fitts's Law for safety. Make dangerous or irreversible actions (like "Delete Account") smaller, place them further away from common interaction areas, or require an extra click. This deliberate increase in target acquisition time acts as a natural speed bump, preventing catastrophic errors.

Minimize Travel Distance

Group related elements together. A "Save" button should be located near the form fields it acts upon, not at the opposite corner of the screen. In a mobile app, place primary navigation elements within easy reach of the user's thumb.

Apply it to API Design

Fitts's Law can be extended beyond GUIs. Think of the data a client needs as the "target." A "chatty" API that requires multiple round trips to gather all necessary information has a very large "travel distance."

A well-designed API (e.g., using GraphQL or a Backend-for-Frontend pattern) allows the client to acquire all the data in a single call—a large target with zero distance—making the entire interaction vastly more efficient.

Practical Implementation Strategies

For Web Applications

  • Navigation: Keep primary navigation consistent across pages
  • Forms: Use standard form layouts and validation patterns
  • Buttons: Make primary actions larger and more prominent
  • Mobile: Design for thumb-friendly interaction zones

For API Design

  • Endpoints: Follow RESTful conventions or GraphQL standards
  • Error responses: Use standard HTTP status codes
  • Data structures: Follow established JSON:API or similar patterns
  • Documentation: Structure API docs like popular services (Stripe, Twilio)

For Component Libraries

  • Naming: Use conventional prop names (onClick, className, disabled)
  • Behavior: Match native HTML element behaviors
  • Styling: Provide sensible defaults that match user expectations
  • Accessibility: Follow WCAG guidelines and ARIA patterns

Key Takeaways for Software Engineers

These laws aren't just design theory—they're practical guidelines that should influence your technical decisions:

  1. Convention over creativity: Users value familiarity over novelty in interface patterns
  2. Size and proximity matter: Make important actions easy to target
  3. Reduce cognitive load: Every unique pattern requires mental energy to learn
  4. Test with real users: Validate that your interfaces follow expected patterns
  5. Build systems that enforce consistency: Use design systems and component libraries

By applying Jakob's Law and Fitts' Law consistently, you'll create software that feels intuitive from the first interaction. Users won't struggle to understand your interface—they'll focus on accomplishing their goals.

Ready to improve your interfaces? Start by auditing one component in your current project. Does it follow established conventions? Are the most important actions the largest and most accessible? Small changes guided by these laws can have massive impacts on user satisfaction.

Want more insights on building better software? Subscribe to my newsletter for weekly tips on software engineering and UX design, or check out my other articles on creating user-centered applications.

Share: