Bill Buxton - Interaction Design

Design for how humans actually interact with devices. Input is not an afterthought.

Core Philosophy

Sketching UX

Design is exploration. Sketches are not deliverables - they're thinking tools.

Rules:

• •Low fidelity early (paper, whiteboard)
• •Multiple alternatives, not one solution
• •Test interactions, not visuals
• •Discard freely (sketches are cheap)

Input Fundamentals

Every input device has strengths and weaknesses. Design for the device.

The Long Nose of Innovation

New interactions take decades from invention to mainstream. Don't force novel interactions on users.

Input Characteristics

Touch (Mobile/Tablet)

Constraints:

• •Finger is 44px minimum target
• •No hover state exists
• •Two hands: thumbs reach zones
• •One hand: bottom half only
• •Fat finger problem: imprecise

Rules:

/* Touch targets */
.touch-target {
  min-width: 44px;
  min-height: 44px;
  padding: 12px;  /* Generous padding */
}

/* Spacing between targets */
.button + .button {
  margin-left: 8px;  /* Minimum 8px gap */
}

Mouse (Desktop)

Constraints:

• •Precise but requires movement
• •Hover exists and is expected
• •Right-click context menus
• •Scroll wheel for fast navigation

Rules:

/* Hover states are mandatory */
.clickable:hover {
  background: var(--hover-bg);
}

/* Smaller targets acceptable */
.desktop-button {
  min-height: 32px;  /* Can be smaller than touch */
}

Keyboard

Constraints:

• •Fastest for experts
• •Tab order matters
• •Focus must be visible
• •Shortcuts expected for power users

Rules:

/* Focus must be visible (never outline: none without replacement) */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Tab order: logical, top-to-bottom, left-to-right */

Fitts's Law

Time to reach a target depends on distance and size.

Time = a + b * log2(Distance/Size + 1)

Implications:

1. •Large targets are faster (make primary actions big)
2. •Close targets are faster (group related actions)
3. •Edge/corner targets are infinite size (use screen edges)
4. •Reduce travel distance (put actions near cursor)

Rules:

• •Primary action: largest button
• •Related actions: grouped together
• •Common actions: near content
• •Dangerous actions: away from common actions

Thumb Zones (Mobile)

┌─────────────────────────┐
│      Hard to reach      │  ← Nav, settings
│                         │
│    ──────────────────   │
│                         │
│     Natural reach       │  ← Primary content
│                         │
│    ──────────────────   │
│                         │
│      Easy (thumb)       │  ← Primary actions
└─────────────────────────┘

Rules:

• •Primary actions: bottom 1/3
• •Content: middle 1/2
• •Navigation: top (or bottom sheet)
• •Destructive actions: not in easy zone

Prescriptive Patterns

Mobile Navigation

<!-- Bottom navigation for primary actions -->
<nav class="fixed bottom-0 left-0 right-0">
  <a href="/" class="touch-target">Home</a>
  <a href="/search" class="touch-target">Search</a>
  <a href="/profile" class="touch-target">Profile</a>
</nav>

Form Input

<!-- Input + action in thumb zone -->
<div class="fixed bottom-0 left-0 right-0 p-4">
  <input type="text" class="w-full touch-target" />
  <button class="touch-target primary">Send</button>
</div>

Confirmation Dialogs

<!-- Destructive action away from confirm -->
<div class="dialog-actions">
  <button class="cancel">Cancel</button>
  <!-- Gap prevents accidental tap -->
  <button class="destructive">Delete</button>
</div>

Multi-Input Design

Modern devices support multiple inputs. Design for all.

/* Hover for mouse, active for touch */
.button:hover {
  background: var(--hover);
}

@media (hover: none) {
  /* Touch device: no hover state */
  .button:hover {
    background: inherit;
  }
}

.button:active {
  background: var(--active);  /* Works for both */
}

Gesture Guidelines

Rule: Every gesture must have a visible alternative (button/menu).

Accessibility

Input diversity includes assistive technology.

<!-- Screen reader + keyboard accessible -->
<button
  aria-label="Delete item"
  tabindex="0"
  role="button"
  onkeydown="if(event.key==='Enter') handleDelete()"
>
  <svg aria-hidden="true">...</svg>
</button>

Review Checklist

• • Touch targets are 44px minimum
• • Primary actions in thumb zone (mobile)
• • All interactions have visible alternatives
• • Focus states are visible
• • Tab order is logical
• • Hover states exist (desktop)
• • No hover-only functionality
• • Gestures have button alternatives

Anti-Patterns

Buxton Score

Integration

Combine with:

• •/usability - Affordances that signal input methods
• •/mobile - Mobile-first input patterns
• •/motion - Feedback motion for input acknowledgment