How to design the website review module 10 key points tell you how to design the product review module

In the past two days, I have been thinking of 36 kr comment optimization scheme, and I have sorted out the common methods of making comments in the industry. In this article, we will talk about those things that need to be considered when designing the comment function.

Do not pull anything else, directly throw dry goods: In general, the design of the comment function needs to consider the following 10 key points:

Display style, sorting rules, operation behavior, jump logic, operation operation, display logic after being deleted/masked, anti-dull design, quick operation, rich media support, detail support.

Display style:

At present, the popular styles on the market are: tile type, theme type, building type, dialogue type, mixed type.

Tile type

It means that all comments are displayed in one level, including the original comment and the reply to the comment, in parallel. For the reply comment style, some directly display the reply content, such as the reply style of wechat circle of friends; Some display the original review, such as the reply style of the online version of the 36kr App.

thematically

Refers to the original comment as a level 1 comment, the response to the original comment, as a level 2 comment, ranked below the level 1 comment. That is, a first-level comment as a "topic" allows discussion on a "topic." Compared with tiled comments, thematic comments can make the discussion topic more focused, so that quality comments can surface more and form a discussion atmosphere. For operations, it is also possible to create discussions about quality reviews, promoting exposure and improving operational effectiveness. Many content platforms on the market that focus on comments use this style, such as post bar, the most right, simple book, Weibo, etc.

penthouse

Refers to each time the reply to the original comment, the original comment content is exposed, and bring their own comments, presented in a "circle layer" style, and over time, the formation of an infinite nested box style, called "building". To carry forward this style belongs to NetEase news, which is also one of its characteristics, resulting in a lot of classic comment effect. However, building comments are bound to be hidden in multiple layers in the case of many floors, and it is not easy to track comments, visual effects are also easy to cause fatigue, and it is not recommended to use.

Conversational mode

Each reply to the original comment is a conversation with the comment publisher, and this dialogue itself can be divided into first, second, and even multi-level dialogues, respectively, to the reviewer, the comment reply, the person who replies to the comment reply, and so on. Zhihu is a typical conversational comment. Conversational style will make the comment interaction more distinct, but its style design increases the cost of understanding, and should be used with caution.

hybrid

It refers to the mixture of the above several styles, some of which are themed in the first level review and tiled in the second level review. Some and the comments use the topic type, secondary comments use the dialogue type; There are also first-level topics, second-level dialogues, and third-level tiling. The specific type is also chosen according to the user's understanding and content operation tendency.

Sorting rules:

Mainstream sorting rules are: by publication time, by popularity, plus manual selection.

By release time

The default is usually in reverse order according to the release time, and further support users to choose positive order and reverse order. It is worth noting that for topical comments, the first level comments are usually in reverse order by default, in order to let users see the latest comments, and the second level comments under the first level comments are in positive order by default, in order to let users understand the progress of the discussion. Another point is that the default time of the first level comment is reversed. It is recommended to take the latest release time of the second level comment under the first level comment, so as to ensure that the ranking of the first level comment is updated according to the discussion progress of the comment itself.

By popularity

You need to calculate the "heat value" of all comments and sort them according to this. The heat value generally takes the number of comments, the number of replies 2 dimensions, according to the weight of linear summation calculation, some also support the "number of points", "number of reports" and other negative dimensions, in addition, in order to avoid the Matthew effect, but also consider adding time attenuation factor, there are many algorithm optimization programs.

Operation behavior:

Mainstream operation behaviors are: like, reply, copy, report, delete, share

Like: To consider the like, cancel the like after the change logic, whether the server needs to synchronize the update, the dynamic effect after the click, the message reminder mechanism after the like.

Reply: It is necessary to consider the appearance and timing of the reply pop-up window, the reply character limit, whether the reply supports newlines, whether the keyboard submission is supported, whether the blank character submission is allowed, the size of the reply page pop-up window, button layout, etc.

Copy: Consider the replicable area, the copy interaction (long press/click), the prompt effect after copy, etc

Reporting: It is necessary to consider whether to report the text or the informant, the tips after reporting, and the data review after reporting

Delete: To consider the publisher supports the deletion function, is there a pop-up reminder when deleting? When will the status be synchronized after deletion? Is the deletion hard or soft? And so on

Sharing: It is necessary to consider the sharing platform, sharing copy, opening style after sharing, whether to share into a web page or share into a picture.

Jump logic:

Jump logic, mainly considering where the relevant entry will be generated due to Posting comments or replying to comments, and the jump position of these entry clicks, including:

I published: usually in "my", or "message center", you can find their own published comments, these comments after clicking can jump to the corresponding comment page, if it is a theme comment, corresponding jump to the comment secondary page.

Reply to Me: When someone replies to my comment, they will receive a message in "My" or "Message Center", which needs to be clicked to jump to the comment page.

Personal dynamics: Users publish comments or reply to comments, all belong to personal behavior, if the product has a personal home page, it should record the behavior in the personal home page, in the form of "dynamic", others can view user dynamics, find the user on which article published which comments, and support comment page jump and article page jump.

Operational operation

The so-called operational operation means that the operation can interfere with the user's comment behavior and comment results from the background. Positive interference includes comment refining, comment topping; Negative interference includes comment blocking, comment deletion, commenter blocking, sensitive word replacement and so on.

Comment refinement: Support the operation to select high-quality comments, give the "essence" mark in the front end, and some apps are also called "God comments", "useful" and so on...

Comment top: Literally, a comment is placed at the top of the comment list to be publicized

Comment blocking: Making a comment temporarily invisible to others. For a better experience, you can also notify the person who posted the comment that their content has been blocked, ask them to apply for unblocking after modification, and the comment can reappear after review.

Comment deletion: The comment is deleted directly from the background and cannot be recovered.

Commenter ban: Usually associated with "reporting", frequent spam commenters are banned, so that they can no longer post comments. It should of course be allowed to apply for unsealing.

　　敏感词替换：通常做法是构建敏感词库，如果评论某些文字命中词库，则将敏感词替换为“*”。

Display logic after being deleted/masked:

When a comment is deleted or blocked, you can either delete it directly, or the current block remains, and the deleted text becomes "Comment deleted". Especially for topical comments, because a certain first-level comment may be associated with multiple second-level comments, if the first-level comment is deleted, whether all the second-level comments need to be deleted needs to be decided by the product manager according to the value of the comments. In this case, it is recommended to retain the secondary comment.

Stupid-proof design

The so-called anti-stupid design refers to the need to think about how to prevent users from misoperating through product design. Includes:

Comment draft box: that is to say, input text in the comment box, before sending, if you mistakenly click on the cancel area, automatically save the current input text for the user, and when the comment box appears again, you can restore the previous text. A de-escalation of this feature is that when the user cancels the input box, an Alert pops up to inform the user whether to cancel.

Comment word reminder: When the word input is too much, through the red letter to remind the user to exceed the limit, "send" button gray.

Quick operation

Typing is a costly thing for users, and comments are a way to express their opinions, so can we design simple interactions to help users express their opinions quickly? The so-called quick operation is a solution to this point. It can be:

Quick comment: Design a comment button in the comment area, such as: step, general, like, awesome, users can click directly, similar to voting behavior. Typical cases such as daily Express, orange entertainment.

Enter emoticons/emoticons directly in the comment area: Users can select emoticons to post when Posting comments, or quickly select emoticons to post. Like Sohu News, Phoenix News, NetEase news can be directly published.

Rich media support

For some UGC content products, the comment area even supports sending static pictures, audio, GIF, and video, which requires the corresponding release process design and background storage logic.

Detail support

Here we need to consider the product details of various special cases from the perspective of user experience, I can think of such as:

Comments support the identification of hyperlinks: here we need to consider the identification logic of hyperlinks (the header needs to be http or https, and the tail is a space for identification), the number of words of hyperlinks (for the input box that limits the number of words, hyperlinks can be unified into 10 characters), the display style after the release of hyperlinks (simple can directly display the link address; Better display as "link address" four words; A little better to take the link address for the URL title display, such as know it)

When Posting comments, keyboard Settings: When entering comments in the comment box, you need to consider whether to set the "Publish" button on the keyboard. If you need to consider comment wrapping, then the "done" key should be used as a line wrapping key, otherwise clicking "Done" should be a direct submission.

Comment click area details: The comment area has many elements and needs to inform the developer which areas to click and where to jump. As shown in the picture below:

OK, that's all I can think of when making comments. I hope it's helpful. Feel free to leave me a message if you have any questions

Latest comments