up vote 5 down vote favorite

So I've got a nice ol' list that, when you tap on the sections, brings up more information. However, just looking at the list doesn't make it very clear you can expand them. But I'm not sure how I can show they are touchable--I'm coming up blank.

(Also apologies for the quickie PS mock-ups and guides.)

The blue on the second image indicates which has been clicked/tapped.

Standard list view

List view with a section selected after being tapped

share|improve this question
up vote 5 down vote

Here is a good article that explains the problem and give some tips on how to solve it.

Making Hit Areas Sufficiently Distinct

enter image description here

Also there is a good read by nngroup

Beyond Blue Links: Making Clickable Elements Recognizable

About this problem in the desktop platform, there you can find some more tips on how to approach this issue.

TL;DR Use some kind of visual aid to make your users to understand that they can click each item to get more information about it.

I would add a small icon and a label "more info" at the bottom right corner of each list item that will be clickable, but also I would make the whole list item clickable.

share|improve this answer
  • 1
    Helpful resources, and I would say the first screenshot in the first link would be an excellent solution in this case. – user31143 Apr 14 '16 at 8:11
  • 1
    These are awesome resources, thanks so much! I feel silly for not thinking of some of these--sometimes you just need to see it right in front of your face and then it sinks in. ;) – user82223 Apr 14 '16 at 13:06
  • You are welcome @user82223. would appreciate an upvote (or mark as correct :) ) – dimshik Apr 14 '16 at 13:09

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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