Real-World Interaction Pattern
ChatSaveExport

Fitts's Law is a mental model

These three examples are only the start. Use this pattern to keep finding friction, reduce pointer travel, and build your own UI instinct.

1. Keep Related Actions Close

Show the pain first: a cursor in the middle should not chase the UI around.

This is exaggerated on purpose. Both panels show the same chat and the same four actions. The only thing that changes is how far the cursor has to travel.

PainUI example

The same four actions are spread across the four corners

Support Inbox

Customer asks: Can you send the final quote today?

Current target1. Reply
Start
Click the highlighted corner, then continue clockwise
FixUI example

The exact same four actions sit directly under the cursor

Support Inbox

Customer asks: Can you send the final quote today?

Current target1. Reply
Start
Same cursor, now the next four clicks are directly below
2. Make Distant Targets Larger

If the action is far away, make it bigger and anchor it to an edge.

Global actions like Save, Close, or Checkout should be easier to hit when they sit away from the main working area.

PainUI example

A small floating save target

Project Settings
Cursor starts here
FixUI example

A large edge-aligned save target

Project Settings
Cursor starts here
3. Group Similar Actions

Five export options should feel like one export action.

Users do not want to scan a toolbar full of near-identical buttons. Give them one clear entry point, then show the variants, and keep using that instinct in the rest of your UI.

Pain

Five export actions fighting for attention

Scan every label
Quarterly reportLast updated 4 min ago
Download PDFDownload ReportDownload FileDownload .pdfDownload Full PDF
Download PDF
Download as PDF

Fix

One obvious Export PDF button opens the full menu

Click to open
Quarterly reportLast updated 4 min ago

One mental shortcut