7

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)

Improve this question
1
  • Agreed, I don't have enough rep to migrate it, can someone do this?
    – Matt Rockwell
    Jun 24, 2011 at 15:21

6 Answers 6

Reset to default
11

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....

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

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.

Improve this answer
1

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.

Improve this answer
9
  • Can you provide any examples of such "bad quality" registration forms ?
    – Flavius Frantz
    May 31, 2011 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, 2011 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, 2011 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, 2011 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, 2011 at 13:16
1

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.)
Improve this answer
1
  • I'd add that he's also a great speaker. Do catch him if you ever get a chance.
    – DA01
    Jun 24, 2011 at 17:06
1

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?

Improve this answer
0

Check out Ultimate Guide How to Optimize Registration Form for Higher Conversion

It covers:

  1. Monitor your signup process
  2. Fewer fields is more conversions
  3. Provide social login button
  4. If you need a lot of information - split it
  5. Top-left aligned labels are best for readability & completion
  6. Communicate expectations and errors clearly
  7. Design better forms
  8. Use a benefit-oriented headline and CTA
  9. Make CTA button stand out
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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