Monday, September 22, 2008

Forms - What I learned about optimizing them

I was reading a Grok blog that hit on the very important topic of form optimization and realized I had not shared my experience here yet.

Over the past decade, I have tested hundreds of different forms while working for US banks, and rule number 2 in the Grok post, "look at every question," is huge.

One of my colleagues, Rick Starbuck, once said, "the war is lost one little soldier at a time" as we argued with legal staff at a top ten bank to try to eliminate yet another low value input field on a new account opening form (not personally antagonistic, just legal arguing, I think legal peeps are great). We used to keep a scorecard of how many input fields we had, and how many each of our competitors had on their online application, with the goal always being to have the most streamlined application possible. A scorecard for arguments with legal might have also been useful too come to think of it. As a result of attention to these details, the sites I have been working with have almost always had the best conversion of any banking sites.

There is a LOT of upside in everything in forms. My checklist would include the following at least:

- Basic layout: How easy to follow can you make it? How clean? I have found that it is better to have one medium length page with vertical scrolling (only) rather than 2 short pages with a submit button between. But there is a limit. If legal is forcing inline terms accept and your one page is 10 pages of scrolling, don't mix that in with form fields.

- Call to action button position and design: This one is big. The best designs I saw after testing hundreds on a credit card app incorporated high contrast call to action color (red against white and maybe black edging), diagonal edges (think arrowhead), and bullseye patterns. Sounds obnoxious? You bet, but it works too. The challenge for me was getting a design that was not too personally embarrassing for me but still converted well.

- Which form fields are present, absent, required and optional: win the war one soldier at a time. Benchmark your competition. Be analytical about this. Get rid or Mr./Mrs./Ms., it is usually not legal and rarely adds enough value to justify it's existence. You want gender id, use a database match on first name or behavioral profiling.

- Terms acceptance methods: In page text vs pop-up, vs radio button, vs scroll boxes in page, default checked or blank, etc all have different conversion in different situations. My favorite terms accept is to put the terms in a pop-up box, and actually track to ensure that the box was opened with an image or some other html tag at the end of the terms text that can not fire unless the text was really presented. You need to do something with this solution to catch pop-up blockers and provide tips or a workaround as appropriate too. Sound overly sophisticated. Well, maybe, but if you have decent volume it is well worth it for the conversion gains.

- Form field labels: Do you call it Address 1/Address 2, Or Street Address/Line 2, SSN, Social Security Number, mobile phone/cell phone, etc. Test to get the right answer with your audience.

- Order that you present form fields in: Generally the questions should get more sensitive as you go lower on the page. This matches Marketing commitment principal. The only time you break this is when logical grouping require, but even then, put the group with the most sensitive stuff at the end (rank groups by their most sensitive field) in my experience.

- Instructional copy: What does it say at the top of the page? DO THIS! Why? You need one headline that reinforces the navigation or how someone got to this page, then some very short instructional text motivating form completion. You can tell them it is easy, you can tell them how great the payoff is, you can tell them there is no risk, you can tell them everyone is doing it, just test whatever you tell them and optimize it. Text is a great spot for segmentation too, by the way, because it is so easy to implement and so effective (great discrimination based on traffic source).

- Help availability and identification: How do you give your help? Old school was redirect to FAQ's but that takes a visitor off the buying page! Horrors! Solutions include pop-ups, javascript fold-outs, chat, and 800 numbers. My personal favorite is what I hope is an emerging standard. Use a dashed blue underline to note words and items on the page which have help text associated with them. Then dashed-underline items get hover text so the visitor knows where hover text is available when they want it, but it does not take them off the page or impede progress. In page foldout and hover help via javascript is also popular right now and probably better than many alternatives too.

- Offer reinforcement: good practice to remember what brought them to your site and reinforce it all the way through. Did they come on a $10 cash back deal? Can you include a small reminder letting them know that you remember? Don't worry or stress, you will get your $10?

- Testimonials: test including testimonials so folks feel like others have trusted you and been happy about that decision. Trust in general is a broad topic with a lot of potential for you to play around with on any form. One rule of thumb that an 800 number on any shopping site prominently displayed at check-out will increase conversion even if no one ever calls the number (even if the number does not work, or is really for some unrealted entity like the US post office customer service ;-)

No comments: