Hover can add, but never hide
A rule I set while designing the cards for this Lab: the resting state has to work on its own.
If hover never happened, could someone still decide whether to click?
While designing the cards for this Lab, I went back and forth between two ideas: image-only cards where the title appears on hover, or text cards where the image appears on hover. Both looked clean in Figma.
Both had the same flaw. Each one hid half the card. With image-only cards, a recruiter skimming the page can't tell what anything is, and Notes without an image have nothing to show. And phones have no hover at all, so whatever lives there disappears for good.
So I set a rule: hover can add, but never hide. The resting state has to work on its own.
The test I use now: if hover never happened, could someone still decide whether to click?
In practice:
- Always visible: title, format (Log or Note), cover and the "Worked on" date
- Added on hover: the summary, tags and a slight zoom
- Keyboard too: anything that appears on hover also appears on focus
Think of a bookstore shelf. The cover draws you in, but the spine still has to show the title. Hover is picking up the book, and plenty of people never do.
What worked
What didn't
If hover never happened, could someone still decide whether to click?
