Modern operating systems and web browsers lightly highlight text input fields on mouseover:

border highlight example

The highlight is so minimal it's easy to overlook. Other form elements (such as dropdowns) highlight more prominently:

drop down selection highlight example

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?

  • 1
    I don't see it as much different than any other hover state. It shows that you're pointing to it. In the case of an input, you can click in to enter the focus state, in the case of a button you can click for an action. Is your question about "hover" or "focus", as asked below by Gus? – avi Jul 1 '14 at 20:25
  • @avi In the product I have they are highlighting on focus depending on the field type, the boxes will highlight when tabbed into but the drop down fields will not. Some fields also remain highlighted when focus is provided by clicking but again this is not consistent so there is another problem. – user8082 Jul 2 '14 at 8:00

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.

| improve this answer | |
  • Simple but relevant answer, I haven't think of this but is so true. However, is this the mouseover state or the :focus state? – Gus Jul 1 '14 at 17:08
  • @Gus Can vary with implementation. – OJFord Jul 1 '14 at 18:09
  • Alternately: there is no benefit to someone who is not using a mouse OR a keyboard (e.g. mobile users). That's the primary reason hover effects are falling out of vogue. – Andrew Coonce Jul 1 '14 at 22:20
  • 3
    Hover effects are not 'falling out of vogue' as you say. That is ridiculous. This doesn't really vary with the implementation. These are focus effects; not hover effects. If you've seen something similar done on hover then that was basically a designer not understanding the point of this. Smartphones definitely use focus because it is even harder to tell where the cursor is on a smartphone than a desktop. Also, many smartphones have keyboards; even if it isn't built in it is practically a requirement to get a BT keyboard if you want to do any serious typing on your device. Out of space... – krowe Jul 2 '14 at 5:12
  • In the product I have they are highlighting on focus depending on the field type, the boxes will highlight when tabbed into but the drop down fields will not (these just have a dotted outline). Some fields also remain highlighted when focus is provided by clicking but again this is not consistent so there is another problem. – user8082 Jul 2 '14 at 8:07

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.

Good site: http://www.smashingmagazine.com/2008/12/15/10-useful-techniques-to-improve-your-user-interface-designs/

| improve this answer | |

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.

| improve this answer | |

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.

| improve this answer | |

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.