I have this scenario:


When hovering over a category name, the elements from the grid that do NOT belong to that category fade out, so the ones that belong can stand out.

I am not sure if this is a correct response to the user interaction.

  • On one hand the elements to be seen end up having the correct state which is full opacity over those that don't belong.
  • On the other hand I find it strange that the elements that interact are the ones that don't belong to the selection.

Options I thought about are:

  • Doing the interaction in the belonging elements using other way of exposing them which is not opacity.

  • Having the opacity kind of middle point from the start and raising it to the belonging elements. But it is inconvenient to need a user interaction to display the elements with full opacity.

I am interested in using opacity. Is the interaction correct? Any thoughts?

  • I can see your point about it feeling strange that the non-participants are the ones that change their state. But I look at it as the participants causing the others to fade back. I.e., although it's the non-participants that change state, the state-change is in response to selection of the participants, who "push the others out of the light", as it were.
    – MMacD
    Nov 26 '16 at 17:14
  • 1
    I like the "non-participants" term. Although what you say is correct, it feels strange.
    – Alvaro
    Nov 26 '16 at 18:32
  • It does, doesn't it. And yet, if we just look at it in a naive way, it "looks right".
    – MMacD
    Nov 26 '16 at 18:39
  • 1
    This is how filters work: you start with the full set, and end up with subset. The result seems to be understandable for users. I don't think users will think of it, they just will consume the result. Nov 26 '16 at 19:01

I think you're doing the right thing. While it is true that the 'inactive' elements are the ones that are animating, it's the state they're animating towards that's important. The elements that haven't fadd out now carry a lot more visual weight than the others.

Visual weight is a measure of the force that an element exerts to attract the eye. Two-dimensional objects can attract attention. The more an element attracts the eye, the greater its visual weight.

If, instead, you highlight the elements that belong to the selected category, you still have the effect of them being 'heavier', but you've also greatly increased the total weight of your page. The eye is still being attracted quite a lot to the elements that are not selected, just not as much as the elements that are.

This is not mentioned in the article, but I think you can think of the total weight of the elements that are in-view at the same time as visual load. If there's a huge amount of visual load, it's less clear where you actually want to look, it takes a lot more mental capacity.

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.