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.