User Interface Design

Theory
Login

Bridge Intent and Execution

The interface bridges Intent and Execution. Analyze components by Affordance, not Aesthetics.

Critique UI elements via Cognitive Science and Systems Theory.

Design Axioms

  • Clear Affordance: Align Form with Function.
  • Low Friction: Minimize Cognitive Load for common tasks.

The Anchor Principle

Just as a Wardley Map has no meaning without an Anchor (User), an Interface has no meaning without a Thinker. We design "Outside-In": starting from the Subject and their Intent, not the system's capabilities.

Phase I: The Subject

The Thinker

Who is the agent in this system? What is their context, state of mind, and capability?

Scientific Basis:
Activity Theory (The Subject)
Phase II: The Object

The Intent

What specific progress is the Thinker trying to make? This is the "Job to be Done."

Scientific Basis:
Means-Ends Analysis (Goal State)
Phase III: The Tool

The Interface

The affordances we expose to bridge the gap between Intent and Execution.

Scientific Basis:
Affordance Theory (Action Possibility)

The Alignment Protocol

Before designing any component, we must validate its existence against the Anchor. This prevents "Feature Bloat" and ensures rigorous alignment with mental models.

Validation Checklist

  • 1
    Who is the specific persona (Anchor)?
  • 2
    Why are they here (User Need/Goal)?
  • 3
    Does this UI element directly satisfy that need?

Mental Model Alignment

The goal is to minimize the "Gulf of Execution."

User's Mental ModelExpecting "Simple"
System ModelDelivering "Simple"

"The interface should disappear, leaving only the task."

The Necessity of Affordances

Affordances are latent action possibilities. Strong affordances dictate system-level thinking.

The Cognitive Bridge

Model

To design for the Thinker, we must make invisible concepts visible. Each UI pattern answers a specific question the Thinker is asking about the system's reality.

Concept
The Thinker's Question
UI Pattern / Affordance
Lenses
"What perspective is this?"
Toggles/Overlays (e.g., "Show Dependencies" vs "Show Inertia")
Evolution
"How mature is this?"
X-Axis positioning, distinct visual styles for "Rough" vs "Polished"
Lineage
"Where did this come from?"
Citations, source links, "trace back" visualizations
Coupling
"What will break if I touch this?"
Connector lines, highlight-on-hover dependencies
Boundary
"What context am I in?"
Color coding (e.g., Strategy=Red, System=Blue), explicit labelling
Intent
"What are we solving for?"
Primary Actions, Success States, visual "Anchors"