15

My team is building a Material Design table component. The Material Design guidelines on data tables state:

Row hover (Desktop)

Display a background in a table row if a user hovers over any part of that row.

Material Design mockup showing a data table. One of the rows is highlighted and has a mouse cursor over it.

It is worth noting that our data tables don't have checkboxes or other selection controls on them. They're read only.

Does this make sense for a non-interactive data table? Would users expect to be able to highlight rows on hover? Does it help with readability?

  • 5
    If they were highlighted on hover, it would make me try and click on them. – Lee Kowalkowski Jul 14 '17 at 22:11
37

Yes. Just yes.

Though I do UX work, I am speaking as a user on this one. As a user, I very much want you to help me easily follow a row of data from end to end. I want to easily be able to see what lines up and what goes with what.

It is too easy for me to look at a column on one side of a row, then to look at what I think is the opposite side of the same row but which is actually the row above or below it. I do this accidentally all the time on interfaces which do not help me. I end up physically tracing across with my finger on the monitor to help me ensure I'm looking at the same row end to end. That is slow, frustrating, and error prone. Please help me.

As for some of the sub-questions:

  1. Does this make sense for a non-interactive data table?

    a. Yes! I do use this feature to assist me even in read-only tables.

  2. Would users expect to be able to highlight rows on hover?

    a. I do not expect it, per se, since lots of interfaces (unfortunately) do not do it. But I hope for it and am annoyed when there is no such assistance.

    b. If you meant "Would users expect to be able to select..." (or otherwise be actionable): possibly. Some users might wonder if that means they are clickable, but they will quickly realize they are not. If some users think the row is actionable and accidentally waste a few seconds and a few clicks, that annoyance is overshadowed by table readability annoyances.

  3. Does it help with readability?

    c. Yes! Very much. Just as someone commented, I often select a row-heading in Excel even if I have no intention of editing that row; I do it to help with readability for that row.

Another option for readability: @Tulains Córdova suggested the alternating colors approach. That is also a good idea, except that the pictures provided showed colors that contrasted too much. Best of both worlds: Use very low contrasting, alternating colors (white and a very light grey, for example), and use a higher contrasting highlight color for the single mouse-over row.

  • 4
    Not unconditionally, though, but especially when the table is wide, is widely spaced, or contains controls on the far right. – KlaymenDK Jul 15 '17 at 8:36
  • 4
    I agree. This is the reason I usually select a row in Excel - just for the sake of making the deciphering easier. – WoJ Jul 15 '17 at 15:33
  • 3
    Alternating row colors (white and light green) have been used way before computer displays for that purposes allowing the reader to easily follow a line of text across the page. If that were used, there would be no need for amimation. – Tulains Córdova Jul 15 '17 at 23:51
  • @TulainsCórdova: Yes and.... no. When the rows are "thin" (in terms of height/length ratio), even with two alternating colors it seems to "blur" after a while. Maybe with more than 2 colors, but then you have issue with color blindness, ... On the other hand, a uniformly colored table which highlight the one row of interest is awesome. – Matthieu M. Jul 17 '17 at 7:29
  • Though I appreciate all the diverse and insightful answers, I'll go with the popular vote and accept this one. The benefits cited (readability, easier parsing and navigation) outweigh the drawbacks of having a hover state on non-interactive elements. – jSepia Jul 21 '17 at 20:05
7

Material Design is a framework with guidelines (it's comprehensive but a starting point): Test with users to determine what's best for them.

Have you also considered striped rows (zebra stripes) if you think users need to read carefully? It sounds like they won't perform any selection or operations.

One aspect of zebra stripes is that they clearly show separate rows without the user interacting with the table.

Relying on hover states might indicate potential interactivity with the data (and selection or operations), which in your case is not the intention.

There's an article (a bit older now) on A List Apart:

Zebra Striping: More Data for the Case

She has a rigorous study (even testing types of striping to see if it improves legibility), and in the end she states:

if you are designing an application or website that contains data tables, don’t let personal preference, habit, or the (untested) status quo drive your design decisions—go out there and get some user data.

Material Design is amazing (I use it constantly), but it can't account for every need or scenario (they even state it's a guideline). Test and find out what works for your own users.

  • 2
    For some reason, every once in a while I find striping to be somewhat visually noisy compared to hover highlighting (although the downside is hover highlighting doesn't help on mouseless devices). I seem to feel this way more for wider tables when your eyes have to scan a significant horizontal distance, where it's still hard to track the striping all the way across the screen. – Jason C Jul 15 '17 at 0:45
  • 1
    @JasonC Striping (alternating row colors) should used a light color pallete. – Tulains Córdova Jul 16 '17 at 18:57
7

TL;DR

No, alternate row colors instead.

Long answer:

Alternating row colors (usually white and light green) to make it easier to read lines in wide reports have been used way before computer displays.

If that table had alternating colors to beging with, there would be no need for highliting the row when hovering over it.

enter image description here

Above: Green bar continuous paper

enter image description here

Above: Alternating row colors in a computer report

enter image description here

Above: Less constrast is easier on the eyes though

Sometimes the itch for adding animated bells and whistles causes us to move away from simple, traditional and time-tested usability solutions.

Besides, highlighting on hover can convey the false hint that the row is clickable or actionable.

  • Be wary of using the rationale "it's been like that for a long time, therefore...". This doesn't take into consideration advances in user testing and technology. For instance, using the age-old report example, the user didn't have a cursor they could point at when using a paper report, so it's not exactly the same as an online report. It also adds a lot of visual clutter which users don't need. Highlighting on hover can convey the false hint that the row is clickable or actionable = fair, although a pointer cursor vs. normal cursor can emphasise this distinction. – dKen Jul 16 '17 at 11:26
  • I personally find this example difficult to scan, finding my eyes focus only on either the blue or the white rows. While that is n=1, I would advice user testing to see if people can find their target easily enough in such a setup. – Inca Jul 16 '17 at 12:18
  • @dKen In the paper example the cursor where their fingers or a ruler. In the computer report example (seond picture) they had cursors. – Tulains Córdova Jul 16 '17 at 15:08
  • 1
    An alternative way of coloring rows is to change the color every two or three rows. Anecdotally I find this much easier on the eyes than color changing with every row. And I'd wager that dyslexics would nod in agreement for reasons that are similar to why they read better with larger letter and word spacing. – Denis de Bernardy Jul 16 '17 at 17:03
  • 1
    I recollect seeing it all over the place in AD&D 2nd edition. No idea if it was still being done in later editions let alone nowadays. But I recollect that the contrast in readability between tables in the latter and tables in other RPG manuals in the late 80s and the 90s was very high. Arguably, these always were tables with an index in the left-most or right-most column, leaving little to no room for confusion. But easier on the eye they surely were IMO. – Denis de Bernardy Jul 16 '17 at 18:48
3

Highlighting doesn't necessarily imply interactivity, they also help the user maintain his horizontal line. Tables which are particularly dense or sparse on one or both axes can make it difficult to stay on one line.

Material design guidelines already recommend enough whitespace to avoid being too dense, but don't necessarily prevent sparseness from becoming problematic.

However, hover states are problematic because of their relationship to pointer devices, which can create accessibility issues. They are also problematic on mobile. Inca is also right to point out that if there is an interactive element within a highlighted region, the expectation may be that the highlight implies said interaction -- in your example, the checkbox.

So if you think that strong visual separation is a necessary feature, consider a static alternative - e.g., the zebra striping Mike M suggests.

2

It does help with readability, especially if the table is wide, but in the example you give, I think people will expect such a hover-effect to indicate the checkbox will be marked.

This can be a valid action, if marking the checkbox will be something that needs to be done a lot, or it can be too much if checking the box is very rare, other actions (like selecting text for copy-paste) are more common, or the action that will be taken is destructive. (Then it's better to have the checking only on the actual checkbox.)

It's also worth considering how much the users will need the individual rows and the information across the table. If they are generally scanning the whole list for a reference and the details on the right are nice but generally not important, a hover-effect will more likely disrupt than help, and require people to move the mouse out of their way to have an unobstructed view.

So, definitely test with your actual users and get their feedback if it's important. Only they can tell how important readability of a single row really is and how hovering or not affects it.

To give some other options: you can also consider changing the border color on the rules on hover, especially the bottom border, or change text color, or have gradients on the row above and below. (Be careful with changing font weight or border-widths, as that may lead to reflow and movement.)

2

I'd only use it where it actually helps: If it's hard to visually keep track of what's happening without it. Otherwise it seems to add unnecessary visual complexity.

In a very large table, it does help track rows visually. I've found that, as long as this is justified, it is worth the initial step of "user possibly wants to click, finds out they can't" (reddish row has mouse pointer over it, sorry for all the blurring):

enter image description here

I find it to be less visually noisy than even/odd row coloring when there's a lot of information being presented:

enter image description here

The obvious downside to the highlighting, of course, is it doesn't do much good on pointerless devices (the pages above are very much intended for desktop use).

In your case, though, the highlighting doesn't seem functionally necessary imo.

As for sticking to material design guidelines, that's really up to you. I'm not a big fan of strict material design myself, way too much guessing and memorizing what icons mean because of its inexplicable quest to rid the world of text, and a bit heavy on whitespace. You can be somewhat flexible, the material design police won't bust your door down (yet), as long as your UI stays clear and sane.

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.