Menu Search
Jump to the content X X
Smashing Conf New York

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

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 merely 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 understand 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 websites? These were precisely 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 websites 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 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 that explain 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. Afterward, 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 clear “start here”-buttons as we’ve seen them over the last years. Apparently, designers try to communicate information rather 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 that 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% – Xing6). 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. Form Design 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 Patterns

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. Livejournal7, Amazon8, Yandex.ru).

Web Form Design Patterns9

Consider the sign-up form on Yahoo10. 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 Patterns11
Web Form Design Patterns12

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

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. 37signals25).

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, Meebo26 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 Patterns27

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 Patterns28
Large version29

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 Patterns

According to Matteo Penzo’s label placement research41 (1996) and Luke Wroblewski’s findings42 (pdf), 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 Patterns

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 Patterns

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 Patterns43

Box.net44 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 Patterns45

Mint46 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 /2008/07/08/web-form-design-patterns-sign-up-forms-part-2/
  2. 2 /images/web-form-design-patterns/urls.html
  3. 3 http://www.wufoo.com
  4. 4 /images/web-form-design-patterns/link-title.gif
  5. 5 http://www.craigslist.org/about/sites.html
  6. 6 http://www.xing.com/
  7. 7 https://www.livejournal.com/create.bml
  8. 8 http://www.amazon.com
  9. 9 https://edit.yahoo.com/registration?.intl=us&new=1&.done=http%3A//mail.yahoo.com&.src=ym
  10. 10 https://edit.yahoo.com/registration?.intl=us&new=1&.done=http%3A//mail.yahoo.com&.src=ym
  11. 11 http://www.flixster.com/userAuth.do?displayRegister=
  12. 12 http://www.flixster.com/userAuth.do?displayLogin=
  13. 13 http://www.flixster.com/
  14. 14 http://photobucket.com/register/?ref=headerregister
  15. 15 http://signups.myspace.com/index.cfm?fuseaction=signup
  16. 16 https://secure.del.icio.us/register
  17. 17 https://www.linkedin.com/secure/register?trk=hb_join
  18. 18 http://digg.com/register/
  19. 19 http://my.break.com/Member/Authentication/Registration.aspx
  20. 20 http://www.deviantart.com/join/
  21. 21 http://www.dailymotion.com/register
  22. 22 http://www.threadless.com/join
  23. 23 https://www.newsvine.com/_tools/new/user
  24. 24 http://wordpress.com/signup/
  25. 25 https://signup.37signals.com/basecamp/Basic/signup/new?source=37s%2520home
  26. 26 http://www.meebo.com/
  27. 27 /images/web-form-design-patterns/meebo.gif
  28. 28 /images/web-form-design-patterns/labels.jpg
  29. 29 /images/web-form-design-patterns/labels.jpg
  30. 30 http://www.youtube.com/signup?next=/
  31. 31 http://de.facebook.com/
  32. 32 http://www.metacafe.com
  33. 33 http://www.behance.net/Sign_Up
  34. 34 http://www.tickspot.com
  35. 35
  36. 36 http://digg.com/register/
  37. 37 http://www.ning.com/
  38. 38 http://www.wykop.pl/rejestracja
  39. 39 http://www.43things.com/xs?create=1
  40. 40 http://www.studivz.net/Registration/Step1
  41. 41 http://www.uxmatters.com/MT/archives/000107.php
  42. 42 http://www.lukew.com/resources/articles/web_forms.html
  43. 43 http://box.net/
  44. 44 http://box.net/
  45. 45 http://www.haveamint.com/account/create
  46. 46 http://www.haveamint.com/account/create
SmashingConf New York

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.

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

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

    7
  2. 2

    josé mendes

    July 4, 2008 8:52 am

    very good! thanks for all this info!

    1
  3. 3

    Erik Reagan

    July 4, 2008 9:00 am

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

    -3
  4. 4

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

    -5
  5. 5

    Pedro Assumpção

    July 4, 2008 9:48 am

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

    -3
  6. 6

    Nice, looking for the second part:)

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

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

    6
  8. 8

    great topic, thanks. very useful.

    -1
  9. 9

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

    Thanks.

    2
  10. 10

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

    Thanks Smashing Magazine !

    1
  11. 11

    Thomas Milburn

    July 4, 2008 11:12 am

    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.

    1
  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”

    -29
    • 13

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

      5
  13. 14

    Awesome article! =)

    0
  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

    0
  15. 16

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

    1
  16. 17

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

    -1
  17. 18

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

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

    0
  19. 20

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

    0
  20. 21

    Curt Simon Harlinghausen

    July 4, 2008 9:39 pm

    Great work. Congratulations.

    0
  21. 22

    wow excelente guide :O

    0
  22. 23

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

    0
  23. 24

    great post !!!!

    0
  24. 25

    Nice Article… Thank You

    0
  25. 26

    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

    1
  26. 27

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

    -1
  27. 28

    SonicHedgehog

    July 5, 2008 1:46 am

    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 :)

    1
  28. 29

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

    0
  29. 30

    MikeWhoBikes

    July 5, 2008 5:38 am

    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.

    2
  30. 31

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

    0
  31. 32

    Andy Gongea

    July 5, 2008 7:27 am

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

    0
  32. 33

    John Faulds

    July 5, 2008 7:09 pm

    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.

    2
  33. 34

    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.

    0
  34. 35

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

    -1
  35. 36

    Nice article, thanks. ;)

    3
  36. 37

    Jehzeel Laurente

    July 6, 2008 1:59 am

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

    1
  37. 38

    Felipe Setlik

    July 5, 2008 5:27 pm

    why bold at titles of the inputs?

    0
  38. 39

    Ivan Nikolic

    July 6, 2008 6:10 am

    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!

    1
  39. 40

    Faisal Khan

    July 6, 2008 8:28 am

    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.

    1
  40. 41

    Christen Dybenko

    July 6, 2008 8:29 am

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

    2

↑ Back to top