Ensure to design a focus indicator for interactive elements
Posted on January 3, 2024
- Every interactive element must have a focused state
- Favour a two-colour focus indicator which works well over pale and dark backgrounds
This article is part of a series on user interface micro interactions and how they affect the user experience.
A focus indicator—also named a “focus ring”—is a visible outline on the element with which the user is currently interacting.
This allows users to know where their cursor is located, or with which element they are currently interacting.
The best known instance of this component is on text input fields, which often show a glow or outline to indicate that they are in focus. Every interactive element must have a focused state.
Every interactive element needs a focused state. Most likely, each element will use the same style to indicate the focused state, but there may be cases when the style differs.
Favour a two-colour focus indicator
Note that the focus indicator must be of sufficient contrast relative to its surrounding, and thus it’s unlikely that a single colour will work in all contexts.
The examples above are using the same purple outline as a focus indicator as the image below the heading of this section. However, as can be seen, over a black background, that purple outline is not contrasted enough to be visible.
The solution to this design pattern problem is to use a two-colour focus indicator, which can be seen in the right column of the image above. While the purple may disappear in the black background, the white outline remains quite visible and provides a sufficient contrast with the previous state.
When should the focus indicator be visible?
The main reason for this indicator is to bring attention to an interactive element. Sighted users that navigate a screen with a mouse and cursor do not depend as much on this element, however users that navigate the screen with a keyboard absolutely depend on knowing which element is focused at any time.
The focus indicator is not necessary for sighted users when they click around. However, any input field must show the focus indicator when a user has placed focus on it, as the cursor usually disappears as users type.
If the user starts using Tab or Shift + Tab to navigate in the site, then every interactive element should display its focused state when in focus.
Dos and don’ts
- Ensure all interactive elements have a focus indicator
- Detect if users are navigating with the keyboard to show the focus indicators that is most appropriate for them
- Do not rely on the default browser or libraries’ focus indicator styles
- A focus indicator that is too discrete, the indicator must be visually clear
- Hiding or cropping the focus indicator
⚠️ There is no need to show the focus indicator on non-interactive element if users are navigating with the keyboard.
References and Additional Readings
Last updated on February 13, 2024