Best practice for Styling links when used in tables and headings

Question

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:

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.

Answer 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.

Answer 2

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

Answer 3

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.

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.

Answer 4

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.

Answer 5

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.

Answer 6

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

Answer 7

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.