| name | info-architecture |
| description | Information architecture patterns including sitemaps, navigation design, content strategy, user flows, and screen inventories. Use when organizing content structure, designing navigation, creating sitemaps, or mapping user flows. |
Information Architecture Skill
Sitemap Patterns
Hierarchical Tree Format (ASCII)
Home
├── About
│ ├── Our Story
│ ├── Team
│ └── Careers
├── Products
│ ├── Product Category A
│ │ ├── Product 1
│ │ └── Product 2
│ └── Product Category B
│ ├── Product 3
│ └── Product 4
├── Services
│ ├── Consulting
│ ├── Implementation
│ └── Support
├── Resources
│ ├── Blog
│ ├── Documentation
│ ├── Case Studies
│ └── Downloads
└── Contact
├── Get in Touch
├── Locations
└── Support Portal
Flat vs Deep Structures
Flat Structure (Wide & Shallow):
- When to Use: Simple sites with <50 pages, diverse content types
- Benefits: Easy to navigate, fewer clicks, clear content overview
- Drawbacks: Can become overwhelming, harder to organize related content
- Example: Portfolio site with clear sections
Deep Structure (Narrow & Deep):
- When to Use: Large sites with related content, hierarchical organizations
- Benefits: Logical grouping, scalable, easier to find specific content
- Drawbacks: More clicks required, potential for getting lost
- Example: Enterprise software documentation
Common Site Structures by Type
Landing Page Structure:
Home
├── Product/Service Overview
├── Features/Benefits
├── Pricing
├── About/Company
├── Resources
│ ├── Blog
│ ├── Case Studies
│ └── Documentation
└── Contact/Get Started
SaaS Product Structure:
Home
├── Product
│ ├── Features
│ ├── Integrations
│ └── Security
├── Solutions
│ ├── By Industry
│ └── By Use Case
├── Pricing
├── Resources
│ ├── Blog
│ ├── Help Center
│ ├── API Docs
│ └── Templates
├── Company
│ ├── About
│ ├── Careers
│ └── Press
└── Contact/Demo
E-commerce Structure:
Home
├── Shop
│ ├── Category 1
│ │ ├── Subcategory A
│ │ └── Subcategory B
│ ├── Category 2
│ ├── Sale/Clearance
│ └── New Arrivals
├── About
├── Customer Service
│ ├── FAQ
│ ├── Returns
│ ├── Shipping
│ └── Contact
├── Account
│ ├── Login/Register
│ ├── Order History
│ └── Wishlist
└── Cart/Checkout
Portfolio Structure:
Home
├── Work/Portfolio
│ ├── Project Category 1
│ ├── Project Category 2
│ └── All Projects
├── About
│ ├── Bio
│ ├── Process
│ └── Resume
├── Services
├── Blog/Writing
└── Contact
Navigation Patterns
Primary Navigation
Top Bar Navigation:
- When to Use: Desktop-heavy sites, limited menu items (<7)
- Best Practices: Left-align logo, right-align CTAs, center main nav
- Responsive: Collapses to hamburger on mobile
Sidebar Navigation:
- When to Use: Dashboards, documentation, complex hierarchies
- Best Practices: Fixed position, collapsible, clear hierarchy
- Responsive: Overlay on mobile, toggle visibility
Secondary Navigation
Footer Navigation:
- Structure: 3-5 columns, organized by topic
- Content: Less important pages, legal links, social media
- Format: Simple text links, grouped by category
Contextual Navigation:
- Related Pages: "You might also like" sections
- Breadcrumbs: Show current location in hierarchy
- In-Page: Table of contents, jump links for long content
Utility Navigation
Authentication:
- Logged Out: Login/Register buttons
- Logged In: Profile dropdown with account options
- Placement: Top right corner, consistent across pages
Search:
- Global Search: Available from every page
- Scoped Search: Within specific sections (e.g., help center)
- Auto-complete: Suggested results as user types
Settings/Preferences:
- User Settings: Profile, notifications, privacy
- App Settings: Language, theme, accessibility
- Admin Settings: User management, system configuration
Mobile Navigation Patterns
Hamburger Menu:
- When to Use: Many navigation items, space-constrained
- Implementation: Slide-in overlay, full-screen menu
- Considerations: Label with "Menu" text for clarity
Tab Bar (Bottom Navigation):
- When to Use: App-like experiences, primary actions
- Items: 3-5 primary sections with icons
- Active State: Clear indication of current section
Bottom Navigation:
- Fixed Position: Always visible, easy thumb access
- Primary Actions: Most important user flows
- Icon + Label: Clear identification of each section
Advanced Navigation
Mega Menus:
- When to Use: Large sites with many categories
- Structure: Multi-column dropdowns with rich content
- Content: Links, images, featured content, CTAs
Breadcrumbs:
- Format: Home > Category > Subcategory > Current Page
- Separator: Use > or / consistently
- Interactive: All levels except current should be clickable
Content Strategy Principles
Content Types
Hero Content:
- Purpose: Immediate value proposition communication
- Length: 1-2 sentences maximum
- Tone: Clear, compelling, action-oriented
Feature Descriptions:
- Structure: Benefit-focused headlines, supporting details
- Length: 2-3 sentences per feature
- Format: Scannable bullets or short paragraphs
Social Proof:
- Types: Customer testimonials, case studies, reviews, logos
- Placement: After value proposition, before conversion points
- Authenticity: Real names, photos, specific results
Content Hierarchy (H1→H6 Semantic Meaning)
H1: Page title (one per page)
- Primary keyword focus
- Describes page purpose clearly
- 20-70 characters optimal
H2: Major section headers
- Break up main content areas
- Support the H1 topic
- Used for outline/TOC generation
H3: Subsection headers
- Detail within H2 sections
- Specific feature or benefit focus
- Most common heading level
H4-H6: Granular organization
- Use sparingly
- Technical documentation detail
- FAQ question headers
CTA Strategy
Primary CTAs:
- Purpose: Main conversion goal
- Placement: Above fold, after value props, end of content
- Styling: High contrast, largest button size
- Text: Action-oriented ("Start Free Trial", "Get Demo")
Secondary CTAs:
- Purpose: Alternative conversion paths
- Examples: "Learn More", "Watch Demo", "Download Guide"
- Styling: Outline buttons, smaller than primary
- Placement: Near primary but visually distinct
Tertiary CTAs:
- Purpose: Supporting actions
- Examples: Social sharing, related content, newsletter signup
- Styling: Text links, minimal visual weight
- Placement: Sidebar, footer, end of articles
Microcopy Approach
Concise Principle:
- Remove unnecessary words
- Use active voice
- Front-load important information
- Example: "Save your changes" not "Click here to save your changes"
Action-Oriented Language:
- Start with verbs
- Specific rather than generic
- Example: "Download free guide" not "Click here"
User-Focused Perspective:
- Use "you" and "your"
- Address user benefits
- Example: "Get your results" not "Generate results"
Content Density Guidelines
Scanning Patterns:
- F-Pattern: Left-aligned headers and bullets
- Z-Pattern: For sparse content and landing pages
- Gutenberg Diagram: Natural reading flow
White Space Usage:
- Line Height: 1.4-1.6x font size for body text
- Paragraphs: 40-75 characters per line optimal
- Sections: Clear visual breaks between content blocks
User Flow Diagramming
ASCII Flowchart Format
[Start] → [Decision?] → [Action 1] → [End]
↓
[Action 2] → [Subprocess] → [End]
Standard Symbols:
[ ] = Process/Page (rectangle)< > = Decision (diamond)( ) = Start/End (rounded rectangle)→ = Flow direction↓↑← = Alternative directions
Example User Flow: Sign-up Process
(User visits homepage)
↓
[View pricing page]
↓
<Ready to sign up?>
↓ ↓
No Yes
↓ ↓
[Browse [Click "Start Trial"]
features] ↓
↓ [Enter email]
↓ ↓
↓ <Valid email?>
↓ ↓ ↓
↓ No Yes
↓ ↓ ↓
↓ [Show [Send verification]
↓ error] ↓
↓ ↑ [Check email page]
↓ | ↓
└──────┴─→ [Click verify link]
↓
[Complete profile]
↓
[Dashboard onboarding]
↓
(User activated)
Deriving Flows from Personas + Goals
- Start with Persona Goals: What does the user want to accomplish?
- Identify Entry Points: How do they arrive at your product?
- Map Decision Points: Where do they evaluate or choose?
- Include Error Paths: What happens when things go wrong?
- Define Success States: What does completion look like?
Card Sorting Concepts
Open Card Sorting
- Process: Users group content cards into categories they create
- When to Use: Understanding mental models, creating new navigation
- Analysis: Look for common groupings across participants
- Output: Natural category names and content organization
Closed Card Sorting
- Process: Users sort cards into predefined categories
- When to Use: Validating existing navigation, optimizing current structure
- Analysis: Success rates per category, items that don't fit
- Output: Refinements to existing structure
Deriving Navigation from Content Grouping
- Analyze Grouping Patterns: Which items consistently group together?
- Identify Category Names: What do users call these groups?
- Check Hierarchy Logic: Do subcategories make sense within main categories?
- Validate with Task Testing: Can users find specific items?
- Iterate Based on Results: Refine groupings and labels
Screen Inventory Format
| Screen Name | Purpose | Key Content Blocks | Primary Action | Secondary Actions |
|---|
| Homepage | Convert visitors to trial users | Hero, Features, Social Proof, CTA | Start Free Trial | Learn More, View Pricing |
| Pricing | Present pricing options | Pricing Table, Feature Comparison | Choose Plan | Contact Sales, View Demo |
| Sign-up | Capture user information | Registration Form, Value Props | Create Account | Sign in, Back to Pricing |
| Dashboard | Show user overview and navigation | Metrics Cards, Quick Actions, Navigation | View Reports | Create New, Settings |
| User Profile | Manage account settings | Profile Form, Security Settings, Billing | Save Changes | Change Password, Cancel Account |
| Reports | Display user analytics | Data Tables, Charts, Filters | Export Data | Share Report, Schedule |
| Help Center | Provide user support | Search, Categories, Popular Articles | Search Help | Contact Support, Video Tutorials |
| Contact | Enable user communication | Contact Form, Office Info, Hours | Send Message | Call Us, Live Chat |
IA Document Output Template
Project Overview
- Project Name: [Product/Site Name]
- Audience: [Primary user segments]
- Business Goals: [Key objectives]
- Content Scope: [Types and volume of content]
Site Architecture
Sitemap
[ASCII sitemap structure]
Navigation Design
Primary Navigation:
- [List main navigation items]
- Rationale: [Why this structure serves user goals]
Secondary Navigation:
- [Footer, contextual, utility navigation]
- Placement: [Where each type appears]
Mobile Navigation:
- Pattern: [Hamburger, tabs, etc.]
- Responsive Behavior: [How desktop nav transforms]
URL Structure
domain.com/
├── about/
├── products/
│ ├── category-a/
│ │ └── product-name/
│ └── category-b/
├── services/
└── contact/
User Flows
Primary User Flow: [Most Important Task]
[ASCII flowchart of primary user journey]
Secondary User Flow: [Second Most Important Task]
[ASCII flowchart of secondary user journey]
Content Strategy
Content Types
- Hero Content: [Purpose and requirements]
- Product Content: [Structure and tone]
- Support Content: [Organization and access]
Content Hierarchy
- H1: [Page title approach]
- H2: [Section organization]
- H3: [Subsection structure]
CTA Strategy
- Primary CTA: [Main conversion goal and placement]
- Secondary CTAs: [Alternative actions]
- Tertiary CTAs: [Supporting actions]
Screen Inventory
[Complete screen inventory table with all screens]
Technical Requirements
SEO Considerations
- URL structure optimized for search
- Proper heading hierarchy
- Breadcrumb implementation
Accessibility Requirements
- Skip navigation links
- Proper heading structure
- Keyboard navigation support
- Screen reader compatibility
Performance Considerations
- Lazy loading for images
- Minimal navigation complexity
- Mobile-first responsive design
Implementation Notes
- Phase 1: [Core pages and navigation]
- Phase 2: [Additional features and content]
- Phase 3: [Advanced functionality]
Success Metrics
- Navigation Success: Task completion rate
- Content Findability: Time to find information
- User Satisfaction: Post-navigation surveys
- Search Success: Internal search effectiveness
