2

Should links in data tables be styled like regular text links or only have some indication on hover?

For example Shopify tables have default black text color and only change to blue on hover:

enter image description here

I dont want a table full of blue text when each cell has a link as this might be overkill to the experience when viewed as a whole. I also dont know if its best practice to only indicate they are links when the user hovers.

4
  • What platform are you designing for? Desktop or mobile?
    – Nash
    May 3, 2021 at 12:38
  • 1
    Desktop. I feel like the links in tables and headings are implied to be links but not sure this is enough. The visual designer art of me says they look better with only hover color but the usability part of me says they should be obvious to the user. Seems like there is no consistent rule for this, tables on google drive and google analytics differ for example.
    – Neatpixels
    May 3, 2021 at 12:44
  • Anecdotally (hence not appropriate for an Answer), my general impression is that the table doesn't have any obvious links - that is, the styling does not include differing colors or text-decorations - but when you hover over the cell, the text does change color, implying a link (or some other response, e.g., a popup) when clicked. May 3, 2021 at 13:09
  • With product names like this, especially when the list items look like buttons and contains an interactive element already (the checkbox), the discoverability of hidden links is very high. So you can afford to save some visual clutter and just confirm the existence of a link on hover, IMO. Jun 8, 2021 at 3:16

7 Answers 7

1

Its likely that users picked up from other sites, that on this type of items (with title, image, and meta information image and title are clickable.
Click is cheap for them, so its likely they will either way try to click it if they want more information.

Therefore it probably makes no sense to have extra signalisation with blue color. If you want to be explicit you could place "View product" button or link at the end of every row, but in my opinion its an overkill.

0

If it's a table with different contents in each cell I think styling each line of text or word creates too much visual noise as mentioned in the question.

There are much more options, like in the Google video editor:

  • Where there are links the entire row is marked
  • If the links are icons, the information text changes for the icons to be clicked
  • If the link has options, a submenu icon appears on the right
  • There's no visual variable altered in the text: color, size, inclination, weight, family

enter image description here

0

Hye Jon,

Using blue color for link is a good way to distinguish between clickable text from non-clickable text especially when they are inline. There are some examples here in the stackexchange website for our reference.enter image description here

Now, back to your case:

If there is only one clickable link in a row (i.e: product name only):

  • Highlight the entire row when hovered, no blue text needed
  • Add an additional column at the end named 'Action' containing the action 'View Item'. This will help maintain the UI as the only blue text would be 'View Item' instead of the longer product name. This will also keep the consistency in every row.

If there are more than one clickable link in a row:

  • I would stick to using blue text for every links available for that row

Hope that helps.

0

Links need to be visually distinguishable from ordinary text. This can be done with underlines or color contrast for example. Having a visual distinction on hover is good to have but remember: it won't be available to all users including mobile and tablet users.

0

You could get some valuable feedback if you run a usability test with two versions, one with a traditional text link treatment and the other with no indication (but with a hover state). I think in most cases designers/developers will make the entire row clickable unless there's other things users need to click in that row.

0

I would consider 3 options for actions in tables in general:

  • good old underline+blue color (or just the blue color) when the other text is gray/black - make sure there is enough contrast
  • icon that does some action
  • action button that has sub-actions listed
0

On shopping websites, where the whole experience is around discovery, checking items in your cart, checking items that are delivered - users expect to be able to check product details when they click on a product. Also these expectations are set from other shopping sites they might visit such as Amazon, Walmart, Target. Amazon for examples renders blue links (no underline) for items in the 'My Orders' page, and black links in the 'Cart' page. So I'd say that blue or black both work, and using one or the other totally is based on the visual treatment you provide.

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.