fmode-app/.claude/skills/ui-audit/references/30-patterns-information.md

Patterns: Information Relationships

Patterns for organizing, relating, and surfacing content.

---

What are Information Relationships?

How content connects, relates, and is organized. Good information architecture makes content findable and understandable.

Core principle: Users should always know where they are, how they got there, and where they can go.

---

Breadcrumbs

What: Hierarchical trail showing location in site structure.

Types

Type	Use Case
Hierarchy-based	Shows parent/child path (Home > Category > Item)
History-based	Shows pages visited (like browser back)
Attribute-based	Shows filters/selections applied

Benefits

• Orientation — Users know where they are
• Efficiency — Quick navigation to parent levels
• Context — Understand content hierarchy
• Recovery — Easy return to previous levels

Implementation Guidelines

DO:

• Use for sites with 3+ hierarchy levels
• Link all but current page
• Use separator (/ or >) between levels
• Truncate long trails intelligently
• Position consistently (top of content area)

DON'T:

• Use for flat site structures
• Make current page a link
• Use breadcrumbs as primary navigation
• Show breadcrumbs on homepage
• Inconsistent placement across pages

Breadcrumb Examples

Standard:

Home / Products / Electronics / Headphones

Attribute-based:

Headphones > Over-ear > Wireless > Sony

Truncated:

Home / ... / Category / Subcategory / Item

---

Sitemaps & Information Architecture

What: Structured overview of all site content.

Sitemap Types

Type	Purpose
Visual sitemap	Design/planning tool
HTML sitemap	User-facing page listing
XML sitemap	SEO, search engine crawling

IA Organization Schemes

Scheme	Examples
Alphabetical	Directories, glossaries
Chronological	News, blog archives
Geographical	Store locators, regional content
Topical	Subject-based categories
Task-based	What users want to do
Audience-based	By user type (admin, user)

IA Principles

DO:

• Organize by user mental model
• Use card sorting to validate
• Limit depth (3-4 levels max)
• Use clear, descriptive labels
• Cross-link related content

DON'T:

• Organize by org structure
• Create deep hierarchies
• Use internal jargon
• Duplicate content in multiple places
• Forget search as navigation

---

Tagging & Categorization

What: Metadata that makes content findable and relatable.

Categories vs. Tags

Categories	Tags
Hierarchical	Flat
Mutually exclusive	Multiple allowed
Pre-defined	Often user-created
Broad classification	Specific descriptors
Navigation structure	Discovery/filtering

Implementation Guidelines

DO:

• Define clear taxonomy
• Limit tag proliferation (governance)
• Show related content via shared tags
• Allow multiple tags per item
• Make tags clickable (for discovery)

DON'T:

• Over-tag content
• Create overlapping categories
• Use inconsistent naming
• Hide tag functionality
• Ignore tag maintenance

Tag UI Patterns

Tag display:

[UX Design] [Mobile] [Case Study]

Tag filtering:

Filter by tag:
☑ UX Design (24)
☐ Mobile (18)
☐ Case Study (12)

Tag input:

Tags: [UX Design ×] [Mobile ×] [Add tag...]
      Suggested: Case Study, Research

---

Faceted Search & Filters

What: Multi-dimensional filtering to narrow results.

Components

Component	Function
Facets	Filter categories (price, size, color)
Values	Options within facets
Counts	Number of results per value
Applied filters	Currently active filters
Clear all	Reset to unfiltered state

Benefits

• Precision — Find exactly what's needed
• Exploration — Discover by browsing facets
• Transparency — See how results are filtered
• Control — User-driven refinement

Implementation Guidelines

DO:

• Show result counts per facet value
• Allow multiple selections within facets
• Update results immediately (or on apply)
• Show applied filters prominently
• Provide clear "reset all"

DON'T:

• Show zero-result facet values (or mark unavailable)
• Hide facet values users might need
• Create too many facets
• Remove facets that would narrow to zero
• Make filters hard to clear

Faceted Search UI

Filters               [Clear all]

Price
○ Under $50 (120)
○ $50-$100 (85)
● $100-$200 (42)
○ Over $200 (23)

Brand
☑ Nike (35)
☑ Adidas (28)
☐ Puma (15)
☐ Under Armour (12)

[Show 42 results]

---

Related Content

What: Surfacing connections between content.

Types

Type	Basis
Manual curation	Editor-selected relations
Automatic	Shared tags, categories, keywords
Behavioral	"Users also viewed"
Temporal	"Recent" or "trending"

Placement

• End of content (post-consumption)
• Sidebar (during consumption)
• Inline (contextual mentions)
• Below fold (scroll to discover)

Implementation Guidelines

DO:

• Show genuinely related content
• Limit quantity (3-5 items)
• Include visual preview
• Vary recommendation types
• Track click-through

DON'T:

• Show unrelated content
• Overwhelm with recommendations
• Use only one recommendation type
• Show same recommendations everywhere
• Link to outdated content

Related Content UI

Related Articles

[Image] How to improve your UX process
        3 min read

[Image] Design systems for startups
        5 min read

[Image] User research on a budget
        4 min read

---

Cross-Linking & Content Discovery

What: Connecting content through intentional links.

Cross-Link Types

Type	Purpose
See also	Alternative content
Learn more	Deeper dive
Prerequisites	Required knowledge
Next steps	Sequential content
Examples	Illustrative content

Implementation Guidelines

DO:

• Link to genuinely useful content
• Use descriptive anchor text
• Open external links appropriately
• Maintain links (fix broken)
• Use bidirectional linking

DON'T:

• Use "click here" as anchor text
• Link excessively (every paragraph)
• Link to irrelevant pages
• Open all links in new tabs
• Create orphan pages (no inbound links)

Link Patterns

Inline:

For more details, see our guide to [user research methods].

Call-out:

📚 Related: [Complete guide to design systems →]

Footer:

Learn more:
• User research fundamentals
• Conducting user interviews
• Analyzing research findings

---

Search

What: Finding content through queries.

Search Components

Component	Function
Search box	Query input
Suggestions	Autocomplete, recent, popular
Results	Matched content
Filters	Refine results
Sort	Order results
No results	Empty state handling

Implementation Guidelines

DO:

• Make search prominent
• Support autocomplete
• Show result count
• Highlight matched terms
• Handle no results gracefully
• Remember recent searches

DON'T:

• Hide search (especially on content-heavy sites)
• Require exact matches
• Show empty results without guidance
• Ignore typos/synonyms
• Make filters hard to find

Search UI Patterns

Search box:

🔍 [Search products, articles...  ]
    Recent: shoes, headphones
    Popular: new arrivals, sale

Search results:

42 results for "wireless headphones"

[Filter by: Price ▼] [Category ▼] [Sort by: Relevance ▼]

Sony WH-1000XM5
Wireless noise-canceling **headphones** with...
$349 ★★★★★ (2,341)

AirPods Max
Premium **wireless headphones** from Apple...
$549 ★★★★☆ (1,892)

---

Information Architecture Checklist

Element	Implemented?
☐ Clear hierarchy (3-4 levels max)
☐ Breadcrumbs for deep content
☐ Consistent categorization
☐ Useful tagging system
☐ Effective search
☐ Faceted filtering where appropriate
☐ Related content surfacing
☐ Cross-linking strategy
☐ No orphan content