☰
Memory
Serial Position Effect
Users have a propensity to best remember the first and last items in a series.
Key Principles
- 1Place the most important items at the beginning and end of lists.
- 2Put key navigation items in the first and last positions.
- 3Don't bury critical actions in the middle of a menu.
- 4Use this for tab bars, navigation, and feature lists.
Try It
The first and last items in this navigation are visually emphasized — these are the ones users remember best.
↑ Primacy———↑ Recency
The primacy effect (first items) and recency effect (last items) make these positions most memorable.
Code Pattern
tsx
1// ✅ Good: Key actions at edges of bottom navigation
2<nav className="flex justify-around border-t py-2">
3 <NavIcon icon="home" label="Home" /> {/* First — primary */}
4 <NavIcon icon="search" label="Search" />
5 <NavIcon icon="cart" label="Cart" />
6 <NavIcon icon="profile" label="Profile" /> {/* Last — important */}
7</nav>
8
9// ❌ Bad: Important items buried in the middle
10<nav className="flex justify-around border-t py-2">
11 <NavIcon icon="settings" label="Settings" />
12 <NavIcon icon="home" label="Home" />
13 <NavIcon icon="profile" label="Profile" />
14 <NavIcon icon="help" label="Help" />
15</nav>Place the most important navigation items first and last.