Being a web developer, I’m always looking for new insight into web development and technologies.  I came across two great articles the other day about Sign-up forms and how they are designed.  Sign-Up Form Design Survey Part 1 covers 2 major areas: Form Placement and Design.  Part 1 of the article covers Form Placement which also covers: How is the link to the sign-up form titled and Where is the link to the sign-up form placed.

Form Placement

So the question we face is when we need to add links to a sign up/registration form, what do we title it?  The article did research into this and found that 40% of the links were titled with “Sign Up” followed by “Register” and “Join” with 18% each.  This shows that 76% of link titles are using terms that are easily understood by the user as to what you want them to do.  The article notes that less use of “flashy” buttons are used to a lesser degree.  Design should still be involved in the process, but needs to be made aware of the user base is used to seeing.

The second part of the Form placement section deals with the registration/sign-up link placement.  So now that you have your verbiage down for the link, where do we put it to maximize user click through?  The article notes that 59% of the sites placed their link in the header.  Of those placed in the header, 76% were located in the upper right hand corner.  While not mentioned in the article, I think it should be noted that at least in the United States, reading is always done in a top to bottom and left to right method.  Therefore, it would stand to reason that having your important actionable items near the top would do better rather than in the footer.  However keep in mind the targeted audience.  Surprisingly only 21% of had a prominent spot on their home pages to a “sign-up” page.  Possibly this is due to 1.) Having important content on your home page for search engine spiders and 2.) Using a header placement for the “sign-up” link will/should go throughout the site.  Also noting that only 4% of sites offered a “sign-up” form in a side navigation.

Form Design

So what should be considered when designing a form?  One of the first things you should look at is how simple is the layout of the form?   Other things to consider, but are not limited to:  Is the form easy to understand?  Are required fields easily identifiable?  Is the form a single or multi-part form?  So is the form easy to complete?  According to the article 61% of the websites actually simplified their design so that there were no distractions that prevented the user from completing the form.

What is the gain for the user to complete the registration?  For most sites like Facebook, MySpace, or Digg, it is quite clear what the user is signing up for.  However for those sites that aren’t familiar to the general public, you should provide clear information on what the user is signing up for and what potential benefits/rewards are being offered for signing up.  While a reward doesn’t have to be in the form of money or prizes, if there is a real incentive to sign up, the user most likely will.

Single vs. multi-page form is pretty cut and dry.  93% of the forms surveyed were single page forms.  The more you force people to fill out in order to register, the higher chance of not getting sign-ups you desire.  So the old K.I.S.S (keep it simple stupid) rule applies here.

Another important design feature is what do the leading field titles look like.  This includes colors, font-weight, and alignment.  62% of sites go with Bold field titles vs. a 20% of those that use color.  Field title alignment on the other hand is not as cut and dry.  41% opt for right hand alignment, 29% left hand alignment, and 30% go with a stacking method of field title above the input field.

One of the biggest obstacle to form completion is how many fields must a user enter before they can submit the form?  Over half, 54%, have between 3-5 fields required followed by 6-8 questions at 34%.  Not every sign-up form is the same, you must weigh the possibility of losing registrations by asking for more information.

Should fields flow vertical or horizontal?  According to the research, 86% of sites opt for a vertical flow method.  This has to do with not distracting users by “jumping” around the page to fill out fields.

You can read the original article at Smashing Magazine.

Tags: Design, Forms, User Interface, Web Development, Web Sites

This entry was posted on Sunday, July 13th, 2008 at 11:12 am and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.