Research

Intuitive UIs

Design principles for interfaces that feel obvious — affordances, progressive disclosure, feedback loops, and the laws that govern them.

Internal notes

Intuitive interfaces aren't art — they're the deliberate application of a small set of cognitive principles. Get the big eight right and the interface feels obvious to use. Skip them and even beautiful UIs frustrate users.

The eight principles we apply

Each one with the reasoning and how it shows up in Pixelbase.

Affordances

Why: Visual signals that tell users what something does — underlines on links, raised buttons, hand cursors.

Apply: Don't strip these in pursuit of minimalism. A button that looks clickable converts better than one that's mysterious.

Progressive disclosure

Why: Show the user only what they need at this step. Hide complexity behind "Advanced" toggles or later steps.

Apply: Form fields, settings panels, onboarding flows — almost always benefit from progressive reveal.

Information density

Why: Dense interfaces are FASTER for experts (think Bloomberg terminal). Sparse interfaces are gentler for newcomers.

Apply: Decide which audience the page serves and lean accordingly. Most product pages target newcomers; admin tools can be dense.

Fitts's Law

Why: Time to acquire a target depends on its size and distance. Big nearby targets are faster than small far-away ones.

Apply: Primary CTAs should be large and central. Destructive actions (Delete) should be small, far, and behind confirmation.

Hick's Law

Why: Decision time grows with the number of options. More choices = slower decisions = higher bounce.

Apply: One primary action per screen. Bury secondary options. Don't put 12 menu items in your top nav.

Recognition over recall

Why: Users find it easier to recognize an option from a list than to remember it from nothing. Menus > command line for most.

Apply: Autocomplete, history, recent items, visible nav. Never make the user remember a command, ID, or path.

Feedback loops

Why: Every user action should have a visible response within 100ms — a hover, a state change, a loading indicator.

Apply: Optimistic UI for fast feedback. Skeleton screens during data fetch. Toast notifications after success.

Error prevention > error recovery

Why: Stopping the user from making a mistake (disabled state, confirmation, validation) beats helping them recover.

Apply: Disable buttons until prerequisites met. Validate inline. Confirm destructive actions. Make undo easy when something does go wrong.

Heuristic checklist for new designs

  • Can a first-time user identify the primary action within 3 seconds?
  • Does every clickable element look clickable (not naked text)?
  • Are destructive actions (delete, cancel) visually distinct from primary actions?
  • Does the page work on mobile without horizontal scroll?
  • Does every form field have inline validation + a clear error message?
  • Are loading states present for any action > 200ms?
  • Is there a way to undo destructive actions (or a confirmation before them)?
  • Does the user always know where they are (breadcrumb, page title, active nav)?
  • Does the empty state explain what should be here and how to get it?
  • Are keyboard shortcuts available for power users (without requiring them)?

Things we got wrong and re-shipped

Removed underlines from links in body copy for "cleaner" look.

Click-through dropped ~30%. Restored underlines on inline links. Visual cleanliness lost to functional clarity.

Used icons-only for nav items (no labels).

Misclicks tripled on mobile. Added labels. Recognition > recall — applies even to obvious-seeming icons.

Made the primary CTA the same size as secondary actions.

Sign-up conversion dropped ~20%. Restored visual hierarchy. One action should clearly be THE action.

Hid important settings 3 clicks deep behind "Advanced."

Support tickets spiked. Promoted to top level with a clear label. Progressive disclosure has limits.

Mobile-specific patterns we follow

  • Thumb-zone primary actions. Bottom-right or bottom-center for one-handed reach. Top-right is for power users.
  • Minimum 44pt tap targets. Apple HIG / Material Design baseline. Smaller = misclicks = frustration.
  • No hover-only interactions. Hover doesn't exist on touch. Anything important must work on tap.
  • Keyboard-aware layout. Forms should keep the active field visible when the keyboard opens — never hide it.
  • Swipe gestures with discoverability. Swipe-to-delete is great, but always pair with a visible button alternative.

References we keep coming back to

  • Don Norman, The Design of Everyday Things — affordances, signifiers, the gulf of evaluation
  • Jakob Nielsen, 10 Usability Heuristics — still the most cited heuristics in the field
  • Refactoring UI (Adam Wathan / Steve Schoger) — practical visual design rules with examples
  • Lukew Wroblewski, Mobile First — mobile constraints as forcing function for clarity
  • Laws of UX (lawsofux.com) — Hick's, Fitts's, Miller's, Tesler's, etc.

Related research

Pair with our Bounce Rate and SEO notes — usability and retention are deeply linked.

All research notes