Minimal GUI Set: More Than 1000 Free Elements, Buttons, Patterns, Icons And Many More

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

How to Design an Awful Looking Sign-Up Form, 10 Step Guide

Comments and suggestions in here

3 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

01-forms 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

02-forms 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

03-forms 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

04-forms 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

05-forms 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

06a-forms 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). 06b-forms 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”

07-forms 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

08-forms 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

09-forms 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

10-forms 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.


Alex Black

He writes for printing experts Print Express, who specialize in posters, canvas prints & business cards. In his spare time, he studies web & graphic design and builds web applications using Ruby on Rails. He lives in the UK and enjoys playing the guitar (badly) when he’s not coding. Visit http://www.printexpress.co.uk/ for further information on his work.

43 Responses to “How to Design an Awful Looking Sign-Up Form, 10 Step Guide”

  1. Esther Mann
    January 25th

    hahahahahah. I laughed till I cried.

  2. Canvas Prints Cheap
    January 27th

    I do agree with all of the ideas you’ve offered for your post. They’re really convincing and can certainly work.

  3. nice info about creating signup form. cheers mate..

  4. always providing us nice tips :)

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

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

    • Emma
      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 … 

  6. cool post! Keep up the informative work!

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

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

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

  10. Thanks very interesting blog!

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

  11. How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/6nV6wIwa via @webdesignshock

  12. RT @WebDesignShock: How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/lcSD0AcR

  13. RT @WebDesignMash: RT @webdesignshock How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/EAsgy6Jh

  14. More hint-hints at American Airlines.

    “@mlane: How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/rYOOBvwy”

  15. How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/S3TnImeL via @webdesignshock

  16. Guía de 10 pasos para diseñar un formulario malo de registro http://t.co/R6Lqo244 :)

  17. How to Design an Awful Sign-Up Form, 10 Step Guide http://t.co/f3kvUbnI

  18. RT @WebDesignShock: How to Design an Awful Sign-Up Form, 10 Step Guide http://t.co/ROTFH9Vt

  19. How to Design an Awful Sign-Up Form, 10 Step Guide (via @webdesignshock): http://t.co/wq1lHTjY

  20. Awful signup forms & what not to do http://t.co/zxzou8Dh #webdesign via @WebDesignShock

  21. RT @WebDesignShock: How to Design an Awful Sign-Up Form, 10 Step Guide http://t.co/ROTFH9Vt

  22. How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/y50ttuzj via @webdesignshock

  23. RT @WebDesignShock: How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/lcSD0AcR

  24. How to Design an Awful Sign-Up Form, 10 Step Guide http://t.co/vrGDa9bD // haha …XD

  25. How to Design an Awful Sign-Up Form, 10 Step Guide http://t.co/ktxcLs5b

  26. How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/UU6ONJX6 #webdesign

  27. RT @themeshock: How to Design an Awful Sign-Up Form, 10 Step Guide http://t.co/ktxcLs5b

  28. How to Design an Awful Sign-Up Form, 10 Step Guide http://t.co/ahv2edvT

  29. How to Design an Awful Sign-Up Form, 10 Step Guide http://t.co/UPuHjZ0V

  30. How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/OZa6V69M via @webdesignshock

  31. [...] 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 [...]

  32. [...] 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 [...]

  33. How to Design an Awful Looking Sign-Up Form, 10 Step Guide http://t.co/ItePar7J #design #useful

Leave a Reply

Comments

*