Interface Lab

Principles

28 principles extracted from peer-reviewed research and W3C standards. Each is a testable general statement with sources and evidence types.

Priority

Prioritized because these claims can be falsified with browser measurements, evidence is strong or conflicting, and results are useful to this lab.

  1. 1

    Interruptible motion

    Rapidly successive state changes must remain interruptible: motion should reverse from its current position instead of jumping or ignoring input.

    Frame-by-frame position samples can clearly falsify the claim; sources describe both waiting costs and abrupt-change risks.

    SupportedMotion
  2. 2

    Feedback at the point of action

    An action should confirm its result at the triggering control, without shifting the layout, and announce the outcome to assistive technology.

    Combines attention, layout shift, and accessibility; distance and layout movement can be measured directly.

    SupportedMicrointeractions
  3. 3

    Links that preserve and add context

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

    Central to knowledge navigation: stacked panels combine focus and context, while URL behavior, focus, and narrow-screen handling can be measured.

    Conditionally supportedKnowledge navigation
  4. 4

    Interaction frequency determines motion

    Frequently repeated actions, especially keyboard-driven ones, should avoid animation; save motion for infrequent, meaningful changes.

    Supporting and challenging evidence makes the trade-off worth testing; highlight lag can be measured without subjective preference ratings.

    SupportedMotion
  5. 5

    Motion should be opt-in

    Define animation only inside prefers-reduced-motion: no-preference, so newly added components are static by default.

    This is a standards requirement that can be silently violated; escaped animations can be counted automatically.

    Conditionally supportedMotion
  6. 6

    Hover previews must have keyboard equivalents

    Information shown on hover must also be available through keyboard focus, remain dismissible, and stay open when the pointer moves onto it.

    An AA-level standard requirement that is often implemented only for mouse users.

    Not testedMicrointeractions
  7. 7

    Reflow without two-dimensional scrolling

    Content should remain intact at 320 CSS px without page-level two-dimensional scrolling, even when experimental visual effects are enabled.

    Applicable to every lab page and demo, and automatically testable.

    SupportedLayout
  8. 8

    Give readers control of demonstrations

    Embedded demonstrations should let readers control pace and parameters instead of running automatically.

    Determines how demos in this lab should be presented; learning transfer can be measured with simple questions.

    Not testedWriting interfaces
  9. 9

    Make evidence status visible

    Show the confidence status of a claim directly in listings and detail pages, without requiring hover.

    The lab publishes conditional findings and untested principles; readers must see their status without unnecessarily undermining trust.

    Not testedKnowledge navigation
  10. 10

    Loading delays reduce performance and intent

    Loading delays can reduce task performance and willingness to return, with much of the decline occurring in the first seconds.

    Each lab demo adds JavaScript; performance limits should be based on evidence rather than taste.

    Not testedProject presentation

All principles by area

Typography

  • Reading text should be at least 18 pxNot testedApplied in the lab

    Long-form text that users need to understand should use a font size of 18 px or larger.

    Rello et al. (2016)

  • Measure text width in charactersNot testedApplied in the lab

    Set text-column widths in characters (ch) rather than fixed pixels, because characters per line shape reading experience.

    Dyson (2004)

Layout

  • Reflow without two-dimensional scrollingSupportedPriority 7Applied in the lab

    Content should remain intact at 320 CSS px without page-level two-dimensional scrolling, even when experimental visual effects are enabled.

    W3C (2024)

Navigation

  • Make navigation history visibleNot tested

    Exploration interfaces should show the path already taken and provide a way back, not just show the current position.

    Pook et al. (2000) · Shneiderman (1996)

  • Overview first, details on demandNot testedApplied in the lab

    Start index pages with an overview of the available content, allow filtering, and disclose details only when requested.

    Shneiderman (1996)

Motion

  • Interruptible motionSupportedPriority 1

    Rapidly successive state changes must remain interruptible: motion should reverse from its current position instead of jumping or ignoring input.

    Baudisch et al. (2006) · Hutchins et al. (1985) · Chang & Ungar (1993)

  • Interaction frequency determines motionSupportedPriority 4

    Frequently repeated actions, especially keyboard-driven ones, should avoid animation; save motion for infrequent, meaningful changes.

    Baudisch et al. (2006) · Miller (1968) · Klein & Bederson (2005)

  • Duration should follow the taskNot tested

    An appropriate animation duration depends on the task; there is no universally correct duration for every interaction.

    Miller (1968) · Klein & Bederson (2005)

  • Signal changes where they occurNot tested

    Changes that users could overlook should be signaled where they happen; without a local cue, changes may go unnoticed.

    Rensink et al. (1997) · Baudisch et al. (2006) · Heer & Robertson (2007) · Chang & Ungar (1993)

  • Staggered motion does not improve trackingNot tested

    Staggering the movement of many objects does not necessarily make those objects easier to track.

    Chevalier et al. (2014)

  • Motion should be opt-inConditionally supportedPriority 5Applied in the lab

    Define animation only inside prefers-reduced-motion: no-preference, so newly added components are static by default.

    W3C (2024)

Microinteractions

  • Feedback at the point of actionSupportedPriority 2

    An action should confirm its result at the triggering control, without shifting the layout, and announce the outcome to assistive technology.

    Rensink et al. (1997) · W3C (2024)

  • Hover previews must have keyboard equivalentsNot testedPriority 6

    Information shown on hover must also be available through keyboard focus, remain dismissible, and stay open when the pointer moves onto it.

    W3C (2024)

  • Targets should be large enoughNot testedApplied in the lab

    Pointer and touch targets should be at least 24 × 24 px because selection time depends on target size and distance.

    MacKenzie (1992) · W3C (2024)

Spatial UI

  • Orientation in zoomable spacesNot tested

    Pannable and zoomable spaces should show where users are and how to return, to prevent disorientation.

    Pook et al. (2000) · Cockburn et al. (2009)

  • Stable positions improve re-findingNot tested

    Items kept in stable, user-selected positions can be easier to find again than items in a list whose order changes.

    Robertson et al. (1998)

Writing interfaces

Project presentation

  • First impressions form within 50 msInsufficient evidence

    A work index is judged almost instantly; its initial view should convey what the site contains and its quality without requiring interaction.

    Lindgaard et al. (2006) · Reinecke et al. (2013)

  • Aesthetics affect perceived usabilityNot tested

    An interface perceived as beautiful may also be rated easier to use regardless of actual usability, which must therefore be measured rather than merely asked about.

    Tractinsky et al. (2000) · Perrig et al. (2023)

  • Visual complexity predicts first impressionsNot tested

    Visual complexity and colorfulness can be estimated from a screenshot and used to predict first aesthetic impressions.

    Reinecke et al. (2013) · Zen et al. (2023)

  • Novel, yet recognizableInsufficient evidence

    Attractive websites balance novelty with familiarity for their type; novelty may matter more for service sites and typicality for commercial sites.

    Silvennoinen et al. (2026)

  • Loading delays reduce performance and intentNot testedPriority 10

    Loading delays can reduce task performance and willingness to return, with much of the decline occurring in the first seconds.

    Galletta et al. (2004)

Knowledge navigation

  • Links that preserve and add contextConditionally supportedPriority 3

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

    Furnas (1986) · Huang & White (2010) · Cockburn et al. (2009)

  • Make evidence status visibleNot testedPriority 9Applied in the lab

    Show the confidence status of a claim directly in listings and detail pages, without requiring hover.

    van der Bles et al. (2020)

Color

  • Bright, low-saturation backgroundsNot testedApplied in the lab

    Use light, low-saturation colors on large surfaces: lightness tends to increase pleasantness while saturation primarily increases arousal.

    Valdez & Mehrabian (1994) · Elliot & Maier (2014)

  • Cool hues for large surfacesNot testedApplied in the lab

    For large colored areas, blue, blue-green, green, and blue-violet may be safer choices than yellow, yellow-green, or brown.

    Valdez & Mehrabian (1994) · Palmer & Schloss (2010) · Jonauskaite et al. (2020) · Ou et al. (2004) · Nourian et al. (2025)

  • Adjacent hues feel harmoniousNot testedApplied in the lab

    Colors shown side by side or in sequence should use nearby hues because similar hues are generally judged more harmonious.

    Schloss & Palmer (2011)

  • Dark text on light backgroundsNot testedApplied in the lab

    Display long reading text as dark foreground on a light background, prioritizing luminance contrast over hue contrast.

    Buchner & Baumgartner (2007) · Piepenbrock et al. (2013)