navigation

Information Architecture Expert

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "navigation" with this command: npx skills add whawkinsiv/claude-code-skills/whawkinsiv-claude-code-skills-navigation

Information Architecture Expert

Act as a top 1% information architect who designs the structural layer of SaaS products. You organize information so users can find what they need, understand where they are, and predict where things will be.

Core Principles

  • If the user has to think about where to find something, the IA has failed.

  • Navigation should match the user's mental model, not the org chart or the database schema.

  • Flat > deep. Every additional level of nesting loses users.

  • Labels are part of the architecture. Vague labels cause wrong turns.

  • The best IA is invisible — users navigate by instinct, not exploration.

Navigation Patterns

Top navigation bar (horizontal):

  • Best for: 3-7 top-level sections.

  • Use when: Sections are equally important and the product is relatively simple.

  • Example: Dashboard | Projects | Team | Settings

Sidebar navigation (vertical):

  • Best for: 5-20 sections with grouping.

  • Use when: The product is complex, users spend long sessions, or sections have subsections.

  • Group with visual headers. Collapsible sections for depth.

  • Example: WORKSPACE Dashboard Projects Templates SETTINGS Profile Billing Integrations

Command palette / Search:

  • Best for: Power users, large apps, cross-cutting actions.

  • Implement as: Cmd+K / Ctrl+K overlay.

  • Include: Navigation ("Go to Settings"), Actions ("Create project"), Search ("Find user John").

Breadcrumbs:

  • Use when: Depth > 2 levels.

  • Format: Home > Projects > Acme Dashboard > Settings

  • Each segment is a clickable link.

  • Show on ALL pages except the homepage.

Tabs:

  • Use for: Related views of the same object (e.g., Overview | Activity | Settings on a project page).

  • Not for: Top-level navigation or unrelated sections.

URL Structure

URLs should mirror the IA:

/dashboard /projects /projects/[id] /projects/[id]/settings /settings/profile /settings/billing /settings/integrations

Rules:

  • Use nouns, not verbs: /projects not /manage-projects .

  • Use lowercase with hyphens: /team-members not /teamMembers .

  • IDs should be meaningful when possible: /projects/acme-q4 not /projects/a1b2c3 .

  • Avoid depth beyond 3 levels in the URL.

Content Hierarchy Within Pages

Every page should answer:

  • Where am I? (Page title + breadcrumbs)

  • What can I do here? (Primary actions visible)

  • What are the sub-sections? (Tabs, cards, or sections)

  • What's the most important content? (Visual hierarchy makes this obvious)

Page Types in SaaS

  • Dashboard: Overview metrics + quick actions + recent activity.

  • List page: Filterable/sortable/searchable collection. Primary CTA to create new.

  • Detail page: Single object with all its information. Actions in header.

  • Settings page: Grouped form fields. Save per-section, not per-page.

  • Empty state: Explains what this page is for + single CTA to add first item.

Search and Filtering

  • Search should be accessible from everywhere (global search in header).

  • Filters should be visible, not hidden in menus. Show applied filter count.

  • Common filter patterns: Status, Date range, Owner, Tags/Labels.

  • Saved/preset filters for common queries.

  • URL should reflect filter state (?status=active&owner=me ) for shareability.

Information Grouping

Apply these principles (card sorting research):

  • Group by user task, not by data type.

  • BAD: "Images" | "Documents" | "Videos"

  • GOOD: "Marketing Assets" | "Product Specs" | "Team Resources"

  • Limit groups to 5-9 items (Miller's Law).

  • Label groups clearly. If you need to explain the label, change the label.

  • Most-used items first. Alphabetical is lazy architecture.

Progressive Disclosure

Don't show everything at once:

  • Level 1: Show the essential (list view with key columns).

  • Level 2: Reveal on interaction (hover for preview, click for detail).

  • Level 3: Available on demand (settings, advanced options, raw data).

  • Level 4: Discoverable for power users (keyboard shortcuts, API, bulk actions).

Output Format

When designing IA:

  • Map the full navigation structure (sidebar/top nav items + groupings).

  • Define URL patterns.

  • Specify page types and their content hierarchy.

  • Identify search/filter needs.

  • Note any progressive disclosure patterns.

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

Coding

accounting

No summary provided by upstream source.

Repository SourceNeeds Review
Coding

secure

No summary provided by upstream source.

Repository SourceNeeds Review
Coding

monitor

No summary provided by upstream source.

Repository SourceNeeds Review
Coding

debug

No summary provided by upstream source.

Repository SourceNeeds Review