UX and Forms — it’s not that hard!
It’s 2018, and you think we’d have figured out UX for Forms by now, right?
OK, maybe not all of it, there is still a lot of subjectivity in the field (hah, a pun!), but the basics, oh yes, the basics, those we should have figured out right?
And yet, yet, witness the infinitude of sites, apps, and services where things are great as long as everything follows the golden path. But take one step off the path, and BAM, all hell breaks loose.
OK, maybe not all of it, there is still a lot of subjectivity in the field (hah, a pun!), but the basics, oh yes, the basics, those we should have figured out right?
And yet, yet, witness the infinitude of sites, apps, and services where things are great as long as everything follows the golden path. But take one step off the path, and BAM, all hell breaks loose.
So here, all of you form-designers, Four Basic Steps that you can follow to not make all of our lives a living hell. Oh yeah, you can still screw up all sorts of stuff, but these, please, you have to get correct!
Step 1. Don’t have errors in the first place
Seriously, if a line of javascript would prevent me — or others — from cursing, go ahead and do it please? For example
a) Preventable stupidity: Tell me that the date-format is invalid (MM/DD/YYYY, not MM-DD-YYYY) while I’m filling out the field, not when I’m submitting the form, ok?
b) Really preventable stupidity: Wiping out all the fields when you display the error, so that I have to type them all in again.
c) Really really preventable stupidity: Wiping out everything when you display the error, so that I have to start from scratch.
a) Preventable stupidity: Tell me that the date-format is invalid (MM/DD/YYYY, not MM-DD-YYYY) while I’m filling out the field, not when I’m submitting the form, ok?
b) Really preventable stupidity: Wiping out all the fields when you display the error, so that I have to type them all in again.
c) Really really preventable stupidity: Wiping out everything when you display the error, so that I have to start from scratch.
Step 2. If you have to display errors, don’t make them stupid
Stupidity comes in many forms,
a) Meaningless stupidity: Don’t show me your errors, they don’t mean diddly-over-squat to me. Seriously, Array Index out-of-bounds is an utterly meaningless thing. I mean, I’m trying to register for a kitty-litter promotion…
b) Meaningful stupidity: And if you do show me stuff, make sure that it is actionable. Why even bother showing stuff I can’t actually do anything about? This can be something as simple as replacing “Submit failed” with “We’re kinda overloaded, would you mind trying again in a few minutes?”
Stupidity comes in many forms,
a) Meaningless stupidity: Don’t show me your errors, they don’t mean diddly-over-squat to me. Seriously, Array Index out-of-bounds is an utterly meaningless thing. I mean, I’m trying to register for a kitty-litter promotion…
b) Meaningful stupidity: And if you do show me stuff, make sure that it is actionable. Why even bother showing stuff I can’t actually do anything about? This can be something as simple as replacing “Submit failed” with “We’re kinda overloaded, would you mind trying again in a few minutes?”
Step 3. How about Helping me realize it’s not an error?
So yeah, you told me it’s an Invalid Date, but, seriously, what’s invalid about it? I know I didn’t get the format right the first time, but it’s good now, so, WhatTF is wrong?
I shouldn’t have to go through the FAQ, and Teh Googles to figure out that the “deliver-by” date needs to be more than 3 days in the future, y’know?
Maybe a tool-tip? Or, better yet, when I’m filling in the date, tell me that it’s invalid, and the reason it’s invalid?
So yeah, you told me it’s an Invalid Date, but, seriously, what’s invalid about it? I know I didn’t get the format right the first time, but it’s good now, so, WhatTF is wrong?
I shouldn’t have to go through the FAQ, and Teh Googles to figure out that the “deliver-by” date needs to be more than 3 days in the future, y’know?
Maybe a tool-tip? Or, better yet, when I’m filling in the date, tell me that it’s invalid, and the reason it’s invalid?
Step 4. Going backwards is not the end of the world!
This kills me — I fill out 6 pages of forms (which is bad enough), and then I hit the browser’s back button instead of the “back-arrow on the form”, and poof, everything is wiped out. Everything.
Don’t go there! Seriously, just … don’t.
Mind you, the lesser sin is just about as bad — you know, the one where when I hit the “back-arrow on the form”, you wipe out the contents of the previous page?
Ugh.
This kills me — I fill out 6 pages of forms (which is bad enough), and then I hit the browser’s back button instead of the “back-arrow on the form”, and poof, everything is wiped out. Everything.
Don’t go there! Seriously, just … don’t.
Mind you, the lesser sin is just about as bad — you know, the one where when I hit the “back-arrow on the form”, you wipe out the contents of the previous page?
Ugh.
That’s it. Four Steps. Internalize them, and please don’t subject us to the horrors of not following them. This isn’t 1997, don’t design like it is…
Comments