awesome-llm-apps/awesome_agent_skills/ux-designer/rules/information-architecture.md

Rule: Information Architecture

Priority: HIGH Category: Information Architecture

Description

Information architecture determines how content is structured, labeled, and navigated. If users can't find it, it doesn't exist.

Navigation Structure

Core Principles

• Limit primary navigation to 5-7 items
• Use clear, descriptive labels (nouns for sections, verbs for actions)
• Group by user mental models, not org charts
• Validate labels with card sorting and tree testing
• Provide breadcrumbs for hierarchies deeper than 2 levels

Navigation Patterns

• Top bar: Best for 3-7 primary sections on desktop
• Side nav: Best for deep hierarchies or tools with many sections
• Bottom bar: Best for mobile apps with 3-5 primary actions
• Hamburger menu: Use sparingly; hides navigation and reduces discoverability
• Tabs: Best for switching between related views at the same level

Mobile Considerations

• Use bottom navigation for 3-5 primary actions (most reachable)
• Reserve hamburger menus for secondary navigation only
• Highlight the current section in the navigation bar
• Ensure navigation doesn't consume more than 20% of the viewport

Content Organization

Organizational Principles

• User-centric grouping: Organize by user goals, not business departments
• Progressive disclosure: Show only what's needed; reveal details on demand
• Consistency: Same type of content in the same location across pages
• Scannability: Clear headings, short paragraphs, visual breaks

Content Hierarchy

1. Page title: What is this page about? (one per page)
2. Section headings: Major content groups
3. Supporting content: Details within each section
4. Related content: Cross-links and supplementary information

Information Scent

• Labels should clearly indicate what users will find
• Preview content where possible (descriptions, thumbnails, counts)
• Use "trigger words" that match user vocabulary
• Provide visual cues for content types (icons for video, PDF, external links)

Search as Navigation

• Include search for products with more than 50 content items
• Provide autocomplete suggestions based on popular queries
• Show recent searches for returning users

Common Mistakes

• Organizing navigation by internal team structure instead of user needs
• Using jargon or branded terminology users don't understand
• Hiding essential navigation behind a hamburger menu on desktop
• Deep nesting requiring more than 3 clicks to reach important content
• Mirroring the database structure in the UI