Tue, Aug 23, 2011 in Web, Web Design/Development by admin, Comments Off

Techniques for Constructing Usable Registration Forms

Share


Advertise here with BSA

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.

User Signup Sheet Pen

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.

iPhone 4 Tumblr Mobile

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.

Classic Digg Registration Page

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.

Working with Desk Clutter

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.

jQuery Scripting and Coding

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

Signup for Netlog

43Things

Signup for 43 Things

Dropbox

Signup for Dropbox

Twitterfeed

Signup for Twitterfeed

Flow App

Signup for Flow free

Convore

Signup for Convore

The Discount Box

Signup for Discount Box

DesignFloat

Signup for DesignFloat

Rollyo

Signup for Rollyo

Big Cartel

Signup for Big Cartel

Cultured Code

Signup for Cultured Code Forums

Jolicloud

Signup for Jolicloud

Tumblr

Signup for Tumblr Account

CloudApp

Signup for CloudApp

odosketch

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

See the original post:
Techniques for Constructing Usable Registration Forms



Tags: ,

Comments are closed.




Advertise Here



Navigation

advertising amazon apple apps asia best windows 8 tutorials daily crunch design & dev disrupt ecommerce enterprise europe facebook fundings & exits gadgets gaming gaming news hacks how to insider inspiration ipad iphone laptops media microsoft mobile news opinion product launches samsung social social media startups tctv technology tutorials twitter united states venture video web design windows 7 gaming windows 8 news windows 8 tutorials



Follow us on twitter

  • Could not connect to Twitter







© Copyright Bitwords Media A New York Web Design Firm. The E-commerce Magazine.

About us

The E-commerce Magazine.

Write for us

We are always looking for experienced writers who can write good original quality posts on Bitmag.com Please contact us if you would like us to consider you. Make sure you give us details of your own blog or a link to some articles you have written. Learn more about us