User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Modern operating systems and web browsers lightly highlight text input fields on mouseover:
The highlight is so minimal it's easy to overlook. Other form elements (such as dropdowns) highlight more prominently:
Does the subtle highlighting benefit users or is it just unnecessary eye-candy?
Maybe it's more effective for people with vision impairment? Does it work better when using high contrast display settings?
There is at least a single benefit for those not using a mouse - Normally you are able to tab between input elements using the keyboard, this is an indicator as to which element currently has your focus.
After doing some reading it seems that the highlighting in fact does help the user as people have come to be reliant on the UX/UI guiding them through the page and showing where they are focusing as well.
For example if a user is filling out a form and using the "tab" key to jump from area to area they want to see the focus highlight change from what they had focused to what is currently focused.
It is definitely not a waste of time or resources to provide onhover or focus highlights as it simply assists the user in navigating the page. It is a good practice for UX and UI.
As avi said, it shows that you're pointing to it. This is obviously useful if you're not using the mouse, as others mentioned. But it's useful even when you are using the mouse, even though there's a cursor that ideally also shows what you're pointing at.
For example, if your cursor is on the edge of an element, it may not be obvious what's going to happen when you click. This is even more pronounced when the click target isn't exactly the same as the rendered object. (Is the boundary part of those input areas?)
So the highlighting saves needing to either look closely at your cursor and the element, or mousing more precisely to a point that's obviously over the element.
For an exaggerated demonstration, just try to upvote one of the comments on one of the posts on this page. The changing color is definitely helpful. Admittedly those are much smaller targets than an input area, and the highlighting serves to let you know something happens when you click there (which you already probably knew for an input area) but it's the same general idea.
The hit-box for interactive elements may vary, and can be outside the visual button itself. When highlighting, you show the user that the item will be interacted with by clicking.
A Label for an input field is a good example. If you have implemented it correctly with the correct "for" - that should be the same as the input fields "id", a hover on the label will invoke the hover-effect of the input field. A click on the same label will change the focus to the connected input-field.
Regarding the visual design-- the highlight is (and should be) as discreet as it can be, short of being invisible.
When you're not interested in which element has focus (which is most of the time), a prominent highlight would distractingly emphasize some random item. The one time when you do care about focus is when you are changing it, particularly by tabbing; in that case, you can notice even a very subtle visual change, because you're looking directly at the field when the change happens. Our vision is much more sensitive to changes than to static details.
So in fact, the focus indicator could be even subtler-- for example, you could just enlarge a field by 1px when it gets focus. That would depend on color scheme and layout, though, so browsers use the fuzzy blue ring because you'll almost always be able to see that.
