--- name: information-architecture description: Organize and structure information for clarity and discoverability. Design navigation systems, hierarchies, and mental models that match user needs. --- # Information Architecture ## Overview Information Architecture creates logical structures that help users find and understand information easily. ## When to Use - Website or app redesign - Large information spaces (documentation, e-commerce) - Navigation structure planning - Taxonomy and categorization - Search functionality design - User journey mapping ## Instructions ### 1. **IA Principles & Process** ```yaml IA Process: 1. Research & Discovery - Interview users about mental models - Card sorting sessions (open and closed) - Analyze current usage patterns - Competitive analysis 2. Structure Development - Create organization scheme (hierarchical, faceted, etc.) - Define categories and relationships - Build taxonomy - Plan navigation 3. Wireframing - Sitemap creation - Navigation structure - Page templates - User flows 4. Validation - User testing with prototypes - Tree testing (navigation only) - Iterate based on feedback --- ## Organization Schemes: Hierarchical (Top-Down): - Home → Categories → Subcategories → Products - Clear parent-child relationships - Good for browsing Faceted/Filtering: - Products filtered by multiple attributes - User can narrow down - Flexible combinations Contextual: - Related items grouped together - Cross-links between sections - Supports exploration Task-Based: - Organize by user goals/tasks - "How do I...?" approach - Matches mental models --- ## Navigation Types: Primary Navigation: - Main categories - Top of page or left sidebar - Access from any page Secondary Navigation: - Sub-categories - Related topics - Context-specific Breadcrumb Navigation: - Shows user location in hierarchy - Enables backward navigation Footer Navigation: - Links to important pages - Legal/company info - Helps with SEO ``` ### 2. **Card Sorting & Taxonomy** ```python # Organize content into logical groups class InformationArchitecture: def conduct_card_sort(self, items): """Uncover user mental models""" return { 'method': 'Open card sort (users create own categories)', 'participants': 15, 'items_sorted': len(items), 'analysis': self.analyze_card_sort_results(items), 'dendrograms': 'Show similarity between user groupings', 'categories': self.identify_categories(items) } def identify_categories(self, items): """Find natural groupings""" categories = {} frequency = {} # Track how often items are grouped together # Find dominant groupings return { 'primary_categories': self.get_primary_categories(frequency), 'ambiguous_items': self.identify_ambiguous_items(frequency), 'user_created_labels': self.extract_labels() } def create_taxonomy(self, categories): """Build hierarchical structure""" return { 'level1': ['Products', 'Services', 'Support', 'Company'], 'level2_products': ['Electronics', 'Clothing', 'Books'], 'level3_electronics': ['Phones', 'Laptops', 'Accessories'], 'relationships': 'Define parent-child and related items', 'synonyms': 'Identify similar terms' } def validate_ia(self, structure): """Test with users""" return { 'testing_method': 'Tree testing', 'tasks': [ 'Find product return policy', 'Locate shipping information', 'Access account settings' ], 'success_metrics': { 'task_completion': '90% target', 'time_to_complete': '<3 minutes', 'satisfaction': '>4/5' } } ``` ### 3. **Sitemap & Navigation Structure** ```yaml Sitemap Example: E-commerce Site Home ├── Products │ ├── Electronics │ │ ├── Phones │ │ ├── Laptops │ │ └── Accessories │ ├── Clothing │ │ ├── Men's │ │ ├── Women's │ │ └── Kids │ └── Books ├── Services │ ├── Shipping & Returns │ ├── Extended Warranty │ └── Installation ├── Support │ ├── FAQ │ ├── Contact Us │ ├── Live Chat │ └── Tickets ├── Account │ ├── Orders │ ├── Wishlist │ ├── Returns │ └── Settings └── Company ├── About Us ├── Careers ├── Blog └── Affiliates --- Navigation Labels: - Clear and predictable - Avoid jargon - Match user language - Consistent across site ``` ### 4. **Search & Discovery** ```javascript // Enable multiple ways to find content class DiscoverabilityStrategy { designSearchFunctionality() { return { search_box: { location: 'Header, prominent placement', placeholder: 'Clear example text', autocomplete: true, filters: ['Category', 'Price', 'Rating'] }, search_results: { ranking: 'Relevance + popularity + freshness', facets: 'Allow filtering results', snippets: 'Show preview and highlights' }, zero_results: { suggestions: 'Show did you mean, popular searches', related: 'Show related categories' } }; } designBrowsing() { return { category_pages: { structure: 'Subcategories + featured items', sorting: 'By popularity, newest, price', pagination: 'Load more or paginate' }, related_items: { placement: 'Product page, cart page', logic: 'Similar category, trending, recommended' } }; } } ``` ## Best Practices ### ✅ DO - Start with user research - Conduct card sorting studies - Use user mental models - Keep hierarchy 3 levels deep max - Use clear, simple labels - Enable multiple ways to find content - Test navigation with users - Update based on usage data - Document taxonomy - Provide search functionality ### ❌ DON'T - Impose organizational structure without research - Use jargon or technical terms - Make hierarchy too deep - Bury important content - Rely only on navigation (provide search) - Change navigation frequently - Create ambiguous labels - Forget about edge cases - Ignore accessibility - Assume desktop-only navigation ## IA Tips - Use clear, specific category names - Avoid nested menus when possible - Provide multiple paths to content - Show context within hierarchy (breadcrumbs) - Monitor analytics to improve structure