Lab

Interaction studies and experiments, kept apart from client work. Everything here runs on the page, so try it.

Safe triangle

Keeping a submenu open while the pointer travels diagonally towards it, with the triangle drawn so you can see it work.

Safe triangle

Fragrance

Eau de parfum
Eau de toilette
Body mist
Discovery sets
Gift sets

Hover Fragrance, then move straight to Gift sets at the bottom of its panel. With the triangle off, you cross Clothing, Shoes and Accessories on the way and the panel changes under you. Turn it on and try again, or press Replay to watch both.

Tabular numbers

A running timer in Inter and Poppins: proportional digits, tabular-nums, and fixed-width slots for fonts without tabular figures.

Tabular numbers

Defaultproportional digits: 18.41s
tabular-numsequal-width digits: 18.41s
Fixed-width slotseach character in its own box: 18.41s

Watch the s after each number. In Inter, tabular-nums keeps it still. Switch to Poppins and it wobbles again, because the font has nothing to switch to; only the fixed-width slots hold.

Forgiving targets

Two identical dots, one with an exact hit area and one with a 44px forgiving one. Count your misses.

Forgiveness

Exact0 hits · 0 misses

Forgiving0 hits · 0 misses

Both dots look the same. Click each one a few times, quickly, and compare the misses. Then show the hit areas to see why.