I've been looking through the forums and haven't had much luck. I have kind of a weird dilemma, I hope someone can help.

I have a list of items (like a list of favorite movies) each item has buttons like "add to cart" "gift" and "share". The client wants to put emphasis on social features such as liking items and a comments section for each item. The problem is it becomes more like a facebook feed than an actual list.

From a business perspective we want people clicking on the buttons like "add to cart" and "gift". But from the user's perspective we want them engaging, "liking" items, commenting, and sharing on their social networks.

Here's what I currently have (you can see it becomes messy quick)...

enter image description here

The problem is how do I keep the social features while maintaining some kind of a scrollable list.

I have a few ideas...

My first thought is to start everything minimized. All comments would be collapsed and there would be a comment count and likes count, perhaps something like this:

enter image description here

Then you click "comment" or the comment count and it would expand to show an input field and the hidden comments.

But then I'm wondering would it be better to expand to reveal comments below the item within the list or would it be better to take the user to a lightbox or a new page?

Something like this...

enter image description here

The downside to this is if we do a lightbox or a new page we loose the scrolling/browsing aspect because we take them out of the list.

The other question I'm wondering is if we made it expandable to show comments, is it better to have an input field in the initial state? Or just a button with the comment count?

There's probably an easy solution for this I just haven't found it. Thanks for your time. Any help or feedback with this would be greatly appreciated.

2 Answers 2


I like your minimized design approach but one of the things you need to remember is that people are encouraged to interact when they are aware of the social aspect of what they are interacting with. Hence a small snippet of the available comments or a few comments which have set the ball rolling will be helpful in driving user interaction. Hence I would recommend going with a layout where you you show the total number of likes and comments but keep a few of the comments exposed so that the users know the kind of responses that are there. A good example of this is how facebook does it :

enter image description here

The challenge I have with using a lightbox to show all the comments is that it takes the user attention from everything else and directs him to only that item. The user might just be evaluating the item and if you have him suddenly being asked to just focus his item on item as opposed to scanning the other items, you might lose his focus or interest. Another issue is modality where I am being forced to interact with the lightbox i.e. close it before I can go back to where I was. Another issue with lightboxes is that if you have a lot of content, asking the user to scroll to reach the end of the comments can be a frustrating experience as he is limited to the lightbox dimensions to see the content

  • Mervin good point about the modality issue, scrolling in lightboxes is indeed a pain. So if I understand you correctly you are in favor of basically the original layout but limiting uses to only see a few comments per item. My only fear is the amount of space it takes for each comment section. I feel like it will lose its list feel and become more like a facebook or instagram feed. Do you think the added benefit outweighs losing the traditional feel of a list? Commented Feb 8, 2013 at 23:50
  • Well I dont have a honest answer to this since the response to the comment can be driven by the comment itself or what the person commenting on the comment might have to say. I have seen both use cases (facebook and the commenting system on yahoo) and both work well but I believe the added benefit is that by showing partial comments you are encouraging users to participate and also giving them a starting point
    – Mervin
    Commented Feb 11, 2013 at 19:58

Initially your list should have only image and title for every list item. Otherwise you will have mess of buttons in list which will be strong visual noise because they are similar - 10 items produce 50 buttons (!) Buttons will apper only when you point at particular list otherwise they are invisible. You can see this technique at many websites.

As for commenting, use link instead button, so pressing at phrase 6 comments activates popup window with commenting functionality - mouseover at any tag on this page under your question to see one of the samples of such implementation. Popup disappears when mouse goes out from it, so you don't go out from list.

  • Thanks Serg, I'll take rollover for the buttons into account. As for the comments I guess you are in favor of a popup to leave the comment, is that correct? Do you think the comments should be displayed for each item? Or on a new page or modal? Anyone else know of some examples or some support for one way or the other? Commented Feb 7, 2013 at 20:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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