User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
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?
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. 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.
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.
Which column contains the unique identifier most likely to be what the user is looking for? Place that first and hyperlink it.
download bmml source – Wireframes created with Balsamiq Mockups
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.
