Julian lechnerandClaude Opus 5.5
c14101e60d
Keep the decision steps in SKILL.md and move catalogs, examples, and checklists verbatim to references/ to reduce the context cost of loading the skill. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
54 lines
1.9 KiB
Markdown
54 lines
1.9 KiB
Markdown
# Page Hierarchy Design
|
|
|
|
## The 3-Click Rule
|
|
|
|
Users should reach any important page within 3 clicks from the homepage. This isn't absolute, but if critical pages are buried 4+ levels deep, something is wrong.
|
|
|
|
## Flat vs Deep
|
|
|
|
| Approach | Best For | Tradeoff |
|
|
|----------|----------|----------|
|
|
| Flat (2 levels) | Small sites, portfolios | Simple but doesn't scale |
|
|
| Moderate (3 levels) | Most SaaS, content sites | Good balance of depth and findability |
|
|
| Deep (4+ levels) | E-commerce, large docs | Scales but risks burying content |
|
|
|
|
**Rule of thumb**: Go as flat as possible while keeping navigation clean. If a nav dropdown has 20+ items, add a level of hierarchy.
|
|
|
|
## Hierarchy Levels
|
|
|
|
| Level | What It Is | Example |
|
|
|-------|-----------|---------|
|
|
| L0 | Homepage | `/` |
|
|
| L1 | Primary sections | `/features`, `/blog`, `/pricing` |
|
|
| L2 | Section pages | `/features/analytics`, `/blog/seo-guide` |
|
|
| L3+ | Detail pages | `/docs/api/authentication` |
|
|
|
|
## ASCII Tree Format
|
|
|
|
Use this format for page hierarchies:
|
|
|
|
```
|
|
Homepage (/)
|
|
├── Features (/features)
|
|
│ ├── Analytics (/features/analytics)
|
|
│ ├── Automation (/features/automation)
|
|
│ └── Integrations (/features/integrations)
|
|
├── Pricing (/pricing)
|
|
├── Blog (/blog)
|
|
│ ├── [Category: SEO] (/blog/category/seo)
|
|
│ └── [Category: CRO] (/blog/category/cro)
|
|
├── Resources (/resources)
|
|
│ ├── Case Studies (/resources/case-studies)
|
|
│ └── Templates (/resources/templates)
|
|
├── Docs (/docs)
|
|
│ ├── Getting Started (/docs/getting-started)
|
|
│ └── API Reference (/docs/api)
|
|
├── About (/about)
|
|
│ └── Careers (/about/careers)
|
|
└── Contact (/contact)
|
|
```
|
|
|
|
**When to use ASCII vs Mermaid**:
|
|
- ASCII: quick hierarchy drafts, text-only contexts, simple structures
|
|
- Mermaid: visual presentations, complex relationships, showing nav zones or linking patterns
|