Two-column forms. Can they work?

In my different blogs on web design, form design and the concept of website 'conversion' – essentially, converting the website user and achieving the goal you want them to reach – I have often described forms as the make or break for the website; or where the 'rubber hits the road'.

The form is literally where it happens in so many cases; where the user commits or doesn't commit, where they signup or where they don't.

Commensurate to say, the design of your form and how it talks to users – the trust and benefit they see in it – has a big bearing on your ability to 'convert' and therefore, the performance of the website.

In designing a website form, we have plenty of must-dos and best practise, though the whole thing is still a bit of an art.

Does the 'submit' button say 'Buy Now', 'Buy Right Now' or 'Shop Now'?

If you're signing someone up for email, do you say 'Subscribe Now' or 'Learn More'?

It all depends.

Do users prefer one form?

Or do they prefer a three-part form, just as long as they know how long the three parts will take to complete?

Web designers should know to remove all unnecessary fields from forms.

This said, excessively-short forms can look spammy; users will become concerned if you’re just asking for an email address and postcode when they’re applying for car finance or a passport.

Then there is the common argument among web designers that the content and functionality you want your users to focus on in your website, should be above the fold: essentially, all on screen without the user needing to scroll.

This common argument however, is contradicted in user tests I have seen of late where users have been quick to exit the content – and especially forms – above the fold; forms below the fold, especially when tied into an effective call to action. 

Indeed, I argued in a blog a few months ago that the obsession with shoving content above the fold was overdone and should be done more with a view of Google and its algorithm rather than some hard-line view on usability.

Yes, which ever theories are right or wrong, form design, form usability and form placement is critical to website conversion.

 

Two-column forms: they don't work ordinarily, though can they?

A good friend sent me an interesting piece of research last week arguing that in general, two column forms should be avoided.

In most circumstances, I agree.

Two-part forms take more concentration and focus.

In addition to presenting the user with more to digest than a multi-part form would demand of the user, according to user-testing in the article, users can easily stuff them up simply by misunderstanding or misinterpreting them.

I have borrowed an image from the article (Copyright: Baymard Institute, 2012) – which shows just how a user, according to user-testing, will (likely) see and react to a two-column form:

What is interesting from the research is that users saw the second column as an alternative to the first column and in sometests, entirely disregarded the second column.

Interesting behaviour, though is it consistent no matter what a web designer might do?

Afterall, websites such as StyleTread have been perfectly successful with multi-column, single-page checkouts:

Equally, we know that for each page in a typical checkout process, we lose people suggesting that forms should ideally be as consolidated as possible in order to reduce steps: the sooner the user sees the form finish-line, the better.

Web designers know that single-column forms running off page and below the proverbial fold however, are terrible.

Users quickly become detached from long-forms and the process generally; users take on a sense of perseverance and anxiety and your conversion rates crash.

 

Is there a robust formula for making multi-column forms work?

Is there any sort of compromise?

According to the research, any such compromise is narrow indeed.

I'm not so sure however.

Firstly, what we can agree is that single-page checkouts trump multi-page checkouts.

If it is simply that users are unable to understand dual-column forms, surely we can make it work for them so they do?

For instance, perhaps we can hide the second column until such time that the first column is completed?

Perhaps it comes down to clear labelling and numbering the steps in the form so that the user does not mistake the columns for one, or the other.

I do not doubt that without consideration, a dual-column form could cause any website grief and that the article and its research is by-and-large correctly.

I do not doubt however that if well optimised, multi-column form could at least equal the best, multi-step forms, step for step.

Indeed, whilst I might be a fairly sophisticated web user, I know I far prefer the single-page checkout on StyleTread and have had little trouble using it; possibly because the data the two columns ask is so obviously different and all patently necessary for a successful purchase.

I will also be the first to put my hand up and acknowledge that quite possibly, even with all effort made, multi-column forms just can't work; users never fail to amaze me, no matter how we web designers try to help them.