Comment Form Design
A Usability Post reader, Vadim, has raised an interesting issue regarding comment form design. He saw that some forms around the net had two fields labeled as required — the name and the email. Comment forms usually have two more fields in addition to this: the website and of course the actual comment. Here’s what this looks like:
Vadim mentioned that he noticed something curious in a popular blog post with hundreds of comments. That blog post had the very comment input form you see in my above screenshot. He noticed that some of the people replying to the post had left “none” or “n/a” as their website.
The website field isn’t required, but it was obviously mistakenly confused to be so. The two fields above: the name and the email are labeled as required, but everything else isn’t. This is a little confusing as obviously the comment is required also, but the form assumes you’re smart enough to work that out.
Good comment form design
What would be the ideal comment form design?
UX Matters has a very good article about label placement in forms. The findings published are based on an eye-tracking study, so the recommendations provided are fairly authoritative.
To summarize… the conclusions were that you should place labels above the input fields because this minimizes the distance your eye has to travel from the label to the input field. If you place them on the left of input fields, at least right align them — again, to cut the distance. Bold fonts didn’t perform well, though there were some doubts about what could have caused this.
So the ideal comment form has the labels placed close to the input field, preferably above it. But what about the actual order of the fields. Most forms start with name, followed by email, followed by website, followed by comment. Pretty much all blogs and sites implement this same setup for their comment form. I’d like to question whether this is the right approach.
A friend of mine has implemented different layout for the comment form. Here it is:
This challenges the standard comment form flow by putting the comment input field first, followed by author’s details. This way you can say what you have to say, and then sign the comment. People write letters in this order. You write the content of your letter first, and then you sign it. I think it would make more sense for the comment form to also flow like this.
Of course, this form isn’t ideal either because the visitors have to look right of the page to fill their name and email, and then back left to find the submit button. Here’s a setup that in my opinion is even better. It’s a form used on the Particletree blog:
Pretty good. We’ve got the comment field first. Then at the bottom we’ve got author detail fields. Labels are close to the fields and are placed above them as recommended by UX Matters. The submit button then follows the flow and is placed below all the fields, in the center. Required fields are indicated by a red star.
I may try this setup with the contact form here on Usability Post.
What do you think? Do you think the popular comment form setup works, or do you like my suggestion of changing the field order? I’d love to read your thoughts.
I’d agree that it imitates writing a letter, but the comment form has kind of become a standard.
I’m used to writing my name and email before I write my comment. And so is a good portion web readers. Dare I say, the majority.
When I encounter the 2 comment forms that are arrayed different, I find commenting is slower because I need to double check which field I’m in, regardless of label.
One rule of usability, I believe, is not to be too original. People expect things the way they see them everywhere else.
Good point Sean. Certain UI patterns have become a standard because of widespread use, and people will expect to find things in certain places just because that’s what is familiar to them.
The question posed in the beginning of the article - how to eliminate confusion about what is required and what isn’t - is not really answered in either of the mock ups provided.
To answer that question, I would wonder if putting “[required]” as the default value of each required field and have that clear itself on focus would be a good alternative to the bold/star/highlight method that is being used so widely?
Mine is certainly not the best but since I changed my fields order, it seems more easy for visitors to answer to posts before filling less important informations.
pickupjojo: Interesting. Did you get some positive feedback about or an increase in the number of replies?
Dmitry,
Eye tracking studies have also shown that users have an easier time with forms when the left-hand edge of the forms, and their labels above them, form a straight line down the page. There’s also less errors. (Sorry don’t have a link to reference at this time).
As for the original mock-up I’d guess that the users see the words “Name”, “Mail”, and “Website” and figuring they now understand what content is requested they don’t read the rest of the line to get the information in the parenthesis.
Also, light grey text on a white background? Not a great choice for legibility. Where did this trend come from anyhow?
Your comment form that I’m using now looks like it would work well if you just moved the labels above the form fields and added asterisks next to the three required labels. Keep “Website” grey, (though probably a darker shade), and I’m willing to bet you’d see few issues.
Interesting… I might try some of this on my blog, too. It’s quite interesting how you sometimes stop being innovative and just go for an accepted solution without actually trying to improve it… you make a couple of good points.
Great subject. I have been playing around with the idea of the comment structure recently.
The popular comment layout is common, so it is easily recognized when scanning to post a comment. If the comment section is in a different format, then I am going to spend more time trying to decipher what everything means.
My personal preference says only the red star as a required indicator is not enough ( see laziness ). If I am unsure about a field being required, then I need to reread the label and finally confirm the star exists.
If the label for required fields was recognizable as required, then I could skip a step. Similarly, if the label field itself was recognizable as required, then I could skip a step. One way to do this is changing the color of the label and border/background of the form field.
Label and field on the same line as it gives a clear separation between form fields, and it increases my ability to associate the label to a field. If you could mimic that behavior with having the label above the field, then it could work fine. The spacing between the form fields in the last example gave me a lot trouble. If you added some padding between fields, then it might work.
–
If your blog can subscribe users to new comments, then we introduce a couple of questions.
Is the comment field even required?
Maybe. What if someone wants to subscribe to the comments of a post, but does not want to post a comment?
We could create a separate form for subscribing or make the comment field optional. I went with having the comment field optional.
Alas, my comment is longer than I thought it would be… =)
This is a great post Dmitry. I just had one of the ‘Doh!’ moments and ran back to correct my own site before publishing my comment. You see my own comment form did not match what I’m about to advise. I get less comments than you, so never noticed any problem. I’ve changed it now anyway so here goes.
Firstly Matteo Penzo’s research was concerned with speed of completion and not errors as far as I’m aware. There is also a slight flaw in his methodology. If you look at the examples, you’ll see that the form fields on each of the examples are different.
But while we’re on that point, putting label text to the right of the field isn’t ideal. But like others have said, many of us comment on loads of blogs, so it becomes a 2nd sense.
I think the issue you describe is caused because, in my experience, some people have a tendency to complete every form field that is presented to them.
So it’s understandable that some people would put “n/a” and “none” in the website field.
If most of your fields are required then the best practice advice is to actually indicate the optional ones. So rather than saying “required” on 2 of the 4 fields you just put “optional” on the website field.
The other option is to programatically remove text that is not a URL from the box.
I recommend that anyone who is really interested in the usability of web forms (i.e. as sad as me) should buy this book:
http://www.lukew.com/FF/entry.asp?680
That book is on my list to read. Perhaps I should bump it up a few slots.
I’ve recently changed from old WP comments to WP 2.7 comments and was thinking of redesigning my comments / comment form. So first thing: great post! Comes in handy.
Second: I like your friends design and although, as you say, “it makes sense” it looks and feels a little wrong.
The last example from UX Matters doesn’t go well for me because it is out of the ordinary (even if it may be better).
I think I would personally prefer the system of your friend, but with name, email and website on the left. This would make sense to me, because often, you’ll also left align the commenters name and avatar on the left (like you do)
Another thing that springs to mind: how would you align your submit button? I always place it left-aligned, preferably level with the textarea (again, like here). Right aligning it feels kinda wrong and I think it’s the same reason why you best not put labels on the right of your inputs: your eyes have to travel too much.
Today I was filling out a ticket for my hosting company and below the form were two buttons, automatically I clicked on the left button, realising too late that this was the “cancel” button, deleting all my content and sending me to the previous page.
So when designing your form, here come two extra things to mind: put your submit buttons on the left (or do you guys have any other arguments for right alignment) and if you MUST place a cancel button, you might want to provide a confirm box…
One of the reasons I prefer name/email/website before the comment field is that a chunk of blogs are implementing 3rd party commenting systems or manditory logins these days.
More than once I have typed my comment and then gone to sign my name/email only to find that I needed to login or be registered just to submit it. Major bummer.
So the question for me is follow the sheep or standout and potentially become a pain in the a**. I think I will go with usability and see how people react.
Here’s a fascinating survey of popular website comment forms…
(part 1) http://www.smashingmagazine.co.....-up-forms/
(part 2) http://www.smashingmagazine.co.....rms-part-2
To me, it seems like labeling a field as (optional) is more clear and direct than an asterisk, bold font, or repeatedly using (required) on all the other fields.
Oh yeah and ditch your reset buttons like bram said. If I decide against posting I just won’t submit it. If I want to change something I’m hardly likely to delet everything and start again.
This is fascinating.
I’d been taught that left-aligned labels are preferred, to support the prototypical F-shaped eye-tracking heatmap of web browsing. The idea is that it supports easy vertical scanning.
But this study revealed this to be incorrect!
If I were to wager a guess at why, I’d say that users don’t “browse” forms. The interaction style users engage in with forms is different, and requires its own study and design best practices.
Vance I wouldn’t read too much into this. Left-aligned is still a good approach.
My major complaints with comment forms in general are that the comment fields are often too small (which makes it hard to proofread even a 2 paragraph comment), and that there’s usually no explanation why my email is required (considering that most places I comment on don’t even notify me when there are responses to a particular blog post).
Leo: Good point about small text areas. This bugs me too.. I should probably make mine a touch bigger. There’s a nice feature in the Safari browser which allows you to resize all textarea fields.
Emails are required (at least on WordPress) for the Akismet spam filter and to display Gravatar pictures (if available). I’m not sure what Akismet does with it, but it’s one of the things it checks :)
Having said this, I don’t think blogs should ask for emails. Emails are private, and they have nothing to do with the comment. Unfortunately I haven’t figured out how to disable this requirement for Wordpress. It either requires name AND email, or nothing at all. I just want the name :(
Great comments everyone — thanks for your input.
David: Thanks for the book recommendation — I’m putting it down on my to-read list :)
For those interested (and because I want to blatantly advertise my own site, if Dmitry doesn’t mind :p): I have redesigned my comment form (gotta do the button though), taking in some of the things said here.
Interested in hearing thoughts on the placement of the submit button.
Don’t mind the comments themselves, still styling those!
This is a very interesting post, and the comments are also fantastic to read. I’ll have to have a little re-think about my own contact form on our new website, as this poses some interesting questions!
Bram: I would modify space between the label and the input field a little — tighten it and/or increase the space above it. Just needs a bit more separation between the fields.
A unique layout though. Don’t know what to say :) Fits quite well together though you still have to make a detour right to the comment form and back left to the submit button. However, it does look quite nice.
Great views, I’m loving this discussion :-)
I’m gna just share my views from top to bottom as I see them.
Comment Form #1 - Most Common
I feel this is a good simply because its consistent with how the user is used to seeing the comment form and filling out information in general. Filling out the name and email wont take me much time, and if you really wanted to go ahead and type the comment first, you can do so, not really that big of a work around.
Comment Form #2
I really like how this one is laid out, comment first, and the the name, email, url on the side. I feel the button should be right aligned since the name/email is required (and the eye is leaning towards the right while filling this portion out), and if there is possibility of confusion, then through our design, we can give it more attention.
Comment Form #3
Seems logical but to me it feels awkward. The center aligned button is not sitting well with me either~
Even tho I like the design of Form #2, Form #3 is the easiest to follow, because on #2 users can forget to complete the author and rest (not looking on right side).
I prefer comment first. I feel when a reader is ready to make a thought out post, it’s best not to interrupt that thought process by putting name/email/url first.
I feel comment form is so simple, any layout will work, unless the layout is too unique that requires learning process. then again, I’m not the one to talk :)
I think that the comment field before the author’s details is a great idea, it surely leads to more comments.
I believe that the second layout (but with the submit button aligned to right) works better than the third.
IMHO, the third layout problem are the three fields in a row, which makes the eye to “zig zag” through the fields and labels and slows down readability.
The second layout with the button aligned to right seems to be the most effective to me.
(sorry about my caveman-english…)
I like the idea as well, but it may lead to people submitting the form before filling in there email and name, due to the thought „I said what I wanted to say, so submit“.
I might be wrong though.
Anyway, I prefer the dark layout, would it not work just as well, if one would put the submit button to the right, just below the website field?
Thinking about working on the comment field, why do not put it above all the comments?
This way one does not have to scroll to submit just a short comment. After the redesign the comment area does not need as much space anyway, so it should not be to bad for people who only want to read.
I would recommend some multivariate testing for this. It would really be cool to see the results. There is a Wordpress Plugin to help you set up this. You can find it here: http://websiteoptimizer.contentrobot.com/
[...] Comment Form Design « Usability Post Comment forms and Usability. [...]
Greetings!
This is a very interesting discussion. I am glad to see Luke W’s thoughts referenced, as I find him to be a fairly trusty source of information.
I’d like to suggest that this usability challenge may be solved by aesthetic emphasis, rather than positioning or layout. Because we know that textual instructions are usually ignored regardless of how they are displayed, we can look towards design rather than layout for a possible solution. If you look at the original presentation, the required text is low contrast and stylized like the other text – it even runs immediately after it.
If you use an attention-flag that is fundamentally different than the other form elements (usually a colorful image), a user is better able to immediately intuit which fields are required with little or no conscious thought or decision making. The eye will scan the form. The brain will pick up on the fact that some rows are different. A final near-subconscious process will view a familiar convention or image and determine that certain rows are mandatory.
I will admit that this is a “play it safe” answer, but I would suggest that everyone keep in mind that the primary goal of most forms isn’t to be fun or impress a user with design. It has a job to do. A user’s experience and perception of enjoying your website will probably not be derived from their use of your contact or comment forms.
-B
Ps don’t grey out the field unless it’s disabled :P
how come this comment form is not like you preach? :P
Dan: it is now :)
Dmitry: In fact I think that people finds it easier to answer to a post if they can write their comment without filling ‘useless’ informations before.
But hey, I really like your current form. :p
A comment on the previously discussed use of confusing “Submit” buttons with “Reset” buttons:
If it is absolutely necessary to include a way to reset/clear the form, I always make the “Submit” an actual input/button element, and make the “Reset” a simple text link (sometimes in a grayed-out style).
Since you’re automatically inclined to go for the button first, this makes accidental form rests less likely.
Speaking of Usability, a “Print this Page” feature would be great!
[...] Jan 8th, 2009 评论输入框的用户体验 Tags: 用户体验 UXmatters和Usability Post分别有一篇文章谈论评论输入框的用户体验问题，对目前流行的评论输入框模式的用户使用习惯和流程体验方面进行了分析和改进建议。 [...]
I have always been curious about functionality in websites and, well, the world in general. I read this article with great interest. It does seem to me that the reason we comment is to speak our minds so why not have the comment field first? However, as others have pointed out, one gets used to the conventions regardless of reason. One of my favorite examples is the QWERTY keyboard layout.
Anyway, great article and I may try this layout on my site too!
[...] Usability Post: Comment Form Design [...]
I love to see this discussion! It’s great to see you all working through the issues and also, it’s great to see recommendations for testing. In the end, it’s what your actual users do and prefer that should be your biggest driver in making these decision.
One point to bear in mind: Mario Penzo’s article on UX Matters is interesting, but it doesn’t work for all forms, all the time. For a longer disucssion of this point, please see my article “Label Placement in Forms” http://www.usabilitynews.com/news/article3507.asp
Caroline Jarrett
Co-author of “Forms that work: Designing web forms for usability” (foreword by Steve Krug;
“The humble form: it may seem boring, but most of your website’s value passes through forms. Follow Jarrett & Gaffney’s guidelines, and you’ll probably double your online profits.” - Jakob Nielsen, Principal, Nielsen Norman Group
#Nathan:
What’s the point of a “reset” button anyway?
[...] Comment Form Design [...]
Great article and disucssion!
I’ve been doing some serious research about the positioning of buttons in forms in general. And what I’ve come up with is to put the “Primary Action”-button left-aligned with the form. One of the reasons for doing this is that the eye automatically searches for a new form element to the left just under the previous element.
When it comes to the Reset button it’s best left out of the form since it usually potentially do more harm than good.
For a more elaborate description of this, read my article The use of buttons in web forms.
Good one
interesting discussion.
@bram: I don’t think your comment form layout is practical. you provide a straight line down from the input fields to the submit button, so the logical flow for the user becomes 1)name 2)email 3)website 4)submit. to add the comment itself, you have to make a detour from this straight line.
[...] Comment Form Design 网站上的每一个细节都可以牵涉到可用性的方面. 这里举了几个关于留言栏的例子. [...]
Comment box first = Brilliant. Makes a lot of sense.
Thanks Dmitry, very useful article..
People expect things the way they see them everywhere else before but I think, if something is wrong or useless up to now, we must change this with true.
This is so normal and useful : if we are designing a comment form, comment area must be first item, if we are designing a registration form username must be first. It must depend on our work. We must arange form items to its priorities.
[...] Usabilitypost.com hat einen kleinen Artikel verfasst, in dem er anregt, einmal über die Anordnung der Elemente eines Formulars nachzudenken. Welches Feld sollte zuerst kommen, was will der Benutzer zuerst schreiben (z.B. bei einer Kommentarfunktion will er die Nachricht zuerst schreiben und sich dann später um seine Daten wie Name und Mail kümmern). Er schreibt auch über die Anordnung von Labels, z.B. das man sie so anordnen sollte, dass das Auge den kürzesten Weg nimmt. [...]
[...] 原文：Comment Form Design [...]
At first I didn’t notice the new order (comment first), when I was writing my last comment here. But it felt somehow easier afterwards. You’re right, this way you can first say what you have to say, then do the rest (sign your letter).
Didn’t read the full trail of comments, there are quite a few!
The last design in my opinion is not only ugly, but because the fields are right next to each other without some sort of separation it makes it somehow confusing which form field you are filling now. Having the label above works better when aligning the fields vertically rather than horizontally in my opinion.
The second design is neat, but it doesn’t exactly work like a letter as you suggested. As a matter of fact, in letters you have your name and details at the top of the letter, only your signature at the bottom.
What might be useful is some sort of new control, a hybrid between the text area and the textfield. What if in this big text area it would say “Name:” and “Email:” at the top, with this text appearing in different font and being uneditable? I would just put the relevant details there and press enter to move on and get on with my comment. That would make the flow of writing a comment much much more like the one of writing a letter.
Interesting post anyhow, thanks!
Got the same topic some months ago.
My point is to ignore the “e-mail” field. This field is necessary only of user wants to recieve notifications about updated comments.
So, let the user show his interest in notification and only after ask his e-mail.
there are illustrations in my blog post http://travin.ru/?p=114
If you ever come across this complete idiot, don’t deal with him whatsoever, he is the dumbest person that I’ve had to deal with ever, he must be brain damaged or something, I caution you please stay away, his email is bill_eichler@msn.com and his ebay id is billeichler
William Eichler
429 E Paseo Chuparosas
Green Valley, AZ 85614
Great article and discussion too. I’m a new reader of this blog and i found it excellent. Goes strait to my RSS reader.
About article, very useful and good point. I like what Jinn’s said (my thought was the same): I prefer comment first. I feel when a reader is ready to make a thought out post, it’s best not to interrupt that thought process by putting name/email/url first.
And also additional usability option that would help me, as a regular internet/blog/forum user - put reply or quote button after so i could e.g. quote Jinn’s comment. Maybe this isn’t usual button in blog but in blog that has as many comment as this one, that would make posting easier. Another possibility would be to put post numbers for comment’s especially when you have several comment’s posted by one user, something like - 13#, so I can refer on precise post number when posting a comment.
Really interesting to read blog post including comments, great job!
I have just one two three comments: (yeah, kind of evolved while writing, lol)
1) Most important to me is that the web site is set up so that it remembers my data. Some web sites I return to a lot, and remembering my name, email and website makes it easier to comment.
2) The “Web Form Design” book by Luke Wroblewski was mentioned in a comment here and I highly recommend. One of the crucial points in the book is to set up forms as a conversation with the user. In that context, I would label the Website field something like “Website (if you have one)” :-)
3) I still think it’s important to state the Email address will not be displayed nor exploited by third parties for advertising purposes.
-Martin
[...] 有网友提到用户习惯问题，的确中文博客我还没见到这样的评论表单顺序。不过没关系，我这套模板独一无二的设计又不是这一个地方。真正郁闷的是，做完之后跑到Usabilitypost查看原文，结果发现他们的Post your comment设计与我的处理几乎一样。 [...]
Hello,
it’s not bad to put the comment field first, cause it’s the mean information. i also suggest to put an anti-spam checker to avoid spammers !
Good luck :-)
Hello,
that’s an interesting idea. I’m not shure if this is really better but I’d like to give it a try..
The latest worldwide discount holiday travel deals including cheap holidays can be found in our Bargain Box section. As a result of our continual efforts to bring you the best travel deals available in an effective and reader-friendly format, we are proud to bring you a redesign of the Bargain Box. Holiday Travel Deal
popular layout usually works. but i really like how you reduced the opacity of the optional field.
I actually like the comment being setup first, its the first thing I want to do….”talk”
Ну и что, результат есть ?
i like it
[...] Usabilitypost.com a good question was posted: “What would be the ideal comment form design [...]