A feature I really appreciate on many blogs, including WordPress blogs, is the comment live preview feature. This is a feature that allows the writer to see what they are writing in the comment form as they write.
To be honest, there are two forms of comment preview. One is the live preview which displays the keystrokes as they are typed in the comment form. The other is a user initiated comment preview. The user types in their comment and then pushes a button to see a preview of the comment before they commit by hitting the Submit button.
Either form works well to help prevent errors in spelling and grammar by giving the user a chance to see what they are writing before they post their comment. But it does more than that.
Seeing a preview of your comment gives the user a second chance to change his or her mind. This can also give them a second chance to reword their comment, if they are responding out of emotion rather than logic and kindness.
It also helps when the discussion involves programming code. If the user can see whether or not their
<php code(); ?> will appear in the comment or turn to mush and jumble. It can prevent two and three attempts to post the code, with a lot of apologizing and frustration on their part and yours when you find all the attempts to post the comment.
The key to using a comment live preview WordPress Plugin or feature is placement. Helping the user use the preview their comment as they make their comment.
Placing the Comment Live Preview
Using a comment live preview WordPress Plugin is generally as simple as installing the Plugin and placing the appropriate template tag for the Plugin in your
comments-popup.php template file. The question is where do you put it.
There are generally three places to put your comment preview feature in relationship to your comment form: Above, below, or to the side. Let’s look at what happens in each of these spots and how to improve the visibility and use of your comment preview features.
Placing the Live Comment Preview Below Your Comment Form
Many web page designers and WordPress Theme designers put the live comment preview below the comment form. This makes sense. It prevents clutter by moving the preview section lower, and it puts it near the Submit button.
It also has some serious downsides that need to be considered.
Depending upon how your comment form is designed, placing the live comment preview below your comment form pushes the preview off the screen. If the user hasn’t scrolled down far enough, they won’t see it, possibly until it’s too late.
If you put it below the comment form, but above the Submit button, it does give them a chance to see it when they scroll down to find the Submit button, but then, they’ve already written their comment, so will they take the time to scan the content before hitting submit?
If the preview is below the Submit button, the odds are that they might not even see it, so why bother?
Let’s look at some examples of the comment live preview set below the comment form.
The example below shows a very long comment form. It is made longer because of the spacing as well as the addition of the smilies and the long comment form box (textarea). If the user hasn’t scrolled all the way down the page, past the end of the comment box, then they may never see the comment preview.
Notice where the Submit button is. It is above the comment preview section. The user could click the button before they even see the preview.
Let’s switch things around and move the comment preview above the post between the smilies and the comment form. Now the comment preview is visible and connected with the comment.
If you choose to put the comment live preview below your comment form, make sure the preview is connected to the comment form in some visible way. In the next example, the designer has done that by creating outline boxes around the comment form box and the comment preview.
When looking at user’s usability of your blog, helping them find the comment preview feature helps them take advantage of the feature’s benefits.
Placing the Live Comment Preview Above Your Comment Form
As shown in the example above, by moving the comment live preview above your post, you increase the odds the user will see the comment preview in order to take advantage of it.
This is one of the benefits. They can see it. They can also see it as they type, just above where they are typing, if the preview is close to the comment form, which may help them type and express them self better. Like watching yourself type on the computer or typewriter. You see the letters and words as they are written, and as they will appear on the final posted comment. It gives you the chance to think about what you are writing as you watch the words form.
The downside is that it can add to the clutter of the comment area. Still, anything added to the comment area can add to the clutter, so its a trade off. How you highlight the comment preview area adds to the clutter for the look of the page, even without comments. So think about how you want this area to be visible, deciding between highlighting the live comment preview feature and maintaining a clean and simple design look.
In this example, the comment live preview is above the comment form and below the contact information, visually connecting the preview with the comment, and allowing the preview to be seen on the same screen as the comment form.
Placing the Live Comment Preview on the Side of Your Comment Form
Another alternative to placing the comment live preview above or below your comment form is to put it on the side.
This directly connects the comment preview with the comment form, placing it directly next to or very near the comment form. It is immediately visible on the same screen as the comment form.
It can also add to the clutter of your comment area. More importantly, it causes the user to shift his or her eyes away from the side of the screen that the comment form is on and move them to the right or left of the comment area. Is this comfortable? Is this comfortable for the language your blog is in? If the blog is in Hebrew, Arabic, or another right-to-left language, having the comment form and preview next to each other includes the decision about which side to choose.
Using a Comment Preview Button
If you choose to not feature a totally live comment preview but one triggered with a click of a button, then the comment preview button needs to be as close to your comment form and Submit button as possible in order for the user to see they have this opportunity.
The web page designer gave their comment preview design element some thought. They wanted the preview feature to stand out without cluttering up the area. So they put the preview button in an obvious place across from the Submit button, but also left a subtle graphic placeholder for where the comment preview would appear once the button was pressed.
Again, it’s about helping the user use your site and encouraging and helping them to leave comments on your blog. It’s up to you to decide how and where you want to showcase your comment preview feature, if you choose to use one.
WordPress Comment Preview Plugins
This is not a complete list of all the Comment Preview WordPress Plugins. Check the resources below for more and newer versions of Comment Preview Plugins.
Other WordPress Plugin Resources
- BloggingPro’s WordPress Plugins List