Principles of UX / UI (Product Design): Information Architecture (Sitemaps, Card Sorting, Tree Testing)

Information Architecture (Sitemaps, Card Sorting, Tree Testing)

Information Architecture (IA) Study Guide: Sitemaps, Card Sorting, Tree Testing

For aspiring product designers, graphic designers transitioning to UX, and bootcamp students

What This Is

Information Architecture (IA) is the art and science of organizing content so users can find what they need without thinking. Think of it like a library’s Dewey Decimal System—if books were randomly shelved, no one could find them. In digital products, poor IA leads to frustration (e.g., a hospital patient portal where users can’t locate lab results) or lost revenue (e.g., an e-commerce site where shoppers abandon carts because checkout steps are buried). Good IA reduces cognitive load, speeds up task completion, and makes products feel intuitive. Example: Redesigning a university website’s IA to group "Admissions," "Financial Aid," and "Student Life" under clear parent categories (instead of scattering them across 10+ menu items) can cut support calls by 30%.

Key Terms & Principles

• Information Architecture (IA):
  The structural design of shared information environments. It’s about labeling, organizing, and connecting content so users can navigate effortlessly.
  Example: Spotify’s "Browse" section groups music by mood, genre, and activity (e.g., "Workout," "Focus") instead of alphabetical order.

• Sitemap:
  A hierarchical diagram showing pages/sections of a product and their relationships. Like a blueprint for a house—it shows rooms (pages) and doors (links) but not the furniture (content).
  Example: A Figma sitemap for a recipe app might show: Home ├── Recipes │ ├── Breakfast │ ├── Dinner │ └── Desserts ├── Meal Planner └── Grocery List

• Card Sorting:
  A UX research method where participants group labeled cards (representing content or features) to reveal how they expect information to be organized.
  Example: Asking users to sort cards like "Return Policy," "Shipping Info," and "Gift Cards" to determine if they belong under "Customer Service" or "Shopping Help."

• Open vs. Closed Card Sorting:

• Open: Users create their own categories (e.g., "I’d put ‘Track Order’ under ‘My Account’").

• Closed: Users sort cards into predefined categories (e.g., "Does ‘FAQ’ belong under ‘Support’ or ‘About Us’?").
  Example: Open sorting for a fitness app might reveal users group "Workout Plans" and "Nutrition Guides" under a new category called "Get Fit," not "Programs."

• Tree Testing:
  A usability test where users navigate a text-only version of a sitemap to complete tasks (e.g., "Find the return policy"). Measures findability before designing screens.
  Example: Testing if users can locate "Live Chat Support" in a banking app’s IA by asking them to click through a text hierarchy: Home ├── Accounts ├── Payments └── Help Center
├── FAQ
└── Contact Us (If most users click "Help Center > Contact Us," the IA works. If they give up, it’s broken.)

• Hick’s Law:
  The time it takes to make a decision increases with the number of choices. Simplify navigation by limiting options.
  Example: Amazon’s "Buy Now" button (one primary action) outperforms a page with 5 competing CTAs.

• Miller’s Law (7±2 Rule):
  People can hold ~7 items in working memory. Limit menu items to 5–9 to avoid overwhelm.
  Example: Apple’s top navigation bar has 7 items (Store, Mac, iPad, iPhone, Watch, AirPods, Support).

• Jakob’s Law:
  Users expect your product to work like others they’ve used. Follow conventions (e.g., "Contact" in the footer, "Cart" in the top-right).
  Example: Most e-commerce sites place "Checkout" in the top-right—deviating from this (e.g., hiding it in a hamburger menu) increases drop-off.

• Progressive Disclosure:
  Show only essential information upfront; reveal details as needed. Reduces cognitive load.
  Example: A flight booking site shows departure/return dates first, then expands to add baggage options after the user selects flights.

• Wayfinding:
  Design elements that help users understand where they are and how to get where they want to go (e.g., breadcrumbs, active states, clear CTAs).
  Example: Airbnb’s breadcrumbs: Home > United States > California > San Francisco show the user’s path and let them backtrack.

• Taxonomy:
  The classification system for content (e.g., categories, tags). A good taxonomy is consistent and user-friendly.
  Example: Netflix’s taxonomy uses genres ("Action," "Comedies") and micro-genres ("Critically Acclaimed Sci-Fi Thrillers") to help users discover content.

• Faceted Navigation:
  A filtering system that lets users narrow down content by multiple attributes (e.g., size, color, price).
  Example: Zappos lets users filter shoes by size, width, color, brand, and price range simultaneously.

Step-by-Step / Process Flow

1. Audit Existing Content (If Redesigning)

• Action: List all pages/features in a spreadsheet or Figma table. Note:
• Page names (e.g., "Billing Info")
• URL paths (e.g., /account/billing)
• Content type (e.g., form, static page, interactive tool)
• Stakeholder owner (e.g., "Marketing owns the FAQ")
• Tool: Use Screaming Frog to crawl the site and export a list of pages.
• Pro Tip: Highlight "orphan pages" (pages with no links to them) or "dead ends" (pages with no exit links).

2. Conduct Card Sorting (Open or Closed)

• Action:
• Write content/features on digital cards (use OptimalSort or sticky notes in Figma).
• Recruit 15–20 users (or use a tool like UserTesting).
• For open sorting, ask: "Group these cards in a way that makes sense to you, then name each group."
• For closed sorting, provide categories (e.g., "Account Settings," "Support") and ask: "Where would you expect to find each card?"
• Analysis: Look for patterns. If 80% of users group "Track Order" with "My Account," that’s a strong signal.
• Output: A draft sitemap with user-validated categories.

3. Build a Sitemap in Figma

• Action:
• Start with a hierarchical tree (use Figma’s auto-layout or Whimsical).
• Label levels clearly (e.g., "Primary Navigation," "Secondary Navigation").
• Use color-coding for different user flows (e.g., blue for logged-in users, green for guests).
• Add annotations for edge cases (e.g., "Mobile: ‘Help’ moves to hamburger menu").
• Example Figma Sitemap:
  [Home] ├── [Products] │ ├── [Category A] │ └── [Category B] ├── [About Us] │ ├── [Team] │ └── [Careers] └── [Support]
├── [FAQ]
└── [Contact]
• Pro Tip: Export the sitemap as a PDF to share with stakeholders—it’s easier to review than a Figma file.

4. Validate with Tree Testing

• Action:
• Create a text-only version of your sitemap in Treejack or Figma (use a simple list format).
• Write 5–10 tasks (e.g., "Where would you find the return policy?").
• Recruit 20+ users to complete the tasks.
• Analyze:
  • Success rate: % of users who found the right path.
  • Directness: Did they take the shortest path or backtrack?
  • Time: How long did it take?
• Output: A heatmap showing where users got lost. Iterate the sitemap based on findings.

5. Design Navigation (Wireframes)

• Action:
• Sketch 3 navigation variations (e.g., top nav, hamburger menu, sidebar).
• Apply Hick’s Law (limit options) and Miller’s Law (7±2 items).
• Use progressive disclosure (e.g., hide "Advanced Settings" behind a dropdown).
• Test with guerrilla usability tests (ask 5 people: "Where would you click to find X?").
• Example: For a recipe app, test if users expect "Meal Planner" in the top nav or under "Tools."

6. Iterate with Stakeholders

• Action:
• Present the sitemap and tree test results to stakeholders. Focus on:
  • User pain points (e.g., "60% of users couldn’t find the refund policy").
  • Business goals (e.g., "We need to highlight ‘Premium Membership’").
• Compromise on one "must-have" (e.g., adding a "Quick Links" section in the footer).
• Update the sitemap and repeat tree testing if major changes are made.

Common Mistakes

Mistake 1: Organizing IA by Internal Teams (Not User Needs)

• Example: A healthcare app groups features by department ("Cardiology," "Pediatrics") instead of user tasks ("Book Appointment," "View Lab Results").
• Correction: Use card sorting to uncover how users naturally group content. Align IA with user mental models, not org charts.

Mistake 2: Skipping Tree Testing (Assuming the Sitemap Works)

• Example: A designer assumes "Settings" belongs under "Account" but never tests it. Users can’t find it.
• Correction: Always tree test before designing screens. It’s faster and cheaper than fixing a flawed IA later.

Mistake 3: Overloading the Navigation (Ignoring Hick’s Law)

• Example: A dashboard has 12 top-level menu items, overwhelming users.
• Correction: Limit primary navigation to 5–7 items. Use progressive disclosure (e.g., hide "Advanced" options in a dropdown).

Mistake 4: Using Jargon in Labels

• Example: A SaaS app labels a feature "API Integration" instead of "Connect Tools."
• Correction: Use plain language in labels. Test with users: "What would you call this?" Avoid internal terms.

Mistake 5: Not Planning for Mobile IA Early

• Example: A desktop sitemap with 10 top-level items forces a cluttered hamburger menu on mobile.
• Correction: Design mobile-first IA. Prioritize the 3–5 most critical items for mobile users.

Design Interview / Portfolio Tips

1. Show Your Process, Not Just the Final Sitemap

• Interviewers want to see:
• Card sorting results (e.g., a screenshot of OptimalSort’s dendrogram).
• Tree test data (e.g., a heatmap showing where users got lost).
• Iterations (e.g., "Version 1 failed tree testing, so we moved ‘Billing’ under ‘Account’").
• Portfolio tip: Include a case study with:

  "We conducted open card sorting with 15 users and found 80% grouped ‘Track Order’ with ‘My Account.’ We then tree-tested 3 sitemap versions and improved findability by 40%."

  
  

2. Explain Trade-offs (e.g., Business Goals vs. User Needs)

• Example question: "Stakeholders want to add 5 new features to the top nav. How do you push back?"
• Answer: Use Hick’s Law and tree test data to argue for prioritization. Say:

  "Adding 5 items would violate Hick’s Law, increasing decision time. Our tree test showed users already struggle to find ‘X.’ Let’s A/B test a ‘Quick Links’ section in the footer instead."

  
  

3. Distinguish Between IA and UI

• Tricky distinction: IA is the skeleton (structure), UI is the skin (visuals).
• IA: Sitemaps, navigation labels, content hierarchy.
• UI: Buttons, colors, typography.
• Portfolio tip: Label your work clearly. For example:

  "This sitemap (IA) informed the navigation design (UI) in the final wireframes."

  
  

4. Know When to Use Card Sorting vs. Tree Testing

• Card sorting: Discover how users group content (generative research).
• Tree testing: Validate if your IA works (evaluative research).
• Example: Use card sorting to create a sitemap, then tree testing to test it.

Quick Check Questions

1. A client insists on adding a "News & Events" section to the top nav of their e-commerce site. How do you respond?

• Answer: Use Hick’s Law and Jakob’s Law:

  "E-commerce users expect to see ‘Shop,’ ‘Account,’ and ‘Cart’ in the top nav. Adding ‘News’ may increase cognitive load and distract from the primary goal (purchases). Let’s A/B test placing it in the footer or a secondary menu."

  
  

2. During tree testing, users keep clicking "Settings" when trying to find "Account Preferences." What’s the issue, and how do you fix it?

• Answer: The labeling is ambiguous. Users expect "Account Preferences" to be under "Settings" (or vice versa). Solutions:
• Rename "Settings" to "Account Settings."
• Move "Account Preferences" under "Settings."
• Use closed card sorting to test new label options.

3. A stakeholder says, "Our competitors have 10 menu items—we should too." How do you advocate for simplicity?

• Answer: Cite Miller’s Law and business data:

  "Research shows users can only process 5–9 items at once. Our analytics show 70% of users only interact with 3 menu items. Let’s prioritize those and move the rest to a ‘More’ dropdown or footer."

  
  

Last-Minute Cram Sheet

1. IA = Skeleton, UI = Skin. IA organizes content; UI makes it pretty.
2. Card sorting = Discover how users group content. Tree testing = Validate if your IA works.
3. Hick’s Law: More choices = slower decisions. Limit menu items to 5–7.
4. Miller’s Law: People remember 7±2 items. Keep navigation simple.
5. Jakob’s Law: Follow conventions (e.g., "Contact" in footer, "Cart" top-right).
6. Progressive disclosure: Show only what’s needed now; hide the rest.
7. Faceted navigation: Let users filter by multiple attributes (e.g., size + color + price).
8. ⚠️ Card sorting ≠ tree testing. Card sorting creates IA; tree testing tests it.
9. ⚠️ Mobile IA ≠ desktop IA. Prioritize critical items for mobile (e.g., hide "Settings" in a hamburger menu).
10. Always test labels. "Billing" vs. "Payments" can confuse users—ask them which they prefer!