The 10 Commandents for Designing Less Evil Forms

Posted on 01. Jul, 2009 by Bradley Hebdon in Features

Evil-Forms
Ah yes, the four-letter F word. Lets not beat around the bush here, we all hate the form. Well let me be more accurate with that statement. We all hate completing forms.  But as we go about our everyday lives on the web, we’re confronted by these annoying SOB’s relentlessly and mercilessly on every turn we make. Unfortunately, forms hold all the power and are a necessary evil when it comes to completing a purchase on Amazon or creating an account on Facebook.

So, as designers for the web, how can we make forms less evil and more usable? Why by following these 10 commandments of course!

  1. Use labels above your fields for reduced completion time.
  2. Try to avoid using optional fields. These only make the form longer, and can’t be that important if they’re optional.
  3. Group related content together for more organized forms.
  4. Remove secondary actions and focus on primary ones. That is, most people don’t use “reset”, “cancel” or “back” but rather use “submit”, “continue” and “register”.
  5. For long forms, break them out into steps with a progress indicator.
  6. For short forms, consider using a modal window to allow users to sign-in or register without leaving their spot in on site.
  7. Provide flexible data input. Don’t you hate it when you have to enter your phone number in a particular format? Allow users to enter as they prefer.
  8. Clearly communicate when an error has occured at the top of the form in a visual language that can be repeated next to the field in question.
  9. When a user submits a form, provide a visual clue that the “wheels are turning” and consider deactivating the “submit” button.
  10. Once the form submission is successful, let the user know. This way they can stop sweating and know they have survived their confrontation with evil.
Related posts:
  1. The 65 Most Annoying things about the Web Today

Tags: , , , , ,

8 Responses to “The 10 Commandents for Designing Less Evil Forms”

  1. Tipps für bessere Formulare | benutzerfreun.de

    29. Oct, 2009

    [...] kurze (englische) Artikel bei UXbyDesign Eintrag merken [...]

    Reply to this comment

  2. Twitted by paulashton1979

    25. Aug, 2009

    [...] This post was Twitted by paulashton1979 [...]

    Reply to this comment

  3. Christian Swalmius-Dato

    07. Jul, 2009

    11. US designers, understand that other countries may have different zip and dialing code formats. Non-US users hate it when your form rejects their correct address or phone number because it does not conform to the US format and the form does not ’speak’ international.

    Reply to this comment

  4. Erinah

    04. Jul, 2009

    I don’t think that “2. Try to avoid using optional fields” is a good idea. Use only relevant fields, avoid irrelevant. If all the fields are required and obligatory is not very useful for your site, and may not be very polite either…

    e.g. you use the optional website field in the comment form. Would it be better to avoid it?

    Reply to this comment

    • Bradley Hebdon

      04. Jul, 2009

      Erinah, thanks for the feedback. Great points, and I agree with you. I was more concerned around form length, and how too many optional fields creates the perception at first glance, of a long form to complete. Of course, a form with too many required fields, is just as bad.

      Reply to this comment

  5. The 10 Commandents to Designing Less Evil Forms | UXbyDesign.org | Apex Designs

    02. Jul, 2009

    [...] Original post: The 10 Commandents to Designing Less Evil Forms | UXbyDesign.org [...]

    Reply to this comment

  6. Bradley Hebdon

    02. Jul, 2009

    Hi Caroline – firstly thanks for stopping by and secondly, you have some excellent points. You’re right in that a few of these are more guidelines than rules (commandments). I might have taken some poetic liberties in choosing that term :)

    Reply to this comment

  7. Caroline Jarrett

    02. Jul, 2009

    Agreed that we don’t like forms – but these aren’t really commandments, are they?

    1. Labels above the fields: OK. that’s better than having them *in* the fields (like in your ‘leave a reply’ form). But it’s also fine to have the labels to the left of the fields. See my article ‘Label placement in forms’ http://www.usabilitynews.com/news/article3507.asp

    2 through 5: all good advice, well worth following.

    6: Might work, might not. Some people can cope with modal windows, others are thrown by them. And – asking a user to log on inappropriately can be a major reason why they abandon your site. I did like the word ‘consider’ in this one. Consider, then decide not to do it (probably).

    7 through 10: all good advice, well worth following.

    But you’ve left out the crucial points, which are:
    - find out what your users expect to tell you at this point, and make sure you ask those questions
    - find out how your organization is going to use the data. Do not ask for anything that you don’t need immediately.
    - if you have to ask for anything at all unusual, make sure you clearly justify your requests to your users
    - if you have to ask for any private data, such as name or email, then explain how you will use it and how you will safeguard it.

    Keep thinking about forms!

    Caroline Jarrett
    http://www.formsthatworkcom
    I’ve seen plenty of people abandon forms because they asked for unusual, invasive, or hard-to-locate information. I’ve never seen anyone abandon a form because it didn’t have the labels in the right place or

    Reply to this comment

Leave a Reply