8

I have a large table (14 columns) on my site. I want each row to link to a different page. What is the best way to let a user know that clicking a row will take them to a page related to that row?

  1. Make the whole row a link (javascript/darken row on hover) enter image description here
  2. Add another column on the far right with a 'More Info' button enter image description here I'm afraid that with option 1 the user won't know that each row is a link (if they never hover their mouse over the table) and with option 2 the table becomes too cluttered.

3 Answers 3

3

Use the "More info" link

I lean more towards of using the "More info" link because one of the best UX researchers Luke Wroblewski runs a campaign Obvious always wins. He argues that it is better to always show and make obvious important UI elements on the page, rather than hiding them behind a menu or something else. I trust him because he works with huge volumes of data and makes very informed decisions.

More info link strengths/weaknesses:

  • explicitly communicates to users that this option is available (its obvious).

  • users will now what to expect when they click the link - "More info".

  • it takes up additional horizontal space.

When not to use the "More info" link

The only case I suggest you remove the link is when you need horizontal space in the table to add more columns and your users are using the app frequently (daily, or at least weekly). Frequent users will learn that this option exists and will know what to expect after clicking on the row link.

However, this way we are decreasing the learnability of your app. If the majority of your users are repeated visitors it may make sense to sacrifice learnability for displaying more information in the table. It's not an easy decision.

1

Which column contains the unique identifier most likely to be what the user is looking for? Place that first and hyperlink it.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

1

From an accessibility point of view, I would recommend the second option, i.e. using a "more info" column. I think this will make it easier to make the table keyboard accessible (see WCAG 2.0).

Note that it should be clear for screen reader users where the link in the column will take them: if you use an image for those links, they will need a text alternative (e.g. <a href="markotto.html"><img src="x.png" alt="more info on Mark Otto" /></a>). (See link text in the WCAG 2.0 Techniques.)

I know that the last point may be considered an implementation aspect, but it has an impact on the user experience of screen reader users.

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.