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.