UX Information Architecture

A skill that designs Information Architecture (IA) as ASCII diagrams.

When to Use

• Designing overall screen hierarchy for apps/web

• Defining navigation structures

• Content classification and grouping

• Creating sitemaps

IA Diagram Symbols

Hierarchy Nodes

[Root] ← Top level (app/site) ├─[Section] ← Section (category) │ ├─[Page] ← Page │ │ └─[SubPage] ← Sub page │ └─[Page] └─[Section]

Node Types

[Page Name] ← Regular page [[Core Page]] ← Core page (emphasis) (Modal/Overlay) ← Modal/Overlay {Dynamic Content} ← Dynamic content <External Link> ← External link [Page*] ← Auth required

IA Structure Patterns

Hierarchical Tree

[Application] │ ├─[Dashboard] │ ├─[Overview] │ └─[Statistics] │ ├─[Projects] │ ├─[Project List] │ │ └─{Project Item} │ └─(New Project Modal) │ └─[Settings]* ├─[Profile] └─[Security]

IA Design Principles

• 3-click rule: Major content reachable within 3 levels

• Menu items: 7±2 recommended

• Hierarchy depth: 4 levels or less recommended