Playground
  • Introduction
  • Components

Annotation

Enables actors to add layers of meaning to existing content through marking, highlighting, and contextual enrichment. Annotation creates a meta-layer that preserves the original while enabling interpretation, collaboration, and knowledge construction without disrupting the primary experience.

Wear—accumulated traces of attention (read wear) and modification (edit wear) that make invisible cognitive processes visible and shareable.

Forces

  • Preservation vs modification: actors want to add insights without altering source material
  • Individual vs shared understanding: personal interpretations need to coexist with collective meaning
  • Temporal persistence: some annotations are ephemeral thoughts, others become permanent knowledge
  • Context vs clutter: rich annotations risk overwhelming the original content

Temporal dimension

  • Lifecycle: Annotations might begin as ephemeral thoughts (scratchpad), harden into notes (personal reference), and may eventually mature into documentation and shared knowledge.
  • Rhythm: The act of annotating breaks the flow of consumption, creating a slower, reflective rhythm compared to rapid interaction.
  • History: Aggregated annotations create a visual history of how content has been interpreted and valued over time.

Variants

By permanence (wear accumulation)

  • Persistent annotations: become part of the content’s permanent context—deep wear patterns
  • Ephemeral annotations: temporary marks that fade or expire—light wear traces
  • Versioned annotations: track changes over time while preserving history—wear archaeology

By visibility (wear distribution)

  • Private annotations: personal notes visible only to the author—individual wear patterns
  • Shared annotations: collaborative layer visible to specific groups—social wear formation
  • Public annotations: open commentary accessible to all viewers—collective wear trails

By function

  • Descriptive: adding context, definitions, or explanations
  • Critical: questioning, challenging, or evaluating content
  • Connective: linking to related concepts or references
  • Generative: sparking new ideas or directions

Annotation types

Visual marking (read wear)

Simple emphasis without/little semantic content—highlighting or color-coding that shows where attention has been focused.

Textual annotation (edit wear)

Adding written commentary, notes, or descriptions that provide additional context or interpretation—traces of cognitive processing and meaning construction.

Semantic tagging

Applying structured metadata—labels, categories, or standardised markers that enable systematic organisation.

Reference linking

Connecting annotated content to external sources, related materials, or supporting evidence.

System-generated annotation

Automated markup showing confidence levels, data sources, or algorithmic decisions (e.g., uncertainty indicators in AI-generated content).

States

Clean slate

  • No annotations exist yet
  • Subtle affordances suggest annotation capability
  • Original content remains unobstructed

Active annotation

  • Visible marks with clear attribution
  • Annotation tools readily accessible
  • Navigation between annotated sections

Dense coverage

  • Multiple overlapping annotations
  • Filtering and layering controls become important
  • Risk of obscuring original content

Related components

  • Reference – citation and source tracking.
  • Badge – visual indicators used as status annotations.

Resources & references

  • W3C Web Annotation Data Model
  • Annotation by Remi Kalir and Antero Garcia
  • Hill, William C., et al. Edit wear and read wear. 1992

Related patterns

Precedes

  • Collaboration — shared annotations enable collaborative sense-making.
  • Conversation — annotations often initiate critical dialogue.
  • Commenting — extends static annotation into dynamic discussion.

Enables

  • Help — annotation supplies the mechanism for attaching help to specific elements

Enacts

  • Temporality — annotations are markers of time and wear.
  • Learnability — the actor learns from the interpretive marks others leave in place

Complements

  • Explanation — clarifies complex concepts, often via description.
  • Transparent reasoning — system annotations that reveal decision logic.
  • Generated content — system marks confidence and origin.
  • Tag — semantic tagging for organisation.
  • Dynamic hyperlinks — user-created markers (hard) and system-generated insights (soft)

Tangentially related

  • Link preview — previews can surface annotation layers attached to a linked destination