States

States is how an interactive product comes to life. The states of an element tells a user everything they need to know about it — can it be clicked or tapped? Swiped or dragged? Am I doing things the right way? Well designed states give users confidence — in themselves and in the product.

Hover

A hover state is a promise from the UI: if you click me, something will happen. It gives the user confidence. The user takes a first step by moving the cursor over the element and the element responds with a hover state. It's like a dance — step by step you're being led towards your goal.

Linear's menu provides clear hover states that just feel good. Interestingly, they chose not to change the cursor to a pointer.

The hover state should be big and friendly. The entire clickable area should react in a welcoming way. The visual change should be clear, but not overwhelming.

A welcoming smile, not a mad laughter.

Slack guides you towards your goal. The hover state gives you confidence. If you hesitate, a tooltip shows up and gives you even more information.

Mac OS sometimes provides no hover states at all. Risky for most UIs, but maybe an OS get get away with it.

Focus

Focus states makes it possible to use your app with a keyboard. In other words, if you screw up the focus states, your app becomes impossible to use with a keyboard.

When in doubt, use a highly contrasting, clear outline. Look how nice Twitter is to use with a keyboard.

Use consistent focus states across the app. Something like a clear outline. The design system should make it easy to implement focus states in new components.

[Add Apple music example]

Netlify's focus uses their brand color. It also has a gentle transition.

Gov.uk uses an outline for solid elements and a background for text elements. Since their web site is mostly text based, this combo makes sense for them.

Active

Active states are hard. You might want to provide some feedback when an element is pressed, but you don't want to overdo it. Often, the element will only be active for a few miliseconds, and an aggressive active state can appear like a flicker, which actually reduces confidence in the action.

In a todo app like Things, ticking a checkbox is the most important interaction, so they can afford to make the active state extra clear.

Pressed

Dragged

Context is important

The states above are a good rule of thumb. But the level of interactivity depends on context. If the context makes it obvious that the element is interactive, you might not need as many states.