Good web form design, Jessica Enders
The following is a mix of notes from Jessica Enders’ (from Formulate Information Design) presentation at the Canberra Web Standards Group meeting held this afternoon augmented with my own comments and thoughts.
Using and completing online forms or indeed any form can be boring and painful. However if you have a bad experience with filling out a form it’s probably because it wasn’t designed well (or at all) and it is something that can be remedied.
What are some of the common problems with online forms? Audience contributions:
- Pre-requisite information is not stated up front … so half-way through completing the form you discover you need to go get some information or numbers - it’s at least distracting and sometimes can prevent you from completing the form at all.
- Multi-page forms that don’t tell you how many pages or steps there are so you don’t know how much longer it’ll take to finish. Do you even have time to do it now?
- Forms that tell you what fields are mandatory after you hit Submit.
Jessica’s 4 main problems with bad form design:
- Confusing
- Long
- Burdensome
- Pointless
And the Four C’s of good form design:
- Clear
- Concise
- Clever
- Contextual
With a good form, the form-filler or user of the form should understand with minimal effort what to do with that form as the designer intended.
Jessica showed some examples of bad form design - I’ll just explain the illustrated problems here:
- Validation/processing error messages with insufficient information (both explicit and implied through placement) about what field the error relates to, what the problem was and what the user needs to do to correct the problem.
- Address forms - layout and fields not applicable to the user or forcing to use a format that doesn’t take into consideration how the user will complete the form.
- Forms that ask questions that have been invalidated by previous responses - why are you asking me that when it’s irrelevant because I answered X to the previous question?
- Having a range of options, none of which are applicable - or not having the context to explain why the question is being asked to help the user decide how to respond.
I would like to add here about form validation: Why have it? Yes - I accept we need form validation to ensure the quality of data being collected, but just raising that the question needs to be asked. If a field doesn’t need validation then don’t have it. Allow flexibility. For example, phone numbers … I’m sick of having to split my mobile phone number over a 4-digit area code and phone number field! Having that validation and forcing the area code / phone number split is not going to guarantee an accurate phone number. I’ve put “0000 0000″ in phone number fields before just to bypass the validation.
Anyway, next point: A short form is not neccessarily a better or more usable form. If you’re going to have a limit to 3 pages of form or 20 questions then there should be a reason for that, rather than it simply being a meaningless measure … because you’ll probably just end up not collecting enough data or splitting questions into arbitrary groups making it even harder to use.
But certainly, do split forms over multiple pages if you can identify steps in the process that logically should be grouped together, like Billing Address, Shipping Address, Confirm Order.
If there is an opportunity to do calculations for the user, do it. Don’t make the user wander off to get a calculator.
Providing information and instructions to the user … but don’t disrupt the process and take them off onto another page. Do it on that page using well-styled information boxes, hover tooltips etc.
Different layers of form design:
- Questions and answers (labels and text fields or drop-down lists)
- Flow
- Layout
- Process
On the point of process, that’s going beyond the form on the page. That’s thinking about who the form is for, where the data collected by the form is going, who’s going to process it, what happens to it then, the feedback and communication to the user. Everything surrounding the form.
Would have been nice if ActewAGL had thought about that because 2 weeks ago I submitted an online form to set up an account so I could transfer the electricity account from being in the owner’s name to mine. Never heard back from them, and I have no idea if the output of that form was simply dumped as an email in some group inbox and not attended to or if it’s been processed (I won’t know till I either follow it up with a phone call, wait for a bill or wait for the owner to call me asking why they’re still paying for power). Not good.
Telstra on the other hand sent me an automated form submission receipt email then 2 days later someone emailed me to clarify some details and the work requested was completed 2 days after that with another email confirming the work had been done.
All that is part of designing an online form.
Today I emailed Territory and Municipal Services (TAMS) and had to create an account just to send them an email (because they don’t expose their email address). Clearly they don’t see the need to tell me why I need to create an account and supply full name and address (though address is not mandatory) … just so I can send them an email. Bad form design.
I also had a bit of a rant about Netspace’s ADSL relocation form 9 days ago - here’s the email I sent them, which they haven’t acknowledged or responded to yet:
Your Broadband connection relocation form is a bit annoying - navigating the
address form, saying the AH number is not mandatory and then at the end
deciding that it is and making me start from scratch again. Complaining I
haven’t provided a “Contact number for Location” … which I’m guessing is
just the AH number … which I haven’t given because I don’t have a home
phone. Telling me I’m out of contract and asking me to select a relocation
fee by term of what? It doesn’t mention renewing my contract but I’m
guessing that’s what it’s about … selecting the term of my contract
renewal and thereby determining the fee you’ll charge to relocate my
connection? I didn’t know my contract had lapsed … though I’m happy to
renew it, if that’s what this process will do.Anyway - just thought you might want to know. I could be the only person who
was frustrated, but if not at least the other people who don’t bother to
provide feedback will benefit from anything actioned by this.
July 23rd, 2008 at 10:51 pm
I think ANZ have lost my refinancing application too … it’s been a couple of weeks, no response.
July 23rd, 2008 at 11:25 pm
So much of that seems logical it’s surprising it needs to be imparted, but then you see the real world examples.
I can guess when Netspace’s forms went from paper (as most were when I worked there) to online. I had a hell of a battle with the “marketing guru” to try and get some logic into the ADSL signup form. All they were interested in was opportunities to push new services - sounds like they were still there when these forms got done.