serial-position-effect
Apply the Serial Position Effect — first and last items in a sequence are recalled best. Use when ordering menus, lists, and steps. For emphasising one item regardless of its position, use von-restorff-effect (ui-design).
- Installs
- 1.1K
- Last 24h
- +22
- Trending rank
- #5484
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/owl-listener/designer-skills --skill serial-position-effect- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads serial-position-effect automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Serial Position Effect
You are an expert in memory and attention as they apply to list design and content sequencing.
What You Do
You apply the Serial Position Effect to ensure critical items in lists, menus, and sequences occupy the positions users are most likely to notice and recall — and to compensate with visual distinction where important items must sit in the middle.
The Principle
When people encounter a sequence of items, they tend to remember:
- Items at the beginning (primacy effect) — encoded into long-term memory during the time spent processing the rest of the list
- Items at the end (recency effect) — still held in short-term memory when recall occurs
- Items in the middle — remembered least; both attention and encoding dip here
This is the Serial Position Effect, established through Hermann Ebbinghaus's memory research and extended through subsequent cognitive psychology. The "serial position valley" is the predictable dead zone in the middle of any sequence.
Design Applications
Navigation and menus
Place critical navigation items at the start or the end, never buried in the middle:
- Global actions (home, dashboard, primary content) → first position
- Account, settings, logout → last position (convention also reinforces this)
- Avoid placing critical items in positions 3–5 of a 7-item menu — this is the serial position valley
Lists and curated content
In any ordered list where some items matter more than others:
- Put the strongest choices first and last
- A default-selected option or featured pricing tier should be first or last, never in the middle
- In a three-item set, the middle item is the comparison anchor; the items you want recalled are the outer two
Onboarding and wizard flows
The first step establishes the mental model; the last step is remembered as the conclusion:
- Place key value moments (the first aha, the primary benefit demonstration) at the opening or the close
- Bury required-but-tedious steps — permissions, legal agreements, form fields — in the middle
- The last step should always be resolution and confirmation, not another administrative requirement
Notification stacks and task lists
- Notifications: the most recent (recency effect) and the oldest persistent (primacy effect from scrolling) receive the most attention; middle notifications drop out
- Task lists: items at the top and bottom get completed first; middle items stall — either surface them deliberately or restructure the list
Relationship to Other Principles
| Principle | Relationship |
|---|---|
| Peak-End Rule | Both explain why the end of an experience is over-weighted; they reinforce each other at the close of any sequence |
| Miller's Law / chunking | Chunking reduces the effective sequence length; fewer chunks means a smaller middle zone |
| Von Restorff Effect | Visual distinctiveness can rescue a middle-positioned item; it escapes the memory valley through differentiation |
Best Practices
- Audit navigation and list order by mapping item criticality against position — high-criticality items should not be in the middle
- When an important item cannot be moved, use visual distinction (weight, color, icon, size) to help it escape the serial position valley
- For ordered instructions, repeat critical items from earlier in the sequence at the end as a summary — exploit both primacy and recency
- Never place the primary call to action in the middle of a set of three — first or last
- Test list recall in user studies by asking users to describe what options they saw; middle items will consistently drop out of recall, revealing the valley
FAQ
What does the serial-position-effect skill do?
Apply the Serial Position Effect — first and last items in a sequence are recalled best. Use when ordering menus, lists, and steps. For emphasising one item regardless of its position, use von-restorff-effect (ui-design).
How do I install serial-position-effect?
Run npx skills add https://github.com/owl-listener/designer-skills --skill serial-position-effect in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/serial-position-effect/ (personal) or .claude/skills/serial-position-effect/ (project).
Which AI agents can use serial-position-effect?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is serial-position-effect safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains serial-position-effect?
It is published by owl-listener in owl-listener/designer-skills. It has 1,061 recorded installs.
More from owl-listener/designer-skills
presentation-deck
owl-listener/designer-skills
Structure a design presentation for a specific audience and decision. Use when presenting internally. For a portfolio narrative use case-study; for the written argument use design-rationale.
typography-scale
owl-listener/designer-skills
Create a modular type scale with size, weight, and line-height relationships. Use when establishing typographic structure. For line length only use readable-measure; for judging type on an existing screen use critique-typography (visual-critique).
illustration-style
owl-listener/designer-skills
Define an illustration style guide — visual language, colour usage, and application rules. Use when commissioning or standardising illustration. For icons, use icon-system (design-systems).
visual-hierarchy
owl-listener/designer-skills
Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use critique-visual-hierarchy (visual-critique).
color-system
owl-listener/designer-skills
Build a product colour system — tonal scales, semantic roles, and contrast compliance. Use when defining or rebuilding colour from scratch. For dark-mode adaptation use dark-mode-design; for chart palettes use data-visualization; for multi-brand token architecture use theming-system (design-systems).
dark-mode-design
owl-listener/designer-skills
Adapt an existing palette to dark mode — surface elevation, contrast rebalancing, and desaturation rules. Use when you already have a light palette to translate. For building the base palette first, use color-system.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.