Creating Usable Forms

Having read the following post “Mad Libs” Style Form Increases Conversion 25-40% I was both shocked and intrigued.  On one hand they are talking about a massive increase in conversion rates, whilst at the same time creating a rather insanely formatted input form.  Instinctively I don’t like this design they were touting at all.  From the initial inspiration, which was light, airey and simple, to their design which is a lot heavier and textual.  All this really got me thinking about what makes good form design?

Is It Just About Inline Inputs?

Having read Steve Krug’s Don’t Make Me Think and 37 Signals’ Defensive Design for the Web, the kind of form layout these guys are suggesting flies in the face of such schools of thought.  What is more important? The standards-based approach or the “inherently readable”?  And does this approach work every single time?  Is it the answer to forms, the universe and everything?

In this case, I think it would be over-stating it if they said that, by creating an inline text fields form you can increase your conversion by 20-40%, simply because they restyled way more than just the text box fields.  Not to denigrate their observations or results, but this is an undeniable fact.  If they hadn’t change more than the layout of text boxes, would the conversation really have been as good?

Elements to a Good Form

The reality is that so many forms get butchered daily, and that every web form ever built is practically a re-invention of the wheel.  As a front-end developer I see the basics of form requirements utterly disregarded frequently, not just in style but also in function, and if, in many of these cases they adhered to the basics, their form conversion would improve “just like that”.

So what constitutes a good form?  Perhaps some of the following thoughts/elements would help:

• Short & Simple – Keep it sweet and simple.  Don’t ask for more than what is required.  A user can always register and then come back later and and more detail, don’t go for the whole hog first time round.
• Error Checking – Clearly denote what fields are required and which are optional.  Provide inline and real-time error checking, which is obvious.  Using input field borders and dynamic messages that are next to the entry box in question.
• Instructions – Make space for instructions.  These can be used in conjunction with the inline errors above.  Additionally fields can be pre-populated with default examples.
• Craft Proper HTML – Use all the elements provided in HTML for a form, from field sets and legends to attributes such a tab index and “for”.  This not only makes the form more accessible and W3C compliant, but it makes for an all round better user experience.
• Javascript? – Decide whether you should do server-side or client-side error checking, or in fact if you want to do both.  Why does this matter?  Well only if you want the form to work with JS disabled, perhaps 1% of cases, then you need server side validation.  Proponents of graceful degradation will chase after you for this.

The Anatomy of a Good Form

I am not going to outline any HTML, CSS and JS now, but I will follow up this post with examples on my own site, and make the code available for anyone who cares to use it.  Good form design and the elements for it shouldn’t be a closely guarded secret, and designers and developers also need to respect the rules of form design a lot more.  So hopefully with this show and tell you and others can learn something from my approach to forms.  More tomorrow on that!

Who Does A Good Form?

Like the kind of question you might be asked in a job interview, who does great forms online.  To this end, in the past I have seen some interesting forms.  The first one I was ever wowed by was the registration form on the consumer watch site, Which?, whilst more recently the revamped EasyJet web site flights ordering process I had found to be well pimped out and highly usable.  For novices with zero experience of building HTML form, you can always hook into web site services such as Wufoo that help build some highly usable propositions for site visitors.

Test, Test, Test!

Anyhow, once you have rolled out your form, you need to compare it with the old form and see if sign-ups or conversions improve.  Sampling a time frame of a week or two is a good way to track performance after roll out.  Either that or some A/B split testing.  Never just roll out a form design though and hope and pray for the best.  ALWAYS try to learn from your experiences.

Share

Related Posts

• Good Design – Building Usable Menus
• Mircea Milcovitch – Nude Shapes & Forms
• Simplicity – What to Kill and What Not To Kill
• Consistency & Standards – Your Guides to Success
• Issues with ajaxForm, TinyMCE, File Uploads & iFrames
• Learning HTML5