Don’t know what you got till it’s gone
Don’t know what it is I did so wrong

Cinderella

Let’s assume that when the band members of Cinderella are out on the 20 Years of Rock tour, that the multi-talented singer/songwriter, keyboardist and guitarist Tom Kiefer wears one more hat – he’s the one who goes online and books the hotels.

Keifer finds a hotel near the venue and fills in the dates and number of rooms he needs for the band and roadies. What does he want to happen when he hits submit?

If Tom Kiefer is anything like the rest of us (and of course he’s not, he’s way awesomer), he wants confirmation about that last step and the ability to take immediate action. If all is well, he should be on the next step of the process, deciding on which result to book. If he needs to fix an error, he should be already on the page. What he does not want is this:

An error message that doesn't make clear what you did so wrong.

The error message is disconnected from the actual inputs. Kiefer now knows what he did so wrong, and can’t associate the error with the inputs because they are no longer on the page.

The better approach would be, upon error to return directly to the page with the visible error message and highlighting what inputs are problematic, like this:

Well-placed error message from Bing

This way the error can be recognized and immediately fixed. Nobody likes erroring, but when you can make it easy to notice, correct and move on, that’s rockin’ form design.

And the sign says, you got to have a membership card, to get inside. (Huuuuuuh!)

Let’s say lead singer Jeff Keith thinks that Tesla may not be legendary forever, and wants to start tucking a little money away in an IRA. He’s trying to fill out an online application, gets six pages in to the process and hits a wall.

Tesla

What is your beneficiary’s SSN?

Now he knows he wants to make his rockin’ guitarist Frank Hannon his beneficiary, but he doesn’t know Frank’s Social Security Number, and Frank’s not around to ask. Jeff is stuck. He tries to skip past, but it’s required. He tries to call Frank but Frank’s too busy rockin’ to pick up. Jeff has no choice but to abandon the form and hope to remember to put some money away some other time.

While this example was fictitious, (of course Tesla will be awesome forever) this problem is real. Frustrated people drop out of applications and sales are lost over single inputs. What can we do?

We can take a page from Tesla who noted that there was a sign that said you got to have a membership card to get inside. Signs are very important in setting expectations.

When we build our web forms, especially multi-page forms and applications that request a lot of information, take a long hard look at what information is really obscure or unlikely to be on hand. If you find some, then leave a sign alerting the user at the earliest possible moment, like on the first page as they go into the form. Like this example from Fidelity:

What You'll Need page from Fidelity

Including a list of things that users may be reluctant to provide (such as their SSN) or just not know (such as their beneficiaries SSN). Giving them a heads-up of these requirements shows the users that you value their time and don’t want them getting stuck in the application. Giving them the opportunity to be prepared before applying is rockin’ good web form design.