Usability of Comment Form Design

February 21, 2009 – 14:17 by Dani Iswara. Words count: 305.

Usability in the meaning of common sense may vary in comment form designs. This note is about users experience against simple to fancy comment forms.

Here are some common comment form:

Blogspot drop-down menu for comment author profile

Figure 1. Default comment form design by Blogspot.

textarea, followed by name, email, URL inputs, and submit button

Figure 2. Default comment form design by WordPress.

similar with WordPress, with additional subject/title for comment

Figure 3. Default comment form design by Drupal.

graphical-based form design

Figure 4. Fancy and beauty comment form design by tentangrifai.com (has changed now).

Principals and technical guidelines of comment form design

Common principals and technical guidelines of comment form design based on accessibility, usability, and user (Dani Iswara .Net) experience:

  1. For accessibility reason, especially for an aural agent, use fieldset, legend, label (sometimes usability has a conflict with accessibility).
  2. Usually, label placed close (above) to the input fields.
  3. Comment form is in the same page of single post.
  4. Common order
    1. Comment author’s details (name, mail, URI [uniform resource identifier]), followed by comment, subscribe to comment, and submit button.
    2. Comment, comment author’s details, subscribe to comment, submit button.
  5. For the complex forms, use tabindex in every input codes for easy tabbing forms. Blog comment forms usually do not need this.
  6. Name and mail fields are required (which is marked).
  7. Mail must not be published!
  8. URI is not only a website or weblog. We can use Facebook, Twitter, LinkedIn links, etc.
  9. Left aligned is more readable (in case of left to right direction; except Arabian).
  10. Still accessible with disable
    • Cascading Style Sheets (CSS),
    • images,
    • javascripts,
    • flashes.

Which principal is ideal for you? Which comment form is easier to use when using desktops, mobile devices, or aural agents? :)

More reading:

Just unessential weblog
Dani Iswara, mail me: [myfirstnamelastname]@gmail.com or use contact form.

Last updated: Wednesday, December 23, 2009 at 7:53

Posted in category: Blog Tips, Web Accessibility, Web Usability
Tags: , ,
3 Comments/Trackbacks (Comment closed)

You are free to share (copy, distribute, transmit) & adapt this blog post under the similar license (Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported; CCA-NC-SA 3.0 Unported). Please put these links on your copy:
Taken from: Usability of Comment Form Design by Dani Iswara.

Unimportant Related/Random Posts

You may also read list of most popular posts and most popular tags of Dani Iswara .Net.

3 Responses to post titled: Usability of Comment Form Design

  1. Comment by Dani Iswara on June 18, 2009 at 08:00:12
    using Mozilla Firefox 3.0.11 on Gentoo Linux

    about tabindex,

    If the HTML has been written in a logical order there is no need to use the tabindex attribute as the user will follow a logical path without it.

Trackbacks/Pingbacks

  1. Pingback by Label Left Align followed by Input Field - Dani Iswara .Net on June 18, 2009 at 02:15:25
    using WordPress abc

    [...] Actually, I have my own opinion related to blog comment form. Check it on Usability of Comment Form Design. [...]

  2. Pingback by Alur Pikir Blog - Dani Iswara .Net on November 15, 2009 at 05:56:10
    using WordPress abc

    [...] Usability of Comment Form Design. [...]

Sorry, for some reasons (sometimes due to sp*ms attack), the comment form is closed at this time. If You have any suggestions, please contact me. Thank you.

Dani Iswara .Net

Return to TOP
›› Older entries: Review: IndosatM2 Lambat, 3.5G hanya untuk yang sabar
‹‹ Newer entries: Usability of Previous/Next vs Older/Newer Links