Conversation with a Comment Form

Me: Hey, I want to say something.

CF (Comment Form): Wait, what’s your name?

Me: I’m Amrinder and I’m trying to say… [interrupted]

CF: What’s your email address?

Me: … it’s amrinder@xyz.com. So I was saying that… [interrupted]

CF: Do you have a website? If yes, what’s the URL?

Me: … yes, I have it, but… anyway it’s http://designbyanaami.com

CF: Now please leave your comment.

Me: Ohk, I was saying that… your article is… good. Actually there was something else in my mind which I forgot…

This was my conversation with a comment form. Following are some good and bad practices, and alternatives of comment form design.

Bad Practices

  1. Labels on right-side of input box
  2. Using icons instead of/with labels
  3. “required or *” is not required, “optional” is the option:  “If most of the inputs on a form are required, indicate the few that are optional.” says Luke Wroblewski in his book “Web Form Design“.

Good Practices

  1. Top-aligned labels: UX matters article about label placement recommends using top-aligned labels because this minimizes the distance your eye has to travel from the label to the input field.
  2. Using “optional” instead of “required/*”
  3. Putting comment input on top of the form

I believe following layouts A) and B) are good comment form layouts.

Alternatives

  1. Use @twittername to comment: With comment input box at top followed by just one input box asking for @twittername can be a good alternative.
  2. Tweet a reply using #tag: For a beautiful Web has implemented this method for commenting which I tested today.
  3. Twitter for comments: Daniel Sandler has done some good research on this method and has lots to say about it.

Disqus is another solution for comments implemented by Usability Post but it has too many options which I don’t prefer. So for the time being I’m sticking with simple comment-form-method until some neat and lean method comes up.

10 Comments

Add your comment


  • # Tuhin
    says on September 22

    Using Twitter for reaching out to your users needs to be checked with the demographics and the reach of twitter in that reason.
    I know it is way cooler and much more sensible but sadly in country like India it is as good as saying “Hey you are not cool enough to comment”.

    Also I do not see why using icons with Labels is bad or “wrong”!

    Similarly, I am not so sure what Luke’s basis for those suggestions about using optional over required are. Once again I would not follow it just because someone who knows a lot about it said so.

    As for what you use, I use pretty much the same after really trying hard to find a solution using Twitter’s @anywhere. The say it first approach and ask the name later thing was also mentioned by the CSS Tricks’ Chris and that is where I first read about it.


  • # Amrinder
    says on September 24

    @Tuhin: Using icons with/inside labels is telling same thing twice when 1 is fine. Luke’s basis is user testing and his experience with web forms. Twitter’s solution will be the best possible experience if implemented. Right now no one cares to come back to review your reply on their comment.

    P.S. Glad if you came back to see mine.


  • # Louis
    says on September 25

    Hey, Amrinder.

    Thanks for posting this, and for letting me know about it (in a comment on my website).

    I haven’t really given much thought to the way my comment form is laid out, so thanks for the reminder, some good tips here. I definitely shouldn’t have been lazy with such an integral part of the site.


  • # Henrique
    says on October 24

    Comment as the first input: that’s a very good point you raised there. After filling the comment, it’s more likely the user won’t give up posting it if only the name and email are necessary. The opposite is true: I can give up on commenting when I see I have to fill this info.


  • # Andrey Boitsov
    says on February 06

    Very useful article. Just changed the order of the fields in my blog.

    Do you mind if I translate your article into Russian and will publish in my blog? With the link to your original article, of course.


  • # Amrinder
    says on February 08

    @Andrey: Its great to see that you liked and implemented the idea in your contact form. Sure you can translate the article and publish it on your blog.


  • # Andrey Boitsov
    says on February 09

    Amrinder, thank you. It’s done.

    But how about the contact form on this page: http://designbyanaami.com/contact.html ?
    I think that you are not guided by the rules in the article.


  • # Amrinder
    says on February 09

    @Andrey: In contact form that format is fine because in real life we introduce ourself before enquiring about the project or deal. Don’t we?


  • # Andrey Boitsov
    says on February 09

    You are right. Thanks again!


  • # Navdeep Singh
    says on February 17

    Great Illustration, we as developers didnt realise this thing ever.. Good Going Amrinder Bhaji 🙂 I really appreciate your effort.