#interaction design
26 pieces filed under “interaction design”.
Hover states with purpose
Hover is the most abused state in interface design — decoration where it should teach. A taxonomy of hover states that do a job, plus the focus-parity rules.
Bottom sheets that don't fight the user
When a bottom sheet beats a modal on mobile web: drag affordances, scrim honesty, snap-point logic, keyboard and screen-reader behaviour, and anti-patterns.
Multimodal interfaces: beyond the chat box
When chat is the wrong interface: designing AI products with the right modality — voice, image, structured output, inline suggestions — and how to choose.
Focus-visible: designing the ring, not removing it
Keyboard focus styles are a design problem most teams delete instead of solve. How to design focus rings that are visible, beautiful and part of the identity system.
Progressive disclosure for genuinely complex tools
Hiding complexity without hiding power: sensible defaults as strategy, advanced modes, command palettes as the pro lane, and how to measure if disclosure works.
A taxonomy of micro-interactions (and when to say no)
Hover states, cursor follow, scroll reveals and button physics — a working taxonomy with duration curves, quality tests, and reduced-motion fallbacks for every pattern.
Agent UX: designing for software that acts on your behalf
When software acts instead of suggests, the interface becomes a control system: permission scopes, visible progress, real undo, and calibrated trust.
Drag handles, sliders and the affordance problem
Draggable UI fails quietly: nobody drags, keyboards can't, layouts forget themselves. How to build handles and sliders that people actually find, use and keep.
Sticky elements that don't annoy anyone
Sticky headers, bars and CTAs must pay rent for the viewport they occupy. Height budgets, scroll-directional chrome, and the focus traps behind sticky UI.
Product search UX: from query box to answers
In-app search is a product decision wearing an engineering costume: scoping, suggestions, typo tolerance, filters vs facets, and no-results states that navigate.
Command palettes: the 200-millisecond product tour
A command palette done well is a 200-millisecond product tour. Ranking heuristics, forgiving fuzzy match, keyboard ergonomics, and when a palette is a crutch.
Bundles and kits: designing the build-your-own moment
The bundle builder as interface design: shelf metaphors, fill visuals, flat pricing, coupled inventory — and when a kit makes the product disappear.
Engineering the 80-millisecond moments
Micro-interactions are where product quality is felt. Press states, instant visual feedback, focus continuity, and testing feel with the same rigour as function.
Keyboard shortcuts nobody finds
Most shipped shortcuts are discovered by accident or never. Legends, cheat sheets, teaching in context, remapping, and designing for the power user you'll have.
Agent UX: designing for delegation, not magic
Agentic features fail when they promise magic. The interface patterns we use instead: scope setting, visible progress, checkpoints, undo and earned autonomy.
Cart drawer or cart page? Stop guessing
The drawer-vs-page argument is a measurement problem, not a taste debate. The decision framework, drawer anatomy, cross-sell discipline and what to track.
Undo beats confirm: designing reversible software
Confirmation dialogs train users to click through danger. Undo-first design: timing, reversible architecture, soft deletes, and the trust dividend of forgiving software.
PDP galleries: the eight-image sequence that answers every doubt
The gallery is the busiest component on your store. Sequencing by doubt, zoom mechanics that don't fight the customer, video restraint, and perf budgets.
Dates and times: pickers, zones and the lies of relative time
Calendar grids vs typing, timezone display rules for teams, relative timestamps that decay to absolute, and the DST edge cases that bite months later.
Data tables for people who live in them
Ops and finance users live inside your tables all day. Density modes, sticky decisions, column management, honest exports and keyboard speed runs.
Inclusive design beyond the checklist
Inclusive design past WCAG audits: inclusive language in UI copy, cognitive load budgets, SPA focus management, touch targets, and a critique criterion that sticks.
Scrollytelling without the hostage-taking
Scroll-driven narrative can make complex data click — or trap readers in an unskippable slideshow. The pacing, exit lanes and motion fallbacks that keep it honest.
Motion that earns its keep (and the 160ms rule)
Our motion philosophy: the 160ms rule, an easing vocabulary of three curves, choreography limits, and prefers-reduced-motion as a design input, not a checkbox.
Designing forms people actually finish
Forms are where products lose users and revenue quietly. The field-economics, label copy, error writing and autofill respect we use to keep completion high.
Micro-interactions: the fine layer that makes interfaces feel expensive
Hover, pressed and focus states are where interface quality hides. Our working rules for micro-interactions: durations, material honesty, and when to cut motion.
The cart is a negotiation, not a spreadsheet
Cart UX that closes: drawer vs page economics, threshold cues done honestly, gift and quantity design, save-for-later rituals, and mobile-first cart anatomy.