Recently I had to design something of a digital design classic: form input validation. In the early days of the web, notifying the user that the input he or she had typed was erroneous, was handled by a javascript alertbox. It would even make a nasty sound by default on windows computers as far as I remember. In terms of user experience, it was pretty bad. Luckily, a lot has happened since.

We now have validation that works via ajax and reacts upon user input as the user types and often also lets the user know that “things went well” and not only that there were a number of errors upon submitting the form.

Even though the design pattern of input validation has matured, I still see quite some ambivalence from a designer’s perspective:

Should the input field change background color when invalid?

Should the input field change border styling when invalid?

Should success be shown to the user or should it be errors only?

Should icons be used?

Should the submit button disabled and greyed out until all inputs are valid?

Should placeholder values be used for the error message or should errors have their own dedicated labels?

Should the error label be placed underneath or to the right of the input field?

Should error labels be grouped in one list of error messages or shown contextually next to each erroneous input field?

Starting from scratch

Even though almost all sites use input validation at some point, it seems that this design pattern is re-interpreted over and over again – the only thing that we seem to agree on is that validation should happen before submitting the form (when that is plausible) and that it should respond quickly to user input as opposed to old-fashioned server side validation. Apart from that, each designer (myself included) has a tendency to start more or less from scratch every time.

Pattern recognition without recognition

Is this a problem? Well, it depends, but if you look at it from a pattern-recognition perspective, it surely is. Users see input forms that look alike on the web all the time, but they can never really know how they behave.

Do you agree or have you seen any good examples of input validation that deserves to define the future of the pattern? Let me know on twitter.

When designing digital products with dynamic content, it’s tempting to design for the user who’s been using the product for a while. Designing a stream of content that has content in it just somehow seems like a more natural or more…