Non dull forms

Forms are usually such boring interface elements that no one likes to fill out. Especially if there are a lot of input fields on them - then it’s just in the eyes of the abundance of frames.

Let's take a look at an example. I specifically will not take any scary copy of the “design” work, but take as an example the registration form with the standard input fields from Microsoft:


')


A small digression about browsers. Screenshot of the form was made in the Opera. FF renders input fields that are much more pleasing to the eye:



Let's return to our forms.

First of all, let's try to get rid of the frames. To do this, fill in the input fields with a pale color so that it is clear that these are still input fields. If you have a well-calibrated monitor, then you will notice a light gray background in the form. This slightly reduces the contrast between the background and the margins, making the latter less prominent. However, now the shape looks smoother, the look does not stumble on gray stripes.



But the best is yet to come. You, probably, have already paid attention that two elements on a new example are not painted over? This is the second part of the proposed improvement. The idea is that we completely remove the graphic designation of the input field after it is filled. Only text remains. There are two great advantages to this solution:

• It is much easier to check the form: the glance does not stumble and the person sees the information entered by him on a clean background, and behind bars out of frames.
• The filling process becomes more interesting. Some kind of game for killing form elements.

In order not to confuse people that after the introduction the data becomes non-editable, the field can be highlighted in some color when you hover over it.



That's all. In this rather simple way, you can make the forms much nicer and more interesting to fill.