7.7 KiB
7.7 KiB
Patterns: Chunking
Patterns for breaking content into digestible, organized units.
What is Chunking?
Breaking complex information into smaller, manageable pieces that users can process and remember more easily. Based on Miller's Law (7±2 items in working memory).
Core principle: Users can't process everything at once. Group related items, separate unrelated items.
Card-Based Layouts
What: Contained units of related content with clear boundaries.
Benefits & Use Cases
- Scannable — Users quickly identify relevant cards
- Self-contained — Each card is a complete unit
- Flexible — Cards work in grids, lists, or carousels
- Actionable — Cards can be interactive (click, expand, drag)
Psychological Principles
- Law of Common Region — Boundary creates relatedness
- Chunking — Content grouped into digestible units
- Recognition over recall — Visual cards easier to scan
Implementation Guidelines
DO:
- Clear visual boundary (border, shadow, or background)
- Consistent card structure across the set
- Visual hierarchy within the card (image → title → description → actions)
- Appropriate sizing for content (not too cramped or empty)
- Interactive states (hover, selected)
DON'T:
- Mix card sizes without purpose
- Overload cards with too much content
- Use cards for single items (overkill)
- Nest cards inside cards
- Forget empty states
Common Variants
| Variant | Use Case |
|---|---|
| Media card | Image/video prominent |
| Stat card | Single metric focus |
| Action card | Primary CTA emphasis |
| Profile card | Person/account info |
| Preview card | Summary with expand |
Tabs & Accordions
What: Show/hide content sections to reduce visible complexity.
When to Use Tabs vs. Accordions
| Tabs | Accordions |
|---|---|
| 2-7 peer sections | Many sections (5+) |
| Mutually exclusive content | Content can stack |
| Horizontal space available | Vertical list format |
| Users need to switch frequently | Users view one at a time |
Benefits & Use Cases
- Space efficient — Show only relevant content
- User control — Users choose what to see
- Progressive disclosure — Reduce cognitive load
- Organization — Clear content categorization
Psychological Principles
- Hick's Law — Fewer visible options = easier decisions
- Progressive disclosure — Reveal complexity gradually
- Miller's Law — Chunk content into sections
Implementation Guidelines (Tabs)
DO:
- Clear active state
- Limit to 7 tabs (use dropdown for more)
- Descriptive labels (2-3 words)
- Logical order (frequency or process)
- Preserve state when switching
DON'T:
- Use tabs for sequential steps (use steppers)
- Mix tabs with different content types
- Use very long labels
- Nest tabs within tabs
- Auto-switch tabs without user action
Implementation Guidelines (Accordions)
DO:
- Clear expand/collapse indicators (chevron, +/-)
- Allow multiple open (usually) or single open (sometimes)
- Animate expansion smoothly
- Keyboard accessible (Enter/Space to toggle)
- Consider default-expanded first item
DON'T:
- Nest accordions deeply
- Hide critical information in collapsed sections
- Use vague headers
- Make all sections collapsed by default if users need most of them
Grouped Form Fields
What: Related form fields visually grouped together.
Benefits & Use Cases
- Scannable — Related fields easy to locate
- Logical — Reflects user mental model
- Reduced errors — Related info filled together
- Progress sense — Completing groups feels like progress
Psychological Principles
- Law of Proximity — Close items perceived as related
- Chunking — Smaller groups easier to process
- Goal gradient — Visible progress motivates completion
Implementation Guidelines
DO:
- Group by relationship (personal info, shipping, payment)
- Use visual separation (whitespace, lines, containers)
- Label groups with clear headers
- 3-5 fields per group typically
- Consider two-column layout for short fields
DON'T:
- Create groups that are too large
- Separate clearly related fields (first/last name)
- Use inconsistent grouping across forms
- Over-decorate group boundaries
Common Groupings
| Group | Fields |
|---|---|
| Personal | Name, email, phone |
| Address | Street, city, state, zip, country |
| Payment | Card, expiry, CVV, billing address |
| Credentials | Username/email, password, confirm |
| Preferences | Notification settings, privacy |
Pagination
What: Breaking large lists into discrete pages.
Pagination vs. Infinite Scroll vs. Load More
| Pattern | Use When |
|---|---|
| Pagination | User needs to locate specific items, page numbers meaningful, SEO important |
| Infinite scroll | Browsing/discovery, no specific target, continuous consumption (social feeds) |
| Load more | Compromise between above, user controls when to load |
Benefits & Use Cases
- Orientation — Users know where they are (page 3 of 10)
- Shareable — Deep links to specific pages
- Performance — Predictable page loads
- Completion sense — Can reach "the end"
Psychological Principles
- Chunking — Content in manageable batches
- Progress — Page numbers show advancement
- Control — User decides when to load more
Implementation Guidelines
DO:
- Show current page and total pages
- Provide first/last page shortcuts (for many pages)
- Truncate middle pages with ellipsis (1 2 3 ... 10)
- Show items per page (and allow customization)
- Preserve page in URL (deep linking)
DON'T:
- Use pagination for < 20 items
- Hide page count
- Break in the middle of logical groups
- Require clicking through many pages for common tasks
- Forget keyboard navigation
Page Size Guidelines
| Context | Items/Page |
|---|---|
| Data tables | 10-50, user configurable |
| Search results | 10-25 |
| Product listings | 12-48 |
| Blog/articles | 5-10 |
Carousels & Sliders
What: Horizontal scrollable content, often auto-advancing.
Benefits & Use Cases
- Space efficient — Many items in limited space
- Visual interest — Dynamic, engaging
- Feature highlights — Hero promotions, featured content
- Related content — "You might also like"
Psychological Principles
- Curiosity — Partial visibility entices exploration
- Chunking — Subset of content at a time
- Serial position — First items get most attention
Implementation Guidelines
DO:
- Show partial next item (indicates more content)
- Clear navigation controls (arrows, dots)
- Allow touch/swipe on mobile
- Consider auto-advance carefully (user control preferred)
- Pause auto-advance on hover/focus
DON'T:
- Auto-advance too fast (5+ seconds minimum)
- Use for critical content (users miss it)
- Hide navigation controls
- Use multiple carousels on same page
- Rely on carousel for primary navigation
Critical Warnings
⚠️ Carousels have notoriously low engagement beyond first item ⚠️ Users often miss carousel content entirely ⚠️ Auto-advance frustrates users trying to read ⚠️ Consider if content is important enough to warrant space without hiding
Better Alternatives
- Grid of items (all visible)
- Horizontal scroll (user-controlled)
- Featured + list (primary + secondary)
- Accordion (if order matters less)
Chunking Pattern Selection Guide
| User Need | Pattern |
|---|---|
| Compare items | Cards in grid |
| View details on demand | Accordions |
| Switch between categories | Tabs |
| Fill related information | Grouped forms |
| Navigate large sets | Pagination |
| Browse highlights | Carousel (with caution) |