Forms part 1 : Increasing conversions with good use of forms
Things you need to know about forms:
User's don't like filling in forms:
- Time consuming
- Tedious
- Can be very frustrating
However forms are hugely important!
- Millions are spent daily on e-commerce system
- Thousands of products are listed on Ebay each hour
- Billions of people use social networking sites
Forms are the glue that makes these interactions possible.
Sometimes though forms are either an afterthought or designed at the end of the design process. It shouldn't be that way, forms are too important.
Theres a debate for designed websites in html and css and using the browser rather than in a design package such as Photoshop. Forms are a good thing to design in the browser.
1.) Crucial
Ask yourself and the client are these forms fields and data really important to us? As seen in the image below the example on the right is much more enticing to fill out. The user will spend less time filling it out and there much more chance they will fill it out.
Less fields + easy decisions = good forms and more submissions.
That's what are a looking for, the bottom line is, we want as many form submissions as possible.
2.) Client side validation
A bad example of a use of forms:
The user spends a minute or two filling in a form. They hit submit and they sent to a different web page to their disheartenment theres an error message. As users don't like filling in forms in the first place, we have now agitated them more. They then click the link to go back to the form field they just completed. To their absolute horror, the information they took a few minutes filling in has now disappeared. There is a fair chance the user will now leave the site or web form. This is a classic example of bad user experience on the web. Your brand could even be damaged, and the user may never return to the site. Their confidence in the website has been completely diminished.
A different scenario:
The user fills in the same form with the same information. This time though when the user clicks submit javascript is used to immediately show them the error on the form. Theirs no page refresh and the error message and field are clearly displayed ( use red ). They correct their error efficiently and the form is then successfully submitted. A complete contrast in terms of the first example. The user is happy as they have completed the task they came to carry out.
An excellent example of good client side validation can be seen on the twitter sign up page. It uses AJAX which calls to the server every time a different username is entered. The user doesn't even need to hit submit, its done on the fly and as they type. A truly excellent example of good use of client side validation.
3.) The tab key and focus
Its reported that 50% of users use the tab key when filling out forms, it save a lot of time rather than clicking in the fields with the mouse for each new field. Tabs on forms work by default, all you need to do is have your fields in logical order in the HTML document.
When the user clicks or tabs into a new field its better if they know they are in that field. In the example shown a 2 px border is shown rather than a 1px border when not focused. It shows the user they are in that actual field and makes the form that little bit more usable.
input:focus, textarea:focus{ border-width:2px;}4.) Size form elements appropriately
As seen in the examples below, there isn't enough room for the user to view all the information they entered. By simply making the input field larger it allows the user to see all the data and make corrections if necessary. The user will have more confidence in what they are about to submit. More confidence = better user experience.
Other Episodes::
