DRKM Blueprint System

Active

UX Principles

User experience principles governing blueprint navigation and information hierarchy

Active·Owner: greg·2026-04-04

Core UX Principle: Speed of Information Finding

The primary UX goal is enabling users to find any information in under 5 seconds. Not 30 seconds, not 10 seconds. 5 seconds. This drives every UX decision.

Three Speeds

We design for three information-finding speeds:

1. Scanning Speed (0-2 seconds)

User arrives and needs to understand: "What is this?"

  • Large, clear headline immediately answers the question
  • Quick description (1-2 sentences) explains the purpose
  • Visual scannable sections break information into chunks
  • Hierarchy visible at a glance — no scrolling needed for orientation

Success metric: User knows what they're looking at within 2 seconds.

2. Navigation Speed (2-4 seconds)

User knows what this is and now needs to find their specific information.

  • Consistent navigation structure across all pages (sidebar, breadcrumbs, related links)
  • Clear section names that describe content within
  • Status indicators (active, forming, draft) help skip irrelevant information
  • Predictable page order — no surprises about where things are located

Success metric: User locates their target section in under 2 additional seconds.

3. Reading Speed (4-5 seconds)

User found the right page and now scans it.

  • Clear typography hierarchy guides reading path
  • Generous whitespace prevents cognitive overload
  • Short paragraphs (2-3 sentences) are scanned, not read
  • Tables and lists for structured comparison
  • Code blocks properly syntax-highlighted

Success metric: User finds their specific information within 1 additional second.

Structural Consistency Over Personality

Every blueprint page follows the same structure:

  • Header with title and metadata
  • Navigation in sidebar or breadcrumbs
  • Content organized by headings
  • Related links at bottom or sidebar
  • Footer with project info

This predictability means users' mental models transfer across pages. No learning curve per page.

Density Managed Through Compartmentalization

Information is dense because we're documenting complete systems, but we prevent cognitive overload through:

  • Clear sections with visual boundaries
  • Expandable/collapsible areas for optional detail
  • Tables for structured data comparison
  • Callout boxes for important concepts
  • Code examples separated from prose

We never hide important information, but we group related information together.

Navigation Model

  • Sidebar navigation shows full site structure, current location highlighted
  • Breadcrumbs show current path (home > section > page)
  • Section navigation shows pages within current section
  • Related pages links at bottom suggest next logical pages
  • Search (optional) provides fallback discovery

Every navigation element asks: "Where am I and where can I go?"

Information Scent

Users follow "information scent" — if they see promising links, they follow them. We make information scent strong:

  • Link labels clearly indicate destination and relevance
  • Section names match the mental model of users seeking that info
  • Metadata (status, owner, date) helps users evaluate relevance quickly
  • Descriptions under titles preview content

Weak information scent breaks navigation — users get lost or miss information.

Status Vocabulary as UX Tool

Three statuses help users understand what they're reading:

  • active = complete, stable, trust this
  • forming = in development, expect changes, incomplete
  • draft = exploratory, may not happen, lowest priority

This vocabulary appears in page headers, navigation, and tables, helping users make decisions about reading time investment.

Mobile-First Thinking

Mobile screens force clarity:

  • Can you find information on 320px? Then 1920px is easy.
  • Can you navigate with touch (44px minimum targets)? Then mouse/keyboard is easy.
  • Can you read without horizontal scrolling? Then all viewports work.

Mobile-first doesn't mean mobile-only — it means mobile as the hardest constraint.

Accessibility as Default

Accessible design serves all users:

  • Clear focus states help keyboard users
  • Proper heading hierarchy helps screen readers and visual scanners
  • Color contrast serves low-vision users and bright-sunlight reading
  • Alternative text serves blind users and network-limited users
  • Plain language serves non-native speakers and skimmers

Accessibility is not a special feature. It's the floor.