Very simple. A user is moving a mouse over a web page. Every element the mouse moves over receives a highlight as the mouse touches it, and the highlight is not there when the mouse is not touching it. Therefore only one element receives a highlight at any point in time. If any other elements have a highlight they receive at most 1/n strength of the highlight (where n is the number of other elements, besides the main tracked one, that received this highlight). This condition means that, effectively, the highlight is only for 1 area at a time.


Let's be as efficient as possible. As visually attention grabbing as possible, without being jarring. And hopefully as aesthetically pleasing as possible.

I thought about some options, but unless people demand I won't bore you with those. I'm not a UX guy but kind of wish I was since I am interested in how to make this UX the best, most helpful possible.

  • > "Let's be as efficient as possible." Do you mean efficiency from a software perspective? That's out of scope for this community. People may be able to help with your second requirement to be "visually attention grabbing", but it's useful to provide some context, i.e., what are you displaying and for what purpose. Commented Mar 4, 2013 at 13:31
  • It's okay, I mean visual efficiency. As in, least visual attention required, and least visually fatiguing. Say if the highlight took 10 seconds to fade, that's a lot longer than the typical user would take to navigate around all elements, leaving them permanently highlighted. Also efficiency means the most impact with least effort. Commented Mar 4, 2013 at 13:34
  • 1
    I don't think this problem is decidable in the general case. Both the overall visual design and the contexts of use must be considered before you can make a strong case for the effectiveness of any particular technique. To take an extreme example, let's say you decide that underlining is the most effective way to highlight a UI element. Therefore, because it is the best, you apply it to every piece of UI on the page. Unfortunately, by making each piece of UI react the same way, you have defeated your own purpose of calling out specific elements. Commented Mar 4, 2013 at 14:00
  • I dug up this poster from IASDR'09 that describes a methodology for evaluating dynamic elements on a page. It's not particularly good, but it codifies some of the considerations that need to be addressed. Commented Mar 4, 2013 at 14:06

1 Answer 1


You mean something like what Firebug does when inspecting elements? A simple css hover tag should take care of it. See the example here

Or did you have something else in mind? Are you talking about keeping a list of highlighted items and then decreasing the intensity of the highlight as they get lower in the list? or as time progresses?

The question is not quite clear. An example would better explain the desired goal.

/note: Did not add as comment, as I don't have the privilege yet, otherwise I would have.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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