Form Validation

2 Jan 2008 - 6:26pm
6 years ago
18 replies
1047 reads
M S
2006

Hi,

I'm looking for any advices/articles on form validation.
I tried to search on gamma.ixda.org, but found nothing there.

1. What is the preferable placement for error message for particular control?
2. Any guidelines on error message text. Like what is better -- "This
field is required" or "Please enter your email"?

Any additional information on subject is highly apreciated.

Thank you.
--
Maxim Soloviev

Comments

2 Jan 2008 - 6:52pm
Hussein Ahmed8
2007

You can check this for a coupe of hints:
http://articles.techrepublic.com.com/5100-22-5200060.html

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=24099

2 Jan 2008 - 6:56pm
Hussein Ahmed8
2007

Sorry, this is more comprehensive but I found this through the first.

http://www.informit.com/articles/article.aspx?p=29892&rl=1

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=24099

2 Jan 2008 - 9:41pm
bminihan
2007

The design pattern discussion from awhile back should have some links
describing error-handling:
http://ixda.org/discuss.php?post=15919&search=design+patterns

Also, the book list
(http://www.ixda.org/discuss.php?post=20687&search=books) is another good
source for tips (check W Evans post for some highly relevant books).

Ideally, the best placement for an error message (only if you can't design
to prevent errors in the first place) is where the user looks for it, and
where it won't prevent them finishing the form.

It's up to your users what the best message text is, but if you're using
fairly standard fields (name, address, password, favorite cat, etc), it
would help to emulate sites that your users are familiar with (if any and if
known).

If your form acts just like every other signup form on the web, make it read
like every other signup form on the web. If it's completely specific to
your users and their knowledge, ask them what the messages should say.
There's no "best answer" without knowing what and for whom you're building.

Bryan
http://www.bryanminihan.com

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com
[mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Maxim
Soloviev
Sent: Wednesday, January 02, 2008 6:26 PM
To: discuss at ixda.org
Subject: [IxDA Discuss] Form Validation

Hi,

I'm looking for any advices/articles on form validation.
I tried to search on gamma.ixda.org, but found nothing there.

1. What is the preferable placement for error message for particular
control?
2. Any guidelines on error message text. Like what is better -- "This
field is required" or "Please enter your email"?

Any additional information on subject is highly apreciated.

Thank you.
--
Maxim Soloviev
________________________________________________________________
*Come to IxDA Interaction08 | Savannah*
February 8-10, 2008 in Savannah, GA, USA
Register today: http://interaction08.ixda.org/

________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org
Unsubscribe ................ http://www.ixda.org/unsubscribe
List Guidelines ............ http://www.ixda.org/guidelines
List Help .................. http://www.ixda.org/help

3 Jan 2008 - 8:06am
Caroline Jarrett
2007

In addition to others' comments:

Bryan is right on where he says 'place the message where people look
for it'.

So where do people look for it?

Answer: in two places:
1. at the top of the page (i.e. in the meat of the page, not in the
page furniture such as the nav bars, title of the page etc)
2. next to the control that is in error.

If you link the two together when you build your error page, then
there's a quick way to get from one to the other.

Best,
Caroline Jarrett
caroline.jarrett at effortmark.co.uk
01525 370379

Effortmark Ltd
Usability - Forms - Content
----- Original Message -----
From: "Maxim Soloviev" <maxim at deast.info>
To: <discuss at ixda.org>
Sent: Wednesday, January 02, 2008 11:26 PM
Subject: [IxDA Discuss] Form Validation

: Hi,
:
: I'm looking for any advices/articles on form validation.
: I tried to search on gamma.ixda.org, but found nothing there.
:
: 1. What is the preferable placement for error message for particular
control?
: 2. Any guidelines on error message text. Like what is better --
"This
: field is required" or "Please enter your email"?
:
: Any additional information on subject is highly apreciated.
:
: Thank you.
: --
: Maxim Soloviev
: ________________________________________________________________
: *Come to IxDA Interaction08 | Savannah*
: February 8-10, 2008 in Savannah, GA, USA
: Register today: http://interaction08.ixda.org/
:
: ________________________________________________________________
: Welcome to the Interaction Design Association (IxDA)!
: To post to this list ....... discuss at ixda.org
: Unsubscribe ................ http://www.ixda.org/unsubscribe
: List Guidelines ............ http://www.ixda.org/guidelines
: List Help .................. http://www.ixda.org/help
: This message has been comprehensively scanned for viruses,
: please visit http://www.avg.power.net.uk/ for details.
:
:

3 Jan 2008 - 1:17pm
M S
2006

You all have posted great links! Thank you very much.

What I've decided to do is to put error message saying "This field is
required" above that particular control but below it's label.
And at the top page in validation summary I will put "Please enter your e-mail".

Thanks again, ixda is the best, as always :)

--
Maxim

3 Jan 2008 - 12:34pm
Gloria Petron
2007

Hi Maxim,
Please see Robert Hoekman Jr.'s book, *Designing the Obvious*. Chapter 5. He
goes into great detail regarding form design & validation, the art of
setting good form defaults, and how to write effective error messages (& how
to keep errors from occurring in the first place). I'll never look at a form
the same way again!!

Regards,
Gloria

3 Jan 2008 - 1:53pm
Jacob Smith
2008

I would highlight something Bryan said above. Back end error checking
is important, but why not use some front end JavaScript to check for
simple things like blank fields.

With unobtrusive JavaScript you can set a script up once and apply it
to all your forms easily.

You can see an example here:
http://shoeinthedoor.com/testing/form-validation.htm

It's rather simple and could use some more work, but it gives you an
idea of what you can do.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=24099

3 Jan 2008 - 4:35pm
Janna DeVylder
2006

On Thu, 3 Jan 2008 10:53:44, Jacob Smith <jake at shoeinthedoor.com> wrote:

> I would highlight something Bryan said above. Back end error checking
> is important, but why not use some front end JavaScript to check for
> simple things like blank fields.
>
>
I was just thinking about that...

Look at Mint.com <http://mint.com/>'s sign up process as an example. Not
only do they deal with blank fields, they deal with inconsistencies as
well. Gmail also does this to a certain extent during their sign-up
process.

Anyone have experience testing this with consumers? I'm curious about how it
is perceived.

janna

3 Jan 2008 - 5:35pm
Caroline Jarrett
2007

From: "Janna Hicks DeVylder" <janna at devylder.com>

<on using client side validations>

: Look at Mint.com <http://mint.com/>'s
: sign up process as an example.
: Not only do they deal with blank fields,
: they deal with inconsistencies as well.

I've watched users working with forms like this. My concern is that
they pretty much all (no matter how web-savvy) seem to jerk away from
the screen in surprise as the ordinarily docile page suddenly starts
changing on them before they've even typed anything much in the field.

This worries me. For years, I've been advocating doing validations as
soon as you can, but there seems to be something 'too soon' about
interrupting the user's typing process to warn them about an error.

It seems particularly bad on Mint.com - can't type a whole email
address before it starts barking at me.

So my current advice is to refrain from interrupting the conversation
in this way. Let the user complete their entry as they naturally
would, and only seize back control of the page when they've returned
control to you. For example, by clicking on something else.

Right now, I'm not 100% sure about validations on the previous field
as you leave the next field. Users focus remarkably narrowly on the
left-hand portion of the field to type into, and I suspect (but do not
have evidence yet to prove) that they may very well fail to spot the
validation on the previous field. But I think that may not matter, so
long as the page-level validation gracefully handles the situation
where users have failed to correct as they go.

Best,

Caroline Jarrett
caroline.jarrett at effortmark.co.uk
01525 370379

Effortmark Ltd
Usability - Forms - Content

3 Jan 2008 - 7:03pm
bminihan
2007

I gave the mint.com site a try and agree with your colorful remarks about
its effect on the experience =]. I've designed dozens of such forms with
validation on the previous field and feel the same as you - it's a good
start but feels like it could be better.

I wonder if it would make more sense to detect when the submit button
receives focus or the user hovers a mouse over it, AND most of the fields
are attempted (if not completed), then put a little X or something over the
button with a polite message indicating that there are still things left to
do. That would give people a chance to complete the form in their own time
(correct as necessary), let them know what's wrong all at once so they can
fix them all at once, and finish with one click at the end.

Would need a heckuva lot of testing, and I'm just spitballing, but it could
be an improvement =]

Bryan
http://www.bryanminihan.com

-----Original Message-----

Right now, I'm not 100% sure about validations on the previous field
as you leave the next field. Users focus remarkably narrowly on the
left-hand portion of the field to type into, and I suspect (but do not
have evidence yet to prove) that they may very well fail to spot the
validation on the previous field. But I think that may not matter, so
long as the page-level validation gracefully handles the situation
where users have failed to correct as they go.

Best,

Caroline Jarrett

4 Jan 2008 - 7:03am
Ben Hunt
2004

I agree with Caroline on the need for UIs to exercise sufficient restraint
when people are entering data.

When designing interactions on web pages, I often refer to a little guy I
keep in my head, who's a concierge in a high-class hotel, and imagine how
he'd behave.

A great concierge, maitre d', or waiter etc. doesn't trouble you for too
much information. If they need a signature, it's made as easy as possible.
Imagine if there's a mistake. They don't peer over your shoulder as you sign
your credit card chitty in a restaurant. They give you a pen, and stand back
giving you time to fill in the data. If there's a mistake, they'll wait an
appropriate length of time and then more than likely apologise themselves
for the mistake.

If you were in a posh restaurant and the waiter was watching the pen as you
totted up the tip, and jumped with "Actually, it's $15.90" in as soon as you
wrote the wrong digit, you'd just feel hassled. Surely it's no different
online.

- Ben

(Caroline wrote)
I've watched users working with forms like this. My concern is that they
pretty much all (no matter how web-savvy) seem to jerk away from the screen
in surprise as the ordinarily docile page suddenly starts changing on them
before they've even typed anything much in the field.

This worries me. For years, I've been advocating doing validations as soon
as you can, but there seems to be something 'too soon' about interrupting
the user's typing process to warn them about an error.

It seems particularly bad on Mint.com - can't type a whole email address
before it starts barking at me.

So my current advice is to refrain from interrupting the conversation in
this way. Let the user complete their entry as they naturally would, and
only seize back control of the page when they've returned control to you.
For example, by clicking on something else.

4 Jan 2008 - 6:03pm
Carolynn
2008

I'm with Caroline - Mint is disturbing!

I was experimenting with error fields and after some debate decided
to do it this way (granted this form is simple, sorry about the
non-Englishness!): https://www.net-apotek.no/site/shop/register.html
... click on the 'register' button and all field labels with a
problem turn red. There's also an error message at the top of the
page for two reasons - firstly the field with an error may be below
the fold so the user misses it, and secondly for accessibility
particularly a screen reader user.

I just felt phrases like 'Name is required' are a bit pointless -
it says 'Name', people know what a name is and if you didn't
complete the field it was more likely that you missed it rather than
misunderstood. Fields that require a bit of explanation or special
requirements have the grey text under the label clarifying the info
required. There were about 2 instances where we felt a customised
error message would be better but we tried to keep things as simple
as possible which definitely helps with maintenance and translation
issues.

There is a mistake on this page *blush* ... the asterisks next to the
email and password fields shouldn't be there, they're left over from
the previous error control method.

This site has a sister B2B site which has more complicated forms and
we'll be using this error message control style... *fingers crossed*
for the user testing!!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=24099

4 Jan 2008 - 7:08pm
M S
2006

Very nice form.
However I would go with labels above controls to avoid that horizontal
gap between label and control.

> I was experimenting with error fields and after some debate decided
> to do it this way (granted this form is simple, sorry about the
> non-Englishness!): https://www.net-apotek.no/site/shop/register.html

--
Maxim

5 Jan 2008 - 8:44am
Caroline Jarrett
2007

: > I was experimenting with error fields and after some debate
decided to do it this way (granted this form is simple, sorry about
the non-Englishness!):
https://www.net-apotek.no/site/shop/register.html

From: "Maxim Soloviev" <maxim at deast.info>

: Very nice form.
: However I would go with labels above controls to avoid that
horizontal gap between label and control.

I agree that it's a very nice form. I found it quite easy to fill in
even without speaking any Norwegian.

But... I definitely wouldn't go with the labels above the fields.

The opening few questions are what I'd call 'slot-in' answers i.e.
ones that are easily available in the user's head and you're just
looking for the spot to slot them into. (Forename, surname, address,
etc). These could go above the boxes without causing any difficulty.

But then we hit some slot-in answers that have privacy problems
associated with them i.e. Telephone number and email address. The form
correctly provides a short explanation of how these will be used - and
that wouldn't work nearly as well above the boxes.

Then we come to a complex answer that I'd call 'gathered', i.e. one
that few users would have in their heads but would instead have to
look up from somewhere else: "Medlemsnummer". My abilities in
Norwegian are minimal, but I'm guessing that this is a specialist
number of some sort that you have to pick off some paperwork. The form
gives quite a lengthy explanation, picture of the documents (I guess)
and an example. I'd say that left-positioned, left-justified labels
are a better choice for gathered answers in most cases.

I was slightly less convinced by left-justifying the last three
checkboxes. I would rather see all the 'places for me to type' lined
up together, so that the checkboxes align with the other fields. I'd
then want to experiment with placing the labels before or after.
Unfortunately, my inability with Norwegian failed altogether at this
point. Ordinarily, I'd expect to think about where the answers come
from and whether to split the introductory text from the label.

For a longer discussion of the placement of labels on forms, see my
article:
http://www.usabilitynews.com/news/article3507.asp

In terms of validations: it was very easy to see where I made
mistakes. But I would definitely recommend a double cue: at the
moment, you're using bold red to show an error, which might not be all
that obvious to someone with a visual deficiency. I'd suggest using an
extra cue as well. I didn't try this form with a screenreader, so that
would also be worth testing.

It was less obvious why the form wouldn't accept a UK format telephone
number (+44 1525 370379) - it just highlighted the label without any
explanation of what the problem is. Could be that it's a 'wrong type
of user' problem, if this form will be used exclusively by people with
Norwegian telephone numbers.

I tried using the Medlemsnummer in the example. This error message did
give me a double cue: the text "Feil i medlemsnummer". Unfortunately,
I don't know what this means but it looks too short to be a real
explanation of how to get hold of an actual melemsnummer.

My final error was on the last checkbox where I got a double cue of a
fresh piece of red text saying "Vennligst aksepter vilkårene". I think
this means that you must accept the terms and conditions, and although
it's maybe a tiny bit brusque it did seem fair enough to me.

Hope this helps

Caroline Jarrett
caroline.jarrett at effortmark.co.uk
01525 370379

Effortmark Ltd
Usability - Forms - Content

5 Jan 2008 - 6:22am
Lucy Buykx
2007

I'll second or third that the Mint sign up is a weird experience.
However the validation of zip code does provide a very speedy
confirmation that the product is for Americans only. Something that
the website fails to mention anywhere else obvious.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=24099

5 Jan 2008 - 9:47am
prototypeangel
2007

I feel that having inline form validation is the best way there is. I
use a combination of generating a great form with pform (http://
www.phpform.org/) and using a php/ajax form validation library. there
are plenty of them around. But this can be a nice, and pleasing
experience to the person signing up

On Jan 3, 4:26 am, "Maxim Soloviev" <ma... at deast.info> wrote:
> Hi,
>
> I'm looking for any advices/articles on form validation.
> I tried to search on gamma.ixda.org, but found nothing there.
>
> 1. What is the preferable placement for error message for particular control?
> 2. Any guidelines on error message text. Like what is better -- "This
> field is required" or "Please enter your email"?
>
> Any additional information on subject is highly apreciated.
>
> Thank you.
> --
> Maxim Soloviev
> ________________________________________________________________
> *Come to IxDA Interaction08 | Savannah*
> February 8-10, 2008 in Savannah, GA, USA
> Register today:http://interaction08.ixda.org/
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... disc... at ixda.org
> Unsubscribe ................http://www.ixda.org/unsubscribe
> List Guidelines ............http://www.ixda.org/guidelines
> List Help ..................http://www.ixda.org/help

6 Jan 2008 - 12:28pm
M S
2006

> But... I definitely wouldn't go with the labels above the fields.
>
> But then we hit some slot-in answers that have privacy problems
> associated with them i.e. Telephone number and email address. The form
> correctly provides a short explanation of how these will be used - and
> that wouldn't work nearly as well above the boxes.
While working on registration form for latest project I decided to put
"support" text (which usually use smaller font) above control but
below label.

The reason for that is couple textarea controls, which I feel need
additional explanation on what we expect user to put there. And when
user will get there using "Tab" key he might not see support text
since it might be below the fold of the page.

Just my 2 cents :)

--
Maxim

6 Jan 2008 - 5:37pm
Carolynn
2008

Thanks for the comments about the form
(https://www.net-apotek.no/site/shop/register.html). Caroline, nods
to your efforts at understanding Norwegian :-). I'll make a quick
attempt at answering your points:

There is definitely an issue with the telephone number. It's
supposed to be validated as 'not empty' but I suspect it's
checking for 8 characters. As you said obviously the explanation and
error message don't make that clear. This didn't come up as an
issue in user tests as the site is only for Norwegian residents (this
is mentioned in a few places). I would like the validation to check
for anything less than 8 characters and flag it... I hate forms that
want a specific number of digits! Given this is a localised site, has
anyone ever had problems with allowing more numbers than is strictly
necessary in a phone number field?

The 'Medlem' section is for input of the users' customer loyalty
card details should they be a member. The image is of the card, the
text explains how you become a loyalty card member (this has to be
done in-store) and how you can add your details to your site profile
at a later date.

The first checkbox is to receive the members newsletter by e-mail
(currently it's on paper). The second checkbox is for non-members
who would like to receive an info pack by snail mail on how to become
a member. Third box is Terms & Conditions.

I went for left alignment because of the amount of text next to the
checkboxes, but I think you make an interesting point about aligning
them with the fields above. Might be good to see it done that way and
worded slightly differently. No issues came up in testing but since
the first 2 aren't required fields it's hard to know if real users
have a problem with them.

The membership number is verified together with the user's name with
a third party, so I suspect that is why you got the error - that is
one of the individual cases that needs it's own explanation as
opposed to the highlighted label the rest of the form uses

As for the layout I choose, there were a few reasons:

- I was concerned about page length if I put labels above fields. The
main column is quite narrow and I didn't think it worked trying to
save page length by making the main column into two cols
- I considered aligning the labels to the right so they were flush
against the field but I wasn't sure about this and I didn't think
the user testing group was big enough to gather specifics (does
anyone else have thoughts on displaying forms this way?)

SO.... I decided on the current layout using the light grey dotted
line to create a visual link between label and field, and I kept the
gap between the left and right columns as small as possible
considering users might increase font sizes.

The site is currently being redone and one of the changes is an
increased screen width so I might have a play with label placement,
but I always feel funny about forms with 2 columns of input fields -
as a user I really just prefer one column. I wish the user test group
was big enough to try two columns and see if there was a change in
completion times! If anyone has test results on this I would love to
hear about it

:-)
Carolynn

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://www.ixda.org/discuss?post=24099

Syndicate content Get the feed