Simple 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.

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.

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 changes are improving on the user experience and not taking away from it.

4- Focus states should be clearly visible

Another obvious tip but some focus states are barely visible. Yes, I mean those that have the tiniest amount of contrast between any other component state. 

Focus states can look good, as I mentioned in the previous tip, so please make sure that a user can quickly and easily identify them.

And make sure to turn off the ability to focus on elements that are currently hidden, such as off-screen menus.

‍

5- One at a time

You can't interact with two components at the one time, so you shouldn't be able to focus on multiple components at the same time either. 

Make sure to only focus on a single component at a time.

6- And lastly, try it out

This is a tip for live sites, and prototypes. But take a few minutes to try it out. Spend some time just navigating with a keyboard or screen reader. 

1. Can you navigate through the user interface in the way you expected?
2. Is it obvious where you're located in the user interface?
3. Did anything unexpected happen?
   

Three simple questions that you can answer with a few minutes of playing around. So make sure to try it out!

‍

Useful Resources

Here is a list of resources that helped me write this article and will help you better understand designing user interfaces for all.

Material Design Interaction Guidelines

NNG Keyboard-Only Navigation for Improved Accessibility

A11Y Project Checklist