Concept study

Reading Field Study

A familiar page — a long-form article — reinterpreted as a field. The structure stays ordinary semantic HTML; the field adds a second layer: orientation, memory, and relationship. It remains fully readable with the field off or motion reduced. This is the first of the concept studies.

BeforeA plain semantic article — headings, citations, a source list. Toggle the field off to see it.
AfterField on: sections gather attention and accrue memory, citations thread to sources, claims show support and conflict.
InspectReveal the live relationship graph and the platform readout — why the page behaves as it does.
semantic article — field off

Origins

Early interfaces were instruments before they were screens: panels of switches and dials where every control mapped to one machine state.1 The operator held the model in their head.

The shift toward metaphor began when displays became cheap enough to show a representation of state rather than the state itself.

The metaphor era

The desktop metaphor made the computer legible to non-specialists by borrowing objects people already understood — documents, folders, a trash can.2

Metaphor traded fidelity for familiarity. It is widely held that the desktop metaphor was the decisive factor in personal-computer adoption — a claim worth examining, since timing and price fell at once.3

Direct manipulation

Direct manipulation replaced commands with continuous, reversible action on visible objects: drag, drop, resize, undo.4

Its cost is that everything must be on screen to be actuated. As systems grew, the operator's mental model returned — now as navigation rather than memorized commands.

Relational interfaces

A document is a tree, but meaning is a graph: a citation relates to a source, a claim to its evidence, a control to the thing it changes. Interfaces have mostly represented those relations passively, as links to click.

A relational interface treats them as live structure — visible, weighted, inspectable — without abandoning direct manipulation or semantic HTML.

Evidence

Claims are bodies; sources bind to them. A claim with a contradiction reads as contested; one with only support reads as supported. Hover a claim to thread it to its sources.

The desktop metaphor caused personal-computer adoption. contested

Direct manipulation reduces error rates for visible tasks. supported

Sources

  1. Licklider, “Man-Computer Symbiosis” (1960)
  2. Smith et al., “Designing the Star User Interface” (1982)
  3. Norman, “The Design of Everyday Things” (1988)
  4. Shneiderman, “Direct Manipulation” (1983)

Recipes applied

Each is a real FieldRecipe from the catalog. The ones marked live are driven through applyRecipe() on this page; the rest are the conceptual family this study embodies.

Reading Field gravity live

make long content pages reveal attention, memory, and concept links

attract memory link
Citation Thread electromagnetic

bind citations, footnotes, evidence, references into visible relationships

link fieldflow charge memory
Evidence Field electromagnetic

show how sources support, weaken, or contradict a claim

charge link cohesion repel
Context Halo gravity

reveal nearby relevant context around a focused element

gravity memory link cohesion
Relation Lens strong

temporarily reveal hidden connections without changing layout

link memory cohesion