Interaction cost

Not a component. A check to run against any flow before calling it finished. See 04-principles.md, frame 3.

Count the clicks, scrolls, pointer distance, keystrokes, waits and things the user must remember or look up.

Then reduce:

• Keep the action beside the thing it acts on. Distance is cost (Fitts), and a start-aligned action stays visible to screen magnifier users.

  • A control that closes a panel belongs where the control that opened it was, so the pointer or finger does not travel.
  • Give list and menu items a large, visibly bounded target. A border showing the full hit area lets the user be less precise, which is faster.
  • Put a slide-out menu's contents at the top, near its trigger, rather than centred for symmetry.
• Make targets at least --size-touch-target. Bigger targets are faster to hit.
• Cut choices, or promote a recommended subset (Hick). Every extra option slows the decision.
• Replace multi-step controls with single-step ones — stepper over select, toggle over dropdown, inline edit over a modal.
• Remove anything competing for attention with the task: banners, autoplay, unsolicited dialogs.

Reducing choice

Four techniques, in the order to try them (Hick's law):

1. 1.
   Remove. Every option must earn its place. A subscription form asking for first name and company before email is three decisions where one would do — and each field costs completions.
2. 2.
   Group or categorise. Choosing between four categories then four items is faster than choosing from sixteen. Tabs, filters and sections all do this.
3. 3.
   Break into steps. One decision at a time. Long forms become multi-step (P-04); large navigation becomes levelled menus.
4. 4.
   Recommend. Where many choices are equivalent, promote the popular ones — suggested searches, a "most chosen" plan, sensible defaults.

Rule: when a flow changes, state the before and after counts in one line. "3 clicks + 1 scroll → 2 clicks" is a reviewable claim. "Improved the UX" is not.