Kill Your Clever Focus States

Where did my cursor go?!

You know that feeling you get when you can’t find your mouse cursor. It just kind of disappears. It happens to me often because I have a mouse that I really like and at some point they stop working so well (I’m not updating it till it is really, really dead…).

What if you think your mouse stopped working but in reality the cursor changed in an unexpected way? Perhaps because some developer did something clever. Have you ever had THAT happen?

If you said ‘yes’, I’m betting it was either on a very “artistic” style site, or that it happened a very long time ago (I mean geocities-long time ago).

When this occurred. I bet you did not say: “Wow, that is so cute, I really liked not being able to find my mouse pointer for a moment and then getting confused again the next time I hovered over the same area, until I realized it was clever little thing you did changing up my mouse pointer on that spot… So great!”

So Great?!

You didn’t say that. At least I doubt that you did, because when developers change up how we expect our interaction tools to work in the interface it tends to be annoying and frustrating.

Think about how you typically work with a mouse.

Most of the time you see the little arrow pointer. Sometimes you will see a little pointer shaped like a finger, and instantly know without even thinking about it that that element you are over is interactive and probably a link — possibly a button.

If you see a little hand with fingers extended your brain gets a little subtle signal that you are over a draggable item. It is actually pretty cool how useful these tiny indicators are.

And finally the input cursor. When you see the little line for an input cursor, you expect to be able to write something into that area.

That is most of what you will use on any given day, and the magic of how effective those visual indicators are is in the fact that they are visible, consistent, and predictable. It took very little to train your brain to know that a finger pointer indicates a link, and a hand means ‘drag’, and a vertical line means ‘type’. I bet you use those every single day.

Meet your keyboard users

So let’s talk about your keyboard users and what designers do to them when they inadvertently miss the point of having visibly obvious focus states.

Keyboard users navigate your site using the keyboard. In order to do this they need a clear visual indicator of what item on the page has focus (it is usually a blue outline, but can vary by browser and site).

It is literally how they can tell if they are on top of a button they want to click on or in the input field they want to type in. They typically use the ‘tab’ key and ‘shift + tab’ to navigate through a page. They also may use arrow keys to scroll the page up and down.

Interactive items get focus states, when a keyboard user navigates to that item, the focus state appears giving them a visual indicator of where they are on the page and allowing them to interact with the focusable interactive element. Feel free to try it.

Along comes design

Along comes a designer and they are told that to meet accessibility standards they need a visible focus state on all of their interactive elements, but they don’t like that pesky blue outline. So they decided to do something clever, something subtle, something pretty and sophisticated.

The result is a horribly inconsistent experience for keyboard users, a focus indicator that disappears, when in fact the focus state has changed to a subtle shade of gray or a deepened box shadow.

That predictability of our interactive visual indicators is very important!

You shouldn’t be dramatically changing the appearance of your focus states across your site except when there is a really good reason to — like because the focus state outline is too close in color to the color behind it making the visibility poor. Or maybe you want to give a clear indicator that this part of the menu system is a bit different from the other parts. But only do it if you can clearly communicate that message.

Outside of those types of scenarios you should stay very consistent — every button and link should get the exact same style of clearly visible outline on focus. Keep it to an outline or border unless you have an expert design team and user research to back it up, and even then predictability is paramount.

For example, don’t do subtle background color changes unless it makes sense to do that across all of the buttons, links and inputs on your site, and even then you should make it a visually obvious change.

Focus is for your users not to exercise your design chops

That focus state is for your users. It is for the literal usability of your site for keyboard users and other assistive technology users. I know if feels very satisfying to meet an accessibility requirement via clever design skills, but if your skills aren’t serving the user experience of the people that need those focus states, then your beautiful design is an epic fail.