name: ux-information-architecture description: "[UI/UX] Designs Information Architecture (IA) as ASCII diagrams. Systematically organizes screen hierarchies, navigation structures, and content classification. Use when requesting 'IA design', 'information architecture', 'screen hierarchy', or 'sitemap'."

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

code

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

Node Types

code

[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

code

[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