A button only ever asked you one question

Hover feedback should answer a question the person actually has. The pointer’s speed, direction and dwell tell you which one.

Move your mouse across any website and count what the buttons notice. Almost all of them notice one thing: you arrived. The background darkens, the border brightens, the cursor becomes a hand. Leave, and it undoes itself. That is the whole conversation, and it has been the whole conversation since CSS gave us :hover in the late nineties.

Meanwhile the pointer is telling you how fast you came, from which side, whether you slowed down as you got close, and whether you are resting or passing through. Every one of those is a signal about intent, and we throw all of them away at the edge of the button.

I built 131 variations of the same button to find out what happens if you keep them. This is what I learned about which signals mean something, and about the much shorter list of times a button should admit it was listening.

What the pointer knows

Speed. A fast arrival means a target you chose before you moved. A slow one means you are still looking. Fitts’s law describes the first case: the time to reach a target depends on how far it is and how big it is, and the motion ends in a deceleration as the hand homes in. That deceleration is the moment of decision, visible in the cursor.

Direction. The side you enter from is the side you came from. A button that knows this knows what you were just looking at.

Dwell. Resting on something is close to reading it. People hover on a destructive action for longer than they hover on “Next”. The pause is the hesitation.

Hold. Pressing and not releasing is a question, not a command.

None of this is exotic. It is all in one pointer event stream the browser already sends.

Three ways a button can answer

Once you keep the signals, the button can respond in three families, and each one says a different thing to the person.

Physics says “I am a thing you can push”. The button behaves like a material. Push into one and its border wobbles like jelly, twelve points on the edge pulling on their neighbours. Sweep past another and it swings like a pendulum and settles. Drag a third and it stretches toward you like a rubber band, then snaps back with a little overshoot. Apple made this case at WWDC in 2018 under the name fluid interfaces: motion that continues the gesture rather than playing a canned clip. The feeling is tactile, and it belongs in products that want to feel like objects. It is wrong for a bank.

Morph says “I know where you are”. The shape changes toward the pointer. The nearest corner rounds off as you approach it. The corners chamfer at 45 degrees. The top edge leans toward your x position and the bottom edge leans away, so the rectangle becomes a parallelogram pointing at you. This is useful in dense interfaces, where the real question is which of eight targets is under you, and a shape that points back at the cursor answers it faster than a colour change.

Focus says “I noticed you are considering this”. The button responds to attention itself. The letter under the pointer sinks a few pixels like a pressed key. The whole label grows heavier the longer you rest on it, from a regular weight to a black one over about a second. This is the family for costly actions. Delete, Send, Pay. The dwell is the hesitation, and the button acknowledges it instead of hurrying the person through.

The question test

Feedback has to answer a question the person actually has at that moment. Plain hover answers “can I click this?”, and that is a real question, which is why it has lasted. Physics answers “what is this made of?”. Morph answers “which one am I on?”. Focus answers “did it notice I am hesitating?”.

If you cannot name the question, delete the effect. This is where most micro-interaction showcases fail, including a lot of mine. The effect answers “is the designer good?”, which is a question nobody using the product has.

A second test follows from the first. If the answer would still be true without the effect, the effect is decoration. A rubber-band button on a form that submits once is lying about what it is made of.

A worked example: the Delete button

Take a Delete button on a settings page. It is the control people hover on longest and press least, which makes it the best place to watch the three families fail and succeed.

Give it jelly and it says “I am soft, push me”. That is the opposite of what the moment needs. The person is deciding whether to lose something, and the button is inviting a poke. Physics answers a question nobody asked.

Give it a morph and it says “I know you are here”. Harmless, but empty. There is one button in the row, so “which one am I on” was never in doubt. The morph is a tell that the designer had a tool and wanted to use it.

Give it weight by dwell and it says “I see you pausing”. The label thickens over the second it takes to reconsider, and if the person leaves, it lets go. On the keyboard the same thing happens on focus. That is the one answer that matches the question in the room, and it costs nothing when the person is sure: a fast arrival and a press never show the weight at all.

Then run the second test. Remove the dwell weight and the Delete button still deletes, and still has its confirm dialog. So the effect is not load-bearing, which is exactly what you want from feedback on a destructive action. It helps the hesitant and stays out of the way of the certain.

Who gets nothing

Touch has no hover. On a phone, every signal above arrives at the same instant as the tap, so there is no approach to read and no dwell to measure. That means none of this may carry information a touch user needs. Hover feedback can be garnish. It can never be the only place a state is shown.

Keyboard users get a version of exactly one family. Focus translates: a label that grows heavier on hover can grow heavier on keyboard focus too, and it should, because the keyboard user has the same hesitation and gets the same acknowledgement. Physics and morph do not translate, because there is no approach to react to.

People who turn on reduced motion get a colour change. Every specimen I built collapses to that under prefers-reduced-motion, and the colour change is the one Material Design’s state layer already gives everyone. That baseline is the floor. Everything in this article sits on top of it and nothing replaces it.

Saying it in numbers

The reason most of this never ships is that it arrives in a design review as an adjective. “Can it feel more tactile?” has no answer an engineer can build. The vocabulary above does, and each family is fully described by three or four numbers.

For physics: how far from the edge the pointer starts to count (36 pixels on a 160 pixel wide button, in the jelly), how stiff the material is, and how long it takes to settle back to a rectangle (under a second, or it reads as broken). For morph: the largest deformation allowed (a 22 pixel radius on the nearest corner, a 16 pixel chamfer) and the ease back. For focus: how long a rest counts as dwell (about a second to full weight) and what happens on leave (it lets go at the same speed).

Four lines of numbers in a ticket is the whole specification. It also makes the restraint testable: if you cannot fill them in, you do not have a design yet, you have an adjective.

What this is not

It is not an argument for more motion. I made 131 of these and I would ship maybe five. I built them so the question can be asked with a working thing in front of you instead of an adjective in a design review. “Playful” and “tactile” are not specifications. A pendulum with a damping value is.

Next time you write :hover, ask what the button noticed. Then ask whether it should say so.

A button only ever asked you one question was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.