How do I make a table row on a web page look clickable?

Question

I have a simple web-based report presented as a table:

Some rows are clickable, others are not (it can be seen with the third column. Greater than 0 means the row can be clicked and expanded in a different page).

I've added a note (heh!) saying that rows can be clicked, and the cursor changes to a pointer (same as hovering over a classic link), but that's not obvious enough.

I'd like to avoid the old "blue and underlined" approach, although blue alone might have potential...

So, how do I make a table row on a web page look clickable?

---

EDIT:

Supplemental information: While the example shown indicates only a single clickable row, in reality any number of rows can be clickable, between none and all. It's arbitrary, depends on the data present.

Answer 1

Draw attention to the row, especially on hover. You're doing that with the pointer, but there's no other clear indication (from what I can see). You can do thinks like highlight the background subtly when hovered over as well, to draw attention to the row not the cursor, to make it clear the whole row is clickable, not just the cell/number/word the mouse happens to be over.

Color Matters! Blue text is usually associated with "hyperlink" in people's minds (though not that explicit term). Many agree that the default underline for link text is ugly, but a shade of blue is the near-universal color for a link, try and stick to it. It will quickly help your "link" rows stand out from the rest, sticks to convention, and it's not quite as "loud" as making the linked rows underlined or making a button/link on the row itself.

To draw the point home you can underline the row text on hover (like the link in this answer!), at the very least make the link text color change on hover.

Answer 2

While not always appropriate as a clickable row hint, in this case based on your description I think the expand icon would make a great click hint. Since in this context, clicking on the row would expand more information.

I would include the icon in a gutter of each row that is clickable.

Below is a link to mock up of what I mean.

Answer 3

I would add an icon to the end of the row, in addition to highlighting on mouseover. The icon would tell the user at a glance what's clickable, and highlighting would (hopefully) tell them where it's clickable. (Even if they don't get the where hint, they'd still have an icon to click on)

So:

• For the rows that can't be clicked, no icon at all.
• For opening in a new window, an arrow icon would point up and to the right.
• For opening in the same window, it would point straight to the right.
• For expanding the table with javascript, it'd probably point down.

Answer 4

I'm having the same issue right now. For me, the trouble with making each cell in a row look like a link is that it's not clear to the user whether it's the whole row that's a link, or whether each cell is a link that leads to a different place (as mentioned by peteorpeter).

I'm solving the problem by adding a column to the start of each row that numbers each row. This way it's clear that clicking on the number link leads to something for the whole row, whereas clicking on a particular cell leads to that item type.

In my example, a Sales Area is defined as a combination of Sales Organization, Distribution Channel and Division. You might want to deal with settings related to a Sales Area, or you might need to deal with each of the three sub-parts individually. How do you make all 4 destinations reachable in an intuitive way?

Here's my solution:

If the user clicks on 1, they expect to go to the Tokyo/Web/Fashion Sales Area. If they click on Paris, they expect to go to the Paris Sales Organization.

Answer 5

I'd agree with @Ben Brocka that following the web convention as much as possible would be desirable. However, I do agree that the table layout challenges the convention to the point of reconsidering how it applies here.

For instance because the zebra-striping already differentiates each row with color, would another row color be more confusing? Also, if you make every field underlined, the user might think that each one of the underlined text chunks is a link to a different location. I'm not saying that wouldn't work, but it becomes a bit of graphic design challenge to make sure the behavior is understood. You might remove the zebra-stripe and use a row border instead, for instance, to more harmoniously incorporate a linked row color.

In that vein, you might consider just making the second column (i.e. "1A Syd-02") the link for a given row, rather than the entire row.

That way, there is a clear visual indicator that follows conventions, without causing visual competition with other table features. (I picked that column because it looks like a name - not knowing the data I'm not sure if that would feel appropriate.)