Contact Me

Goldilocks and Form Validation

2 Dec, 2015

Once upon a time, there was a little girl named Goldilocks. She went for a surf on the web - visiting three websites in succession, and filling out a form on each website.

Too Slow

Goldilocks visited the first website and filled out a form. She reached the end of the form, with no errors, and proudly pressed Submit. The page completely reloaded, and a few seconds later the form spoke to her.

“This is not a valid email address,” the form said.

Goldilocks grumbled and fixed the typo. She scrolled down to the end of the form again, with no other errors showing, and pressed Submit a second time.

“You need to have a number in your password,” the form belatedly whined, after the page had reloaded again.

By now, Goldilocks was getting frustrated. The form was only validating one field at a time, and seemed to only show the requirements for each field once she’d already got it wrong.

Goldilocks changed her password to fit the site’s requirements, and scrolled to the bottom of the form. There were no more errors, but by now Goldilocks was wary - just because the form showed no errors, didn’t mean there weren’t any errors. She carefully reviewed each field she’d filled out, before pressing Submit a third time.

Success! The form went through. But what should have taken 3 minutes ended up taking 10, and Goldilocks left the website feeling annoyed.

Too Fast

Goldilocks visited the second website and filled out another form. This time, the website had the opposite problem. Instead of only validating when she submitted the form, it validated after every single keypress.

She started typing her name: “G”.

“Your first name must be at least two characters!”, the form yelled at her.

Goldilocks flinched, but kept typing. “o”.

“Perfect!”, congratulated the form, still yelling.

Goldilocks was confused - she wasn’t even done yet! She ignored the message and typed the next letter. “l”. Nothing happened. “d”. Nothing happened. “i-l-o-c-k-s”, . Nothing happened. Goldilocks shrugged and moved on to the next field.

The next field asked for her email address. Again, she started typing: “g”.

“This is not a valid email address!”, yelled the form.

By now Goldilocks was getting irritated. The form validation was meant to help her fill out this form, but it kept telling her she was doing it wrong, when she wasn’t even finished typing. She filled in the rest of the form, but ignored the form validation as it wasn’t helpful at all. She reached the end of the form, hovered over the Submit button. She winced as she clicked, expecting more criticism.

But the form went through without any trouble. Although it was a much faster process than on the first website, she found herself stressed and anxious, and she was relieved to be done with the website.

Just Right

Finally, Goldilocks visited the third website and filled out yet another form. She started typing in her name in the first field, and nothing happened.

“Oh no”, she thought, “this is going to be just like the first website. More time wasted.”

But when she moved on to the next field, a little green tick appeared next to her name.

“Hey Goldilocks!” said the form.

Goldilocks felt welcomed and encouraged to keep going. The next field asked for her last name. Goldilocks is very secretive about her last name, so she skipped this field.

“We need a last name, please,” said the form as she did.

Goldilocks was still reluctant to give her surname out, but the website had made her feel welcome already, so she consented and typed it in.

The next form field asked for her email address. She started typing it in “goldilocks@gmai.com”.

As she moved to the next field, the form spoke again.

“I’m guessing you meant gmail.com? I fixed that for you. Or do I need to change it back?”

By now Goldilocks was really impressed. It felt like she had a real human on the other side, actually helping her fill in the form. She quickly and painlessly filled in the rest of the form and hit Submit. She checked her watch - the whole thing had only taken a minute. Goldilocks left feeling happy and welcome.

The Moral of the Story

All good fairytales have a moral, and this one is no different. This 2015 version of “Goldilocks” highlights the importance of empathy when we design. When we nail down the basic elements of design - colour, typography, layout, etc. - emotion is what takes our design to the next level. We have a great amount of power in influencing the emotion of our users, making them feel welcome, safe, proud and happy.

If you’d like to read more on this topic, Mailchimp has an excellent guide on taking feelings into account while writing copy.

All images sourced from Saumobica at DeviantArt, upscaled using waifu2x.

Get emailed about design solutions.
No spam, ever.