5

I have several rows of content, with small font icons to the right of each row for actions to take.


UI Sample


I feel these icons clutter up the look of the page, so I am considering a default opacity of 0 on the icons, and then on :hover of the row, to raise the opacity with a rapid CSS transition.

However, I haven't seen this much in the wild, and I'm wondering if it is considered bad UX.

Are there any rules on this?

  • 1
    DPo1: We do basically that and our users seem to like it. – msanford Apr 6 '17 at 19:24
  • Okay thanks. What does DPo1 refer to? – dthree Apr 6 '17 at 19:26
  • 1
    "Data Point of One" (why I made it a comment and not an answer.) – msanford Apr 6 '17 at 19:26
  • 1
    Okay, understood! – dthree Apr 6 '17 at 19:27
  • The Netflix DVD queue does it too, hiding Move and Remove. – Ken Mohnkern Apr 6 '17 at 19:47
3

It is fine to do so usually, because:

  • the repeating controls for the rows may, indeed, create clutter,
  • an action you can perform on a row only makes sense in this particular row context,
  • as the same controls will be hidden for the other rows, User will only see the exact controls they need to operate the currently hovered row.

However, you must remember that:

  • hover actions will not work on mobile (in case you need it),
  • anything that conveys some information that can be different in case of some rows should not be hidden. I can see you have one such thing, which is "Active" switch. It both informs and allows control the data behind it,
  • it is definitely good to bridge all the elements in the row with a highlight on hover, so that the connection between row name and controls is provided (just imagine dots are highlight):

    Foo     Bar                                      [active switch]
    Fig.....Jam............[edit icon].[delete icon].[active switch]
    Fizz    Buzz                                     [active switch]
    

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.