User Comments

Explore the best practices to follow when designing an interactive comments section

Comments are a common feature of social networks, entertainment sites, blogs, and other apps and websites. They serve as hubs for discussions and provide a space for people to express their opinions. With a substantial number of users accessing the internet via mobile devices, optimizing comment sections for mobile use is crucial.

Simply producing high-quality content isn't sufficient to foster user engagement here — it's equally important to design a comment section that is intuitive and user-friendly. This means enabling users to swiftly scan through the comments, easily respond to pertinent points, and mention others when necessary.

Flat view

Flat view

Comments online can be shown in two main styles: flat view and threaded view. In the flat view, comments line up one after the other, just as they were posted. This way, you get to see the flow of the conversation as it unfolds.

This approach works great when everyone's talking about the same thing. It keeps the chat on point. But if the thread gets really long with lots of people chiming in, it can be a bit tricky to follow who’s responding to whom. Flat view is a good match for blogs or news articles, where the aim is to keep things brief.

Threaded view

Threaded view

Threaded view organizes comments like a tree, with responses nested under their respective parent comments. It allows for clear, easy-to-follow conversations within a comment section, especially when there are many replies to different points. This format helps users track specific discussions and replies more effectively.

It is best used in situations where discussions involve multiple subtopics or when there are many responses to different points. It's particularly effective for managing complex conversations with numerous participants, as it helps users follow specific threads within a comment section more efficiently. So, it is commonly employed in forums, message boards, and platforms with in-depth discussions.

Mobile threaded view

Mobile threaded view Bad Practice
Mobile threaded view Best Practice

Designing a threaded view for mobile requires careful consideration, especially for smaller screens. Prioritize simplicity and clarity. Utilize clear visual cues, such as indentation or lines, to indicate the hierarchy of comments. Ensure that users can easily identify parent comments and their corresponding replies.

Limit the depth of threads to 2 or 3 levels for better mobile usability. If users need to explore further, offer an option to open the thread in a new window, maintaining a seamless browsing experience. Additionally, consider implementing collapsible threads to help users manage and navigate through longer discussions. This way, they can expand threads of interest while keeping the interface tidy.

Preview selected comments

Preview selected comments Bad Practice
Preview selected comments Best Practice

Refrain from displaying all comments simultaneously, as this can lead to page overload and divert users from more important content. Endless scrolling can also complicate navigation and test users' patience. Instead, consider an approach where comments are initially hidden, with only the most popular or recent ones visible.

You can either load the next portion automatically as users scroll down or on request when they press the "View More" option. It's up to you to decide how many comments to load upon each click. This allows users to focus on the most relevant discussions, improving their overall browsing experience.

Collapse lower-level comments

Collapse lower-level comments Bad Practice
Collapse lower-level comments Best Practice

Avoid showing all threaded comments at once. Instead, display all first-level comments and one of the many second-level comments (perhaps the most popular or recent one). Hide the rest of the lower-level comments and let them unfurl on click or tap. This will allow users to quickly scan the discussion and decide what threads they want to participate in. Also, this will ensure a cleaner look of the comment section.

Establish solid visual hierarchy

Establish solid visual hierarchy Bad Practice
Establish solid visual hierarchy Best Practice

Reading comments can be overwhelming. Help users clearly distinguish the main elements, like usernames, from less essential ones, like timestamps. Establish visual hierarchy by using colors, contrast, scale, and the proximity principle.[1] A clear visual hierarchy will help your users perceive and navigate the content more effectively.

Show only the most needed actions

Show only the most needed actions Bad Practice
Show only the most needed actions Best Practice

Simplicity is key when designing comment cards. Avoid clutter to ensure a clean and user-friendly interface that prioritizes the most important actions.

Present only essential options that users will regularly utilize. Determine these options through user research or by examining the designs of comparable products. Common comment choice options include features like "like", and "reply."

Truncate longer comments

Truncate longer comments Bad Practice
Truncate longer comments Best Practice

Instead of breaking the preview layout when displaying longer comments, truncate them. Shorten the comment, replace the missing part with ellipses and add a Read more button to unfurl the full text.[2] This helps optimize the layout and doesn't feel overwhelming to users.

Make first-level comments the main focus

Make first-level comments the main focus Bad Practice
Make first-level comments the main focus Best Practice

To encourage meaningful discussions and diverse viewpoints, make the first-level comment action the most evident and accessible. Position the comment input either at the top or bottom of the comment section, making it easy for users to contribute their thoughts. Treat replying to existing comments as a secondary action to further support a dynamic exchange of ideas.

Pro Tip! Find the right balance with the Reply button. Make it easy to find, but not too flashy.

Allow mentions

Allow mentions Bad Practice
Allow mentions Best Practice

Mentions or tags, commonly denoted by the (@) symbol, serve to address or involve specific users in a discussion directly. Make sure you design a seamless notification system for when the mentioned person is alerted. Additionally, consider providing an option to disable these notifications for users who may prefer not to receive them.

To enhance clarity, set apart the mention, such as "@Nick," with a distinct color from the rest of the text. This differentiation ensures users can immediately recognize an active mention, allowing for efficient and effective communication within the platform.

Complete the lesson quiz and track your learning progress.
<?xml version="1.0" encoding="utf-8"?>