We percept the surrounding world mostly by eyes. That’s why visual design is very important when you create web applications’ front-ends. Some modern web designers like to place large amount of cool bells and whistles instead of standard interface elements. This article is devoted to typical mistakes in web form design and some secrets of right interface creation. The right interface is such kind of interface which reliably increases conversion and provides subjective convenience for users.
Nowadays trends of web application and form design seek to maximal level of decoration. Designers like to use gradients, shadows, bright and non-standard interface elements. Sometimes it is difficult to find content itself among all these decorated elements. This pretty appearance has a bad result: user digresses from main goal of application usage and pays attention not to form submission but to investigate its design. Finally, form is not filled and we don’t get valuable conversion.
So, let’s consider several fashionable trends in web form design:
- non-standard location of field labels;
creative marks for required fields;
- unevident contextual help.
Non-standard location of field labels
Label says what kind of information should be inputted to the field. It means that user should read the label before going to fill the field. If site’s content is read from top to bottom and from left to right, it is logically to place label either above or at the left side of input field. But designers often place label everywhere except these places.
Here is an example of label placement under input field (Fig.1):
Such location of field’s label leads to the following situation. From childhood people used to read from top to bottom; so, first thing they see is empty text field. After that they have to look for comments for this field, and after that they return to field. It means that while form filling user moves forward per two steps, than goes back per one step. After that user passes to next field and its label by moving forward per three steps and again moves back per one step and so on. It seems to be not very important but user may get tired because of it very quickly.
It is clear that user makes more efforts to fill such non-standard form and may waste his attention. So, many people refuse to fill such kind of a form.
Another wide-spread situation is a form with labels inside input fields (Fig.2).
Let’s mention several reasons that make this decision undesirable:
- When user begins to input data into field, label disappears. If user distracts himself from form filling for a moment, he can forget what kind of field he was filling out;
Fields with labels inside look like filled ones, that’s why users often skip some of them;
If the form is fully filled user is not able to check correctness of filling by comparing input values with labels;
- There is no opportunity to print the form directly because when labels are absent it is not clear what fields are filled;
It is impossible to use such design when field labels are composed of more than 2-3 words;
Why do designers continue using this technique in spite of all disadvantages? Some specialists are sure that in this case the form becomes more neat. We don’t agree with it. It goes without saying that form occupies less space, but it loses functionality. It is the same that you decide to pull out products from refrigerator for making its shelves look more beautiful. Designers should not aspire to minimalism if it does harm to usability.
The most unsuitable usage of the label is combination of labels with animation. In this case in usual state label is placed inside the field, but after clicking on it the label begins to crawl slowly to left or right side of the field.
It is terrible both for usability and the design. For the first, you don’t save space, and for the second, animation digresses user very much. As a result, we have a large amount of problems, such as input mistakes, skipped fields etc.
Creative marks for required fields
If it is necessary for you to show user the fields required for filling, it is good to use red asterisk (*) which is recommended as standard DE-facto. May be it is not very beautiful from the point of design, but users got accustomed to see this mark at sites and know its meaning. Besides, asterisk uses so-called double visual accent. It means that user immediately recognizes it by special shape and color. Even in the case of abnormalities in color sensation, this indicator will not have any dittology.
Nevertheless, there is a group of designers trying to make their own changes in this element of information design. It goes without saying that there are people who don’t know that red asterisk means that the field is required for filling. But most of people got accustomed to this agreement and are very surprised if they see deviations from this agreement, such as free change of shape and color of marks (Fig.3).
There is also one method of required fields marking. It is label underlining (Fig. 4).
It is generally accepted that in web documents underlining means that this string is a link. If user sees underlined labels in form, cognitive dissonance occurs. User may start clicking these labels to learn where these links lead to. Of course, he is distracted from form filling. Also it is not evident for majority of users that the fields with underlined labels are required to fill.
Sliders and scrolls in forms
Let’s talk about sliders and scrolls which are not the additional part of interface but the way of direct information input to the form.
Standard set of controls used for information input is very limited: text boxes, radio buttons, check boxes and drop-down lists. It’s no wonder that designers and specialists in the area of interfaces are constantly eager to extend this set. Slider has become one of these extensions. It is a virtual analog of physical controllers which allow smooth changing of values for different parameters varying from sound level to stove heating temperature. Similar to real analog slider is aimed for quick choice of approximate value. Sliders are the best choice for sound level setting or relocation inside video clip. But are they so good for usage in web forms?
The main property of slider is smoothness of adjustment. In web space often it is just unnecessary. That’s why designers try to use them for selection between fixed values, and it is not good. Really, it is silly to specify that somebody has designed 5,5 or 4,9 pages. (Fig. 5):
If you want user to choose from several fixed values, it is more rational and logical to use drop-down lists or radio buttons. Particularly, advantages of drop-down list usage in comparison with slider are the following:
- Such item as list box means that user is able to choose only one value from predefined list. At the same time slider implies choice from value range;
- To choose a value from drop-down list, user may use either keyboard or mouse. At the same time, while working with slider, in most cases, user is able to use mouse only;
The majority of users have got accustomed to use drop-down lists, not sliders;
List box is more flexible and is available for people with disabilities;
Many sites use sliders to suggest to users the opportunity of exact choice in wide range of values. At the same time users like several predefined values much more.
Here is the form (Fig. 6) where slider is not necessary at all. This form offers user to set exact cost of party arrangement accurate within 10 US dollars. For user it is much more suitable to limit choice by value diapason (for example, from 0 to 50 dollars, from 50 to 100 etc.). In this case check box or radio button is the best choice.
Indeed, sliders are not so bad, but you should use them only in cases when they are really necessary. Don’t use sliders everywhere.
Unevident contextual help
Contextual help provides well-timed help for user while form filling. For example, description of allowed format for password is placed under field of password box.
But in Internet there is a great amount of forms where contextual help is hidden behind icons with question marks or is absent at all. It often happens if specialists in the area of interfaces don’t have system knowledge of usability. But now we will not talk about unqualified designers. Really, providence of contextual help for users allows to simplify form filling very much. For example, if there is an email field in form, the majority of users may think that the main aim of this form is collecting email addresses for SPAM letters sending. If you write that this information is sacred, you’ll increase probability of submission of this form by user (Fig.7). In other cases user simply leaves the page containing form which is not user-friendly.
If you use usual icons hiding contextual help, it decreases form size and makes it more accurate (Fig. 8). But in such case user has to perform more actions, and it is not obligatory for this action to be performed before the mistake takes place, because users don’t like to read instructions.
Besides, you must not forget about people who don’t use mouse while form filling. If user views the site using iPad or iPhone, as a rule, they pay no attention to small icon with help. Also there are users who like to use keyboard only for form submission. In this case when something is not clear, user has to take mouse, click icon, read, return focus to input field etc. A lot of users will become tired and leave this page.
In the case when you have to use icons instead of direct contextual help, this icon must fit habitual standards.
It is generally accepted to define help by question mark on blue background. Such icon is used not only in web design, but also in other areas. So, the majority of users know what it means: if something is marked by blue label with question mark, it may give help.
If designer decides to change standard icon by something which is more creative, for example, life buoy, it will create additional difficulties for users. Finally it decreases conversion.
Pop-up window with help text seems to be a compromise variant, but there are some problems relative to it:
- If users don’t know that there is a contextual help on this site, they may start thinking over the questions they have before form filling. But we don’t want users to make additional efforts, don’t we?
If check boxes, radio buttons and others controls besides text boxes are used, users will see contextual help only after they make choice;
Pop-up helps may hide some part of key information;
- In mobile platforms such decision may be very unsuitable for user.
There is only one case when there is sense in hiding contextual help under icon or not to make it at all. It is the case when expected percent of users who need such help in this concrete web form is so low, that implementation of this function to interface becomes unprofitable.
All forms have standard established set of controls which both are habitual to majority of users and may realize almost all required functions. You should be careful while adding any new elements or changing design and functions of standard ones. Specialist in interface area should think not about personal preferences but about suitability for user and economic rationality.
Every implemented form element, every non-properly used control leads to creation of situation unsuitable for users, conversion decrement and, finally, to loss of company’s profits. You should pay attention even to the smallest details.