Most websites offer a way for users to sign up into their databases. This is often coupled with a username or e-mail address tied to a unique user ID number. The process of creating a user database is heavily developed and streamlined to a point. However there is still a lot of debate in the realm of registration forms and layout design.
I’m hoping to bring you some newer ideas and techniques to building usable forms. The registration process can be annoying and arduous. You won’t be able to capture all of your visitors. But to reduce the length and weight of your form will allow more freedom from your audience. Individual tweaks to your signup forms can go a long way in user experience.
Use Plenty of White Space
Padding is something you don’t hear recommended very often. But when users are trying to fill out multiple form areas, it can be annoying to keep your eyes focused in one tight area. Having all your info scrunched together seems like a good idea on paper. But generally in practice the user will have a much more difficult time comprehending the layout.
If you are using external labels off your form inputs you should also allow for the proper margins between forms. Labeling can become a gruesome mess when your forms are all close together. You should be able to skim the form from a distance and figure out which fields belong to what data. There are tons of jQuery effects you could use to enhance your form aesthetics as well.
For example, when users tab between different fields you could highlight the selected areas. Either a border color change or even an outer glow can look very nice and draw the user’s attention. Google Chrome has already added this setting by default. Also you may consider diminishing the luminosity of your fonts within the field, so selected text becomes darker than the rest.
Offer Tooltips or Side-Notes
If you’re unfamiliar with tooltips, these are the little bubbles which pop up when hovering over a link. The text is usually set by the title attribute of the anchor HTML element. Dealing with tooltips in forms you should recognize there aren’t as many limits. You could have them appear underneath the form, or on either side. You could also change the colors and fonts and really customize them to be your own.
Whenever your user would hover or select a field you can choose to display some helpful information. As an example you could display a tip for passwords stating “password must be over 6 chars long”. If you’ve seen examples of this technique you’ll recognize to hide each tooltip when the user loses focus on each field.
If you don’t like the display style of tooltips you can adopt the functionality and port it to another view. Such as updating your label text in a new color. Or you could alternatively place hidden paragraphs next to each field and display them as your users pass through. You can see a great example in DesignShack’s Digg Sign-Up form tutorial targeting the Digg v3 layout.
Remove Extraneous Details
It can seem like fancy icons are the perfect spice to spread over your signup forms. I would have to argue this idea to a fault. With smaller icons which blend into the background you can get away with a great UI effect. These can help your visitors understand what your form is intending to do, or alternatively label each of your input fields without words.
But it is very simple to go overboard with these ideas. Too many extra buttons and icons will confuse your visitors. Remember that with plenty of space and precise labels your visitors won’t be very picky on design. It’s even a good idea to keep the amount of fields down to a minimum.
I always recommend the big 4 entities – Username, E-mail address, Password and repeat password. You can cut the list down to 3 by using e-mail in place of their username. And although you could reduce to only 1 password field, it’s highly discouraged in practice. Users aren’t able to see the password they’ve entered. And with no failsafe methods they could easily misspell something and wreak havoc on the entire signup.
Utilize jQuery/Web Scripting
It can be tough to decide how you want to develop the signup interface. Straight HTML and CSS is always the safest option. They are supported in all modern browsers and don’t require very much finesse. But most of your visitors will be running browsers supporting JavaScript actions.
The jQuery Library offers a whole slew of possibilities for opening your forms in a popup window. There are lightbox-style popups similar to Facebook messaging. Available also are modal popups and dropdown menus which originally hide your forms until the user is looking to signup. These methods will not only look fancy but will clear up room in your pages for other content. Users won’t feel pestered by a signup box but will have access at any point to register.
If you are unfamiliar with jQuery you may want to spend a bit of time researching the language. We have a great beginner’s tutorial for jQuery programming with some awesome tips and external links. Similarly the design community is very encouraging for new developers. So don’t be afraid to ask questions and Google a lot!
Design Gallery
There are so many examples of great signup forms. Great websites tend to leverage their way into the mainstream through some means. This is great for the design community, since other designers will pick up on the trends. Below is a small collection of my favorite registration forms from a couple top-quality websites.
Netlog
43Things
Dropbox
Twitterfeed
Flow App
Convore
The Discount Box
DesignFloat
Rollyo
Big Cartel
Cultured Code
Jolicloud
Tumblr
CloudApp
odosketch
Conclusion
The registration process is an extremely private and somewhat lengthy part of the Internet. Users are adept at filling out web forms by this point. They have mostly become accustomed to the formatting from hundreds of other websites. But the design revolution is quickly changing how we process web signups.
These tips should offer a grand overview towards building usable web forms. Frequent visitors to your website are most likely interested in signing up. So it’s your job to make the registration process hassle-free and streamlined as possible. If you have similar ideas for constructing web signup forms please leave your thoughts in the comment area below.
Nice article. A great technique I like and a wonderful element to usability of ecommerce sites, generally not favoured by marketers, is to capture user data for registration upon completing the order with a simple checkbox. There’s no need to force users to sign up just to place an order. They’ll appreciate the streamlined nature of the checkout process.
The only downside is that users may not click the checkbox if they don’t need to. But my reasoning is, shopping on the high street doesn’t require a customer to sign up to some awful mail list so why should shopping online? Usability = a happy customer.
Nice post. Registration forms are often overlooked and somewhat rushed through. I’ll definitely be referring back here in the future.
great article. I’ll definitely will refer here in the future.
A couple more suggestions that you could/should consider. They are biased towards accessibility, but that and usability are closely intertwined.
Don’t use asterisks to indicate required fields without doing anything else. The label text should include the word “required”, whether it’s displayed with the label or positioned off-screen. If it’s off-screen, you can still add an asterisk, but put it in a CSS-generated pseudo element. That combo neatly covers almost any scenario.
Don’t use title attributes or paragraphs inside a form if their content is important. ATs with a form mode will skip them. If instructions are needed, put them above the form, although a need for instructions may be a hint that the UI design is badly thought out.
If your login form is shown in an active way (overlay, flyout, whatever), make sure that it is unobtrusively coded.
Use ARIA attributes.
The usual basics about font-size, contrast and misuse of colour to indicate status also apply.
Great post, thanks a million.
Nice article, confused though how sites with captchas in their forms made it into the good example list, these things hurt the process, users hate them and with other coding techniques available to stop spam there is never any excuse for using them.
ultimate things you mention in this useful article. thanks