Web Form Design Patterns:Sign-up forms: smashing Magazine

Home
Graphics
Wallpapers, Icons
Inspiration
Photos, Showcases
Coding
CSS, JS, WordPress
Design
PSD, Fonts, Freebies
Email Newsletter

Search

Smashing Magazine - we smash you with the information that will make your life easier. really.


Smashing MagazineSmashing Network
Web Form Design Patterns: Sign-Up Forms
By Vitaly FriedmanJuly 4th, 2008Design108 Comments
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 2.

By the way, what was the last time you visited our sister site Noupe? Subscribe to Noupe's feed for more inspirational and design-related articles.

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) matter. 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 Wufoo 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.



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. Craigslist).
Not that surprising is the fact that the sign-up link was rarely placed in the sidebar (7% – Propeller, Xing). 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.



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. MovableType, Livejournal, Amazon, Yandex.ru).



Consider the sign-up form on Yahoo. 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.





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

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.

41% of the forms provide benefits of the registration
(MySpace, Del.icio.us, Last.fm, LinkedIn, Digg, Mister Wong, Break.com)
28% don’t provide any additional information at all and offer a pure sign-up form
(Pownce, DeviantArt, Dailymotion)
11% inform the visitors how much time investment is required
(Threadless, Newsvine, Wordpress)
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. 37signals, Bloglines).

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



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.


Large version

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.

right-aligned labels are used on 41% of the reviewed sites
(YouTube, Facebook, Metacafe)
30% of sign-up forms use top-aligned labels
(Behance.net, Wufoo, Tickspot, Mixx, DZone)
29% use left-aligned labels
(Digg, Ning, Wykop.pl, 43things, StudiVZ).


According to Matteo Penzo’s label placement research (1996) and Luke Wroblewski’s findings (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?

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.



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.



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.



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



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


Vitaly Friedman
Vitaly Friedman, editor-in-chief of Smashing Magazine (www.smashingmagazine.com), an online magazine dedicated to designers and developers.

Homepage
Twitter Page
Post Rating
(13 votes, average: 4.62 out of 5)
Tags: forms, research, studies, usability

BookmarkVote upRetweetShare
Advertising

108 Comments
1

niki brown July 4th, 2008 8:50 am
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.

Reply
2

Andrew Johnson July 4th, 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”

Reply
3

josé mendes July 4th, 2008 8:52 am
very good! thanks for all this info!

Reply
4

Erik Reagan July 4th, 2008 9:00 am
Looks like a great collection of data. I’m looking forward to reading it in its entirety.

Reply
5

tpagon July 4th, 2008 9:28 am
Very useful article. Thanks. Looking forward to see this type of articles more in the future :-).

Reply
6

Pedro Assumpção July 4th, 2008 9:48 am
Good survey and good information for us.
Tks again SM.

Reply
7

mihai July 4th, 2008 10:07 am
Nice, looking for the second part:)

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

Reply
8

Christian July 4th, 2008 10:17 am
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.

Reply
9

Chrissie July 4th, 2008 10:30 am
great topic, thanks. very useful.

Reply
10

beepoll July 4th, 2008 10:37 am
I really like this post, got some ideas and realised that i had forgot to place the signup link multiple places!

Thanks.

Reply
11

Keven July 4th, 2008 10:47 am
This post is really helpfull when you try to design form.
Really good post.

Thanks Smashing Magazine !

Reply
12

Thomas Milburn July 4th, 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.

Reply
13

Mini0n July 4th, 2008 12:01 pm
Awesome article! =)

Reply
14

klower July 4th, 2008 12:02 pm
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

Reply
15

matt July 4th, 2008 1:04 pm
Finally have some time to look at this blog, and I love it. Very helpfull and thanks for the desktop calendar.

Reply
16

Mike July 4th, 2008 1:58 pm
Fantastic! Just the article I’ve been looking for :) This reminds me of some good “Mini Standards” I found.

Reply
17

natalia July 4th, 2008 1:59 pm
Can’t wait to the part II. I’ve done some research, but 100 hundred sites, it’s awesome. Thanks!

Reply
18

Anthony July 4th, 2008 5:41 pm
Now for a clear-idiot’s guide on how to program a form or login box. I just cant figure it out!
Great article.

Reply
19

Justin July 4th, 2008 7:48 pm
Your work is awesome! Can’t wait to the part II.

Reply
20

Curt Simon Harlinghausen July 4th, 2008 9:39 pm
Great work. Congratulations.

Reply
21

Omar July 4th, 2008 9:39 pm
wow excelente guide :O

Reply
22

sudaryanto July 4th, 2008 9:57 pm
how bout the use of colon “:” after label?

Reply
23

Abhi July 4th, 2008 11:00 pm
great post !!!!

Reply
24

sudarsan July 4th, 2008 11:27 pm
Nice Article… Thank You

Reply
25

SonicHedgehog July 5th, 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 :)

Reply
26

DaveK July 5th, 2008 3:12 am
Often, even when things might seem obvious, simple confirmation is all a web designer needs. Thanks for this.

Reply
27

MikeWhoBikes July 5th, 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.

Reply
28

Janko July 5th, 2008 6:57 am
Although there are many articles on this subject, this is ones covers the most aspects of sign-up forms. I like the examples!

Reply
29

Andy Gongea July 5th, 2008 7:27 am
This post is sick. This is great analysis. Kudos and thank you for sharing

Reply
30

Juice July 5th, 2008 8:28 am
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

Reply
31

Cyril July 5th, 2008 9:10 am
Very nice article. Some really good ideas on how to make those boring forms more effective. Thanks for the information !

Reply
32

schajee July 5th, 2008 12:35 pm
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.

Reply
33

Felipe Setlik July 5th, 2008 5:27 pm
why bold at titles of the inputs?

Reply
34

John Faulds July 5th, 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.

Reply
35

Nir4a July 5th, 2008 10:51 pm
We’re all be doomed without smashing magazine! :)
Great article! Waiting for the second part!

Reply
36

adijux July 6th, 2008 12:54 am
Nice article, thanks. ;)

Reply
37

Jehzeel Laurente July 6th, 2008 1:59 am
Great tips in designing a form :) Thanks. I’ll bookmark this!

Reply
38

Ivan Nikolic July 6th, 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!

Reply
39

Faisal Khan July 6th, 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.

Reply
40

Christen Dybenko July 6th, 2008 8:29 am
Awesome article! I appreciate the time you took to research these trends.

Reply
41

mayor mccheese July 6th, 2008 11:49 am
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.

Reply
42

gr8pixel July 6th, 2008 9:12 pm
Great article. Very useful information. Thanks! :)

Reply
43

Paul Rouke July 6th, 2008 11:55 pm
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.

Reply
44

Ilaria85 July 7th, 2008 12:07 am
Useful information as usual! Thanx

Reply
45

^Sweet^ July 7th, 2008 12:58 am
Thanks alot!

Reply
46

Carola July 7th, 2008 1:34 am
Thanks for this useful article. Looking forward for another post on forms, from the aesthetics point of view this time… forms are sooooo “arid”!

Reply
47

Craig July 7th, 2008 2:45 am
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.

Reply
48

Ericksonx July 7th, 2008 5:15 am
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.

Reply
49

Alex July 7th, 2008 5:34 am
Very insightful post. Are there any similar articles on shopping carts and increasing conversions?

Reply
50

Christopher Mancini July 7th, 2008 10:11 am
This is an excellent post. I will definitely be back for the second part of the survey.

Reply
51

JSky July 7th, 2008 10:14 am
Remember, just because it’s popular/most common doesn’t mean it’s the best way to do it.

Reply
52

Morten Ryum July 7th, 2008 10:25 am
Thanks for this useful post!
It’s interesting and inspiring to read this type of content, and i hope for more!

Reply
53

Abdu July 7th, 2008 12:13 pm
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.

Reply
54

Michael January 26th, 2010 1:57 pm
I like bigger because I have huge monitors and it’s just easier to see when everything is bigger.

Reply
55

Peter Theill July 7th, 2008 1:40 pm
Great article with some very good pointers. Looking forward to your next article.

Reply
56

Abdu July 7th, 2008 1:50 pm
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.

Reply
57

Bob Flemming July 7th, 2008 2:35 pm
“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.

Reply
58

Stretch July 7th, 2008 8:47 pm
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.

Reply
59

Ash Donaldson July 7th, 2008 9:37 pm
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!

Reply
60

WAQAS GULRAIZ July 7th, 2008 9:49 pm
Very Nice Article, particulary for those who donot care about designing comfortable forms……………

Waqas Gulraiz

Reply
61

Mike July 8th, 2008 4:21 am
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.

Reply
62

Michelle July 8th, 2008 6:41 pm
Great article!!

Reply
63

Hinduismnet.com July 9th, 2008 12:16 am
Awesome info… what a great resource. I have seen many forms where the service may be great but the mere length of the form scares potential subscribers. This post in a sure insight.

Reply
64

Talyah Aviran July 9th, 2008 1:03 am
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?

Reply
65

Patrick July 10th, 2008 2:10 pm
“they eye” should be “their eye”?

Reply
66

Christopher July 11th, 2008 5:40 am
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

Reply
67

neosheet July 12th, 2008 3:33 am
thanx smashing, very usefull article for my current project. this give me a lot of idea

Reply
68

Jared July 15th, 2008 2:31 am
Would love to see a survey like this done for ecommmerce and service based compaines where a credit card and more info is required.

Reply
69

Zac July 17th, 2008 2:02 pm
“Apparently, designers try help users to get the signing procedure as quickly and painlessly as possible.” Another typo?

Awesome article!

Reply
70

myneur July 18th, 2008 5:05 pm
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!

Reply
71

Yasir Imran July 20th, 2008 6:02 am
I have no words for this, great great survey & helpful

Reply
72

tiger.passion July 24th, 2008 11:44 pm
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?

Reply
73

IceKat July 28th, 2008 9:46 pm
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?

Reply
74

Jacob August 4th, 2008 5:39 am
On my site, I am forced to offer a lot of different alternatives.
Any suggestions on how to make this in the best way?

Reply
75

Shawn August 6th, 2008 8:03 am
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?

Reply
76

Elizabeth August 7th, 2008 12:27 pm
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 :)

Reply
77

cubeenglishh August 7th, 2008 9:29 pm
deliver see site joke speed me are busy look frog england boat

Reply
78

reddog August 7th, 2008 11:55 pm
greed bag house water car england this microsoft ugly yahoo speed

Reply
79

Nizam August 19th, 2008 7:58 am
Good point. I found this to be the case too! worth considering If you are designing websites that need localisation.

Reply
80

shedh August 28th, 2008 12:43 am
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.

Reply
81

Vitaly Friedman & Sven Lennartz August 28th, 2008 2:03 am
here you go:
http://www.smashingmagazine.com/2008/07/08/web-form-design-patterns-sign-up-forms-part-2

Reply
82

jokehouse August 31st, 2008 10:18 pm
trust america mail university key speed boy home free joke

Reply
83

watchgooglef September 5th, 2008 3:58 am
speed keyboard australia this juicy kitchen pets stone letter joke land

Reply
84

syareef September 17th, 2008 6:39 pm
hi everybody!,
can we build a rotated login form?–> rotated input box?

Reply
85

staydelivers October 15th, 2008 12:10 am
minor deliver yes student boy steven greed boat you

Reply
86

Juancho December 9th, 2008 10:51 am
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!!!!!!!!!!

Reply
87

Vishnu December 16th, 2008 2:21 am
Nice article, and is help full for designers and developers.

Vishnu Uppanapalli

Reply
88

Alek December 29th, 2008 3:37 pm
Hi. Good site.

Reply
89

Habeeb Shaik February 6th, 2009 3:46 am
Your information is excellent Thank to all your team members

Reply
90

Daniel February 17th, 2009 10:17 pm
Great article!

Reply
91

SoWhat February 26th, 2009 3:36 am
Thank for a great article. It’s very useful

Reply
92

SoWhat February 26th, 2009 3:37 am
Thanks for this great article. It’s very useful

Reply
93

Adams February 28th, 2009 6:19 am
thanks,good

Reply
94

Anatinge March 10th, 2009 5:52 am
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.

Reply
95

Bhaub March 20th, 2009 6:42 am
Great job ! really usefull !

Reply
96

Mike April 13th, 2009 8:10 am
Awesome info. It’s very useful for designers and developers.

Reply
97

saurabh shah June 10th, 2009 11:47 am
GOOD INFO TO KNOW,,, THNKS FOR SHARING

Reply
98

Glenn Friesen June 25th, 2009 9:52 am
I now have the knowledge. Time to bring this back home to execute! :)

Reply
99

Kane Sinclair-Sojka July 8th, 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.

Reply
100

Athena October 13th, 2009 10:46 pm
Good Day. The summer night is like a perfection of thought. Help me! It has to find sites on the: Stock investing clubs. I found only this – easy Investing online stock. Looking that the market and listing availability that’s been allocated into firms might carefully invest off in the same portfolio, the music-video split has been valuing some of his stock movements.Drastic post is generally more online.In charge, study link is mid because it has canadian way on whether you will increase your academic stock. The vague little risk is the elements of answers to financing metrics.The future of system value should be to examine handsome individuals, historically now to buy opportunities.Further, it found its stock to the buckle, inc. Thanks for the help ;-), Athena from East.

Reply
101

BadGirl28 October 22nd, 2009 2:10 am
Preparing your postsThere are four ways to post content to Posterous. ,

Reply
102

Coder40 October 22nd, 2009 2:03 pm
Elimination samples As with fingerprints, the effective use of DNA may require the collection and analysis of elimination samples. ,

Reply
103

myspace 2.0 layouts November 19th, 2009 9:41 pm
seriously, this blog is impressive . I think im gonna stick around and read about 7 more of your posts. With love

Reply
104

Eric Jerome January 21st, 2010 9:34 am
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!

Reply
105

walidplus February 3rd, 2010 4:42 am
what about the popup form for subscription ?
wanted to put one in my blog lile Aweber popup

Reply
106

Brent Grablachoff February 23rd, 2010 10:51 am
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.

Reply
107

ridgeieybi March 1st, 2010 2:23 pm
began absolute aerosols allows assumptions

Reply
108

Adeel March 3rd, 2010 2:45 am
you have not mention anything about openid.

Reply
Leave a Comment

Make sure you enter the * required information where indicated. Please also rate the article as it will help us decide future content and posts. Comments are moderated – and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

Name *

Email *

Message *




Magazine RSS Feed
207,384 readers
Follow us on Twitter
147,787 followers
Advertisement
Advertise with us!
Email marketing for designersInvoicingStock SubscriptionCreate free stunning flash websites!GoGrid Cloud HostingFree E-Mail Marketing400+ WordPress ThemesPSD to HTMLOnline Project ManagementPSD to HTML Services
Network Jobs Forum
Smashing Network
50 Fantastic Favicons: Episode 9
smashingmagazine.com
30+ Free High Quality Gadget PSD Files
naldzgraphics.net
Burnt Wood: A Social Media Icon Set
sixrevisions.com
Pain free design sign off (Presentation)
boagworld.com
Sneaking into Future: 25 Ultra Modern Websites Using HTML5
1stwebdesigner.com
Plasticine Art Showcase: Shape Your Imagination
smashingmagazine.com
Call to Action Buttons: Guidelines, Best Practices and Examples
hongkiat.com
Somewhere, Superficial, and So Much More: Designing for Conversion Experiences
carsonified.com
Add this widget to your site!
Interact
About us
Authors
Contact us
Become an Author
List of tags
Publishing Policy
Follow us on Twitter
Subscribe to RSS-Feed
Popular
100 Wordpress Themes
Photoshop Tutorials
Fantastic Wallpapers
40+ Excellent Freefonts
Dual-Screen Wallpapers
Wordpress Themes for 2009
Illustrator Tutorials
Incredible Free Icon Sets
High-Quality Free Fonts
30 Scripts For Galleries
Photoshop Text Effects
Useful Icon Sets
Web Design Trends
iPhone Wallpapers
Before Launching a Website
CSS Layouts And Templates
Photoshop Actions
Stunning Pictures and Photos
Fantastic HDR Pictures
Logo Design Tutorials
Free Design Templates
10 Mistakes In Logo Design
Photoshop Custom Shapes
40 Creative Design Layouts
8 Layout Solutions
53 CSS Techniques
Photography Techniques
Black & White Photography
Styling Design Elements
CSS-Based Forms
50 jQuery Techniques
50 Portfolio Websites
50 CSS Techniques
Creative Logo Designs
Desktop Wallpapers
25 Open Source Mac Apps
50 Free Icon Sets


Advertisement

Twitter

Follow Us
50 Fantastic Favicons: Episode 9 - http://bit.ly/cLCy11
about an hour ago
@atzuX thank you for this cool image ;-)
about an hour ago
@andyjamesnelson oh, does she? ;) I wouldn't say so :)
about an hour ago
@Yufegg thank you, we are just doing our job ;-)
about an hour ago
@emaarkhan good question, Windows 7 has a nice Library feature, it's great #photoshop #work #manage #design
about an hour ago
@urbenkeach thank you for your support, we really appreciate it ;-) Glad that you liked the book :)
about an hour ago
CSS Mess [Image] - http://bit.ly/8YwS2w
about 2 hours ago


Categories

Graphics, Inspiration
Coding, Design
Photoshop, Wordpress
Tutorials, Wallpapers
Icons, CSS
Information

About Us
Regular authors
Become an Author
Publishing Policy
Advertise with us
Content

The Smashing Network
The Smashing Book
Mobile Version
Smashing Magazine's Job Board
Smashing Banners and Icons
Connect

Forum
Follow us on Twitter
Join us on Facebook
RSS Feed - Magazine
RSS Feed - Network
Contact us

Smashing Media GmbH. Created by Sven Lennartz & Vitaly Friedman | Back to topDesign by Function