Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

enter image description here

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.

share|improve this question
    
You have to show some other state changing, bolding, changing colour, something that makes the user go "This is different...oh, the cursor is a hand, I can click this". Ideally, the clickable row should share as much with a normal link on your site as possible. –  CaffGeek Nov 7 '11 at 17:40
    
I agree, but at the same time, I don't want the list to look like a Christmas tree. By which I mean, if every row lights up on mouseover, someone who will move their mouse over the whole page quickly will get a seizure! –  MPelletier Nov 7 '11 at 17:48
1  
Signify the fact it's a link without a mouseover. Show it blue (navy?) all the time, and change the cursor to a hand on mouse over... non-clickable rows are black. Or whatever. It's a subtle difference, but the rows ARE different, and something should identify them as such. –  CaffGeek Nov 7 '11 at 18:03
    
Style the text the same as your hyper-links on the rest of the page, you should try to keep things consistent! –  bendataclear Apr 28 at 18:40
add comment

5 Answers 5

up vote 8 down vote accepted

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.

share|improve this answer
    
Bonus question? What about making the row look "touchable"? –  blesh Nov 20 '13 at 20:51
    
@blesh I'd say touchable should be asked as a separate question altogether, since this question is so focused on mouse interaction; the two are just different enough to require separate answers –  Ben Brocka Nov 20 '13 at 20:53
add comment

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:

Sales Area table with links in each cell

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.

share|improve this answer
add comment

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.

http://i.stack.imgur.com/qJM73.png

share|improve this answer
1  
I see what you mean. I'm not against gutter items, but it's not an expandable table, so I don't want to present such a contrasting behaviour with that icon. –  MPelletier Nov 7 '11 at 21:49
    
@MPelletier - You could use arrows instead, like I'd described in my answer –  Izkata Nov 8 '11 at 15:34
add comment

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.
share|improve this answer
add comment

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

share|improve this answer
    
One thing becomes clear just by posting the image here: I need to tone down the zebra-striping contrast. And don't worry, I understand what your example with the name field. –  MPelletier Nov 7 '11 at 19:46
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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