Skip to content
Sanding Space
Sanding Space
Introduction
  • Principles
    • Sand the Back
    • Details Compound
    • Taste Is Trainable
    • Prototype in the Material
    • Every State Is Designed
    • Speed Is a Feeling
    • Honor the Platform
    • Know When to Stop
  • Foundations
    • Spacing Is a Scale
    • Concentric Corners
    • Optical Alignment
    • A Type Scale
    • Line Length and Leading
    • Perceptual Color
    • Contrast Is Not a Checkbox
    • Depth in Light and Dark
    • Icons Match the Text
  • Interaction
    • Button Press
    • Hover Is a Hint
    • The Safe Triangle
    • Hit Targets Are Bigger Than They Look
    • Focus Is a State Too
    • The Keyboard Is an Input
    • Inputs That Don't Fight You
    • Disabled Buttons Explain Nothing
    • Undo Beats Confirm
  • Motion
    • Motion Has a Job
    • Timing: Duration and Easing
    • Enter and Exit Aren't Mirrors
    • Grow From the Source
    • Springs Can Be Interrupted
    • Things Don't Teleport
    • Edges Should Give
    • Reduced Motion Isn't No Motion
    • Animate the Cheap Properties
  • Components
    • Toast
    • Dropdown Menu
    • Tabs
    • Drawer
  • Systems
    • Tokens Have Layers
    • Theming Without Rewriting
    • Components Are APIs
    • Composition Over Configuration
    • Variants, Not Overrides
    • Density Is a Mode
    • Behavior and Style Are Separate
    • Catch It Before It Ships
  • Product
    • Defaults Are Decisions
    • Empty States Are Onboarding
    • Progressive Disclosure
    • Write the Interface
    • Make the Common Path Fast
    • Never Lose Work
    • The URL Is State
    • Ship Behind a Flag
ResourcesAbout
Sanding Space
Introduction
  • Principles
    • Sand the Back
    • Details Compound
    • Taste Is Trainable
    • Prototype in the Material
    • Every State Is Designed
    • Speed Is a Feeling
    • Honor the Platform
    • Know When to Stop
  • Foundations
    • Spacing Is a Scale
    • Concentric Corners
    • Optical Alignment
    • A Type Scale
    • Line Length and Leading
    • Perceptual Color
    • Contrast Is Not a Checkbox
    • Depth in Light and Dark
    • Icons Match the Text
  • Interaction

    How should it respond?

    • Button Press
    • Hover Is a Hint
    • The Safe Triangle
    • Hit Targets Are Bigger Than They Look
    • Focus Is a State Too
    • The Keyboard Is an Input
    • Inputs That Don't Fight You
    • Disabled Buttons Explain Nothing
    • Undo Beats Confirm
  • Motion
    • Motion Has a Job
    • Timing: Duration and Easing
    • Enter and Exit Aren't Mirrors
    • Grow From the Source
    • Springs Can Be Interrupted
    • Things Don't Teleport
    • Edges Should Give
    • Reduced Motion Isn't No Motion
    • Animate the Cheap Properties
  • Components
    • Toast
    • Dropdown Menu
    • Tabs
    • Drawer
  • Systems
    • Tokens Have Layers
    • Theming Without Rewriting
    • Components Are APIs
    • Composition Over Configuration
    • Variants, Not Overrides
    • Density Is a Mode
    • Behavior and Style Are Separate
    • Catch It Before It Ships
  • Product
    • Defaults Are Decisions
    • Empty States Are Onboarding
    • Progressive Disclosure
    • Write the Interface
    • Make the Common Path Fast
    • Never Lose Work
    • The URL Is State
    • Ship Behind a Flag
ResourcesAbout

Interaction

An interface is a conversation, and this section is about holding up your end of it. Every press, hover, tap, keystroke and mistake is someone asking the interface something. The answer has to come quickly, it has to be clear, and it has to work however they got there, whether that's a mouse, a finger, a keyboard or a screen reader.

Most of this goes unnoticed when it's done well. A button that gives way under your finger. A submenu that stays open while you reach for it. A form that tells you what's wrong instead of greying out the button and leaving you to guess. People only notice these things when they're missing.

Button Press (coming soon)

How a button should feel the moment you press it.

Hover Is a Hint (coming soon)

Hover tells you something is interactive. It should never be the only way to find out.

The Safe Triangle (coming soon)

Why some submenus close as you reach for them, and the invisible shape that fixes it.

Hit Targets Are Bigger Than They Look (coming soon)

What you can tap and what you can see don't have to be the same size.

Focus Is a State Too (coming soon)

Focus rings aren't ugly. Badly designed focus rings are.

The Keyboard Is an Input (coming soon)

Power users and screen reader users both live on the keyboard. Design for it, not around it.

Inputs That Don't Fight You (coming soon)

Formatting as people type is helpful right up until the caret jumps.

Disabled Buttons Explain Nothing (coming soon)

A greyed-out button tells people they're wrong without telling them why.

Undo Beats Confirm (coming soon)

"Are you sure?" trains people to click yes. Undo lets them actually change their mind.