Usability testing Drupal's comment form: findings and how to fix it's problems

I'm working on a Drupal 6 based website. One of the goals of this website is to be very usable. That's why a couple of weeks ago we run a detailed usability test on the website.

We had 5 users using the website by proposing them 3 different scenarios and some tasks on those scenarios. I plan to write a more detailed post on how we tested that website in next days, so keep an eye on my website if you are interested.

The website we tested is a photographer portfolio which contains also a blog. So, one of the tasks proposed to our users was adding a comment on a blog node. This could seems like a super easy task but our users were pretty confused by standard Drupal labels and messages of Drupal's comment form.

Findings

The default Drupal form for adding comments to nodes (Drupal name's for blog posts, stories, etc.) looks like the following:

The form does looks like a regular and simple comment form. Unfortunately our users were pretty confused by it.

NOTE: we tested an Italian Drupal website with Italian users. Some of the findings below might be a consequence of the translation or different habits of Italian users. Anyway, I doubt and I would take the findings as globally relevant.

Homepage

This is the field used to insert an URL to the user personal website. Unfortunately Homepage is a pretty confusing name for indicating it. Most of our users didn't know what Homepage actually asked to insert. Some of them asked for help to me or inserted random stuff in the field.

Subject

This other field is used to insert a title to the comment. The label Subject was confusing for our users. Drupal developers here assumes an analogy between emails subject and comments. Unfortunately this analogy doesn't holds for our users and they were pretty confused by this field. Some of them even though that they needed to copy and paste the node title here (they are imagining that if they don't the comment won't be associated to the node).

The video below shows one of our users struggling with Drupal form's Subject field.

Save

The save button at the bottom of the form is used to send the comment to the webpage. Most of our users had problems undestanding that this button is the one they need to click in order to send the comment to the website. They somehow associated it to something like Save as Draft or Save for later.

Homepage Error Message

When an user insert a wrong URL on the Homepage field the following message is reported by Drupal:
The URL of your homepage is not valid. Remember that it must be fully qualified, i.e. of the form http://example.com/directory.

From a strictly technical point of view this message is pretty perfect: it exactly says what went wrong and how to fix it. Unfortunately none of the tested user were able to understand what an URL actually is and what fully qualified means. I should say that this message pretty confused our users.

Required fields

As final note I would like to add that we found out that most of our users didn't understand that some of the fields were required and some weren't. They simply didn't notice the red * near the required fields or, if they did, they didn't know what it means. This resulted in the users inserting stuff in all of the fields even if they didn't need or want to (eg if they didn't have a personal website/homepage).

This is not a big problem for this little form but this could became a big problem if lot of non required fields are used on critical forms like on registrations or ecommerce checkouts. Users that don't get that they can skip some or most of the non required fields could easily get bored inserting data and leave the registration form or (worst) the ecommerce checkout form.

Making Comment Form Usable

After carefully reviewing the usability sessions videos and thinking about some solutions we did the following changes to the comment form.

• the Homepage label became Your Personal Website
• we added a field description to the homepage field: If you own a personal website insert its address in the form http://www.example.com/.
• we changed the Subject label to Comment Title
• we changed Save into Send
• changed the Homepage error message into: The address of your homepage is not valid. Remember that it must be in the form http://example.com/directory.

Subsequent user testing rounds showed that our changes were pretty successful. Most of the next testing showed no issues in submitting the comments.

We did not take action in modifying the way Drupal marks required fields. That would need investigation though.

Fixing your Drupal Website now

Using Drupal's powerful APIs we were able to implement the above changes into an hook_form_alter implementation:

function fabio_helper_form_alter(&$form, $form_state, $form_id) {
  switch ($form_id) {
    case 'comment_form':
        //print_r($form);
        if($form['homepage']) {
          $form['homepage']['#title'] = t('Il tuo sito personale');
          $form['homepage']['#description'] = t('Se possiedi un tuo sito personale inserisci l\'indirizzo in forma http://www.example.com/ .');
        }
        if($form['subject']) {
          $form['subject']['#title'] = t('Titolo commento');
        }
        if($form['submit']) {
          $form['submit']['#value'] = t('Invia');
        }
      break;
  }
}

You can easily use the above function creating a custom made module. Feel free to add a comment to this page if you need assistance in doing this.

For changing the Homepage error message we modified the translation of that string. If you don't use any localization on your Drupal install you need to hack Drupal code or using String Overrides.

If you choose to hack Drupal, see function comment_form_validate() in comment.module. Look for

          form_set_error('homepage', t('The URL of your homepage is not valid. Remember that it must be fully qualified, i.e. of the form <code>http://example.com/directory</code>..'));

and change it to something more easier.

Improving Upcoming Drupal 7

Drupal 7 is currently in alpha state so it still possible to suggest improvements in its usability. That's why, based on our testing experience and findings, I opened a bug report on changing the Homepage error message and I added some more informations on an already existing bug report suggesting to improve the Homepage field and Comment form in general.

If you think that this usability problems are quite critical you should definitely comment on those issues and help pushing the proposed changes into the upcoming Drupal 7.

Conclusions

This experience shows how something which shuold be simple and trouble free like commenting on a blog post can be painful for users. It suggest that even the most simple tasks can be non obvious for users if the language, process or implementation in general is broken from the UX point of view.

But mostly it shows how usability testing is crucial to improve the user experience and happyness.

Any other suggestion? Feel free to add a comment below (yes, the comment form below is still usability broken ;-) ). Yep, it is now usability friendly!