UI/UX Design Information Architecture
Information Architecture (IA) is the practice of organizing, structuring, and labeling content in a way that helps users find what they need efficiently. It answers the question: where does everything live in the product, and how do users get there? Without a sound IA, even beautifully designed screens become frustrating mazes. With a sound IA, users move through a product confidently, often without ever consciously thinking about navigation.
The Library Analogy
A library is a perfect model for information architecture. Thousands of books exist in the building. Without organization, finding any specific book would require searching every shelf. The library's IA solves this: books are organized by subject, then by author last name, then by title. The catalog tells you exactly where to look. Signs at the end of aisles confirm you are in the right section.
LIBRARY IA DIAGRAM
LIBRARY BUILDING
├── Fiction Section
│ ├── Science Fiction
│ │ ├── A-G (Author last name)
│ │ └── H-Z
│ └── Mystery
├── Non-Fiction Section
│ ├── Science
│ ├── History
│ └── Self-Help
└── Reference Section
├── Dictionaries
└── Encyclopedias
A website or app needs the same structure:
Everything in a logical place, consistently labeled,
with clear signs pointing the way.
The Four Pillars of Information Architecture
Defined by Peter Morville and Lou Rosenfeld in "Information Architecture for the World Wide Web," IA rests on four core components:
Organization Systems
How content is grouped and categorized. Content can be organized by topic, task, audience, chronology, or alphabetically. The best organization system matches how users think about the content, not how the company thinks about it internally.
Labeling Systems
The words used to describe categories, navigation items, and sections. Labels must match the words users actually use. When a navigation label uses insider terminology that users do not recognize, they cannot find what they need even if it is in the right place.
Navigation Systems
The mechanisms that help users move through the content — menus, breadcrumbs, search, filters, pagination, and contextual links. A product's navigation system must cover multiple use patterns: browsing (exploring without a specific goal), searching (looking for something specific), and filtering (narrowing a large set of results).
Search Systems
When navigation alone is insufficient — for large-content products — search allows users to skip hierarchy and go directly to what they need. A good search system handles typos, synonyms, and partial matches. A bad search returns "no results" for content that exists but uses different terminology.
Card Sorting: How to Discover Your IA
Card sorting is a research method that reveals how users mentally categorize content. It produces an IA based on user mental models rather than team assumptions.
How Card Sorting Works
CARD SORT PROCESS DIAGRAM
Step 1: Create cards
Write one piece of content or feature on each card
Example cards for an e-learning app:
"Video lessons" "Progress tracker" "Quizzes"
"Certificates" "Discussion forum" "Downloads"
"Profile" "Billing" "Help center"
Step 2: Ask users to group cards
Give 5-10 participants the cards.
Ask them to sort cards into groups that feel related.
Ask them to name each group.
Step 3: Analyze patterns
Which cards consistently appear in the same group?
What names do users give each group?
Where do users place items you assumed belonged elsewhere?
Step 4: Build IA from patterns
The names users give groups → become navigation labels
The cards in each group → become section content
OPEN CARD SORT: Users create their own groups (for new products)
CLOSED CARD SORT: Users sort into predefined groups (to test existing IA)
Tree Testing: Validating Your IA Before Building
Tree testing is the counterpart to card sorting. While card sorting discovers how users group content, tree testing validates whether users can find specific content using a proposed IA structure.
In a tree test, participants see a text-based version of the navigation hierarchy (no visual design) and are given specific tasks like "Find the page where you would update your billing information." Researchers watch where users navigate and measure how often they reach the correct destination on the first try.
TREE TEST EXAMPLE
Navigation Tree:
Account
├── Profile
├── Privacy settings
└── Billing & payments
Learning
├── My courses
├── Downloads
└── Progress
Task: "Where would you go to update your credit card?"
USER 1: Account → Billing & payments ✓ (Direct success)
USER 2: Account → Profile ✗ → Billing & payments ✓ (Indirect success)
USER 3: Learning → My courses ✗ → Given up ✗ (Task failure)
INSIGHT: 1 in 3 users failed to find billing.
ACTION: Consider renaming or adding a shortcut.
Hierarchical Structures in IA
Most digital products use a hierarchical IA structure — a tree where one top-level category contains subcategories, which may contain further subcategories. Understanding how deep and wide this hierarchy should be is one of the key IA decisions.
Depth vs Breadth Trade-off
HIERARCHY DEPTH vs BREADTH DIAGRAM
DEEP AND NARROW (too many levels):
Home > Products > Electronics > Computers > Laptops > Windows > Budget
Problem: Users must make 6 choices before seeing any content.
Each level adds cognitive load and risk of wrong turns.
SHALLOW AND WIDE (too many categories):
Home > [25 top-level categories]
Problem: Users are overwhelmed choosing from 25 options.
Hick's Law kicks in -- more options, slower decisions.
BALANCED (sweet spot):
Home > Products > [Filtered by type]
Products (6-8 top categories) > [15-20 subcategories per section]
GUIDELINE:
3-4 levels of hierarchy maximum before users feel lost.
7 (±2) items per navigation level before the list feels too long.
Sitemaps: Documenting Your IA
A sitemap is a visual diagram of all screens in a product and how they relate to each other. It shows the product's complete IA structure at a glance — which screens exist, which is the parent, which are the children, and what connections exist between sections.
SITEMAP DIAGRAM (E-learning App)
[ HOME ]
|
┌──────────────────┼──────────────────┐
[ COURSES ] [ PROFILE ] [ COMMUNITY ]
| | |
┌─────┴─────┐ ┌────┴────┐ ┌───┴───┐
[All] [My ] [Certs] [Edit ] [Settings] [Feed] [Discuss]
Courses] Profile]
|
┌────┴────┐
[Course] [Lessons] [Quiz] [Resources]
Detail]
NOTATION CONVENTIONS:
Rectangle = Screen
Line = Navigation connection
Arrow = One-directional link (from A to B only)
Dashed line = Contextual link (appears in certain states only)
Navigation Patterns in Digital Products
Navigation is the implementation layer of your IA — how users actually move through the structure you have designed. Common navigation patterns each have specific strengths and appropriate contexts.
Global Navigation (Top Bar)
A persistent navigation bar at the top of every screen. Works well for desktop products where screen width allows multiple navigation items. Keeps all major sections accessible at all times.
Bottom Navigation Bar (Mobile)
A persistent row of 3-5 icons at the bottom of mobile screens. Extremely effective for mobile because it sits in the natural thumb zone. Ideal for 3-5 primary sections that users switch between frequently. Used by Instagram, Twitter, Airbnb, and most major mobile apps.
Hamburger Menu
Three horizontal lines that reveal a full navigation menu. Hides navigation to preserve screen space. Significantly reduces discoverability — content inside a hamburger menu gets fewer visits than content in a visible tab bar. Use only for secondary navigation items that do not need to be permanently visible.
Breadcrumbs
A horizontal path showing where the current page sits in the hierarchy. Example: Home > Products > Electronics > Laptops. Helps users understand their location and navigate up the hierarchy. Essential for deep hierarchies in e-commerce and content sites.
NAVIGATION PATTERN COMPARISON DIAGRAM PATTERN VISIBILITY DEPTH BEST FOR Top bar Always 1-2 levels Desktop apps, 5-8 sections Bottom tab bar Always 1 level Mobile apps, 3-5 sections Hamburger Hidden Any depth Secondary navigation, large IA Breadcrumbs Always Contextual Deep hierarchies, e-commerce Sidebar Always 2-3 levels Admin panels, documentation
Labeling: Words That Match User Mental Models
The words used in navigation and section headers must match what users call things — not what the company calls them internally.
Common labeling mistakes:
- Using industry jargon users do not know ("Your KB" instead of "Knowledge Base" or better yet "Help Articles")
- Using product-internal names ("Feature Studio" instead of "Build Something")
- Being too creative when clarity is needed ("Explore the Universe" instead of "Browse All Courses")
- Using inconsistent terms ("Remove," "Delete," and "Trash" all meaning the same action in different parts of the app)
The fix: Use the exact words that appeared in user interviews and card sorting sessions. If users called it "lessons" five times during research, do not call it "curriculum" in navigation just because your team uses that word internally.
Key Points
- Information Architecture organizes content and navigation so users find what they need efficiently
- IA has four pillars: organization systems, labeling systems, navigation systems, and search systems
- Card sorting reveals how users mentally group content — use it to build an IA that matches user mental models
- Tree testing validates an IA structure before building it — shows whether users can find specific content using the hierarchy
- The ideal IA is 3-4 levels deep and 7 (±2) items wide at each level — balanced depth and breadth
- Sitemaps document the full structure visually — every screen and its relationships to other screens
- Bottom tab bars are the most effective navigation pattern for mobile (3-5 primary sections); hamburger menus reduce discoverability
- Labels must use users' own words from research — not internal jargon or overly creative product names