Daan Balm
/sandbox/clickable-notes
Working out how a handwritten note should admit that it’s a link. Hover answers it on a laptop, and only if you happen to drag the cursor over the right words. On a phone nothing answers it at all.
Every specimen below is a real link. Tap them.
1. Today — lasso on hover
The baseline. Nothing at rest, so on a phone this is handwriting that happens to be tappable, with no way to know.
2. Plain CSS underline
Unmistakably a link, and available everywhere. But a perfectly level rule under a hand-drawn face is the thing you said looks wrong — it's a different tool touching the paper.
3. Drawn underline
My pick. Same pen as the lasso, so it doesn't introduce a second visual language — it just says someone underlined this. Works at rest, on every device.
4. Drawn underline, gone over twice
The same idea with more conviction — like underlining something and then going back over it. Heavier; probably too much if several links sit near each other.
5. Drawn dashes
Quieter than a solid stroke, and the broken line reads as tentative rather than emphatic — which suits the looser notes. Can look like a spellcheck squiggle at small sizes.
6. Resting lasso
One shape instead of two, and a phone reader learns the same mark they'd later meet on a laptop. But a circle at rest is loud — put three on a page and it starts to look scribbled over.
7. Highlighter
The most obviously tappable of the lot, and very notepad. But it shouts — it reads as 'this is the important bit' rather than 'this is a link', which is a different claim.
8. Drawn brackets
Borrows from the [ bracket already on /experience, so it's house vocabulary. Subtle enough that it may not register as an affordance at all on a phone.
9. Drawn underline + lasso on hover
Two tiers: the underline is there at rest so you know it's a link, and the lasso still draws itself on when a cursor arrives. Discovery for phones, flourish kept for laptops.
10. Marked fragment, not the whole note
The same underline, but only under the words that name the destination — the 'click here' pattern. The longer notes stop being one big underlined paragraph, and the mark lands on the part that says where you're going.
Settled on 9, with the mark applied to a fragment as in 10.