Three Tries at a Hover State

My homepage intro has a few links with small hover details. Hover "experience" and a row of bars animates above it like a timeline. Hover "collaborations" and a little handshake pops in at its corner. They're tiny, and they're part of why the page feels like mine.

When I added a new sentence linking to my hiring page, I wanted the link, "how hiring works", to get a hover detail too. It took three versions. The first two were more impressive than the third, and worse.

Version one: the preview card

The link goes to a page that explains how working with me goes, so the first idea was to preview that on hover: a small floating card with three numbered steps. Email me, pick a contract, start working.

It looked polished. It was also wrong in three ways:

It covered the text. The card floated over the line above, so hovering the link hid the sentence you were reading.
It replaced the destination. If the hover already tells you the three steps, there's less reason to click. A hover should make you want to follow the link, not make following it unnecessary.
It didn't belong. None of the other links on the page open a card. This one suddenly behaved like a different website.

Version two: the animated track

Next I tried something closer to the "experience" link: three tiny icons above the words, an envelope, a signed document, and a rocket, joined by a thin line. On hover they lit up one after another in blue, and the line filled in between them.

This one fit the page's visual language better, and it was fun to watch. But my honest first reaction to it was one word: simpler.

The problem was attention. The "experience" timeline earns its animation because it's describing a timeline. The hiring sentence is a plain, practical one: I work remotely, here's how hiring works. Making it the most animated thing on the page put the emphasis in the wrong place. It was a detail asking to be noticed in a sentence that didn't need it.

Version three: one icon

The final version does exactly what the "collaborations" link next to it does. The underline darkens, and a small blue briefcase pops in at the corner. That's all.

It took two minutes to build, because it reuses the existing pattern. And it's the right answer, for reasons that have nothing to do with how it looks on its own:

It matches its neighbor. The two links sit in consecutive sentences. Matching behavior makes the page feel designed rather than decorated.
It hints without explaining. A briefcase says "work" and leaves the rest to the page it links to.
It doesn't compete. The page's one elaborate detail stays the timeline, where the animation means something.

The bug that taught the same lesson

There was a small postscript. When I first rewrote the sentence, I put "collaborations" in the middle of a longer line, and its handshake started overlapping the text around it. The icon had been designed for a word at the end of a short sentence, with empty space around it.

The fix wasn't to move the icon. It was to put the sentence back the way the detail expected: "collaborations" closing its own line again. Interaction details are designed for a context, and when the context changes, the detail can break without anything in its code changing.

What makes a good detail

I keep coming back to a few rules after this:

Preview, don't replace. A hover should hint at the destination, not deliver it.
Match the siblings first. Before inventing a new behavior, check what the elements next to it do.
Spend motion where it means something. Animation is emphasis. Use it where the content is about change or time.
Never cover what people are reading. If a detail hides the text around it, it's working against the page.
Build the simplest version early. I could have started with version three. Building the other two first was useful only because it made the simple one obviously right.

None of this shows up in a screenshot. It only shows up when you hover the thing, in place, next to everything else on the page, which is why I'd rather design details like this in the browser than anywhere else.