Adding comments to a list of items, is there an elegant solution?

Question

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)...

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:

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...

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.

Answer 1

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 :

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

Answer 2

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.