Weekly freebies in your inbox.
Freebies By Design Shock
Read More
Read More
Read More
Friends
Weekly freebies in your inbox
How to Design an Awful Looking Sign-Up Form, 10 Step Guide
When signing up for something – whether you’re opening a new bank account, registering for an interesting new app or trying to buy a flight – you want the process to be simple and quick. Speedy, painless sign-up forms help to increase conversion rates and keep visitors happy. Yet, in despite of that, there are countless examples throughout the web of sites that have painfully dreadful and frustrating forms that end up making you feel bad about the whole process. These forms are usually found on archaic, badly designed sites and there’s an unusual trend – the bigger the company, the more likely the form is to be awkward and needlessly complicated, such as: When you enter in Google the search term “beautiful Sign-up forms” you’ll find about 1,370,000,000 results that include an endless list of showcase countdowns resources on the 20,17,7 and even 100 Best Sign-up forms, so why do what’s already been done?
On the contraire this post will, count one by one the bad practices when designing a sign-up form, if maybe this way the web designers will learn their lesson and finally up –date their sign-up forms. Because even up to this day when there’s so many beautiful web resources available for web developers, you can still bump into long, complicated and heavy sign-up forms that just simply suck! So, there you go, if you want to create a terrible, awkward and frustrating sign-up form, here we’ve given you a 10 step guide to go about it.
1. Never give up the excessive form fields
Step 1 of the American Airlines AAdvantage Program is to have you list out your phone number broken down by area code, country code and even the type of phone they’re calling (whether it’s a cell phone, home phone or pager) and ask you to double check your email address, just in case you’ve got it wrong. They even ask for (but do not really need) your middle name. It’s a great way to slowly annoy your users, for little or no gain.
2. Always include awkward password limits
Safety is one thing, but forcing your visitors to include mixtures of numbers, symbols, uppercase and lowercase characters only serves to help them forget what their password is when they return.
3. Assume the visitor has all the answers
Particularly complicated services often include form questions that the user might not know the answer to. Utility companies are particularly bad for this – the above is a screenshot from EDF Energy’s sign-up form and is particularly unhelpful if you don’t know whether you’re on an Economy 7 tariff, or what your current energy tariff is (which is usually the case if you’ve just moved into a new home). The lesson is: if you want your users to give up and go elsewhere, assume they know all the answers – and don’t let them submit the form until they’ve answered them.
4. Don’t forget to make the user fill in a Captcha
American Airlines again run into this issue – making a user fill in a captcha in order to submit the form has become fairly standard across many sites, but it’s not a good practice. It looks ugly, forces the user to prove that they’re not a spammer and – perhapas worst of all – provides another chance for the user to give up and abandon the form, especially if they can’t read the captcha code or accidentally get it wrong. The American Airlines example above is particularly impressive, considering how one of the words is upside down.
5. Show visitors unhelpful error codes
It might mean something to you, as a developer, but it means nothing at all to the customer that’s just trying to get on with their day. AT&T make sure their form validation errors show a code to users (what does WR050 mean?) and don’t explain what went wrong with the sign-up process. The example above actually tells the user to give up, and move to a different form instead, which leads me to…
6. Don’t forget to include several unnecessary steps in the sign-up process
The same AT&T sign-up form takes you to the page above – but it also asks you for your online registration code. In order to get an online registration code, you need to first request one, by filling in yet another form (shown below). 
This requires filling in all of your details again – this time with extra details from your phone bill – before you’re allowed to fill in the first form. I wouldn’t be surprised if a huge percentage of AT&T’s customers gave up at this point and decided to not register to access their online account at this point.
7. Confuse the un-experienced user and name the button “Submit”
Some visitors aren’t actually very tech-savvy – and when filling in a form online, they might not know exactly what will happen after they’ve filled it in. Labelling the button “submit” might make sense to you, as a developer, but to a potential customer it makes much more sense to explain what will happen once the button is pushed. The example above is a form to book in a visit with a gym – it would make more sense to a user to change the button text from “Submit” to “Book Your Visit”.
8. Don’t ever show validation errors next to the form field
If a form doesn’t validate, it’s much easier to the user if they see the error message next to that field, rather than at the top of the form. The example above shows how IMDB will list all of the errors above the form, which then forces the user to scan down the rest of the form to fix the issues. It’s not too bad a problem on a short form like the one above, but on a much longer form, having to scan down to find the one field that needs attention can be frustrating and more complicated than it needs to be.
9. Always Keep labels on the far left, and form fields on the far right
Studies have shown that keeping form labels immediately above the field, instead of the far left of it, is usually better – it’s easier on the eye because it doesn’t force users to have to look at the label, and then scan over to find the corresponding field. The example above is from Santander, but this pattern is repeated throughout the web – labels on the far left and fields on the far right is harder to use, requires more eye movement and doesn’t have a natural flow to it.
10. Don’t forget to include an easy-to-click cancel button
Sky’s sign-up form includes (amongst other things) a big cancel button – the same size as the “create an account” button, which they’ve chosen to name “Submit”. The large “Cancel” button is awful for conversion rates and is the most frustrating button to accidentally press as it completely wipes the data that the user has just spent the last few minutes entering. If it’s accidentally pressed (which is easily done, considering it’s right next to the “Submit” button), the chance of someone filling the form in again is significantly reduced.
January 25th
hahahahahah. I laughed till I cried.
January 27th
I do agree with all of the ideas you’ve offered for your post. They’re really convincing and can certainly work.
January 30th
You’re welcome. Be on the lookout for upcoming posts on the matter. Best regards
January 30th
nice info about creating signup form. cheers mate..
January 31st
Always glad to see that our pieces are of great use to visitors’ projects. Best regards
February 1st
always providing us nice tips :)
February 2nd
Be on the lookout for upcoming posts on the matter. Best regards
February 7th
I have to respectfully disagree with #2 and #4. Yes, password limits are awkward, but encouraging users to use the same password they use for other things is an invitation for disaster. With apps like 1Password and LastPass, there’s no excuse for crappy passwords anymore, as they make it brainless to create hard to crack passwords and they handle remembering it for you. We’ve seen so many security breaches over the past 12 months that have resulted in millions of user credentials being stolen, and since people are used to using the same (easily rememberable and easily guessable) password for everything, when their login to SiteXYZ gets pwned, so does their login to their bank account, etc. Hard password restrictions are frustrating, but not nearly as frustrating as having your identity stolen.
As for #4, yes, captchas are a pain, but so are thousands of spam registrations. There are some additional ways to combat spam (hidden form fields, javascript tricks, etc), but each one has their own flaws. I have one forum that, before I implemented some level of spam prevention, was getting upwards of 6k spam registrations *a day*.
I agree with the other points tho ;)
PS – you have a bug in the formatting of this article. #3 isn’t set as a headline tag, it shows bold and part of #2′s paragraph.
February 9th
Always glad to see that our pieces are of great use to visitors’ projects, and to check out our follower’s feedback. (thanks for the tip on the bug) Best regards!
March 19th
I tend to agree with point 2. If you make people use a complex password for sites that they don’t consider to be important (e.g. forums) etc., then they’re more likely to use the secure one they use for banking etc.
Surely it’s better if they’ve got a poor password to give a link telling them how to make it better, but not force them. (Also, the requirement that some sites have that it *has* to include non-alphanumeric characters, or that it has to *not* have them) So, if you’ve followed advice as to how to have both a unique & complex password (e.g. using initial letters of a phrase & some characters from the website – with numbers/punctuation substituting for some things) – then sites that require you do/don’t have the non-alphanumeric muddle things up.
(And, not everyone likes to use online password storing, they’d rather use a way that means they can remember)
Oh, and as a final point, don’t make people create a highly complex password for a trivial site – and then email it back to them …
February 26th
cool post! Keep up the informative work!
February 27th
Let us know how your sign-up form turned out, and follow us on facebook and twitter, Best regards!
March 1st
A great article – some useful points, thanks.
No 10 – the Sky one is an interesting one as the Cancel button may come before the Submit button on that form – which of course would make it the default button if some pressed the enter key – as keyboard users would.
Seeing your reply form that I’m just filling in I’m inclined to add two more:
11) Include an input field that you apparently can’t tab to – Spam Protection answer.
12) Put the labels for the inputs in an unexpected place – ie to the right of the text boxes.
March 2nd
These are some really good points you’re making here, if you’d probably be interested in writing a piece for us visit the New Guest Author’s Program to know the guidelines. Also be sure to follow us on Facebook and Twitter
March 1st
Heya i am for the first time here. I came across this board and I to find It truly useful & it helped me out a lot. I am hoping to provide something again and help others like you helped me.
March 2nd
Also don’t miss out on our feeds on Facebook and Twitter. Best Regards!
March 4th
Ahaa, its pleasant discussion on the topic of this article here at this web site, I have read
all that, so now me also commenting at this place.
March 7th
Don’t forget to follow us on Facebook and Twitter to check out our latest updates. . have a good day!
April 27th
Thanks very interesting blog!
April 27th
Thanks, there are a lot of writers contributing to this blog, it has helped a lot in growing of this comunity. We also appreciate your feedback. Best!
How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/6nV6wIwa via @webdesignshock
RT @WebDesignShock: How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/lcSD0AcR
RT @WebDesignMash: RT @webdesignshock How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/EAsgy6Jh
More hint-hints at American Airlines.
“@mlane: How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/rYOOBvwy”
How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/S3TnImeL via @webdesignshock
Guía de 10 pasos para diseñar un formulario malo de registro http://t.co/R6Lqo244 :)
How to Design an Awful Sign-Up Form, 10 Step Guide http://t.co/f3kvUbnI
RT @WebDesignShock: How to Design an Awful Sign-Up Form, 10 Step Guide http://t.co/ROTFH9Vt
How to Design an Awful Sign-Up Form, 10 Step Guide (via @webdesignshock): http://t.co/wq1lHTjY
Awful signup forms & what not to do http://t.co/zxzou8Dh #webdesign via @WebDesignShock
RT @WebDesignShock: How to Design an Awful Sign-Up Form, 10 Step Guide http://t.co/ROTFH9Vt
How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/y50ttuzj via @webdesignshock
RT @WebDesignShock: How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/lcSD0AcR
How to Design an Awful Sign-Up Form, 10 Step Guide http://t.co/vrGDa9bD // haha …XD
How to Design an Awful Sign-Up Form, 10 Step Guide http://t.co/ktxcLs5b
How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/UU6ONJX6 #webdesign
RT @themeshock: How to Design an Awful Sign-Up Form, 10 Step Guide http://t.co/ktxcLs5b
How to Design an Awful Sign-Up Form, 10 Step Guide http://t.co/ahv2edvT
How to Design an Awful Sign-Up Form, 10 Step Guide http://t.co/UPuHjZ0V
How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/OZa6V69M via @webdesignshock
[...] Speedy, painless sign-up forms help to increase conversion rates and keep visitors happy. Yet, in despite of that, there are countless examples throughout the web of sites that have painfully dreadful and frustrating forms that end up making you feel bad about the whole process. These forms are usually found on archaic, badly designed sites and there’s an unusual trend – the bigger the company, the more likely the form is to be awkward and needlessly complicated, such as: When you enter in Google the search term “beautiful Sign-up forms” you’ll find about 1,370,000,000 results that include an endless list of showcase countdowns resources on the 20,17,7 and even 100 Best Sign-up forms, so why do what’s already been done? How to Design an Awful Sign-Up Form, 10 Step Guide [...]
[...] How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://www.webdesignshock.com/how-to-design-an-awful-looking-sign-up-form-10-step-guide/ by Alex Black: “…this post will, count one by one the bad practices when designing a [...]
How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/ItePar7J #design #useful