Web Form Design Patterns: Sign-Up Forms

Advertisement

If you want to maximize the revenue of your service you need to maximize completion rates of your web forms. Unless you have some revolutionary ideas to impress your visitors at first glance, it is not enough to simply enable users to sign up on your site. To make it possible for the service to reach a maximal exposure we, designers, need to provide users with a good user experience. We need to invite them, describe to them how the service works, explain to them why they should fill in the form and suggests the benefits they’ll get in return. And, of course, we should also make it extremely easy for them to participate.

However, designing effective web forms isn’t easy. And it has one simple reason: nobody likes to fill in forms — neither offline nor online. Therefore, as designers, we need to figure out sound design decisions to make the form completion easy, intuitive and painless.

But how exactly can we figure out these decisions? Where should the link to the form be placed in the layout? How should we design it? How should we highlight the labels and how should we align them? How do web form design patterns look like in modern web-sites? These were exactly the questions we’ve asked ourselves. And to get the answers we’ve conducted a survey.

Below we present findings of our survey of current web form design patterns — the results of an analysis of 100 popular web-sites where web-forms (should) matter. We have decided to start with sign-up forms first. We present the first part of our findings below; the second part of the survey results will be published next week.

Update: the second part of the survey results is now also published: Web Form Design Patterns: Sign-Up Forms Part 21.

Sign-Up Form Design Survey

The main objective of the survey was to provide designers and developers with some intuition of how effective web forms are designed in practice; we also wanted to present some guidelines of how a user-friendly web form can be achieved.

We have selected 100 large sites where web-forms (should) matter2. To select these sites we have considered Technorati, Alexa as well as popularity in search engines and various rankings. We used this popularity as an indicator for sites where web forms really matter as they directly affect business goals and therefore should have been given a high priority during the design process. In particular, registration forms are crucial for social applications which explains why many of the reviewed forms are from social networking sites.

We have focused on sign-up forms as we wanted to consider further crucial forms (e.g. checkout forms) separately. Aftewards we’ve gone through each and every one sign-up form of the selected sites and analyzed the design approaches implemented in these forms.

We have filled in each of these forms using a special e-mail account and a special user name. To make the survey as comprehensive as possible we have identified 29 different design problems and questions which may arise when designing web forms.

We have grouped them in categories and attempted to find similarities in design decisions and design ideas. Trying to approach the problem from the usability point of view we have also kept notice of both positive and negative examples to showcase them in this article among our findings.

Please notice that this post is not about checkout forms — that’s a topic for another discussion, we may consider them separately in one of the upcoming posts. We would like to thank Wufoo3 for providing us with a framework to conduct our survey.

1. Placement of the forms

1.1. How is the link to the sign-up form titled?

Users know that they are supposed to sign-up, register, join, become a member or create an account which is why they are looking for exactly these phrases when they want to participate. Obviously, users expect that a link with one of these links leads to a sign-up form. Unfortunately, that’s not always the case.

Web Form Design Patterns4

The most popular title was “Sign up” (40%), followed by “Join” (18%), “Register” (18%) and “Create account” (17%). We have observed less large, loud and shiny “start here”-buttons as we’ve seen them over the last years. Apparently, designers try to communicate information rathen than design and emphasize the functionality of the service.

1.2. Where is the link to the sign-up form placed?

When users are visiting a site for the first time, they try to figure out what single layout blocks stand for. The eye movements are jumping “all over the place” and users try to understand which areas are more important and where the content he or she is looking for is probably placed. To meet users’ expectations designers need to help users to intuitively anticipate what is required to start using the service.

If the user can’t find the link which leads to a sign-up form, he also won’t be able to sign up for your service. Therefore it is crucial to make the link as visible and as obvious as possible. Where should a designer place the “sign-up”-link to make it more approachable?

According to our survey, the sign-up link

  • is placed in the header on 59% of the sites (76% of them have a “sign-up”-link placed at the right upper corner),
  • has a prominent position on the homepage on 21% of the sites (link or the form itself is placed on the homepage)
  • is hidden behind the “Login”-link in the header in 9% of the cases (e.g. Craigslist5).

Not that surprising is the fact that the sign-up link was rarely placed in the sidebar (7% – Propeller6, Xing7). However, 4% of the sites first offered users to directly use the service and required a registration only when it was required to store the settings.

2. Design of the forms

2.1. Is the sign-up form layout simplified?

Since the user has clicked on the sign-up-link he is likely to have decided to sign up for the service you are offering. More importantly, he has not clicked on the link to explore further navigation options or attractive blinking advertisements.

Consequently, designers tend to remove all unnecessary details and distractions which don’t help the user to complete the form. Often only a logo and the form itself are presented, without any navigation options or additional information. Idea: the user must be able to focus on the task he has to accomplish. Any distractions stand in user’s way and therefore have to be removed.

Web Form Design Patterns8

Since users want what lies on the other side of a form the process of completing forms should be as obvious and as simple as possible. Hence designers often use “minimized” layouts for sign-up forms. According to our survey, 61% of web forms are simplified compared to the general page layout (e.g. MovableType9, Livejournal10, Amazon11, Yandex.ru12).

Web Form Design Patterns13

Consider the sign-up form on Yahoo14. The visitors are provided only with the form which is required to set up an account. There is nothing else; consequently, there are no distractions as well. Notice that the tone and the language are conversational and appealing. That’s simple, easy and user-friendly.

Web Form Design Patterns15

Web Form Design Patterns16

Flixster17 is probably our favorite example of an overcrowded form which doesn’t really respect its visitors. The registration page offers every possible navigation option at once. And the login page has outstanding advertisements right next to the login form. That’s not user-friendly. The second busiest web form we’ve seen would be Photobucket18.

2.2. Is any additional information provided?

Many designers try to encourage visitors to actually fill in the form by presenting additional information such as help, required information or even copyright disclaimer. It differs from sites to sites; however, in most cases benefits of registration are presented next to the form.

Only few sites mention up front what information is needed during the registration (6%), which steps to follow (8%) or provide some warnings, hints etc. (6%, e.g. 37signals32, Bloglines33).

2.3. One-page-form vs. multi-page form

93% of the forms of the survey turned out to be one-page-forms. Apparently, designers try help users to get the signing procedure as quickly and painlessly as possible. Few sites using multi-page forms often try to combine signing-up with exploring users’ preferences.

For instance, Meebo34 combines a sign-up form with a complete registration and offers users a sign-up wizard in a pop-up window. The form consists of 6 pages where users are lead from setting their account to providing additional details about their preferences.

Web Form Design Patterns35

2.4. How are titles of the input fields highlighted?

62% of the sign-up forms used bold to highlight the title of the input field. It’s remarkable that not a single site used italics to achieve the same effect. To make the labels more visible 20% of sign-up forms used color and 18% used plain text.

Web Form Design Patterns36
Large version37

2.5. Label alignment

To be honest, we have expected a stronger trend toward one of the possible alignments. However, in our opinion no strong trend in the label alignment can be identified.

Web Form Design Patterns51

According to Matteo Penzo’s label placement research52 (1996) and Luke Wroblewski’s findings53 (pdf54), top-aligned labels can dramatically reduce completion times since they require less eye fixations. If you want to achieve the same aim but have a vertical screen real estate constraints, right-aligned labels work better. And in case your form requires people to scan labels to learn what’s required (unfamiliar or advanced data), left-aligned labels work best.

2.6. How many mandatory fields?

When conducting a survey we’ve observed a strong trend toward forms with very few mandatory fields. Few years ago designers asked visitors to type in their personal information such as first name, last name, address, country and personal interests. Now login, password and password confirmation suffice.

Web Form Design Patterns55

We found out that 54% of the forms required the user to fill at most 5 input fields (in 6% of the cases registration wasn’t required at all to start using the service). 34% of the forms use 6-8 input fields, while 12% risk user’s patience with over 9 mandatory input fields.

2.7. How many optional fields?

Similarly to above findings one can observe that most sites avoid optional fields and ask users to provide the optional information after the registration process is already done. 62% of the forms had no optional fields at all, and 98% of the forms had less than 5 optional fields.

Web Form Design Patterns56

2.8. Vertically or horizontally arranged fields?

In this aspect sign-up forms show a strong trend toward vertical arrangement of fields with a clear vertical path to completion. 86% of web-sites have input fields arranged vertically. Apart from that, 15% emphasize a beautiful and engaging visual design which is supposed to attract visitors and make them feel more comfortable when filling in the form.

Web Form Design Patterns57

Box.net58 offers a simple sign-up form with vertically arranged input fields. When the visitors type in the data their eyes are fixed across the vertical axis at the left to the input field.

Web Form Design Patterns59

Mint60 has a sign-up form with horizontally arranged input fields. When the visitors type in the data they eye needs to jump from one field to the other.

Further findings

  • 18% have a sign-in form or a link to the sign-in form placed next to it (e.g. YouTube, Reddit, Digg, Lulu, Metacafe);
  • 78% do not use asterisks to highlight required input fields; in most cases neither asterisks nor any other form of highlighting is used.
  • 9% use a progress indicator to show to the users where they currently are and which steps are required to get the registration done.
  • 85% of the sites don’t use legend and fieldset preferring a simple web-form with as few input fields as possible.
  • fields are usually grouped and divided by whitespace (69%), borders are also used (22%), different background colors are used in 9% of the cases.

Bottom line

Let’s conclude the first part of the survey results with a brief overview of the main findings of our survey of current web form design patterns. Please keep in mind that we have considered only sign-up forms.

  • the registration link is titled “sign up” (40%) and placed in the right upper corner,
  • sign-up forms have a simplified layout to avoid distractions for users (61%),
  • sign-up forms are one-page-forms (93%),
  • sign up forms attract visitors by explaining the benefits of registration (41%),
  • titles of the input fields are highlighted bold (62%)
  • no trend in the label alignment can be identified,
  • designers tend to use few mandatory fields,
  • designers tend to use few optional fields,
  • vertically arranged fields are preferred to horizontally arranged fields (86%).

Please stay tuned, we’ll present the second part of our findings next week.

Footnotes

  1. 1 http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2/
  2. 2 http://www.smashingmagazine.com/images/web-form-design-patterns/urls.html
  3. 3 http://www.wufoo.com
  4. 4 http://www.smashingmagazine.com/images/web-form-design-patterns/link-title.gif
  5. 5 http://www.craigslist.org/about/sites.html
  6. 6 http://www.propeller.com/
  7. 7 http://www.xing.com/
  8. 8 http://www.smashingmagazine.com/images/web-form-design-patterns/page-layout-minimized.jpg
  9. 9 http://www.movabletype.org/cgi-bin/mtcs/mt-cp.fcgi?__mode=register&blog_id=2&return_to=http%3A%2F%2Fwww.movabletype.org%2F
  10. 10 https://www.livejournal.com/create.bml
  11. 11 http://www.amazon.com
  12. 12 http://passport.yandex.ru/passport?mode=register
  13. 13 https://edit.yahoo.com/registration?.intl=us&new=1&.done=http%3A//mail.yahoo.com&.src=ym
  14. 14 https://edit.yahoo.com/registration?.intl=us&new=1&.done=http%3A//mail.yahoo.com&.src=ym
  15. 15 http://www.flixster.com/userAuth.do?displayRegister=
  16. 16 http://www.flixster.com/userAuth.do?displayLogin=
  17. 17 http://www.flixster.com/
  18. 18 http://photobucket.com/register/?ref=headerregister
  19. 19 http://signups.myspace.com/index.cfm?fuseaction=signup
  20. 20 https://secure.del.icio.us/register
  21. 21 https://www.last.fm/join/
  22. 22 https://www.linkedin.com/secure/register?trk=hb_join
  23. 23 http://digg.com/register/
  24. 24 http://www.mister-wong.com/register/
  25. 25 http://my.break.com/Member/Authentication/Registration.aspx
  26. 26 http://pownce.com/signup/
  27. 27 http://www.deviantart.com/join/
  28. 28 http://www.dailymotion.com/register
  29. 29 http://www.threadless.com/join
  30. 30 https://www.newsvine.com/_tools/new/user
  31. 31 http://wordpress.com/signup/
  32. 32 https://signup.37signals.com/basecamp/Basic/signup/new?source=37s%2520home
  33. 33 http://www.bloglines.com/register
  34. 34 http://www.meebo.com/
  35. 35 http://www.smashingmagazine.com/images/web-form-design-patterns/meebo.gif
  36. 36 http://www.smashingmagazine.com/images/web-form-design-patterns/labels.jpg
  37. 37 http://www.smashingmagazine.com/images/web-form-design-patterns/labels.jpg
  38. 38 http://www.youtube.com/signup?next=/
  39. 39 http://de.facebook.com/
  40. 40 http://www.metacafe.com
  41. 41 http://www.behance.net/Sign_Up
  42. 42 https://secure.wufoo.com/signup/1/
  43. 43 http://www.tickspot.com
  44. 44 https://www.mixx.com/register
  45. 45 http://www.dzone.com/links/users/register.html
  46. 46 http://digg.com/register/
  47. 47 http://www.ning.com/
  48. 48 http://www.wykop.pl/rejestracja
  49. 49 http://www.43things.com/xs?create=1
  50. 50 http://www.studivz.net/Registration/Step1
  51. 51 http://www.smashingmagazine.com/images/web-form-design-patterns/alignment.gif
  52. 52 http://www.uxmatters.com/MT/archives/000107.php
  53. 53 http://www.lukew.com/resources/articles/web_forms.html
  54. 54 http://www.lukew.com/resources/articles/WebForms_LukeW.pdf
  55. 55 http://www.smashingmagazine.com/images/web-form-design-patterns/mandatory.jpg
  56. 56 http://www.smashingmagazine.com/images/web-form-design-patterns/optional.jpg
  57. 57 http://box.net/
  58. 58 http://box.net/
  59. 59 http://www.haveamint.com/account/create
  60. 60 http://www.haveamint.com/account/create

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    I think the simpler the form the more likely users will fill them out. Long web forms are just a pain and boring. The contact form on my site has 4 fields. Simple and to the point.

  2. 2

    very good! thanks for all this info!

  3. 3

    Looks like a great collection of data. I’m looking forward to reading it in its entirety.

  4. 4

    Very useful article. Thanks. Looking forward to see this type of articles more in the future :-).

  5. 5

    Pedro Assumpção

    July 4, 2008 9:48 am

    Good survey and good information for us.
    Tks again SM.

  6. 6

    Nice, looking for the second part:)

    sing-up forms must be very minimal an letting users add more informations later.

  7. 7

    Personnaly, I use Labels on top of the fields to accomodate localizations. Layouts done by a designer in english will probably break if that same page is then translated in French or German for example.

  8. 8

    great topic, thanks. very useful.

  9. 9

    I really like this post, got some ideas and realised that i had forgot to place the signup link multiple places!

    Thanks.

  10. 10

    This post is really helpfull when you try to design form.
    Really good post.

    Thanks Smashing Magazine !

  11. 11

    A very useful and informative article especially as I am working on a project which involves a signup form.

    Most of the points covered confirm my own findings. Very useful to refer back to though.

    I will be looking forward to next weeks article.

  12. 12

    Andrew Johnson

    July 4, 2008 8:52 am

    TYPO:

    “If the user can’t find the link which leads to a sin-up form”

    CHANGE TO:

    “If the user can’t find the link which leads to a sign-up form”

    • 13

      You could have sent a private email instead of trying to shame the author in public.

  13. 14

    Awesome article! =)

  14. 15

    Thanks for the article, can’t wait for next part…
    I’ve just bought new vbullietin for my project. I hope I can apply these tips into vbullietin

  15. 16

    Finally have some time to look at this blog, and I love it. Very helpfull and thanks for the desktop calendar.

  16. 17

    Fantastic! Just the article I’ve been looking for :) This reminds me of some good “Mini Standards” I found.

  17. 18

    Can’t wait to the part II. I’ve done some research, but 100 hundred sites, it’s awesome. Thanks!

  18. 19

    Now for a clear-idiot’s guide on how to program a form or login box. I just cant figure it out!
    Great article.

  19. 20

    Your work is awesome! Can’t wait to the part II.

  20. 21

    Curt Simon Harlinghausen

    July 4, 2008 9:39 pm

    Great work. Congratulations.

  21. 22

    wow excelente guide :O

  22. 23

    how bout the use of colon “:” after label?

  23. 24

    great post !!!!

  24. 25

    Nice Article… Thank You

  25. 26

    Thanks, your articles are great! ;)

    I think that a sign-up form should not have many fields, because less is more in this section ;) I very like it when I enter (Nick-)Name, Password and E-Mail and I’m signed up! That doesn’t take lots of time :)

  26. 27

    Often, even when things might seem obvious, simple confirmation is all a web designer needs. Thanks for this.

  27. 28

    Great post; I’ll be coming back to read through this again next time I’m making decisions on a form design. I was impressed that most of the statistics showed a lot of best practises being widely used, such as reducing the number of fields and using common language such as “Sign up”.

    I’m a little surprised by a couple of the Further findings. 78% don’t highlight required input fields with asterisks and in most cases didn’t indicate required fields? I hope this is a by-product of having fewer unnecessary form fields (therefore making them all required), but I’m still surprised that such a basic usability guideline is being ignored.

    Likewise, the finding that 85% don’t use legend or fieldset in the forms would suggest that accessibility is still not being taken seriously, even on what is probably the most important form on the site.

  28. 29

    Although there are many articles on this subject, this is ones covers the most aspects of sign-up forms. I like the examples!

  29. 30

    This post is sick. This is great analysis. Kudos and thank you for sharing

  30. 31

    How IRONIC,

    My first post and I’m a newbie just completed discovery of html and php- form database… Now, I’m learning the design aspect of forms!

    Thanks Smashing Mag

  31. 32

    Very nice article. Some really good ideas on how to make those boring forms more effective. Thanks for the information !

  32. 33

    As usual a good post. For me signup forms are a nice little window into the database design and overall process flow and how much time has been spent optimizing the backend processes to reduce front-end headaches.

    For example, Yahoo can probably do away with most of the information as it is not necessarily required in order to create a user account. All they need is to make sure nobody else has the same email and that the passwords are secure. The rest of the stuff I should be able to modify in my account page.

    That’s how most of the forums software work and I greatly respect them for asking basic information in exchange for an account.

    In the ideal world though these forms shouldn’t even exist, with a single sign-on like OpenID and then an accounts page for further details.

  33. 34

    why bold at titles of the inputs?

  34. 35

    Likewise, the finding that 85% don’t use legend or fieldset in the forms would suggest that accessibility is still not being taken seriously, even on what is probably the most important form on the site.

    From an accessibility point of view, it’s not always advisable to have a fieldset and legend for simple forms with only a few inputs. Certain screenreader configurations read out the legend before every label, so in a simple form hearing “Sign up…your name, sign up…your email” etc. read out probably doesn’t really add to the user’s experience. Where legends become useful is in more complicated forms for which different parts might need further explanation.

  35. 36

    We’re all be doomed without smashing magazine! :)
    Great article! Waiting for the second part!

  36. 37

    Nice article, thanks. ;)

  37. 38

    Jehzeel Laurente

    July 6, 2008 1:59 am

    Great tips in designing a form :) Thanks. I’ll bookmark this!

  38. 39

    Thanks for the comprehensive article and survey, will surely help many designers in developing usable and visually pleasing web forms. Can’t wait for the next part!

  39. 40

    Good article. But for people within the corporate environment, who need to fill out a form, they always will take the time out to do so.

  40. 41

    Christen Dybenko

    July 6, 2008 8:29 am

    Awesome article! I appreciate the time you took to research these trends.

  41. 42

    you should consider what sites put the sign-up form on the homepage and what don’t. that’s a big difference among lots of sites.

  42. 43

    Great article. Very useful information. Thanks! :)

  43. 44

    The importance of providing a barrier free user experience when users are submitting forms can’t be under-estimated. I have previously provided an article entitled ‘Form field best practice and hints to assure wary users‘ which has a specific focus on the checkout process. Needless to to say if users are struggling with your checkout process the impact on conversion rates will affect the business more directly than standard sign-up forms, although depending on the type of site that the user is completing a web form for, the impact of a poor user experience will affect the business in different (but still negative) ways.

  44. 45

    Useful information as usual! Thanx

  45. 46

    Thanks for this useful article. Looking forward for another post on forms, from the aesthetics point of view this time… forms are sooooo “arid”!

  46. 47

    Hi,

    One thing to consider here is to test versions of your signup form. Your traffic and my traffic may be radically different and may respond to different designs with varying conversion rates.

    The best way to achieve this is to test all the variants using MVT software, like Google Optimiser or Interwoven’s Optimost. I use the latter because its a full service solution which saves time. What we’ve found in tests is that our best guesses only work a fraction of the time. One small thing to mention about right aligned field labels – these generally work better (if you are stuck for space) as the user has less scan distance between the label and what they are typing. It also aids users in aligning field labels with the actual box they are typing into – people often get the wrong ‘field’ with left aligned labels.

    Last thing – try multi variate testing to get the optimal conversion rate for your registration process. If you don’t have the budget, at least try the Google freebie.

    Craig.

  47. 48

    Cool reviews! thanks anyway.

    But if your going to ask me all I can say is that the simpler the form the better coz people don’t usually like to fill up more form and give time to it. What they need it after they sign up and what you want form them to let them use what your site have. That’s why if i where you think of the simplest one dude.

  48. 49

    Very insightful post. Are there any similar articles on shopping carts and increasing conversions?

  49. 50

    Christopher Mancini

    July 7, 2008 10:11 am

    This is an excellent post. I will definitely be back for the second part of the survey.

  50. 51

    Remember, just because it’s popular/most common doesn’t mean it’s the best way to do it.

  51. 52

    Thanks for this useful post!
    It’s interesting and inspiring to read this type of content, and i hope for more!

  52. 53

    Personally I do not like top aligned labels. Putting all the labels and text boxes crowd that part of the screen. I much prefer right aligned labels. Cleaner and less eye fixations.I wouldn’t use bold labels and I would not use the generic textbox border. I prefer same size 4 borders. It looks cleaner.

    Lately I have noticed a new trend of oversized text boxes with large fonts. I am not sure what this is buying.

    • 54

      I like bigger because I have huge monitors and it’s just easier to see when everything is bigger.

  53. 55

    Great article with some very good pointers. Looking forward to your next article.

  54. 56

    Sorry. What I meant by ‘less eye fixations’ is that it’s less than left aligned labels. Even though top aligned has less, properly done right aligned labels can have almost the same effect. You can see the labels and fields without eye movements.

  55. 57

    “describe them” and “explain them”? With my favourite pedant hat on, that should be “explain to them” and “describe to them”. Otherwise the sentence makes no sense. I comment only because they were jarringly obvious syntactic errors in an otherwise very well written article.

  56. 58

    Faisal (39) raises a good point. The sample demographic in this survey is mostly social media sites where visitors are creating an account which doesn’t require a lot of information. For B2B sites or in a corporate environment, sign-up or registration tends to be during a one-off visit with few returning once they have made a purchase or found whatever it is they are looking for. As a result, forms on these sites need to capture as much information as possible (within reason) to allow sales staff to qualify leads. We have done a lot of testing to find a balance between how much information visitors are willing to offer and what is sufficient for sales to make a good judgment about the quality of a lead.

  57. 59

    Thank for a great article. It’s a nice competitive survey.

    I have to pipe up with a great book I’ve just read. (note: I’m not affiliated in any way – just think it’s a great resource) Luke Wroblewski’s Web Form Design: Filling in the Blanks

    It’s a very practical guide to how to create great web forms. Check it out!

  58. 60

    Nice research, but I don’t really see how it is relevant without tying it in to some success metrics – so what if everyone does it that way – but if the 1% of people who are different get better results then they are correct, not the majority.

  59. 62

    Great article!!

  60. 63

    Interesting post.
    It would be interesting to find out whether the location of the form on the screen depends on the language of the site.
    What if the site is catered for Hebrew or Arabic readers. Will the signup form be located on the top left instead of the top right?

  61. 64

    “they eye” should be “their eye”?

  62. 65

    Nice article in substance, but can we say “editor?” Content that is free of typos is taken more seriously in my book. There are several grammatical errors in this piece that need addressing. I’d point them out, but:

    a) I don’t have time to do someone else’s job
    b) Someone else is getting paid for this
    c) The writer needs to get the experience of proofreading

  63. 66

    thanx smashing, very usefull article for my current project. this give me a lot of idea

  64. 67

    Would love to see a survey like this done for ecommmerce and service based compaines where a credit card and more info is required.

  65. 68

    “Apparently, designers try help users to get the signing procedure as quickly and painlessly as possible.” Another typo?

    Awesome article!

  66. 69

    Yahoo as an positive example?? Registration on Yahoo is an example of horror!
    The first page of registration is OK, but when I complete it I go to the next page when I am forced to fill in the same information again! Some of info is copied from previous page (with broken UTF characters) and some of the info I must fill in one more time! At the end of the second page I discover that I even need a credit card to “verify my age” or what.. And at the and, there is one more captcha, even when I have proved that I’m not a robot on the previous page.

    I wouldn’t finish this kind of form in any case!

    Horror!

  67. 70

    I have no words for this, great great survey & helpful

  68. 71

    Good ! I want to know something in other ways. for example , the right side is a textarea element or you must give some infomation after the textfield, what is the better way that you do?

  69. 72

    Very cool article and very useful. Good to know the stats on these so that when it comes to making your own form you can work to ensure it’s not annoying. I like the short and sweet ones. Eg. del.icio.us is perfect! I also like being told whether or not a username is available as soon as I’ve typed it.

    I’m surprised that no comment was made on password restrictions. Some sites insist on 20 characters with the entire character set and no words at all before you can proceed. Some will allow you to type ‘hi’ as your password. LiveJournal is incredibly fussy about passwords. Those secure password measurer’s are useless and inconsistent.
    I’d also be interested to see how easy it is to close an account once you’ve opened it. AOL for example doesn’t allow you to close your account at all.

    PS- Does anyone know why exactly websites insist on full names, postcodes and birthdates?

  70. 73

    On my site, I am forced to offer a lot of different alternatives.
    Any suggestions on how to make this in the best way?

  71. 74

    THis is a great summary, but do you have anything for long forms? It’s really easy to make shorter / 10-field forms look great. But what about longer ones?

  72. 75

    Re. 2.4 “It’s remarkable that not a single site used italics to achieve the same effect.”

    Italics are harder to read, so for legibility reasons it’s not so surprising that bold is used instead of italics, in fact is advisable.

    I enjoyed the summary, as always :)

  73. 76

    Good point. I found this to be the case too! worth considering If you are designing websites that need localisation.

  74. 77

    is it me or have they not released the second part of the survey yet?
    its been a week

    Please stay tuned, we’ll present the second part of our findings next week.

  75. 78
  76. 79

    hi everybody!,
    can we build a rotated login form?–> rotated input box?

  77. 80

    Hello!
    does anybody have any study on where on the webpage a form should be place to have a better change to be fillout?

    thank you!

    Great article!!!!!!!!!!

  78. 81

    Nice article, and is help full for designers and developers.

    Vishnu Uppanapalli

  79. 82

    Your information is excellent Thank to all your team members

  80. 83

    Great article!

  81. 84

    Thank for a great article. It’s very useful

  82. 85

    thanks,good

  83. 86

    You are too kind to Yahoo’s designers. Even that screenshot you gave in article is terrible – too busy, too small margins, freaky icon…

    Very useful statistics about fields layout and labels alignment. Thanks.

  84. 87

    Great job ! really usefull !

  85. 88

    Awesome info. It’s very useful for designers and developers.

  86. 89

    I now have the knowledge. Time to bring this back home to execute! :)

  87. 90

    Kane Sinclair-Sojka

    July 8, 2009 1:57 am

    A very useful article with interesting results. Thank you for sharing such valuable information which I will keep in mind when designing my next form.

  88. 91

    AWESOME! I’ve been hunting the web for info like this for a long time. Kudos on the detailed and informative research. Love your site. Keep up the good work!

  89. 92

    what about the popup form for subscription ?
    wanted to put one in my blog lile Aweber popup

  90. 93

    Thanks for the awesome tips on creating optimal forms to improve website conversions. I will be taking this into account as I update my new site. It seems like my form is way too wordy and I’m going to try to condense my sign up/registration form for football camps from 12 fields down to 6 and then just ask for more info later versus asking for people to write so much upfront and risk people completing the form.

  91. 94

    you have not mention anything about openid.

  92. 95

    Thanks. Very insightful.

    Will prove useful in helping design and build better forms for existing and new projects.

    Keep up the good posts. ;)

  93. 96

    Maciek Saganowski

    April 15, 2010 2:43 am

    Thanks for a great post. I’ve written on a similar topic here http://www.uxandall.com/best-signup-is-no-signup

  94. 97

    Thanks for your great job!!!

  95. 98

    Great tips. Thanks!

  96. 99

    Great tips. Thanks!

  97. 100

    Great! It is very helpful. We implemented the ideas into registration form. Thanks.

  98. 101

    What about placing the labels inside the text input fields? It won’t work for drop-downs(maybe it will), but for simple forms, why not place the labels inside the text inputs fields? Does that work?

  99. 102

    I actually think so too=] I have been browsing around the internet for a while today, and its kinda hard to find something entertaining to read on blogs. Maybe thats because there are too many of them around =) But your site actually keeps catching my attention. Great stories, and cool design ^__^. Ill be sure to give it more visits from now on =]

  100. 103

    This is one of the best resources for sign up form design I’ve ever seen.

    Thanks

  101. 104

    Smooth and clean !,,Keep up

  102. 105

    It’s great.

    Thanks

  103. 106

    Thanks for the points and for putting together your research – very easy to follow!

  104. 107

    We went for a super-simple yet whimsical design for our free account signup page over on introduction.io – reviewing the membership features and including a fun illustration: http://www.introduction.io/user/register

  105. 108

    Very interesting findings, great insights for web designers and developers..

    Thanks
    Anurag Gupta
    Masters in Management
    Asian Institute of Management

  106. 109

    Yahoo can probably do away with most of the information as it is not necessarily required in order to create a user account. All they need is to make sure nobody else has the same email and that the passwords are secure. The rest of the stuff I should be able to modify in my account page.

  107. 110

    Very interesting article you’re right, they need be simple to the final user.

    Regards from Paraguay!

  108. 111

    Dimitri Reifschneider

    February 6, 2013 5:29 am

    Hey Vitaly,

    I’m embarrassed, this is the first time I’ve found and read an article from you after I’d seen you on the WebTechCon in Mainz 2012 presenting the redesign of smashing magazine. I should have read more of you since then. Nevertheless this article helped me a lot to refine my sign up form!

    Greets!

  109. 112

    Jaydeep Gajera

    May 14, 2013 9:32 am

    Just too good man :)
    Keep posting such insights ..

  110. 113

    Thiago Valadares Noleto Damasceno

    June 11, 2013 7:22 am

    I would love an updated version of this.

  111. 114

    I agree with Mike from post 60. While this post is really informative and does a great job showing you what’s already out there, it simply tells you what everyone else does, not how successful those patterns are in making the signup process easy or for decreasing drop offs. Using consistent patterns across the web can be useful but its not everything, I’d be more interested to see how different sign up patterns change conversion rates.

↑ Back to top