How does your web form flow?Posted February 22nd, 2010 by David Hamill
When designing web forms, you should always consider the flow. By flow I mean the sequence of thoughts and interactions that takes place when your user is completing the form.
In this post I’m going to tell you about a time when I got it wrong because I didn’t consider the flow properly.
Once upon a time…
Several years ago I was testing a web form for an event management system. Employees would use the form to confirm their attendance and notify the organisers of any dietary requirements they had and stuff like that.
There were many problems with the form but one of them was to do with reference numbers. An optional field for a reference number (referred to as the invite number I think) was causing some problems. I can’t remember the exact details, but the question was something like the one I’ve mocked up below.
People who didn’t have an invite stalled here. Without an invite, they didn’t yet have an invite number. They could have left the field blank but many people felt uncomfortable doing so. It seemed that because the question was being asked, they thought they should have a number.
The solution the team arrived at was to put a checkbox directly below the field as shown below. It’s wasn’t my suggested approach, but it worked well in usability testing. The proximity of the checkbox to the textbox created an association that resolved the problem. Users felt happy to leave the textbox blank because they’d checked the box. They were typically delayed for less than a second while they worked this out.
I was impressed with how well this solution worked and have remembered it ever since. What I didn’t really consider was how it flowed. I just remembered that its presence gave the user permission to leave the textbox blank.
Until a few months ago…
I remembered this approach when I was advising a client a few months ago and suggested they incorporate it into one of their forms. They had two mandatory fields on one of their form. One for daytime phone number and one for an evening number (see below).
I was concerned that some people wouldn’t realise that they could put the same number in twice. So I suggested adding a check box under the evening phone number, in order to give them permission to do so. (see below).
As well as allowing permission to use the same number twice, the checkbox was supposed to save the effort of typing it a second time. If they checked the box, it would populate the evening number field with the daytime number.
In testing, nobody had a problem entering the same number twice. But everyone who did so, typed the number twice (or copied and pasted it) before noticing the check box. The form didn’t flow properly. The check box became noticeable only after it would have been useful. It didn’t cause a major problem but people realised they could’ve saved themselves some effort.
How are the two solutions different?
So why did the solution work so well for invite reference numbers, but not for phone numbers? It’s to do with the way the forms flow.
People complete forms one question at a time and their gaze doesn’t stray far from the questions and the left-hand side of the text box.
When the answer to a question is easy, they’ll just type in the answer without considering anything else on the form. This is what was happening with the field for evening phone number. They are only likely to notice things underneath the text box after they’ve finished typing a response.
But when the form asks a difficult question, they need to stop and think. The smooth flow is interrupted and they are more likely to notice things that are placed after the text box. This is what happened when people were asked for an invite number they didn’t have.
Improving both examples
The original solution for the invite number worked very well in usability testing. So in practice I wouldn’t change it (If it ain’t broke…). However in theory the flow can be improved by adding to the question. You probably realised this yourself.
In this example, the fact that not everyone needs and invite number is communicated alongside the field label. There’s no need to interrupt the flow. People without an invite number will simply leave it blank and go to the next question.
Evening phone number
The pictured example below shows how the user can be given ‘permission’ to enter the same number twice whilst only typing it once. Instead of placing a checkbox underneath the field for evening number, it is placed underneath the one for daytime phone number. The label on the checkbox has changed to ‘This is also my evening number’. Checking the box pre-populates the field for the evening number.
The checkbox now works in harmony with the flow of the form. Users type their daytime phone number before they see the checkbox. If their daytime number is also their evening number, then they simply check it in order to prepopulate the following textbox.
The flow of your form is part of what Caroline Jarrett refers to as the ‘conversation’ your form has with the user. When you have a conversation with someone, that conversation has a flow. When you ask someone a question you tend to pause and wait for an answer. Think of a form field as that pause in the conversation.
When you ask someone an easy question, they will probably start answering before you’ve even finished asking. But when the question is more difficult, you can follow the question up with clarification if it’s needed.
Was this blog post useful?
If you found this useful, here’s a few things you can do: