By on August 4, 2011 | 0 Comments

Increase Conversions by Improving Your Form Usability

Since the main goal on most law firm websites is for your visitor to contact your firm about their case, it is crucial to make sure your forms are easily usable and not turning people away. In fact, one of the biggest mistakes we see time and again on law firm websites is unusable or inappropriate forms that are used to contact the law firm. Your visitor was impressed by your content, your professionalism and your credibility; that is, until they arrived at your contact page.

What are some of the stumbling blocks in form design that you need to be aware of? What can you do to help keep people from abandoning your site from your forms? Here are some helpful advice and tips on making your forms more usable.

It’s about trust, benefit and cost

There is a theory that was derived from psychological, sociology and economic perspectives called Social Exchange Theory, which proposes that all social interactions and relationships are a process of exchanges that weighs in the subjective costs as compared to the benefits. When the benefits or rewards are outweighed by the cost or effort, people will end the interaction. The visitor already has some trust in your firm, as they have made it to your contact form.

What ways can your law firm provide a reward for the user to fill out your form? Offering something for free has always been a successful means to entice the user to convert. A lot of firms offer free legal consultations, so make sure you have call to actions throughout your site that say this; and make sure you say this on your actual forms.

Trust, Effort and Rewards Diagram

Now that we know that the success of any interaction depends on the right balance of trust, benefit and cost, we can get down to the little things that can be done on forms to help convert your users.

Only ask for the information you need to make the initial contact

The web is growing at an extraordinary rate, along with scammers and con artists, so users are becoming more wary of arbitrarily giving their private info out. That’s one of the reasons why you should only ask the bare minimum to make the initial contact.

We have seen some law firm sites make the mistake of having really long forms with fields that are not really relevant or necessary to contact the person, such as asking for the person’s address, or even worse, asking for their birthday. Do you really need their address or birthday to make the initial contact with him or her? Save getting that info for when you contact them by phone or email, once you have gained their trust fully. The only time you need to ask for their address is when you are sending them something, such as a brochure or free report.

Through usability testing, we have found that the best forms have four or less fields: name, email, phone and comments/questions fields. To save even more space, you can combine the email and phone fields into one field and name it something like,”Enter Your Phone and/or Email,” thus letting the user decide what they want to give.

Brian Crescimanno, in his excellent article called “Sensible Forms: A Form Usability Checklist,” recommends asking yourself two questions about every element of the form:

  • Is this a piece of information that is valuable to us?
  • Is this a piece of information that is so valuable that it’s worth denying users  access to (whatever lies beyond the form) if they do not choose to provide it?

In any case, the old adage applies: “Less is more.” Keep it short.

Indicate required fields

Graphic showing required field indicator

Since people live busy lives these days, it is important to clearly mark which field is required. People usually scan the form before they start filling it out to measure how invasive to their privacy it is to complete the form, so indicating which fields are required builds trust between you and your visitor.

The standard and recommended indicator is the * (an asterisk), which can be placed near the label or field. A short explanation of the indicator should be placed above all the fields, such as “* Indicates Required Field.”

And be very cautious with which fields you make required. At the very least you need their name and either their email or phone; do not require both their email and phone.

Use clear and concise language

Forms are not where you want to have a lot of technical and marketing jargon. Be clear and concise, and descriptive as to what you want the user to fill out. Speak in the language of your target audience.

Also, use the <label> tag so accessibility is maintained.

It is good to match both the form’s heading and the submit button, so continuity is achieved. For example, if the main heading on the form is “How Can We Help?,” it would be acceptable to have the submit text to be “Get Help.”

Formatting, styling and layout

It is important on web forms that readability and flow is maintained. In that regard, here are some general guidelines to maintain the flow for readability:

  • Avoid multi-column fields. It’s normally best to avoid putting fields and/or labels in more than one-column, as it breaks up the flow and does not allow the user to see the form as a whole, creating more cognitive effort on the user’s part. The only exception to this rule are the first name, last name, country and state fields, which are expected to be seen together as groups.
  • Place labels above the fields. Usability tests have show that users can more easily associate labels with its field if it is above, rather than to the left of the field. If you must have the label on the left, it’s best to right-align the text.
  • Make sure the fields have enough height and width for the user to type. In general, it’s good to have the width to be at least 50 characters, and if it’s a text-area field for the comments give it at least 10 lines tall to ensure readability.
  • Style carefully. It is common to want to pretty up the default fields from the often boring default browser styling, but we must be very careful that the look and feel does not distract from the readability, and is in keeping with the site’s branding and design.
  • Use ample whitespace. Flow is often jeopardized when there is not enough space between the fields.
  • Group related fields. To help maintain flow, it is helpful to organize related fields together. You might have a section with just their contact info; and then another concerning the details of their case.
  • Choose legible text. Use colors with good contrast with your design’s background. Make sure the text is large enough to read in proportion to the surrounding elements.
  • Make sure your contact form at least starts above the fold. Way to often we don’t even see the form unless we scroll down the page.

Plan for when things go wrong

Since we are only human, we make mistakes, and errors often occur in filling out web forms. We need to account for those and take the appropriate action to defend against them. Ways to avoid errors on forms are:

  • Be pre-emptive. As noted above, be clear and concise in your language on the labels, and denote clearly what fields are required. You might provide further helpful descriptive notes below each field.
  • Use inline validation. Before the user even submits the form, let the user know they have made an error with clear and concise language. For instance, if the user types in the wrong email format and then tries to go to the next field, an error message can be dynamically displayed below the field in red that says, “Please enter a valid email address.” Helpful scripts like this jQuery plugin can make this possible.
  • Also provide validation on the server-side. Inline validation is not foolproof, so also provide error messages after the user submits the form.
  • Use caching, saving techniques. After the user submits and an error comes up, provide a mechanism whereby a user can go back and not have to redo all their work, which will only lead to user frustration.

Consider multi-step forms

If your form needs to be longer than 4-5 fields, consider breaking up your form in different steps using AJAX. For example, step one could have the name and contact info, with two buttons at the bottom, one saying “I am done, please send now,” and another one displaying “I have more information to give.” If the visitor just wants to send their name and contacts, they can stop there and his the “done” button; or they can proceed to the next step where they can provide comments about their case; in the same fashion, the can decide to finish the form here or proceed to step three to give additional, optional information about their case.

Multi-step form

The advantage of this technique is that it gives people the chance to only provide the bare minimum, while allowing others to give more if they so choose; thus there’s less likely of a chance for people to abandon the form if they see there’s too much to fill out.

The importance of testing

People are of different walks of life, different ages, genders; and races, so it is important you test your form with your target audience. Testing can be as simple as asking a friend to go through the form and ask them if they had any difficulty. But real testing ideally should include both professional user testing and A/B testing.

Submit we go!

If you do most of these things listed here in this article, you are well on your way in creating the best possible form in converting your visitors into clients. There is so much more you can do to improve form usability, but that is for another article. Just remember that any interruption the user’s flow creates more effort on the user’s part, and thus reduces their trust in your firm.

If you need assistance in improving your form usability, do not hesitate to call us today at 800-872-6590 or fill out the form below.

Leave a Reply