⊜
Convention
Jakob's Law
Users spend most of their time on other sites. They prefer your site to work the same way.
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
Product Image
Wireless Headphones
Premium sound quality with noise cancellation
$79
✗ Unconventional
$79★★★★☆
Product Image
Wireless Headphones
The conventional layout follows patterns users know from Amazon, Shopify, and other e-commerce sites.
Code Pattern
tsx
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.