Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am trying to learn about registration forms, what should I be careful about when designing one? Is there any "best practice" or do you know any great websites with great examples of registration forms?

(For example, I like the facebook.com registration form, the one when you sign up the first time)

share|improve this question
    
Agreed, I don't have enough rep to migrate it, can someone do this? –  Matt Rockwell Jun 24 '11 at 15:21
add comment

migrated from graphicdesign.stackexchange.com Jun 24 '11 at 16:12

This question came from our site for professional graphic designers and non-designers trying to do their own graphic design.

5 Answers

up vote 10 down vote accepted

I would say you should Consider these things whenever you design a form :

  1. Make Your Form Easy to understand
  2. Choose Your Colors Wisely
  3. Make it short and sweet (long pages/details irritates)
  4. Design logically and easy to complete
  5. A high contrast, easy to follow flow

Some articles and books on how to design beautiful forms :


Examples of registration forms and Inspirations :

All Forms need a solid/Soothing visual structure to attract not to distract.......

Hope these things will help you....

share|improve this answer
    
That's a great collection of resources in one place. –  Alan Gilbertson May 31 '11 at 23:27
    
Any thoughts on multipage forms vs. single page forms? –  Matt Huggins Jun 24 '11 at 19:38
    
My thought on multipage forms is: don't. ;) Granted, sometimes you need to... –  DA01 Jun 24 '11 at 19:56
add comment

I would recommend reading Caroline Jarrett and Gerry Gaffney's excellent Web Forms That Work. Some key points for you, from the same book:

  1. Take as little information as possible. Are you just verifying that a user is old enough to view your content? "Are you 18? (yes/no)" is sufficient.

  2. Ask what you're using the information for. Why do you need this-or-that particular field? If the info is being used by some other department in your company, pay them a visit. Ask if it's really that important. Ask 'real' people if they actually use the data.

  3. Assume your users don't read any ancillary or explanatory text on the form.

  4. Show the user that you care about their effort. Strive to re-use any info the user has already given your organization (even if that means a database lookup). Preserve the contents of a rejected form (e.g. don't delete my carefully worded application statement just because I entered my DoB as DD-MM-YYYY rather than MM-DD-YYYY)

  5. Avoid too many negatives in your labels / questions. Long chains of 'nots' are hard for readers to parse, especially in complex sentences.

share|improve this answer
add comment

Pretty is easy, usability needs some thought. Personally I find many user registration forms 'half baked' for the following reasons:

  1. The cursor is not in the 'first name' box - user needs to put in an extra click.
  2. The enter key is not usually captured - this should be set to work like the tab key on text fields but not text areas.
  3. Some validation is needed so that people who type in 'john smith' get reply emails that have 'John Smith', i.e. the data is tidied up at source.
  4. The background/foreground colour combination of the in focus element needs to be highlighted - easy to do, so often not bothered with.
  5. On submit you get nothing but a 'your form has been submitted' response - if that. Why not show the content of the autorespond follow up email?

I also find it weird that most 'pretty form' tutorials miss out on these basics - seems nobody tests stuff on their elderly relatives these days.

share|improve this answer
    
Can you provide any examples of such "bad quality" registration forms ? –  Flavius Frantz May 31 '11 at 10:27
    
Open your eyes. First registration form I come across: sourceforge.net/user/registration does not put cursor focus in the first box and makes no attempt at Title Case for the titles. Most CMS and ecommerce toolkits pay minimal attention to the usability matters I mention, this is a pity as 'Contact Us' can often be the second most important page on a website. –  ʍǝɥʇɐɯ May 31 '11 at 10:39
    
Thank you, I have seen pretty bad forms myself, I am just curious what other people see as a "bad" reg. form –  Flavius Frantz May 31 '11 at 14:31
    
Not bad but PLEASE don't auto-focus on a field on page load. That's a usability and accessibility pain in the butt. –  DA01 Jun 24 '11 at 0:31
1  
Good points, but for a registration form? You want them to have the whole page read out top to bottom or straight to the form? The internet is all about speed, doubly so if you have accessibility problems. "is typically seen as a universal usability no-no" - could you be any more vague? That is asserting a viewpoint from on high and not the reasoned discussion that SE is for. –  ʍǝɥʇɐɯ Jun 24 '11 at 13:16
show 4 more comments

Luke Wroblewski is the godfather of web forms design. I'd recommend anything he's written:

http://www.lukew.com/

He has an excellent blog that's often full of quality statistics:

http://www.lukew.com/ff/

And his book ain't bad either:

http://www.lukew.com/resources/web_form_design.asp

I should also summarize Luke's philosophy on this (which he has plenty of great data to back it up with):

  • avoid registration forms altogether. Ideally, you'd let a person use the site right away. SE is a model of that.
  • If you must have a form, ask for the absolute bare minimum of information.
  • Consider leveraging an existing login API as an option for the user (google, facebook, twitter, etc.)
  • Decide if some of the information you are asking for in initial registration could be asked for later...ideally in context with a particular feature/task. (for example, maybe you don't NEED their country until they decide to use some sort of regional search...you can then ask for it then.)
share|improve this answer
    
+1 Luke W is a great person to reference. –  Matt Rockwell Jun 24 '11 at 17:05
    
I'd add that he's also a great speaker. Do catch him if you ever get a chance. –  DA01 Jun 24 '11 at 17:06
add comment

Try to avoid optional fields.

Use relevant content groupings to organize forms.

Field width can provide valuable affordability.

Best Practices for form design

Recent research show when form label is top align, Users capture label and text field with single eye movement and the completion time is fastest.

Input form label alignment top or left?

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.