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.php or 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
- http://codex.wordpress.org/Plugins
- http://www.wp-plugins.org/
- http://dev.wp-plugins.org/
- http://www.wp-plugins.net/
- BloggingPro’s WordPress Plugins List
Digg | 
Del.icio.us | 
BlinkList | 
Furl
Spurl | 
Reddit | 
Simpy | 
RawSugar
Site Search Tags: wordpress, plugins, comment, live, preview, comments, web, page, design, elements, comment+form, form, response, layout, usability, use, feature, function
Copyright Lorelle VanFossen
Lorelle on WordPress 
14 Comments
I had seen it before but never got around to it, a no-brainer install, thx.
Got Preview? lol
Good work Lorelle, I always liked this feature, but always got puzzled about the placing of components.
This clears it out. I will install it after I upgrade to WordPress 2.0. (Yep, haven’t yet upgraded, go me)
My personal favorite (though a little annoying to configure): AJAX Comment Preview. Could use a little polishing, but it tells you exactly what WordPress will do to a comment, all without any page reloads.
Nearly a year later, I take it that there is no way to do this on WordPress.com blogs? Or heck, even have just about any sort of preview option for comments? I can’t recommend wordpress.com to my friends, chiefly because it neither allows commenters to see what is going to happen, nor does it allow them to later edit or delete their comment.
Is comment preview “that” important to you? Odd. There are so many other features that make WordPress.com blogs worth recommending. Comment spam protection, fast and easy to use and design blogs, all kinds of Widgets that allow you to add lots of gadgets to your blog, podcasting, audio and visual content, and…well, there’s a lot WordPress.com offers. Live comment preview isn’t that desirable for most bloggers.
As for why they can’t see the comments when the write them, that’s odd. The majority of blogs do not feature a comment preview. People type what they type, they see it in the comment form as they are typing (all a preview does is how you how it will look when posted, nothing more) and they control what they write. If they can’t control what they write in a comment in the first place, a comment preview isn’t going to help them. 😉
Still, if you want it bad enough, ask them. They’ve provided a lot of things people asked for that many bloggers don’t like and don’t use. Snap Anywhere Preview, for example.
The captcha works well enough.
True, but only truly “professional” bloggers would use such things. I’m talking more about “personal” blogs, written by someone and usually read by only a few of their friends. These features are probably more useful when one is writing for, or trying to acquire, a large audience of strangers.
You’re right; sorry about that. What I meant is comment preview in general, not necessarily live comment preview.
Both Blogger and WordPress.com have weird restrictions on what is allowed in comments. For example, neither of them allows lists — <li> tags. WordPress.com allows <blockquote>; Blogger doesn’t. Maybe you are linking to somewhere, but it turns out as something else. Maybe you are writing a ratio, like 3:8, which gets turned into a smiley. Maybe what looks a different line in this textarea will turn up on the same line when posted. Maybe your post looks longer, or shorter, after posted. Maybe you are typing the comment it in your own HTML editor and pasting it into that intolerably tiny textarea, in which case anything might happen.
Right now, on WordPress.com, there is no way of knowing what your post will look like after posting it. If you find some goof-up after posting, it doesn’t even allow you to delete your comment to post a new one. (I don’t think allowing people to delete their comments, as Blogger does, is desirable, but without preview…)
Now here I go, crossing my fingers and clicking “Post”….
Ugh. If I had known the blockquotes would have been so huge and distracting, maybe I would have only set the quoted parts in italics. Or something else, whatever seemed the best. If only there was a way of knowing how it would seem…
Sorry for posting so frequently, but what I forgot to mention — probably the most important thing — is that while Blogger at least warns you (during Preview) that your post contains disallowed HTML and gives you the chance to fix it, WordPress silently discards all tags, and turns your post into a mess.
I asked about this in the forums a few months ago, but I just tried asking again through the “Contact Support” option, let’s see.
I admitted there were issues with comments, and few people blockquote in comments, though I’m seeing a new trend, so I may style blockquotes for comments differently.
Still, everyone, including bloggers professional or otherwise, need to think through their comments, with or without code, before posting. Site owners can clean up comments if they want to, which I highly recommend when people make mistakes.
I know this is of critical importance to you, but it is a fact that it isn’t so important to most.
I recommend you read How NOT to Comment on Comments and Editing Your Blog Comments for more help on this.
Wow that is cool… I think im gonna have to install it on my internet marketing ideas blog.. hmm I figured you’d have it installed for us to preview.. lol.. thanks for the helpful post!
umm.. sorry but how do you change the position?
@ klongofconsciousness:
Change the position of what? The live comment preview? If you have a WordPress.com blog, you currently cannot change anything associated with Comments. This is only for users of the full version of WordPress.
“If you have a WordPress.com blog, you currently cannot change anything associated with Comments.”
Thank you for that clarification. Now I know that it’s no use to request a wordpress.com blogger to enable comment preview. It hadn’t occurred to me that such a basic feature would be completely missing.
“As for why they can’t see the comments when the write them, that’s odd.”
The simple answer is that when they write them they have no reliable way of predicting how the wordpress.com software will process them. Note for example shreevatsa’s surprise, expressed in comment 7 above, at the big blue rectangles that showed up in his comment 6 *after* he submitted it for processing by the site software. (I would have put “after” in italics rather than using asterisks, if I were able to preview the result.)
“The majority of blogs do not feature a comment preview.”
I almost made a snarky remark here, but I really do review my comments before posting them. This may actually be true, if it’s the case that the majority of blogs are hosted by wordpress.com. Having said that, what *is* the basis for this claim?
“If they can’t control what they write in a comment in the first place, a comment preview isn’t going to help them.”
Trivially true, but you are skipping over the real issue. Commenters can *not* control the processing of their comments by the site software, and some of us care enough about our public personas to want the opportunity to check in private for surprises perpetrated upon us by the submission process.
“Still, everyone, including bloggers professional or otherwise, need to think through their comments, with or without code, before posting.”
I *do* think through my comments. How does thinking them through let me know what a blockquote, for example, is going to look like? Please explain.
I REALLY dislike your suggestion and think it’s bad UX. The comment-area could be styled to mimic a regular comment pixel by pixel, so there is no use for an extra preview. That’s just confusing or at least messy.
12 Trackbacks/Pingbacks
[…] Lorelle on WordPress » Comment Live Preview Placement Links to comment preview plugins for WordPress along with tips for placement and styling. (tags: wordpress howto usability) […]
[…] So far so good. My next step was to go back to the various .php sheets and reenable the relevant plugins, like the browser identifier. That was the job of a few minutes. I had been reading Lorelle VanFossen’s pages on WordPress and blogging in general and remembered that she had posted recently about the live preview function for the comments page. I recommend her site for any bloggers, by the way, she updates very often and very regularly and has a host of advice for bloggers. In fact, whenever I tweak the site, it’s usually because of a post I have read on her site. […]
[…] Then build a section to display the live comments preview. Per an excellent post titled Comment Live Preview Placement by Lorelle on WordPress.com, I recommend placing this box between the login block and the input box – this helps readers notice the preview. Add Comment Preview to COMMENTS.PHP […]
[…] Comment Live Preview Placement […]
[…] Letting the user have a chance to see what they are about to post prevents not only spell mistakes or grammatical errors but also gives them a chance to have a second thought over what they have written. There are some nice plugins like Live Comment Preview to add this type of feature into WordPress comment form. But the question is not only the preview functionality but also where the preview will be shown, Lorelle VanFossen has written a good tutorial about live comment preview position. […]
[…] Comment Live Preview Placement […]
[…] Comment Live Preview Placement […]
[…] Comment Live Preview Placement […]
[…] Comment Live Preview Placement […]
[…] Filosofo Comments Preview WordPress Plugin and Comment Live Preview offer a preview button option for blog comments near the comment form. For more information on using comment previews on your blogs, see Comment Live Preview Placement. […]
[…] Comment Live Preview Placement […]
[…] Comment Live Preview Placement […]