Menu Search
Jump to the content X

Web Form Design Patterns: Sign-Up Forms


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 Link

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 Link

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.

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 Link

2.1. Is the sign-up form layout simplified? Link

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? Link

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 Link

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? Link

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 Link

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? Link

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? Link

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? Link

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 Link

  • 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 Link

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 Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60

↑ Back to top Tweet itShare on Facebook

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 UX, front-end and performance problems in large companies. Get in touch.

  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!


  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


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


    “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


↑ Back to top