2

First, I am a programmer, not a designer hence my question.

I am working on a project where almost every row in all of the tables are clickable. To demonstrate this, the cursor turns into a pointer, rather than the arrow.

Now, I have received feedback from a couple of designers saying to add a hover style to the clickable rows. Why is this necessary? I am going to implement a hover style because of the feedback, but I am wondering why the cursor change isn't enough to show that it is clickable.

Addituonally, when hovering a row, is it better to change background color, text color, or underlining of all the text in the row?

Improve this question
3
  • Hi Drew. Can you include an image of your interface to help with answering the "Expanding" part of your question?
    – Nicholas Pappas
    Jan 17, 2015 at 3:16
  • "Expanding" was a really bad word choice, I changed it to "additionally." Is it better to have a row hover color, or just underline the text in the row
    – Dan Drews
    Jan 17, 2015 at 3:36
  • 1
    Right, I got that, but a generic "use color" or "use underline" doesn't fit all UIs. Material Design, for example, uses a z-order increase on hover. If you can include an image of the UI, it gives us a better idea of what mechanism works better than others.
    – Nicholas Pappas
    Jan 17, 2015 at 3:51

2 Answers 2

Reset to default
3

Since hovering isn't really an option for mobile devices I'm assuming you are targeting a table of data in a web browser.

Change only the background color using a light neutral color

  • This helps tie the individual cell values together.
  • It should not mess up the positioning of the data (i.e. making the text bold or underline could change the size of the row forcing other things on the page to move slightly)
  • If the cursor also changes to a pointer it indicates that the entire row is clickable (not just the icon on the far left)

Adding a single pixel border around the entire row is another option to consider as long as nothing on the page changes position (i.e. the borders are always there and transparent and only the color changes on hover)

The primary indicator of something being clickable on a web page is blue text with blue underline because the pattern is so old and well known. The secondary indicator of something being clickable is the cursor pointer.

Although highlighting a row doesn't indicate click-ability in and of itself it is a good idea anyway for the reasons listed above as long as it isn't distracting.

Improve this answer
1

** is this needed?**

  • it depends, unless users implicitly know they can click everything then i would say yes

  • if there are tool tips or a walkthrough to help users initially then it may be overkill

Whats the best way to do this? - I personally am a fan of bolding or changing the border to show that you can click it. The pointer also works. - I dont like the background color because some users may be colorblind and some apps just track the hover state of the mouse by changing the color of the element.

A possible argument for why this may not be the best experience

  • Mobile & Tablets There are no hover states. This experience is completely leaves out any mobile users. Thus a tool tip (maybe a little ? icon in a bubble or a screen overlay explaining the features would better meet your needs. Unless you dont think anyone would ever use this on a touchscreen. But i think it may be a mistake to assume every user will be using a mouse.
Improve this answer

Your Answer

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

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