Links that add context

Notes about the lab's own research method opened as single pages, stacked panels, or stacked panels with focus management.

003 · Knowledge navigationConditionally supportedStarted 2026-10-01 · updated 2026-10-01

Demo width

Full768375

Open full screen

Loading demo…

Principles

Links that preserve and add context

Following a link should add context instead of replacing it, while preserving the reading trail in the URL.

TheoryFurnas (1986)People retain details near their focus and landmarks farther away; similar interfaces can work well for large information structures.
EmpiricalHuang & White (2010)Web users often maintain multiple contexts at once rather than browsing strictly linearly.
EmpiricalCockburn et al. (2009)A review of ways to combine focus and context, including evidence about their effectiveness.

Hypothesis

If links open notes in stacked panels, three prior note titles should remain visible after three jumps, the URL should retain the entire trail, and Back should restore the exact stack. Without focus management, focus remains in the old note; on narrow screens, the stack should collapse without widening the page.

Measured by: After three jumps measure previously visible note titles using elementFromPoint at panel spines, number of notes encoded in the URL, restoration after Back, focus destination, and page overflow at wide and narrow sizes.
Falsified if: Falsified if stacked panels preserve no more visible context than single notes, if Back fails to restore the stack, or if the page overflows at narrow widths.

Implementation

A · Single note: Each link replaces the note; the URL stores only the current note.
B · Stacked panels: Links add right-side panels and discard later panels; the full path is saved in the URL, without focus management.
C · Stacked panels + focus: Adds focus to the new panel heading, Escape and close buttons that restore focus to the originating link, and a clickable title trail on narrow screens.

The content is the lab's own method: nine short, interlinked notes about the research chain, principles, hypotheses, observations, and findings.

Panels use position: sticky with per-index offsets, so older panels are partly covered but their spines remain visible. The path uses repeated ?n=…&n=… query parameters, updated by pushState and restored via popstate. Links remain real <a href> elements that can open in new tabs.

Below 600 px demo width, B and C show a single note; C also shows a clickable title trail.

Observations

After three jumps, wide screen

For each variant, start at Interface Lab and follow the Principles, Hypotheses, and Observations links. Count visible previous note spines, compare the URL with the stack, record focus, and press Back.

Chromium 154 (Playwright, headless), standalone demo page, 2026-10-01, 1280×900

Variant	Previous notes visible	URL stores	Back restores	Focus after opening
A · Single note	0	1 note	yes	lost (body)
B · Stacked	3 of 3	4 notes	yes	link in previous note
C · Stacked + focus	3 of 3	4 notes	yes	new note heading

Both stacked variants kept all three earlier note titles visible and saved the complete path; the single-note variant preserved no visible context. Without focus management, keyboard users in B remained in the old note after opening a new one.

After three jumps, narrow screen

Repeat at 375 px width, when B and C collapse to a single note.

Chromium 154 (Playwright, headless), standalone demo page, 2026-10-01, 375×812

Variant	Previous notes visible	URL stores	Back restores	Focus after opening
A · Single note	0	1 note	yes	lost (body)
B · Stacked	0	4 notes	yes	lost (body)
C · Stacked + focus	3 titles in trail	4 notes	yes	new note heading

On narrow screens B lost its advantage: the path remained in the URL, but no context was visible and focus fell to the body. C retained context through a clickable title trail. Neither width caused page overflow.

Keyboard and URL

Use real keyboard input in C: focus the Principles link and press Enter, then the Hypotheses link and press Enter, then press Escape. Open B directly using a URL containing four notes.

Chromium 154 (Playwright, headless), standalone demo page, 2026-10-01, 1280×900

Step	Result
Enter on Principles link	Focus on Principles heading; URL ?v=C&n=interface-lab&n=prinsip
Escape after opening Hypotheses	Hypotheses panel closed; focus returned to its opening link in Principles
Reload a four-note URL	Four panels restored: Interface Lab, Principles, Hypotheses, Observations

The reading path can be shared and restored exactly through its URL, and the complete workflow is keyboard-operable.

Findings

Conditionally supported

Stacked panels kept all three previously opened notes visible and encoded the complete navigation trail in the URL, whereas a single note per page preserved no visible context. Two conditions apply: focus must move to the new panel, or keyboard users remain in the old one; and narrow screens need an alternative such as a title trail, because at 375 px stacked panels leave no previous context visible.

Limitations

Context was measured as visible titles, not readable note content; later panels covered the previous panel bodies.
No real screen-reader study or reading tasks, such as returning to note two and quoting a sentence, were conducted.
Nine short notes; stacks deeper than four panels have not been evaluated.
Chromium only; touch behavior was approximated with viewport width, not actual gestures.

Evaluation

Usability: Links are real <a href> elements, so Cmd/Ctrl-click opens the same trail in a new tab. Links to already-open notes are highlighted without creating duplicate panels.
Accessibility: Each panel is a region named by its heading. C focuses the new panel heading and restores focus to the opener after Escape or Close. axe-core 4.10: zero violations.
Responsive: Stacks scroll horizontally inside their own container; the page does not overflow at 1280 or 375 px. Below 600 px B becomes a single note, while C adds a title trail.
Performance: No dependencies; stacking uses CSS position: sticky. The demo loaded about 155 KB of JavaScript.
Craft: Overlapped panels retain their titles on visible vertical spines. Scrolling to new panels is smooth except under reduced motion.

Area: Knowledge navigation