Jacob’s Law in UI/UX Design: The Power of Familiarity

 Jacob’s Law is a principle from usability expert Jakob Nielsen, one of the founding figures of user-centered design. It states:

"Users spend most of their time on other websites or apps, not yours. Therefore, they expect your product to behave like the ones they already use."

 Why Jacob’s Law Matters in UX

Imagine you’re using a new app. The navigation is on the bottom (just like Instagram), the profile icon is top-right (like LinkedIn), and settings are under a gear icon (a near-universal pattern). You don’t need a tutorial—you just know what to do.


That’s the power of familiarity.

When you ignore Jacob’s Law and reinvent common patterns, users need to pause, re-learn, or experiment—which leads to:

  • Cognitive load (mental effort)
  • Slower interactions
  • Confusion or mistakes
  • Abandonment

 Real-World Examples

1. Search Bar – Commonly placed at the top-center or top-right of a webpage or app. This familiar placement helps users quickly locate and use it without confusion.


2. The logo is traditionally placed in the top-left corner of a website or app. This aligns with how users scan screens (left to right, top to bottom) and serves as a familiar anchor point. Clicking the logo typically returns users to the homepage, reinforcing user control and navigation efficiency.



3. Hamburger Menu – Top-Left or Top-Right on Mobile
The hamburger menu (☰ icon) is typically placed in the top-left or top-right corner on mobile interfaces. This consistent placement helps users easily recognize and access the main navigation menu, especially when screen space is limited. Tapping it usually reveals hidden navigation links or settings.




10 Usability Heuristics for User Interface Design by Jakob Nielsen, widely used as a foundational guide in UI/UX design to evaluate the usability of interfaces:


1. Visibility of System Status

Definition: The system should always keep users informed about what is going on through appropriate feedback within a reasonable time.

Example:



Loading spinners, progress bars, or confirmation messages like “Your file has been uploaded successfully.”


2. Match Between System and the Real World

Definition: The system should speak the users' language, using familiar words, phrases, and concepts—following real-world conventions.

Example:



An e-commerce app using terms like “Cart” instead of “Inventory” and “Buy Now” instead of “Execute Purchase.”


3. User Control and Freedom

Definition: Users often make mistakes. Provide clearly marked "undo" or "redo" options and easy exits from unwanted actions.

Example:



A "Cancel" button in a form or the ability to undo a deleted item.


4. Consistency and Standards

Definition: Users shouldn’t have to wonder whether different words, situations, or actions mean the same thing. Follow platform and web conventions.

Example:



In Adobe Photoshop and Adobe Illustrator, the “Save,” “Undo,” and “Zoom” functions work similarly in terms of shortcut keys (Ctrl+S, Ctrl+Z, Ctrl+Plus/Minus) and UI placement. Even though the tools are used for different purposes, Adobe maintains consistent icons, menus, and terminology across products—helping users transition smoothly between them without relearning everything.

5. Error Prevention

Definition: Better than good error messages is a careful design that prevents a problem from occurring in the first place.

Example:



When entering a password, the system can prevent errors by showing real-time validation like:

🔴 “Password must include at least 8 characters, one number, and one special symbol”

instead of just saying “Wrong password” after submission.

This helps users correct mistakes before submitting the form.


6. Recognition Rather Than Recall

Definition: Minimize the user's memory load by making options, actions, and information visible.

Example:



Dropdown menus, autocomplete suggestions, or recently used files instead of requiring users to remember file names or commands.


7. Flexibility and Efficiency of Use

Definition: Accelerators—unseen by novice users—may speed up interaction for expert users, allowing customization and shortcuts.

Example:



Keyboard shortcuts, drag-and-drop functionality, or customizable dashboards.


8. Aesthetic and Minimalist Design

Definition: Dialogues should not contain irrelevant or rarely needed information. Keep it clean and focused.

Example:



Apple’s iPhone interface is a prime example of minimalist design.

The home screen features simple icons, clean typography, and ample spacing.

The Settings app uses a straightforward list with no excessive visuals.


9. Help Users Recognize, Diagnose, and Recover from Errors

Definition: Error messages should be expressed in plain language (no codes), precisely indicate the problem, and suggest a solution.

Example:



“Your password is too short. It must be at least 8 characters.” — instead of “Error: Code 294.”


10. Help and Documentation

Definition: Even though it is better if the system can be used without documentation, help and support should still be easily accessible.

Example:



A search bar in the Help Center, tooltips, onboarding guides, FAQs, or live chat support.


Post a Comment

0 Comments