Web forms "Traffic Light"
The process of developing forms interfaces is a rather complicated procedure. Most designers try to make them beautiful, a considerable number of web designers try to make their work easier by simplifying these beauties. It happens that there are arguments. It happens that there simply is not enough time for this beauty. It happens that just the coder does not want to particularly bother with the graceful "pa" of the designer. But this is a normal process of interaction, first of all, a person with a person.
The simplest method is a kind of unification of web forms as a whole, whether they are color solutions or standardized icons. I decided to offer you a coloring for the web form text fields. It may well fit the lists, but even Internet Explorer 7 does not allow placing any styles on your favorite selects. Without thinking twice about the name, I decided that the word "Traffic Light" best reflects the meaning of this unification.
By default, all fields are gray, mandatory fields are yellow. Similarly, with a sfetophore fellow, yellow should inform the user - “Wait! Stop! There is something important here. ” Accompanying this with a pop-up viola or background icon will not interfere, of course, but the selected fields always attract attention.
')
And what about validation, you ask?
This is what validated fields will look like - when the correct value is entered into them, they become green. Also required fields are green if they are filled. It is quite logical, in my opinion.
If, during validation, the user has filled in any field incorrectly, it becomes red and this very clearly reflects his state. As you can see, not only required fields can be validated.
In my opinion, it turned out quite an intuitive form: yellow - a warning, green - valid, red - invalid.
I do not consider myself a designer, but if someone wants to see a similar form in the business - I will gladly make it up and lay out in addition to this post.
The simplest method is a kind of unification of web forms as a whole, whether they are color solutions or standardized icons. I decided to offer you a coloring for the web form text fields. It may well fit the lists, but even Internet Explorer 7 does not allow placing any styles on your favorite selects. Without thinking twice about the name, I decided that the word "Traffic Light" best reflects the meaning of this unification.
By default, all fields are gray, mandatory fields are yellow. Similarly, with a sfetophore fellow, yellow should inform the user - “Wait! Stop! There is something important here. ” Accompanying this with a pop-up viola or background icon will not interfere, of course, but the selected fields always attract attention.
')
And what about validation, you ask?
This is what validated fields will look like - when the correct value is entered into them, they become green. Also required fields are green if they are filled. It is quite logical, in my opinion.
If, during validation, the user has filled in any field incorrectly, it becomes red and this very clearly reflects his state. As you can see, not only required fields can be validated.
Happy ending
In my opinion, it turned out quite an intuitive form: yellow - a warning, green - valid, red - invalid.
I do not consider myself a designer, but if someone wants to see a similar form in the business - I will gladly make it up and lay out in addition to this post.
Source: https://habr.com/ru/post/42501/
All Articles