3

Consider this form in its blank state.

Comment form blank state

Here's an example of an invalid entry. I pre-filled two fields because I belief that, edge cases aside, most users would attempt to use the form appropriately.

Comment form invalid state 1

Here's a version that is completely invalid.

Comment form invalid state 1

I believe I am providing enough feedback. I favor simplicity, and shy away from excessive hand holding. I reason that the following should be sufficient.

  1. Colouring the fields red provides visual feedback
    • Unless a user is color blind or has a subpar display.
  2. The stars denote fields are required.
  3. The form is simple; it should be obvious not require hand holding.
  4. My audience is not computer illiterate.
  5. I can use "(required)" in leu of the *.
  • 4
    I guest we could spend all day discussion whether this form provide the adequate feedback for users, or you could simply user-test it with 3 or 4 real users and see how they perform. – jff Jan 30 '14 at 16:05
  • 5
    Well basically, no, you're not providing nearly enough feedback at all. Fields have failed - why? because they're required fields? because the content added in was invalid? What about users who rely on assistive technologies (screenreaders etc) - you've not helped them at all. And colourblind users (which you mention but don't seem to think this is important for some reason). You've also removed the labels from the fields so you've no idea what the field was supposed to contain once it's got content in it... I could go on, but in short it's really not user friendly at all. – JonW Jan 30 '14 at 16:05
  • @JonW Color blind users can see the asterisk in the placeholder. Labels are enabled but hidden. Fields are just required. The only exception is email; besides being required, it has format validation. – Mohamad Jan 30 '14 at 16:19
  • So the asterisk is enough feedback to a colourblind user that the field has errored - despite the fact that the askerisk is there before any of the fields have even been filled in? And hiding a label once the field has been populated is helpful... how? You're saying "I only care about fully sighted users and nobody else". Do you realise that many companies have been sued in the past for such things? Perhaps go read this great Brad Frost Blogpost? – JonW Jan 30 '14 at 16:49
  • 1
    @JonW you should write your response as an answer. I just noticed it after I wrote my answer and it basically has everything I should have written in my answer – Mervin Johnsingh Jan 30 '14 at 19:59
9

Looking at your form, I have a couple of concerns about your feedback mechanism

  • You are relying too much on color to communicate content or feedback and a colorblind user might not be able to see the difference between the two forms and might wonder what is the error is. I just ran your "error image" against a color blindness checker and in two types of colorblindness, there is no difference between a valid and invalid input.

enter image description here

The first image is when the person is suffering from Green-Blind/Deuteranopia colorblindness

enter image description here

The second image is when the person is suffering from Red-Blind/Protanopia color blindness

Also this webAim article says that unfortunately Protanopia is the most commmon form of color blindness so you stand a good chance of confusing your users.

  • No information is provided about the kind of error : You are just denoting something is wrong by using color and not giving me any contextual information about what is the mistake. A simple situation might be that your user might have forgot to put the . in his email like testemail@com or might have entered an email in an incorrect format like this

    " testemail@test.com " - spaces

    "testmail@yahoo,com" - use of comma

In this case looking at your use of color to denote an error, all I would know is that an error has appeared but I wont know what is the validation error.

Here is an example of a form which uses color and validation messages to inform the users

enter image description here

Even taking the comment column, I assume that your comment column would expect a minimum number of columns and if you show an error condition due to less number of characters, the user would be confused as he has had no visual feedback

  • Great points. Thank you. The comment column enforces that it "can't be blank". It doesn't enforce a count. I found that trying to decide what is an appropriate length useless in most of my use cases. – Mohamad Jan 30 '14 at 20:03
  • OK it cant be blank but then honestly what feedback will you get if I just write one character and leave it there. I assume you want to use this form for some information gathering but you would have some validation. The bottom line is you need to give some additional information about what went wrong. – Mervin Johnsingh Jan 30 '14 at 20:06
  • But that's not relevant to the user. It's up to me if I choose to allow a comment with 1 character. As a developer I found my time was better spent doing other things than validating if someone wrote more than 5 characters, then testing it on the app level, and the front end. If the user wants to abuse the privilege and write 1 character, he can also write nonsense to evade the limit. I think it depends on the use case and audience. On SE, for example, I agree with such validations. – Mohamad Jan 30 '14 at 21:14
0

I see a different problem with your proposed interface. I think it is probably fine for dealing with empty fields. But what if someone enters the email wrong, leaving out the @ or entering two @@? With your plan, I think you'd need to erase what they entered and make them enter again. The user ought to be able to edit the incorrect entry, and not have to start anew.

-1

No.

You are giving enough feedback which is what Internet generation needs. A combination of * and Red color is more than just fine. Almost everyone today has an experience of invalid field in a web form from Facebook, Gmail etc.

Thanks for this clean design idea. I'm going to steal it.

  • 2
    Downvoting this for two reasons. Firstly, you don't provide any actual reasoning or evidence why you say this, and secondly because it's just wrong and is genuinely bad advice. – JonW Jan 30 '14 at 16:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.