Spawn the menu at the pointer
Open the menu at the pointer so every option is equally close.
Rauno Freibergrauno.meThe bigger the target, and the closer it is to where your pointer is, the better.
Rauno Freibergrauno.meRadial menus are an exemplary case of Fitts’s Law. They spawn around the pointer making the size and distance towards any target the same for all actions.
Each round names a color. With the keyboard, focus the canvas and press Enter.
1 · Pick the color
Left: click, then pick. Right: hold, drag, release.
Corner toolbarBad
Last
–Average–Ring at the pointerGood
Last
–Average–/* each option sits on a circle around the press point */
.wedge { translate: calc(cos(var(--a)) * 64px) calc(sin(var(--a)) * 64px); }
/* pick by angle, not by position: any distance past 24px works */
const i = Math.round(((angle + 90 + 360) % 360) / 60) % 6;Why it matters, pros and cons
Why it matters
Reach time grows with distance and shrinks with size. A ring makes both equal.
Pros
- Every option is the same short distance away, wherever you are.
- Direction becomes muscle memory: flick toward blue and release.
- Targets are big, so no precision is needed.
Cons
- Nothing on screen says it exists, so it needs a hint or a shortcut.
- Past six or so options, the wedges get too narrow to hit.
- It needs a hold, which is slower than a click for a one-off action.