Simple UX design tips for better focus states

Focus states are an essential part of ensuring that a user interface can be navigated by a person not using a mouse. And ensuring that everyone has a positive user experience.

Simply put, a focus state highlights the current element which enables people to navigate and interact with a website using a keyboard or voice control software or technologies.

They are also largely forgotten about for most designers and developers, which generally means that the user experience for a large portion of people is plain awful when they interact with these user interfaces.

So to make the web a little better here are a few simple tips for improving the design of focus states in a user interface.

1- Know what components need a focus state

Any interactive component in your user interface needs a focus state. It is as simple as that. That might sound obvious. But why do we forget to add focus states for clickable list items or cards? Most of the time, we only create focus states for form elements. Things like icons, avatars, cards, list items, grid items, toggles, tooltips, sliders, along with all other interactive components, need a focus state.

Any interactive component in your user interface needs a focus state.

2- And what doesn’t need a focus state

It is also worth noting that not all components need to have a focus state. The simple rule that I follow is if the component is not interactive, then it does not require a focus state. For example, a title or paragraph does not need a focus state. But a link in a paragraph does need a focus state. The same applies to modals, dialogs, navbars, screens as a whole, and so on.

Not all components need to have a focus state

3- Style it so it looks good

Please get rid of the browser default look and style it appropriately. It should look and feel like your visual identity. Styling focus states is all about providing a unified experience for all users. Just make sure that what your…