5. Unobtrusive Architecture
The Unobtrusive Architecture framework defines how Aevum Encyclopedia presents complex information without overwhelming the reader. Unlike traditional interfaces that prioritize feature visibility, this approach treats attention as a finite resource, designing systems that fade into the background until explicitly required.
This document outlines the philosophical foundations, interaction patterns, and technical constraints that govern unobtrusive design across all editorial and platform surfaces.
Core Principles
Unobtrusive design is not about removing functionality; it is about sequencing it according to cognitive demand. The following principles form the bedrock of our interface philosophy:
Cognitive Minimalism
Every pixel competes for attention. Elements that do not directly serve comprehension must be deferred, hidden, or contextualized. The reading surface should remain mathematically clean: maximum contrast for text, minimum visual noise for chrome.
Progressive Disclosure
Information complexity should match user intent. A casual reader sees a streamlined article; a researcher triggers citation layers, methodology notes, and cross-references without altering the primary reading flow. Disclosure happens through intent, not assumption.
"The best interface is the one you don't notice until you need it. Knowledge platforms should behave like libraries, not exhibitions."
â Platform Design Charter, Section 4.2
Implementation Guidelines
Translating philosophy into code requires strict adherence to interaction boundaries. The following patterns are mandatory for all new components:
UI Patterns
- Contextual Toolbars: Navigation and controls should appear only during hover or text selection, collapsing within 200ms of inactivity.
- Inline Annotations: Citations and definitions render as subtle underlines. Click or tap reveals a micro-drawer that does not scroll or reflow the main content.
- Depth Layers: Related articles, metadata, and contributor notes exist in a secondary pane or modal stack, never interrupting the primary viewport.
Content Flow
Reading progression must remain linear by default. Semantic jumps (table of contents, search, citations) should feel like footnotes, not navigation events. The DOM structure must preserve reading order even when visual layers are toggled.
<!-- Correct: Semantic layering -->
<article class="prose" tabindex="0">
<p>Primary text flows uninterrupted...</p>
<span class="annotation" data-target="cite-42">Verified</span>
</article>
<aside class="depth-layer" hidden>...</aside>
Technical Specifications
All implementations must satisfy the following performance and accessibility thresholds:
| Metric | Threshold | Measurement |
|---|---|---|
| Interaction Latency | < 50ms | Time-to-interactive for overlay reveals |
| Reflow Impact | 0 | Layout shifts during annotation expansion |
| Accessibility | WCAG 2.1 AA | Keyboard navigation & screen reader flow |
| Bundle Size | < 15KB gzipped | Unobtrusive component module |
References & Further Reading
- Aevum Design System:
/docs/ui/annotation-layers.md - Cognitive Load Theory in Digital Reading (2022)
- W3C Accessibility Guidelines for Epistemic Interfaces
- Section 4: Semantic Navigation Architecture
aevum/docs repository.