Serial Position Effect

Users have a propensity to best remember the first and last items in a series.

Why it matters

Users consistently recall the first and last items in a list and forget the middle. Navigation items placed in positions 3–5 of a 7-item menu receive disproportionately less engagement, regardless of their importance.

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.

AI Analyzer

Analyzing against Serial Position Effect

Your code and images are sent directly to the AI for analysis and are never stored or logged. This tool is for educational purposes only.