The signup form is one of the most important elements of any site that requires one, and something that interface designers should spend extra time getting just right. Design choices directly effect conversion rates, and without users, your project is as good as dead.
Here are a few tips on improving your signup forms.
1. Sell Your User On The Product Before Demanding Registration
One tactic that’s sometimes seen on the web is hiding more information about the service behind a signup form. That way, these developers figure, they can sell the product and explain all the great features in it once they’ve already got the user captive, with the ability to send marketing material to their inbox.
Asking a user to register is your call to action. In copywriting, the call to action is at the end of the sales letter because you’ve had time to excite the reader and break down their objections. There’s some crossover here with interface design. You want to make as much information available to your first-time visitors so that those who are in your target demographic are ready and willing to sign up.
2. Make Your Signup Form Easily Accessible
There’s a balance to the first rule, and that’s making the signup form easily accessible. There are customers who would rather try a new service even with very little familiarity than read about it first. There are others who already know what they’re on the site for, and just want to get started. And of course, once your visitors have read your homepage pitch, you don’t want them to get lost trying to sign up.
Make sure that any visitor to your site can figure out where to sign up within a few seconds of the page loading.
Above, you can see Twitter’s homepage. It doesn’t really get any easier to access than that.
3. Choose Your Colors Wisely
As all designers know, color psychology plays a huge part in commercial design of any kind, whether its for printed marketing materials or websites.
It’s particularly important when it comes to your call to action — the signup form in this case — that you use colors that tell the reader to go ahead, not run away with their tail between their legs. Use green buttons and neutral text, and avoid red or orange elements that subliminally tell your reader to stop what they’re doing.
It’s okay to use those colors for validation errors — for instance, if they input an invalid email address. Drawing attention to errors clearly and quickly is as important to getting a user to sign up as avoiding those same colors in the rest of the design.
In Creditable’s case, as seen above, the largely blue color scheme isn’t broken, but the action button is given a green ‘go ahead!’ color.
4. Use Third-Party Authentication, Unless There’s A Real Reason You Can’t
OAuth authentication through major services such as Google, Facebook, Twitter and more recently LinkedIn is a huge time-saver for developers and users alike. Users are becoming accustomed to having this option, and as a result are getting more impatient with signup forms than ever.
There are definitely cases where it’s not feasible to use these services, but if you can, do it. Make sure you give your users options, though. Some people, like myself, prefer to use Twitter over Facebook for these services — Facebook being more of a private thing for me (laugh at that all you want, Zuckerberg). Others prefer to centralize their digital identities around one service, often Facebook for the less private. Offer a breadth of options to cover all your bases.
Echosign allows users to sign in via Google or Google Apps accounts, which are good matches for its business demographic. It’d do well to include LinkedIn now that they’ve released a similar authentication service.
5. Minimize The Required User Time Investment
One of the rules of good signup form design has long been to minimize the number of fields in that form. As I mentioned, the ubiquity of one-click OAuth authentication solutions has only reduced the patience users have for signup forms. It’s more important than ever that you stick to what you need immediately when asking for user information.
If your marketing department is screaming for more data about users, have them fill out optional profiles once they’re signed in. But if you force it on them at the registration page, your marketing department will be screaming for more users to begin with.
This is LinkedIn’s signup form. This sort of four field form is increasingly common, but it’s notable because LinkedIn could reasonably ask for so much more information off the bat to get your profile started — such as your current place of employment. Instead, where too many marketing managers would insist on capturing that info straight up, it gently encourages you to fill in more info using a progress meter once inside.
Also notable is the alert, where LinkedIn indicates that I may already have an account on the site. Discouraging users from starting an account when they may have already put a few minutes into setting one up is going above and beyond as far as minimizing user time investment goes.
6. Validate As You Go
There’s no reason to force a user to keep submitting and reloading the page to find out where they’ve gone wrong — which invariably requires them to fill in other parts of the form again that were okay before. There always seems to be one or two answers inexplicably missing.
It’s quite easy to have forms validate user answers as they’re filled in these days. If the password doesn’t meet criteria or match the confirmation field, the user name is taken, or they can’t possibly live in that post code because it’s a digit short of the country they’ve selected, don’t make them wait to find out. Validate fields as the user fills them in.
The example above is an example form from jQuery from Designers (you can test it in action here), and as you can see it has checked whether the username is valid and whether there’s actually an image at the URL provided before submission.
7. Don’t Exceed One Page
The best signup forms are small enough that they can be placed into a sidebar for users who aren’t logged in. We’ve covered the importance of brevity. But if your app is a little more formal and really does require all those fields for some reason (say, an online banking account with your bank), don’t exceed one webpage in the signup form.
Maybe it’s a little optimistic to make this recommendation to financial institutions, but for the rest of you… don’t exceed one page!
If you remember ten years ago, Yahoo! used to have a huge signup form. It probably had more questions on it than an application for citizenship. While I think they could make this form much shorter, it’s a big achievement for the long-winded fellows at Yahoo! to have gotten it down to one screen.
9. Keep Font Sizes Legible
There seems to be an unwritten rule that form labels should have relatively small font sizes. This compulsion isn’t as strong as it once was, but it’s something to keep in mind.
Don’t let your labels get any smaller than 14px, and something closer to 16px (the standard body text size) or 18px, a slightly larger size for slightly more attention-grabbing power, are good choices.
The Freshbooks labels are by no means huge, but they’re the same size as the body text, which is around about where you want to be. As designers, we have to put to an end to form labels smaller than this.
10. Pay Attention To The Details
As with anything else, you should be testing your forms before you deploy them. “Good enough” is a point of completion we often have to settle for or things never get out the door, but this is one aspect of your site where you need to achieve perfection.
As you create several accounts with the form, take note of anything that was momentarily jarring or slightly annoying. Take steps to reduce even the most minor obstacles to obtaining the almighty signup. A common example: if you use inline form labelling, make sure the labels disappear when the user makes the field active by clicking or tabbing into it. Forcing them to delete text before they start typing is just one example of a minor nuisance that, when combined with other minor nuisances, could lead to abandonment of the process.