Focus state ideas
If you’ve ever tabbed your way through a site, you may have noticed outlines that appear around interactive elements like buttons, links, and inputs. These are known as focus states.
The key purpose of focus states is to give a user guidance. Without it, navigation via keyboards or other directional input devices is virtually impossible.
Many people exclusively use keyboards to navigate, and rely on the focus state to know where they are on the page. Focus state users may be a person with limited mobility, someone using a screen reader, or someone who wants to use their keyboard to quickly navigate.
Our team is in the process of a brand evolution and wanted to take a deeper, considered approach as to how we display our focus states.
What you see in this shot is the narrowed down set of ideas that I pursued, but also looked into trying other styles:
• bottom border with a background ⎼
• dashed lines ﹉
• gradient outlines 😱
• outline + glow
• just a glow?
• drop shadows
• animations
• more crazy colors
The majority of the internet is seriously lacking great implementations of focus states. Often times when I'm designing something new, I'll come to Dribbble to skim through a few possible ways others may have solved problems. However, when I performed a search, there were VERY few examples. Though I don't see Dribbble as a trove for truly great answers, sometimes it's just a nice place to start and get inspired. I was disappointed.
For our future implementation, we decided to not just go with the conventional default browser focus state. Though this is conformant, it's not as accessible as it could be. Sometimes there's a color contrast issue with the default colors used by browsers (think blue on blue). The default focus state behavior and styles also change between browsers.
The value of providing custom focus styles is to have a unified, consistent experience across all browsers and to make sure there is sufficient contrast in each use case.
To help us make decisions for our brand and product, we use a Brand Framework that has some simple categories:
It looks:
• uncomplicated
• composed
• modern
It feels:
• dependable
• focused
• intriguing
We used these in narrowing down the options we wanted to pursue most for focus styles. We ultimately chose the outer outline that uses our Glacier Blue color. We'll also ensure that the focus experience works well across different states or UI elements (like darker backgrounds).
The journey of defining our custom focus states was super informative and I think will set us up well for when we actually get to infuse our new brand into our product.
Here are some resources that helped me on this journey:
• https://github.com/WICG/focus-visible/issues/128
• https://cloudfour.com/thinks/designing-button-states/
• https://dev.to/elizabethschafer/designing-button-focus-states-for-better-usability-gm2
• https://css-tricks.com/focusing-on-focus-styles/
• https://zellwk.com/blog/creating-focus-style/
• https://www.w3.org/WAI/test-evaluate/preliminary/#contrast
• https://zellwk.com/blog/design-focus-style/
Sites I looked at for inspiration
• USWDS (United States Web Design System)
• UK Gov (however, some of their implementation of focus states isn't as accessible as it should be):
• IBM Carbon design system
• Deque
There's still lots to learn about what can work best and we still need to do testing, but I'm excited about the beginning of this journey.