Ask HN: How do I make rows of a table look more clickable on mobile?

3 points by mdang 5y ago ↗ HN

I have this webpage which is a table, and if you click / tap on each row, more information comes up. To people who are seeing it for the first time, they may not know that the rows are clickable, how do I make the rows appear more clickable?

About 80% of our traffic is mobile, so I would like it to appear more clickable on mobile most importantly.

Any suggestions / links to resources would be great! Thank you!

2 comments

[ 0.26 ms ] story [ 14.0 ms ] thread

nhgiang 5y ago ↗

The pointer icon (hand with index finger pointing) suggests clickable element.

The "i" icon also suggest more info.

However having those on every rows seems crowded, how about an ellipsis at the end of each row's text?

auslegung 5y ago ↗

- Make the text blue and even underline it. It may not look as nice as you’d like but you sometimes have to trade looks for usability (not always though).

- Add a button to the first column that says More Information so users know clicking that button will result in them seeing more information.

- Add some text above the table that educates the user. Alternatively put it inside a tooltip. Use a persistent setting to remove this text after the use has clicked a row 5 times if you don’t like the way it looks.

- You could style each row with some box-shadow so the entire row looks like a button. Not sure how effective that’ll be, but maybe in combination with some other subtle changes it could help.