Jakob's Law
Users spend most of their time on other sites. They prefer your site to work the same way.
Why it matters
Users arrive with strong mental models built from thousands of hours on other products. When your navigation, search bar, or checkout flow breaks those patterns, users don't learn a new system. They leave.
Key Principles
- 1Leverage existing mental models from popular interfaces.
- 2Don't reinvent standard UI patterns without good reason.
- 3Place navigation, search, and key actions where users expect them.
- 4When innovating, bridge familiar and new patterns gradually.
Try It
Compare a conventional card layout with an unconventional one. Users intuitively understand the familiar pattern.
✓ Conventional
Wireless Headphones
Premium sound quality with noise cancellation
✗ Unconventional
Wireless Headphones
The conventional layout follows patterns users know from Amazon, Shopify, and other e-commerce sites.
Code Pattern
1// ✅ Good: Conventional e-commerce card layout
2<div className="border rounded-lg overflow-hidden">
3 <img src={product.image} alt={product.name} />
4 <div className="p-4">
5 <h3 className="font-semibold">{product.name}</h3>
6 <p className="text-gray-500 text-sm">{product.description}</p>
7 <div className="flex justify-between items-center mt-3">
8 <span className="font-bold">${product.price}</span>
9 <button className="bg-blue-600 text-white px-4 py-2 rounded">
10 Add to Cart
11 </button>
12 </div>
13 </div>
14</div>
15
16// ❌ Bad: Unconventional layout that confuses users
17<div className="p-4">
18 <button className="mb-2">Buy</button>
19 <span>{product.price}</span>
20 <img src={product.image} alt="" className="mt-4" />
21 <h3>{product.name}</h3>
22</div>Follow established conventions. Users shouldn't have to learn your unique patterns.
AI Analyzer
Analyzing against Jakob's LawYour code and images are sent directly to the AI for analysis and are never stored or logged. This tool is for educational purposes only.