Most of my day is spent online. Beyond work-related website use, whether I’m buying a gift for my wife or researching a vacation destination, I make my way through site after site taking note of horrendous as well as exceptional online experiences. More times than not, I think “these people should be doing this a lot better” or “that wasn’t a pleasant experience for as big a site as they are.”

Because of what I do for a living, I judge forms a bit differently. The sad reality, and sort of one of my secret confessions, is that my intro to conversion optimization around 2002 was through forms. I was obsessed with trying to make them better and equally if not more frustrated by developers telling me I was wasting my time. Maybe I was a bit overzealous back then considering the limitations of technology and what could be done, but I was determined.

Just the other day I was on a well-known site trying to download some information about a study I wanted to read. They wanted my address, my phone number and several other NON-RELEVANT pieces of information they deemed necessary so I could look at a page or two of their recent study.

I have a feeling there are many professionals trying to market e-commerce and other websites who know their site’s forms are a problem but aren’t sure where to start with them. I want to provide some direction when it comes to questions like:

  • If I start small, can I start by doing some initial form optimization? The answer is yes, you can start wherever you want. The harsh reality is that not everyone can just start out of the gate with a full-blown, proven optimization methodology.
  • If I want to make changes, how do I know what changes would be worth making? There are blogs out there that give you a blanket list of form changes that target a blanket user segment, but not all changes truly optimize for every user segment. Some say make the form as short as possible, but there are plenty of studies that show long forms work better, too. Always remember user intent and what’s in it for them. Study the value proposition.
  • If I don’t have enough traffic or data but still make changes, how do I test the hypothesis behind the change and document the results? This is one question I don’t see addressed often enough. There isn’t enough content out there showing what information you need before you start yanking fields from forms and how to obtain it, how you determine how hard it will be to make a change, or how you gauge whether changes are working in the long-term if you can’t run A/B tests.

The main goal here is to help anyone who is trying to implement some level of conversion optimization thought process into their company culture. Marketers are often given a very small amount of leeway to start with and then are asked for quick wins to prove a concept. Fixing your forms is a great place to start.

An Agile Approach to ‘Form Optimization’

Forms are an unavoidable part of just about any website experience. They are not sexy or fun. They are not enjoyable in any way, shape or, umm, form. They are necessary and utilitarian.

But they do not have to be a pain in the backside like so, so many are.

A form that is poorly designed has a great potential to run off site visitors and assassinate conversion rates faster than a Hamilton matinee will sell out.

It doesn’t have to be this way. Rarely will you hear the term “best practices” come out of my mouth or see it written on this site, yet at times it’s a necessary evil. I tend to go with the phrase “suggested guidelines” as much as possible. There are some suggested guidelines that you can start with that, let’s say, are much better than other practices and can make your forms more user friendly.

Part of the problem with forms is that they require more complex coding than the rest of your website. This makes them harder to change, and sometimes makes developers more resistant to suggestions from marketing. To give you an idea how easy or hard it may be for your development team to go in and make changes, I’m grouping my suggestions for changes below according to low, medium or high technical difficulty.

Most of my suggestions just boil down to “don’t.” Don’t put an extra field in. Don’t put a dropdown there. Don’t ask for that information. Et cetera.

Capture forms on your web pages should only ask for the bare minimum information from the user that is necessary and relevant to what they are getting in return.

We typically deal with forms that are specific to checkout processes or user signups, which you will find mostly on e-commerce and/or SaaS-type sites. However, some of the examples in this post can be applied to several types of forms found on many websites. Just as an example, within the checkout process you might find forms for:

  • Account Registration
  • Guest Checkout
  • Shipping and Billing Information
  • Payment Information
  • Purchase Summary and Confirmation.

Here’s a well-known retailer’s account registration form:
llbeanregistration

There’s also more to optimizing forms than my statement above. Every form should be optimized for its specific purpose, with every function, field and word of instruction considered.

As previously suggested, we are going to be looking specifically at:

  • Common problems with forms and suggested guidelines for changing them, as long as you implement the correct tools to qualitatively verify the effect of your changes after the fact.
  • How to analyze your forms. You don’t want to make changes just because some blogger tells you to. Figure out what is and isn’t working.
  • User intent when it comes to forms and how to apply it to your analysis.

That third point is the big one. Stopping someone in their tracks to fill out a form when they are hot to buy your product, download your publication, or perform whatever conversion you’re looking for, can be a killer. And it’s a wasteful, empty death.

Start By Identifying Where You Have A Problem

The reality for you may be that you know your site’s forms are hurting your conversion rates, and that that hurts revenue. The problem is, you don’t have historical quantitative data that supports your theory. A quick example – when you look at the form on an iPhone and you can barely see the fields, you just know it’s a problem that everyone is having. But you can’t prove it.

One simple way to identify whether there is a problem is to analyze a specific segment of data in Google Analytics that relates to any page with forms. It might be a landing page from an AdWords campaign. You may also find forms on contact pages, usually named /contact/ or /contact-us/, depending on how your developer set up the original IA. Some of the metrics you can look at are illustrated in a table like the one below:

Google Analytics table

Once you make your way to Behavior → All Pages, locate the blank box near the middle right part of the page. Place your cursor in the box and type the word “contact” Typically this will show you any pages that have contact forms on them, which is a good place to start.

After you identify the pages you want to analyze, add “mobile” as a secondary dimension, and compare the numbers for mobile, tablet and desktop.

Google Analytics table 2

Things to look for:

  • Trends in time-on-page this month compared to previous months and/or previous years.
  • Significant differences in time-on-page among different devices. This might tell you that people using mobile devices are hitting the page and immediately bailing on the form, which indicates the fields are not optimized at all for a mobile.
  • You can also look at the form page and the thank-you page combined. Compare these two pages among different segments, like new users vs. returning. If you have a much lower conversion rate with new users (think login or signups), it may be that they’re not willing to fight through some of the issues posed by your forms. Returning users typically know how to get around things or have come to be OK with some of the nuances.

If you don’t have analytics set up, and you search online for help with something like “form optimization,” you’ll likely run into stuff like “the 72 steps for optimizing your forms,” which is either overwhelming or insulting because you know it doesn’t really work like that. Some moves you can make and, sure, they might make a difference, but which ones? Then, of course, you have to convince your programmer to make the changes with nothing but a blog post to cite when he or she asks why.

With the proper time, money, support, etc., at your disposal, you could do the quantitative and qualitative analysis, order up the new wireframes and layouts, and conduct the full-on A/B testing necessary to get valid answers. The reality probably is that you have too many other projects going on, but if you could get this quick win, you might really open some eyes for more lucrative opportunities down the line.

Since you can’t go through our normally recommended conversion methodology, you’re going to have to make some assumptions (Remember the phrase “suggested guidelines.”). To reiterate, this is not what I usually recommend. But sometimes reality intercedes.

Common Issues That Make Forms Fail

I’m obsessed with how people interact and behave while using websites. Thus, user experience is essential and extremely foundational to everything we do here at JeremySaid. Whenever I have a good experience shopping or otherwise dealing with another business online or off, I write it down. When I have a bad experience, I remember.

My No. 1, biggest pet peeve that continually drives me up the wall is BAD FORMS.

I fit one persona type, so what bothers me may not be a problem for others. Everyone’s different. But let’s don’t get hung up on UX theories at this point.

Instead, I want to tell you about some things that ruin my day when I encounter them in online forms:

Low Technical Change Difficulty

  • Double password formDouble password fields. Once is enough. It’s a password; your user knows how to type it correctly. They know it won’t work if they don’t. They don’t need to practice. And, for that matter, let your site’s visitors see their password as they type it in, or at least include a “show password” option. Leave it up to them to make sure no one is watching over their shoulder.
  • Double anything field. Just stop! Never ask for the same information twice. It’s a computer; memory and being able to recall information is what it’s famous for.
  • Small fields. For the love of Pete, God, or whoever you hold dear, make your form fields bigger. Small form fields, particularly on mobile, create difficulties for many people, especially people with fine motor skill deficits or vision problems. You want to have some fun? Ask your company attorney what the liability might be if your website lacks accessibility.
  • Unnecessary dropdowns. Dropdown menus can also be hard to manipulate. This is especially true on (smaller) mobile platforms.
  • Fax numbers. Really? How out-of-date do you want to look? Again, not to kick a dead whatever/wherever, but use it only if it’s absolutely necessary.

Medium Change Difficulty

  • Different field lengths. Forms should have one field per line, all the same length and automatically expandable.
  • Unusable keys. People will expect to use the Tab or Enter keys to go to the next field. Either make it work or make sure, at the least, neither key causes a problem like lost information.
  • Optional fields. If there is an “optional” field on the form, question why it exists. If it’s truly optional, you don’t need it. Conversely, if you need it, it’s not optional.
  • CAPTCHAs. You think people are looking for a puzzle to solve while they shop your site? CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart) is also inaccessible to many groups of users, particularly people who are blind or dyslexic. Audio-CAPTCHA is no solution if your user also has hearing problems. Security features should be automated and in the background, not hoops users have to jump through.

Captcha form

(Image source)

  • Asking for the type of credit card. Payment services’ real-time APIs (application program interfaces) identify who issued a credit card from its first set of numbers. That’s all you need. Asking the cardholder to check off a name is an extra, unnecessary step. Don’t do it.

Credit Card Form

Hard Change Difficulty

  • Separate fields for first and last names. Just let people fill in their name. I promise, most will give you their first then last name. If they don’t, so what? What’s in a name? You are gathering or will gather other identifying information if you really need it.
  • Required telephone formats. It’s 10 numbers. Your script should be able to parse them. Don’t make someone do it again because they used parenthesis around the area code instead of hyphens, or periods or whatever.
  • Lack of automation. Again, if they’ve entered the data once already, you have it; don’t ask again. Especially if you use single-sign-on and can query the data, fill in some form fields for your user. If you can geocache, all you should require is a street address and ZIP code; the ZIP code identifies the city and state.

Duluth Trading Co. checkout

  • Requiring user ID and password to check out. They’re ready to pay and you want to throw up a roadblock? Not helpful — not for anyone. Let users check out as guests.

Problems with your forms come down to how they affect the user experience, including how users feel about the type and amount of information you require. Your programmer should be able to help you resolve the technical aspects of implementing changes through such techniques as agnostic / responsive design (which is essential for mobile platforms), inline validation of user input, forgiving formats, smart defaults, etc. Bottom line: there are solutions.

In most scenarios, users want the shortest and fastest way to get through your form, so having that as the goal is helpful. Except when you’re designing them; don’t take shortcuts with forms. Make every form fit, be scrutinous of every field and make sure what what you are asking from the user is in line with what they are getting.

How To Validate What You Have Done

If your problems are as I outlined above — you think your forms could possibly be costing you customers and money, you don’t have the tools to prove it, but you can ID obstacles between your customers and form conversions — then you’ve made a couple of significant steps in the right direction. So, how do we prove or disprove our hypothesis that the user experience during their form usage can be made better?

If you’ve inherited forms with some of the outdated techniques above, and you agree with some of the suggested guidelines provided, then changing them “should” provide a boost. That’s one version of following the “72 steps” blog post, and about as useful, probably.

But what’s good about your situation is that you can test your site’s forms inexpensively and very easily. To do so, you need a forms analytics tool and recordings of how site visitors use your forms. You have both available to you at Hotjar.

I have no connection to Hotjar and no reason to suggest you use it other than the fact that it’s a great tool that is easy to install and use.

Hotjar’s form analysis tool shows how long users take to complete fields on your forms and where they give up:

Hotjar form analysis

User recordings show exactly how visitors scroll and move about the pages of your site. You can look at video recordings with attributes that include a specific URL, i.e., for a page that has a specific form on it. Here’s an illustration:

You should install and use Hotjar before you implement any changes to your forms. This way you can save videos that create a baseline of “before” to compare to “after” changes. If it’s one thing managers like, it’s to see where they started, where they ended up, and the positive result.

Also, remember that a negative outcome isn’t necessarily bad. Knowing what not to do in the long run can save tons of time and money. One thing that I know for sure is that you won’t win with every change, but you still need to make sure you document every change and its result.

One adjustment to make Hotjar work even better is to add a short piece of JavaScript to segment new and returning users. This is very useful.

New users most likely arrive at your site from a brand search. They are likely to be high in the buyer funnel and to know nothing about your site or their way around it. Depending on the type of business (and cost of the product), many e-commerce sites should expect a first-time visitor to leave without committing to a form, much less a purchase.

Still, how well a first-time visitor makes their way around your site provides a very good picture of its ease of use.

Returning users, on the other hand, are there because they liked something you had to offer. This makes them more likely to be motivated to give up the information and effort required by your site’s form(s). If they don’t, you need to ask why.

This simple bit of user segmenting will save time and provide much better insight. Again, this is something your programmer should be able to do for you.

Once you have Hotjar set up, it’s just a matter of the time it takes to establish and identify a pattern. And I’m as big a stickler as anyone in the business when it comes to statistical analysis and what’s required for a valid sample, but if Hotjar shows any inkling of a trend of users leaving your form at a specific point, I’d say get in there. Make that step easier or clearer. If possible, eliminate it altogether.

Anything you change, of course, immediately goes on your watch list.

Focus On User Intent & An Effortless Experience

If you are trying to optimize your forms on a shoestring, you want to focus on incremental wins. If step five is the slowest point in your checkout process and you can make the instructions clearer and more concise, do it and watch for an uptick.

Remember, every little thing your site users have to process increases their cognitive load and thus the friction that keeps them from moving easily toward conversion. The other primary factors in user intent are motivation, or the perceived value of moving forward, and anxiety, the fear of loss or vulnerability caused by turning over money or information.

Quickly, you’re causing problems if your forms:

  • Offer too many choices (cognitive overload)
  • Ask for too much information (fear factor)
  • Have poor design / illogical layout / burdensome length (motivation killer)
  • Are unclear or lack information (What’s in it for me?).

Ask yourself what your form is seeking at each problem point and decide whether it’s clear what you want, if you really need it and/or whether you can show why it’s worth it for the user to give it to you.

Let’s say you have a six-step checkout form. If you can identify the slowest point and change that for the better, and then do it twice more, you’ll have documented gains in speed, and probably conversions, to show to higher-ups.

Conclusion

There’s no escaping forms in e-commerce, SaaS or almost any type of business website, but there’s no reason for your customers to feel like they’ve stumbled into some brutal maze. Because the problem for you is they can and will find their way out, but fast.

Ideally, you’d submit your forms to a series of quantitative and qualitative testing to figure out what works and what’s causing problems. But if that’s not plausible, you can use some suggested guidelines (after reading this post) coupled with some common sense to avoid steps in forms that are unnecessary or that you find bothersome, and then test your forms with an online tool.

You’re a site user, too. Use some of your own experience to make your site’s forms work better for every potential customer.

And if you think you have a problem with forms that I haven’t discussed, or you can’t find Google Analytics data that you think should be there, send me an email or give me a call. I’ve probably seen it before, and I’d be glad to help you out.