gh-tachyon-beep-skillpacks-plugins-lyra-ux-designer/skills/using-ux-designer/information-architecture.md

# Information Architecture

## Overview

This skill provides a systematic approach to organizing content and designing navigation systems. Use when users can't find features, navigation feels confusing, or content needs structural organization.

**Core Principle**: Good IA matches users' mental models and provides multiple paths to content with clear information scent.

## When to Use

Load this skill when:
- Users complain "I can't find [feature]"
- Navigation structure needs design or reorganization
- Content organization is unclear or inconsistent
- Designing site maps, menus, or navigation systems
- User requests mention: "navigation", "menu", "structure", "organize", "findability"

**Don't use for**: Visual styling (use visual-design-foundations), interaction mechanics (use interaction-design-patterns)


## The Navigation & Discoverability Model

A systematic 4-layer framework for evaluating and designing information architecture:

**Layer 1: MENTAL MODELS** - Does structure match how users think?
**Layer 2: NAVIGATION SYSTEMS** - Are there multiple paths to content?
**Layer 3: INFORMATION SCENT** - Do labels lead users to their goal?
**Layer 4: DISCOVERABILITY** - Can users find features beyond the basics?

Evaluate each layer systematically to identify IA gaps.


## Layer 1: Mental Models

**Purpose:** Align information structure with users' existing mental models

### Evaluation Questions

- Does the IA match how users think about this domain?
- Are we using terminology users understand?
- Would users expect to find X under category Y?
- Does the structure match users' tasks and goals?
- Are we organizing by internal company structure (BAD) or user needs (GOOD)?

### Research Methods

**Card Sorting (Open)**
- Give users cards with content/features
- Ask them to group cards into categories they create
- Reveals natural mental model organization
- Use for: New IA, understanding user categories

**Card Sorting (Closed)**
- Give users cards and predefined categories
- Ask them to place cards in categories
- Validates existing IA structure
- Use for: Testing proposed navigation

**Tree Testing**
- Give users IA tree (text-only, no visual design)
- Ask them to find specific items
- Measures findability without visual interference
- Use for: Validating IA before visual design

**Mental Model Diagrams**
- Map user's understanding of domain (Indi Young method)
- Compare to organization's mental model
- Identify gaps between user expectations and implementation
- Use for: Deep understanding, strategy

### Patterns

**Task-Based Organization**
- Structure around what users do, not what you sell
- Example: "Send Money" not "Products > Wire Transfer"
- Users think in goals, not features

**Domain-Appropriate Terminology**
- Use industry terms users know (not internal jargon)
- Example: "Shopping Cart" not "Basket" (e-commerce convention)
- Test terminology with card sorting

**Flat-ish Hierarchy**
- Aim for 3-5 levels deep maximum
- Broad (5-9 top-level categories) > Deep (3 categories, 10 levels)
- Users struggle with navigation deeper than 3-4 clicks

**Mutually Exclusive Categories**
- Each item belongs in one obvious place
- Avoid: "Accessories" and "Cables" (cables are accessories)
- Reduces confusion, speeds navigation

### Anti-Patterns

**Organized by Internal Structure**
- "About Us > Divisions > Division 3 > Services"
- Users don't care about org chart
- Organize by user needs, not company hierarchy

**Jargon Users Don't Understand**
- Internal product names ("Project Phoenix")
- Acronyms without context ("SDLC Dashboard")
- Test labels with users unfamiliar with domain

**Categories That Overlap**
- Item could reasonably go in 2+ categories
- Users waste time checking multiple places
- Forces arbitrary decisions

**Too Many Top-Level Categories**
- 15+ menu items = overwhelming
- Users can't hold that many options in memory
- Chunk into 5-9 logical groups

### Practical Application

**Step 1:** Conduct card sorting with 15-20 users
- Open card sort to discover categories
- Closed card sort to validate proposed structure

**Step 2:** Analyze sorting patterns
- What categories did users create?
- What labels did they use?
- Where was agreement? Disagreement?

**Step 3:** Map to mental model
- Create IA structure matching user categories
- Use user terminology for labels
- Keep hierarchy flat (3-4 levels max)

**Step 4:** Validate with tree testing
- Test findability before implementing
- Iterate based on task success rates


## Layer 2: Navigation Systems

**Purpose:** Provide multiple paths to content so users can navigate their preferred way

### Evaluation Questions

- Can users reach content via global navigation?
- Is search available and functional?
- Are contextual links provided within content?
- Can users get back to where they were (breadcrumbs)?
- Are there shortcuts for common tasks?
- Is navigation consistent across screens?

### Navigation Types

**Global Navigation**
- Persistent across entire site/app (top bar, sidebar)
- Contains primary categories (5-7 items)
- Always visible or easily accessible
- Example: Main menu, app navigation drawer

**Local Navigation**
- Specific to current section (sub-menu)
- Shows related pages within category
- Example: Sidebar in documentation, tabs within settings

**Contextual Navigation**
- Links embedded in content
- "See also", "Related articles", inline links
- Helps users discover related content

**Search**
- Direct path to specific content
- Essential when >50 pages/items
- Requires: autocomplete, filters, clear results

**Utility Navigation**
- Secondary functions (login, settings, help)
- Usually top-right corner or under menu
- Less prominent than global nav

**Breadcrumbs**
- Show path from home to current page
- Allow users to backtrack easily
- Example: Home > Products > Electronics > Laptops

### Patterns

**3-Click Rule (Modified)**
- Any content reachable within 3 clicks
- More accurately: 3 CLEAR clicks (with good information scent)
- Better to have 5 obvious clicks than 2 confusing ones

**Consistent Navigation Placement**
- Same location across all pages
- Same labels, same order
- Users learn once, applies everywhere

**Primary + Secondary Actions**
- One primary path (main menu, prominent)
- Secondary paths (search, contextual links)
- Redundancy helps different user styles

**Mobile Navigation Patterns**
- Bottom tab bar (iOS standard, 3-5 items)
- Hamburger menu (for 6+ items)
- Bottom sheet menus (Android)
- Prioritize: Most important actions at bottom (thumb zone)

**Web Navigation Patterns**
- Horizontal top nav (desktop)
- Sticky header (nav always accessible)
- Mega-menus (for complex sites, show 2+ levels)
- Sidebar nav (for deep hierarchies)

**Desktop Navigation Patterns**
- Menu bar (File, Edit, View, Help)
- Toolbar (icon buttons for common actions)
- Keyboard shortcuts (Cmd+N, Cmd+O, Cmd+S)

### Anti-Patterns

**Single Path to Content**
- Only one way to reach feature (menu > submenu > page)
- Users with different mental models get lost
- Provide: Global nav + search + contextual links

**Mega-Menu Overload**
- Showing 50+ links in dropdown
- Overwhelming, hard to scan
- Chunk into logical groups, use hierarchy

**Mystery Meat Navigation**
- Icons without labels
- Users guess what icon means
- Use: Icon + label (or tooltip on hover)

**Inconsistent Navigation**
- Menu moves or changes on different pages
- Different labels for same destination
- Forces users to relearn on each page

**Buried Search**
- Search hidden in menu or obscure icon
- Essential for large sites (>50 pages)
- Make prominent: Top-right is convention

**No Way Back**
- Dead-end pages with no navigation
- Modal with no close/back button
- Always provide: Back, breadcrumbs, or close

### Practical Application

**Step 1:** Audit all navigation paths
- List all ways to reach each major page/feature
- Identify single-path content (problem)

**Step 2:** Add redundant paths
- Global nav for primary content
- Search for direct access
- Contextual links within content
- Breadcrumbs for backtracking

**Step 3:** Test with first-click tests
- Show users page/screen
- Ask "Where would you click to [task]?"
- Measure if first click is correct path

**Step 4:** Verify consistency
- Same navigation on all pages
- Same labels across contexts
- Test on 10+ different pages


## Layer 3: Information Scent

**Purpose:** Labels and clues accurately predict what users will find

### Evaluation Questions

- Do link labels accurately describe destination?
- Are category names specific (not vague)?
- Would users know where to look for their task?
- Do labels use user terminology?
- Are categories mutually exclusive?
- Does "scent" get stronger as user gets closer (progressive refinement)?

### Core Concept: Scent Strength

**Strong Scent**
- Label clearly predicts content
- Example: "Download Receipt" → PDF receipt downloads
- Users confident they're on right path

**Weak Scent**
- Label vague, ambiguous
- Example: "Resources" → Could be anything
- Users unsure if this is right path

**False Scent**
- Label misleads users
- Example: "Settings" → Only shows account info, not all settings
- Users frustrated, waste time

### Patterns

**Specific, Action-Oriented Labels**
- Good: "Download Invoice", "Change Password", "View Order History"
- Bad: "Account", "Options", "More"
- Users scan for action verbs matching their goal

**Front-Loading Keywords**
- Good: "Projects > Project Alpha > Documents"
- Bad: "All > Alpha > Files and Documents for Projects"
- Users scan left-to-right, see important words first

**Descriptive Category Names**
- Good: "User Settings", "Billing Information", "Security Preferences"
- Bad: "Preferences", "Options", "More"
- Specific > generic

**Progressive Refinement**
- Each level narrows scope
- Example: Electronics > Laptops > Gaming Laptops > 17-inch Gaming Laptops
- Scent gets stronger at each level

**Preview/Descriptions for Ambiguous Items**
- When label can't be specific, add description
- Example: "Advanced" (label) + "For power users: API keys, webhooks, custom scripts" (description)
- Clarifies before user clicks

**Avoid Overlapping Categories**
- Bad: "Accessories" + "Cables" (cables are accessories)
- Users check both, waste time
- Make mutually exclusive or nest hierarchically

### Anti-Patterns

**Vague Labels**
- "Stuff", "Other", "More", "Miscellaneous"
- Tells users nothing about content
- If necessary, add description

**Marketing Speak**
- "Solutions", "Innovative Tools", "Next-Gen Platform"
- Sounds impressive, means nothing
- Use plain language users understand

**Icon-Only Labels (No Text)**
- Users guess what icon means
- Different cultures interpret icons differently
- Use icon + text (or tooltip)

**Jargon Users Don't Know**
- Internal product names ("Project Phoenix Dashboard")
- Industry acronyms ("SDLC", "KPIs") without context
- Test with users unfamiliar with domain

**Same Label for Different Things**
- "Settings" in menu → All settings
- "Settings" in modal → Only this feature's settings
- Creates confusion, breaks trust

**Label Doesn't Match Content**
- Link says "View Profile", page shows "Account Settings"
- Breaks trust, wastes time
- Ensure label = page title/content

### Practical Application

**Step 1:** Audit all labels
- List every menu item, button, link
- Ask: "Does this label clearly predict destination?"

**Step 2:** Test with users (5-second test)
- Show label for 5 seconds
- Ask: "What do you expect to find here?"
- Compare to actual content

**Step 3:** Refine labels
- Replace vague with specific
- Front-load keywords
- Use user terminology (from card sorting)

**Step 4:** Validate with tree testing
- Users navigate text-only IA tree
- Measure task success rate
- Iterate on failing labels


## Layer 4: Discoverability

**Purpose:** Users can find features beyond the basics, progressively

### Evaluation Questions

- Can users discover advanced features?
- Is there progressive disclosure (simple first, advanced later)?
- Are there tooltips/contextual help?
- Do features have logical placement (near related functionality)?
- Is there onboarding for core features?
- Can users learn without documentation?

### Patterns

**Progressive Disclosure**
- Show basics by default
- Hide advanced features behind "Advanced" button/section
- Example: Simple form with 3 fields + "More options" reveals 10 more
- Prevents overwhelming new users, empowers advanced users

**Onboarding for Core Features**
- First-time users see guided tour
- Highlights 3-5 essential features
- Optional skip (don't force)
- Example: "Here's how to create your first project"

**Contextual Help**
- "?" icon next to complex fields
- Tooltips on hover (desktop) or tap (mobile)
- Inline explanations (not separate docs)
- Example: "What's this?" next to "API Key"

**Logical Feature Placement**
- Related features grouped together
- Example: "Export as PDF" near "Print"
- Users discover by exploring related functionality

**Empty States with Guidance**
- When no content exists, show how to create content
- Example: "No projects yet. Create your first project."
- Provides clear next action

**Search for Hidden Features**
- Power users use search to find advanced features
- Ensure all features indexed by search
- Example: Search for "API" finds API settings

**"Learn More" Links**
- Link to docs/help for complex features
- Non-intrusive (users opt-in)
- Example: "Learn about webhooks" link in webhook settings

**Feature Announcements**
- Toast/modal when new feature ships
- "Dismiss" option (one-time)
- Example: "New: Dark mode in settings"

### Anti-Patterns

**Power Features Buried 5+ Levels Deep**
- Users never discover them
- Balance: Progressive disclosure vs discoverability
- Solution: Provide search, contextual hints

**No Onboarding (Users Never Discover Features)**
- Blank screen with no guidance
- Users churn because they don't understand value
- Solution: Quick tour highlighting core features

**Everything Exposed at Once (Overwhelming)**
- 50 buttons on screen
- Analysis paralysis, cognitive overload
- Solution: Progressive disclosure, hide advanced

**No Contextual Help**
- Complex features with no explanation
- Users trial-and-error or leave
- Solution: Tooltips, inline help, "?" icons

**Inconsistent Placement**
- "Settings" in different places on different screens
- Users can't predict where to look
- Solution: Consistent placement (top-right for settings is convention)

**Dead-End Experiences**
- Users reach feature but don't know what to do
- No placeholder text, no examples, no guidance
- Solution: Empty states with next steps

**Features Without Labels**
- Icon-only buttons (users guess)
- Hover-only discoverability (fails on mobile)
- Solution: Icons + labels or clear tooltips

### Practical Application

**Step 1:** Identify core vs advanced features
- Core: 80% of users need these
- Advanced: 20% of users, power features

**Step 2:** Design progressive disclosure
- Core features: Visible by default
- Advanced features: Behind "Advanced" or "More"
- Ensure advanced still discoverable (search, contextual hints)

**Step 3:** Add contextual help
- Complex fields get tooltips
- First-time experience gets onboarding
- Empty states explain next actions

**Step 4:** Test with new users
- Give users tasks (don't tell them how)
- Observe: Do they discover features?
- Iterate: Add hints where users get stuck


## User Journey Integration

Information architecture must support complete user journeys:

### Journey Mapping for IA

**Step 1: Map Primary User Journeys**
- List top 5-10 tasks users do
- Example: "Find product", "Check order status", "Contact support"

**Step 2: Identify Touchpoints**
- Where does user enter? (Google, home page, deep link)
- What pages do they visit? (in what order)
- Where do they exit? (goal complete or frustrated)

**Step 3: Evaluate IA Against Journeys**
- Can users complete journey with current IA?
- Where do they get stuck? (missing scent, dead ends)
- Are there unnecessary steps? (simplify)

**Step 4: Optimize IA for Common Journeys**
- Put common endpoints in global nav
- Add shortcuts for frequent paths
- Remove obstacles (reduce clicks, clarify labels)

### Example: E-Commerce Journey

**Journey:** Find and purchase product

**Touchpoints:**
1. Enter via Google search → Product page (deep link)
2. View product details
3. Add to cart
4. View cart
5. Checkout
6. Confirmation

**IA Optimizations:**
- Breadcrumbs on product page (Layer 2: Navigation)
- Related products (Layer 2: Contextual nav)
- Clear "Add to Cart" button (Layer 3: Information scent)
- Persistent cart icon (Layer 4: Discoverability)
- Guest checkout option (Layer 1: Mental model - not everyone wants account)


## Cross-Platform Navigation Considerations

Navigation patterns adapt to platform context:

### Mobile Navigation

**Constraints:**
- Small screen (375px width typical)
- Thumb-based interaction
- One screen at a time (no multi-window)

**Patterns:**
- Bottom tab bar (3-5 items, iOS standard)
- Hamburger menu (for 6+ items)
- Bottom sheet menus (Android)
- Swipe gestures (swipe back, swipe between tabs)

**Prioritization:**
- Most important actions at bottom (thumb zone)
- Secondary actions in hamburger menu
- Search prominent (magnifying glass icon)

**Reference:** See `mobile-design-patterns` for platform specifics

### Web Application Navigation

**Affordances:**
- Large screen (1024px+ width)
- Keyboard + mouse
- Multi-tab workflows

**Patterns:**
- Horizontal top nav (persistent)
- Sidebar nav (for deep hierarchies)
- Breadcrumbs (show location in hierarchy)
- Mega-menus (reveal 2+ levels on hover)
- Keyboard shortcuts (Cmd+K command palette)

**Considerations:**
- Responsive: Collapses to mobile patterns on narrow screens
- Dense information: Can show more hierarchy on desktop

**Reference:** See `web-application-design` for responsive patterns

### Desktop Software Navigation

**Affordances:**
- Multi-window support
- Extensive keyboard shortcuts
- Menu bars

**Patterns:**
- Menu bar (File, Edit, View, Help)
- Toolbars (icon buttons, customizable)
- Panels/palettes (floating or docked)
- Context menus (right-click)

**Considerations:**
- Keyboard-first: Every menu item has shortcut
- Customization: Users rearrange toolbars/panels

**Reference:** See `desktop-software-design` for window management

### Game UI Navigation

**Constraints:**
- Gamepad/controller input (limited buttons)
- Immersion (minimize UI)
- Performance (UI can't tank frame rate)

**Patterns:**
- Radial menus (analog stick selection)
- D-pad for menus (up/down/left/right)
- Pause menu (Start button)
- Context-sensitive prompts ("Press X to interact")

**Considerations:**
- Minimize navigation: Players want to play, not navigate menus
- Contextual: Show only relevant options for current situation

**Reference:** See `game-ui-design` for immersion vs visibility tradeoffs


## Navigation Pattern Library

Common navigation solutions with rationale:

### Pattern: Bottom Tab Bar (Mobile)

**Use When:**
- Mobile app with 3-5 primary sections
- Users frequently switch between sections
- Following iOS Human Interface Guidelines

**Structure:**
- 3-5 tabs at bottom
- Always visible
- Icon + label (or icon only if space constrained)
- Active tab highlighted

**Example:** Instagram (Home, Search, Create, Reels, Profile)


### Pattern: Hamburger Menu (Mobile)

**Use When:**
- 6+ navigation items (too many for tabs)
- Secondary functions (not primary navigation)
- Android or web mobile

**Structure:**
- ☰ icon (top-left or top-right)
- Slides out drawer with nav items
- Overlay or push content

**Warning:** Reduces discoverability ("out of sight, out of mind")


### Pattern: Breadcrumbs (Web/Desktop)

**Use When:**
- Deep hierarchies (3+ levels)
- Users need to understand location
- E-commerce, documentation, file systems

**Structure:**
- Home > Category > Subcategory > Current Page
- Each level clickable (except current)
- Shows path from root to current

**Example:** Amazon product pages


### Pattern: Mega-Menu (Web)

**Use When:**
- Complex site with many categories
- Need to show 2-3 levels of hierarchy at once
- Desktop web (requires hover)

**Structure:**
- Hover top nav item
- Reveals large dropdown with subcategories
- Grid or column layout

**Warning:** Doesn't work on mobile (no hover), requires desktop


### Pattern: Sidebar Navigation (Web/Desktop)

**Use When:**
- Deep hierarchies (documentation, admin panels)
- Always need to show navigation context
- Desktop-first or responsive web

**Structure:**
- Left sidebar (persistent or collapsible)
- Hierarchical tree (expand/collapse sections)
- Active page highlighted

**Example:** Documentation sites, admin dashboards


### Pattern: Command Palette (Web/Desktop)

**Use When:**
- Power users need fast access to all commands
- Many features (50+ actions)
- Keyboard-first workflows

**Structure:**
- Keyboard shortcut (Cmd+K common)
- Fuzzy search all actions
- Jump to any page/feature instantly

**Example:** VS Code, Slack, Figma


## Red Flags & Anti-Patterns

### Red Flag: Users Can't Find Primary Features

**Symptom:** Support requests "Where is [feature]?"

**Root Cause:** Poor information scent or buried navigation

**Fix:**
- Audit Layer 3 (Information Scent): Are labels clear?
- Add to global navigation (Layer 2)
- Provide search (Layer 2)


### Red Flag: Navigation Inconsistent Across Screens

**Symptom:** Menu changes or moves on different pages

**Root Cause:** Lack of navigation system standards

**Fix:**
- Define persistent global navigation
- Same placement, same labels everywhere
- Test on 10+ different screens


### Red Flag: One Way to Reach Content

**Symptom:** Users lost if they don't know exact path

**Root Cause:** Single navigation path (Layer 2 failure)

**Fix:**
- Add redundant paths (global nav + search + contextual links)
- Provide breadcrumbs for backtracking
- Test with users who enter via deep links


### Red Flag: Users Complete Task But Say "That Was Confusing"

**Symptom:** Low satisfaction despite task completion

**Root Cause:** Weak information scent (Layer 3) - users succeeded through trial-and-error

**Fix:**
- Improve label specificity
- Add descriptions to ambiguous categories
- Test with 5-second test (label → expected content)


### Red Flag: Power Users Can't Find Advanced Features

**Symptom:** "Does this have [feature]?" (feature exists but hidden)

**Root Cause:** Poor discoverability (Layer 4)

**Fix:**
- Add search (all features indexed)
- Contextual hints ("Looking for advanced options? Click here")
- Feature announcements when new features ship


### Red Flag: New Users Overwhelmed, Churn Quickly

**Symptom:** High bounce rate, low activation

**Root Cause:** No progressive disclosure, everything shown at once

**Fix:**
- Hide advanced features behind "Advanced" section
- Add onboarding (highlight core features)
- Empty states with guidance


### Red Flag: Users Click Wrong Category, Backtrack Repeatedly

**Symptom:** Analytics show high back-button usage, category exploration

**Root Cause:** Labels don't match user mental model (Layer 1) or weak scent (Layer 3)

**Fix:**
- Card sorting to understand user categories
- Relabel based on user terminology
- Tree testing to validate


## Related Skills

**Cross-references to other Lyra skills:**

- `lyra/ux-designer/user-research-and-validation` - Card sorting, tree testing, mental model research methods for IA validation
- `lyra/ux-designer/interaction-design-patterns` - Navigation interactions (menus, dropdowns, tabs) and micro-interactions for nav elements
- `lyra/ux-designer/visual-design-foundations` - Visual hierarchy to emphasize navigation, typography for readable labels
- `lyra/ux-designer/accessibility-and-inclusive-design` - Keyboard navigation, screen reader compatibility for nav systems
- `lyra/ux-designer/ux-fundamentals` - Core IA principles and terminology

**Platform-specific IA:**

- `lyra/ux-designer/mobile-design-patterns` - Mobile navigation patterns (bottom tabs, hamburger menus, gestures)
- `lyra/ux-designer/web-application-design` - Complex web nav systems (mega-menus, breadcrumbs, responsive patterns)
- `lyra/ux-designer/desktop-software-design` - Desktop navigation (menu bars, toolbars, keyboard shortcuts)
- `lyra/ux-designer/game-ui-design` - Game navigation (radial menus, contextual prompts, minimal UI)

**Cross-faction references:**

- `muna/technical-writer/documentation-structure` - IA for documentation sites (organizing docs for findability)
- `muna/technical-writer/clarity-and-style` - Writing clear labels and navigation copy