Log in

Best Comment Box UI Practices for Better UX 8 Great Tips

Last updated on August 2, 2023 by with 47 Views and Reading Time: 11 minutes

Do you need to optimize your comment box UI (User Interface) to encourage more interaction and increase your visitors’ Time on Site or visit duration on your website? Did you know that by improving your comment form UI, you can definitely engineer a far greater UX or User Experience for your visitors? If your answer to the above questions is yes, then this article has been written for you.

Watch this video on comment box UI

What is a comment box?

Comment Flashcard LELB Society
Comment box or comment form on websites

A comment box or comment form on a website is an asynchronous communication channel for the visitors of a website to exchange opinions and questions-and-answers about a page or post. A comment box is different from IRC or Internet Relay Chat because the latter is based on synchronous communication or interaction at the same time like a telephone conversation.

Using interactive comment forms can encourage your visitors to stay in touch with you and your other visitors, increasing the time they stay on your website or your visitors engagement. Unlike IRC in which communication is almost instantaneous, while commenting, you have plenty of time to think about and prepare your comments and replies before hitting the Post Comment button.

Allow guest commenting for non-registered members

Leave text comments at the bottom of each lesson
Allow guests to leave comments on your website to increase your traffic

To address a larger audience, it is recommended you allow guests or unregistered members to submit comments as well. However, allowing guests to leave comments on your website could result in comment spam or unwanted and irrelevant comments usually for commercial purposes. Yet, you don’t need to worry about that as there is a simple solution to this problem.

If your website is on WordPress, which is the most popular Content Management System or CMS in the world, you can easily hold suspicious comments for moderation by, for example, approving them manually. To do so, log in to your WordPress website as an admin, and navigate to Settings – Discussion. Furthermore, the Akismat WordPress plugin can definitely come in handy as an effective spam protection tool.

Allow social login for a better UX

Leave voice and text comments at LELB Society to learn asynchronously
Using social long compared to traditional login to provide visitors with a better UX to log in to your website

These days, people are not patient enough to log in to your website with unique usernames and passwords, which are typical of any traditional login system. The best comment box UI practice in modern websites is to use both traditional and social login systems alongside. If you’re running a membership website as we, at LELB Society, are, you can allow your members to sign in to their accounts with just one click, with their social accounts, namely Google, Facebook, Twitter, and the like.

There are a bunch of WordPress plugins to make social login possible on your websites. We have tested many of them to have found out that Nextend Social Login and Resister is one of the best ones to pick. This is a freemium plugin with a lot of free and generous features, including supporting login restrictions, social login with Google, Facebook, and Twitter, custom labels for register buttons, and many others.

Add AJAX functionality to your comment box

Using AJAX functionality in your comment box UI to provide a better and smoother UX for your visitors

AJAX in website development stands for Asynchronous JavaScript And XML and it refers to changing the function of some part of a webpage asynchronously without the necessity of reloading or refreshing the whole webpage. Using AJAX functionality in your comment boxes can give your visitors a better and smoother user experience (UX), particularly when they post comments and replies in the comment forms.

This is simply because the whole webpage does not need to be reloaded whenever a comment or reply is posted. This is especially useful when a webpage is incredibly heavy and it takes too long for the webpage to be reloaded. AJAX functionality can also be used when your commenters start rating, polling, or voting for and against the other comments and replies in the comment box UI.

Encourage your visitors to leave comments

Content-based Instruction in online education at LELB Society
Content-based instruction or CBI to encourage your visitors to participate in forums and comment boxes

Even the best comment box UI cannot guarantee your visitors engagement unless you arouse their interest to stay active on your website. At LELB Society, which is a bilingual academy of English and Persian, we implement content-based instruction or CBI to encourage our English and Persian students to participate in our comment forms and English or Persian forums.

We have also created special forums about English conversation questions for adults and Persian conversation questions for speaking. As you can see on your own, there are numerous challenging questions in both English and Farsi in these two forums. Most importantly, our students have been really active in the forums by replying to the thought-provoking questions and topics.

As implicitly stated above, you can install and use polling, voting and rating widgets on your comment box UI with the intention of triggering more engagement and interactivity among your visitors. We recommend the 5-star rating widget, which is widely popular on the internet. However, using interesting and useful resources and topics is far more important than rating and polling widgets to stimulate more user engagement.

Interaction patterns in comment boxes

You must make your visitors understand that you respond to their comments and questions in the comment box UI immediately. This concept is technically referred to as immediacy in asynchronous communication. On the other hand, you should realize that practicing immediacy excessively could be counter-productive as well.

Reply Button LELB Society
Asynchronous interaction patterns in comment box UI through immediacy to promote more social presence

Over-immediacy on your part could discourage visitor-visitor engagement. This visitor-visitor engagement is called student-student interaction in an online learning community like LELB Society. As a matter of fact, employing comment boxes and forums on your website basically follows the purpose of realizing a sense of social presence in online communities. Interactivity and social presence in online communities mean that the community members develop a sense of belongingness to each other and the social context in which interactivity takes place.

In our round table activity, which is one of the most important educational activities at LELB Society, teacher’s immediacy is controlled and sometimes consciously postponed until more student-student interactivity is performed. In this activity, which includes both synchronous and asynchronous learning, our students respond to the assigned materials before the class by participating in our comment boxes and discussion boards.

Each assigned lesson has an embedded video or podcast to account for flipped learning. Our students watch the videos and study the lessons before our online classes. Then in our live classes, we basically focus on the stream of comments and replies in the asynchronous channels of communication. It’s important to add that our round tables have all been held on tremendously interesting and useful topics, for example, carpe diem, time management, body-mind connection, and the like.

Include voice comments in your comment box

Another technique that can add more fun and usability to your comment box UI is installing and using voice comments. Voice or audio commenting allows your visitors to leave audio messages instead of text messages, which seems to be easier and more fun. However, we believe you should not remove text comments thoroughly. Instead, your comment box UI can perfectly include both text and voice comments.

Leave voice messages and attach files on live chat
Comment box UI that supports both text and voice comments

If you’re running WordPress, you might like to know the best voice message WordPress plugins to install on your website. For instance, at LELB Society as an online academy of English and Persian, using both text and voice comments can provide our English and Farsi students with this great chance to practice both writing and speaking at the same time asynchronously and interactively.

Add forums to your website to complete commenting

To promote even more engagement in your visitors, you can make use of forums or discussion boards on your website. Although comment boxes and forums have the same objective, which is asynchronous communication, they are not completely interchangeable. In short, comment boxes are not thematically independent by themselves as they generally appear at the bottom of each post or page, and they’re attributed to them.

Persian forum to learn Farsi online asynchronously in our online community
Best Persian forum for non-Persian speakers to practice writing and speaking asynchronously in an active learning community

On the other side, forums or discussion boards are actually stand-alone channels of communication that could be initiated by your visitors through creating new topics. From an educational point of view, Initiation-Response Feedback or IRF could easily and positively be ignored by using forums because your students could initiate an exchange of questions and answers, and not the other way around.

At LELB Society on WordPress, we’re using bbPress WordPress plugin to add forum functionality to our website. With bbPress, you can easily take advantage of the following features:

  1. Using the most reliable WordPress plugin for forum functionality that is also used and actively supported by wordpress.org
  2. Adding tags to the topics of your forums to classify them thematically
  3. Creating unlimited forums and new topics in each forum in a pretty organized manner
  4. Using WordPress widgets and bbPress shortcodes to display a list of forums, topics, replies, etc. in different parts of your website
  5. Monitoring and moderating your forums effectively exactly like moderating your WordPress comments by navigating to Settings – Forums in your WordPress dashboard area.

Fortunately, you can enable threaded or nested commenting in your bbPress forums and comment boxes. Nested comments, which are normally indented replies, create a more user-friendly comment box UI because your commenters and visitors can easily navigate through the comments and replies even if there are plenty of them.