Modern web forms: a few more subtleties

    Most people perceive the world through their eyes, so visual design is of great importance when creating front-ends for web applications. But are all these little things and caramels that modern web designers like to saturate so useful? In this article, I would like to talk about common mistakes in the design of web forms, as well as share some of the secrets of creating the right interface.





    It is worth mentioning that by “the right interface” I mean an interface that reliably increases conversion and provides subjective comfort for users. The reliability of the data is ensured both by research conducted by our group, and research by third-party (most often Western) UX specialists.
    Recently, trends in the design of both web applications in general, and forms in particular, have been striving for maximum decoration: the so-called “Caramel” design, gradients, shadows, bright and non-standard interface elements. Sometimes, among the “design” it can be difficult to find the actual content.
    Such thoughtless embellishment leads to the fact that the user's attention is distracted from the main purpose of using the web application, the user begins to fixate not on filling out the form, but on studying its design. In the end, the form is never completed and we do not receive our precious conversion.
    So, let's look at a few fashion trends in web form design:
    • Custom layout of field headers;
    • “Creative” tags for required fields;
    • Sliders everywhere and everywhere;
    • Unobvious contextual clues;

    Custom layout of field headers


    The heading (label) tells you what type of information you need to enter in a text or other field. This means that the user must read the title before moving on to the input field. For sites where content is read from top to bottom, from left to right, it is logical to place the label either above the input field or directly to the left of it. In practice, designers often put the title anywhere, but not in a natural place for him.
    A striking example - the label is located below the input field (Fig. 1): Fig. 1 The
    header for the input field below the field itself
    title for the input field below the field itself

    This arrangement of the field heading leads to the fact that people who are used to reading from top to bottom since childhood see first an empty text field, after which they are forced to look further for an explanation for it, and then return back to the field. It turns out that the user, when filling out the form, takes two steps forward, then one step back, after which, moving to the next field and its title, takes three more steps forward, then a step back, etc. It would seem a trifle, but a long jump back and forth quite quickly tires.
    Obviously, the user spends much more effort filling out such a non-standard form, attention is draining faster and, as a result, the number of refusals to fill out increases.

    According to our study, using focus groups (30 people in the main and control groups), when filling out a form with non-standardly located field headings (20 text boxes, 10 check boxes, 10 list boxes, 4 groups of radio buttons, 3 in each) occurred at 16.67 % more failures than when filling out the standard form with the control group (46.67% versus 30%), 30% more errors when filling in the fields (53.33% against 23.33%), and 63.33% more often expressed subjective dissatisfaction with the design of the form (73.33% versus 10%).
    Usability study results for forms with headings below the field
    Fig. 2 Results of the usability study of forms with headings located under the field

    Another common case is forms with headings inside input fields (Fig. 3): Fig.

    3 Heading for an input field inside the field itself

    Here are a few reasons why such a frequently used solution is actually not the right choice:
    • When the user begins to enter data in the field, the title disappears. And if the user is distracted by something, then returning to the form, he will not immediately be able to understand what kind of field he is filling out;
    • In particularly difficult cases, when developers were too lazy to use js to automatically disappear the title when clicking in the field, the user will have to do many additional mental and physical actions to delete this title. The same is true for existing, but broken javascript;
    • Fields with headers inside look like filled, so it is likely that the user will skip any of the fields;
    • In the event that the form is completely filled out, the user does not have the opportunity to verify the correctness of the fields, correlating them with the headers;
    • The ability to directly print the form is lost because when headers are missing, it becomes unclear what fields are filled in;
    • It is impossible to use such a design of forms in cases where the field headings consist of more than 2-3 words;
    • JS used to implement this design unreasonably complicates the front-end code;

    So why, despite such obvious flaws, designers continue to use this technique in the development of front-ends? Some experts argue that the web form takes a more accurate look. One can argue with this statement. Yes, the form takes up less space, but significantly loses its functionality. It’s the same as throwing food out of the refrigerator just to make the shelves in it look neater. Designers should suppress their passion for minimalism if it damages usability.

    Finally, the most mocking use of headers is with animated headers. Have you ever seen a heading that is normally inside a field, and when you click on a field it slowly creeps to the left or right of it? I saw, it’s terrible both in terms of usability and in terms of design. Firstly, space is not saved with this method, and secondly, the animation distracts the user very much and we are faced with a bunch of problems: input errors, blank fields, etc.

    Creative labels for required fields


    If you need to show the user the required fields, then why not use the red asterisk (*), which has established itself as a de-facto standard? This may not be the best example of infographics, but over the years of use on many sites it has become familiar to users. In addition, the so-called “Double visual accent”, i.e. the user will immediately recognize it by its special shape and color, and even in case of color perception violations, there will be no double interpretation of this indicator.
    Nevertheless, there is a certain group of designers who are trying to make their own adjustments to this element of information design. Of course, there are people who do not know that a red star means that they must be filled. But after all, much more people are accustomed to such an agreement and they are introduced into a stupor of deviation from it in the form of an arbitrary change in the shape and color of the labels (Fig. 4).
    Examples of custom label design for required fields
    Fig. 4 Examples of custom design of required field labels.

    And, finally, the “coolest” way to mark required fields is underlining the title (Fig. 5). Yes, yes, even such things sometimes come to the minds of some designers who are inflamed with creativity.
    Underlined headlines - top of “creative” outrage
    Fig. 5 The underlined headings - the peak of “creative” lawlessness

    It is generally accepted that underscores in web documents mean a link. Now let's imagine the cognitive dissonance that arises in a user who sees underlined headings in a form. Personally, I would start clicking on them to find out what these links are and to get distracted from the process of filling out the form. And for me, as for many users, it is not at all obvious that fields with underlined headings are required.
    For the sake of interest, we conducted a small narrow study in a focus group of 30 people on the subject of mandatory field labels that received the following results: 90% of those surveyed recognize the red star as a symbol of the required field, 73.33% understand that the red square indicates the same, and that the asterisk (in this case 33.3% of them subjectively experiencing the discomfort of such designations), and only 6.67% of respondents recognized the right to emphasize the reference to the field required to fill (the others tried to click on the "link")
    Usability study results for forms with standard and not-so-required field labels
    Figure 6. results of the study usabil Iti forms with standard and not very required field labels

    Sliders and scrolls in forms


    In this part of the article, we will talk about sliders and scrolls, which are not an auxiliary part of the interface, but a direct way to enter information into the form.
    The standard set of controls used to enter information is limited: text boxes, radio buttons, check boxes and drop-down lists. It is not surprising that designers and interface specialists are constantly tempted to expand this set. One of these “extensions” was a slider - a virtual analogue of physical controllers that allow you to smoothly change the values ​​of various parameters, from volume to the temperature of heating the stove. Like a real counterpart, the slider is designed to quickly select an approximate value. For such purposes as adjusting the volume level or moving around the video, the sliders are perfectly suited. But are they good for using in web forms?
    Most often, the main property of the “knob-regulator” - smooth setup - is simply not required on the web, therefore mutant sliders with clearly fixed values ​​appear (Fig. 7) Fig.
    Misuse of sliders in forms
    7 Misuse of the sliders in forms

    In cases when the user needs to provide a choice of several fixed values, use the drop-down lists or radio buttons more logical and more appropriate. In particular, the advantages of the drop-down list over the slider are as follows:
    • The listbox type control itself says that the user can select only one value from a predefined list, while the slider means choosing from a range of values;
    • To select a value in the drop-down list, the user can use either the keyboard or the mouse, at his discretion, while with the slider it is limited, in most cases, only to the mouse;
    • Users, in general, are more accustomed to drop-down lists than to sliders;
    • The listbox is more flexible and accessible for use by people with disabilities;

    You can argue for a long time about the advantages of drop-down lists over sliders, but the dry numbers speak for themselves: there is a clear decrease in conversion when using unusual controls.
    Thus, a study conducted for the largest Australian job portal showed an eight percent increase in conversion when replacing a slider that allows you to choose a salary range by two list boxes (Fig. 8).
    The results of replacing the “incomprehensible” slider with the usual drop-down lists
    Fig.8. Results of replacing the “incomprehensible” slider with the usual drop-down lists. The

    conversion in this study was the use by the user of a range of wages as a criterion for selecting a vacancy.
    The portal’s management decided to use the “payroll slider” on the page of “fine-tuning” search parameters, i.e. where it is necessary to refine the results obtained (Fig. 9).
    The slider can be successfully used in non-critical parts of the project.
    Fig. 9 The slider can be successfully used in non-critical parts of the project.

    On many sites, the slider is used to offer users the ability to accurately select a wide range of values, while the user would be more satisfied with several predefined solutions.
    For example, the slider in fig. 10 allows the user to set the maximum cost of a girl per night with an accuracy of $ 10. But is it really necessary for the user to think about whether to limit his search to 740 dollars or still go broke at 750? It is much preferable to facilitate the selection using checkboxes with predefined price ranges (say, from 0 to 50 dollars, from 50 to 100, from 100 to 200, etc.).
    Slider versus a group of checkboxes: don't make people think again
    Fig. 10 Slider against a group of checkboxes: do not make people think once again

    In fact, sliders are not so bad, you just need to use them (like any other controls) not just anyway, but only in really necessary cases.
    An example of the correct use of the slider is fig. 11, and here's why:
    • In this case, it is important to show the final values ​​of the range from which the user can choose. With such a visual representation of the data, the slider does an excellent job;
    • It is possible to select the exact value;
    • The user immediately sees the influence of his choice on the change in the cost of insurance premiums;
    • If the user knows the exact cost of his car, he can immediately enter it into a textbox combined with a slider;
    • The slider itself, as an unusual interface element, brings variety to the filling of a boring form;

    The slider allows the user to accurately select the value of their car
    Fig. 11 Slider allows the user to accurately select the value of their car

    Unobvious contextual prompts


    Contextual prompts provide timely assistance to the user in the process of filling out forms. An example is the description of a valid password format below the pass-box field.
    However, on the net you can find a bunch of forms in which contextual help is either hidden behind the icons with a question mark or completely absent. This occurs, in particular, due to the lack of system knowledge in the field of usability among interface specialists. But this is not about illiterate designers.
    In fact, providing contextual assistance to the user can greatly simplify the filling out of forms, and therefore increase conversion and loyalty. No need to force the user to make extra efforts in the form of clicks on the icons to obtain the information he needs.
    Timely explicit explanation to the user that he should use a password longer than 5 characters (Fig. 12) will significantly reduce the number of errors and prevent the fields from being filled again (which, incidentally, will not always happen, in many cases the user will simply close the page with unfriendly form). Fig.
    An example of a form with a competent design of contextual prompts
    12 An example of a form with a competent design of contextual hints.

    The use of familiar icons hiding contextual help, of course, reduces the size of the form and leads to a more “neat” look (Fig. 13), but forces the user to perform an unnecessary action on which he it won’t always go to the point of making a mistake (we don’t like reading instructions).
    Using icons to reduce shape
    Fig. 13 Using icons to reduce shape

    In addition, do not forget about people who do not use the mouse when filling out forms. Think about whether you will click on the tiny help icon when you access the site from your iPad or phone? And if the user is used to using only the keyboard when filling out forms, then he will have to, in case of a question, reach for the mouse, click on the icon, read, return focus to the input field ... Do you know how many users will get tired and quit filling out?

    According to our study with the participation of a focus group (60 people), 23.33% of users do not finish filling out a complex form due to a complete lack of contextual assistance and 13.33% drop out of a form if you need to click on the corresponding icon to receive a hint. At the same time, 63.33% of respondents express subjective dissatisfaction with the lack of contextual help, and 30% need a additional click on the help icon (Fig. 14) Fig. 14
    As a result of the illiterate use of contextual help, up to 23% of users are lost, and loyalty is reduced in more than 60%
    Due to illiterate use of contextual help, up to 23% of users are lost, and loyalty is reduced for more, than 60%.

    In the same case, if circumstances force us to use icons instead of an explicit contextual clue, you should take care that this icon meets the usual standards.
    It is generally accepted that help is indicated by a question mark on a blue background. Such infographics are used not only in web design, but also in everyday life, therefore, most users have long developed “knowledge”: if something is indicated by a blue icon with a question mark, then you can get help there.
    When a designer decides to replace the standard icon with something more creative, for example, a lifebuoy (Fig. 15), this creates additional difficulties for the user, which ultimately reduces conversion.
    The use of non-standard infographics to indicate hints leads to difficulties in perceiving this form
    Fig. 15 Using non-standard infographics to indicate hints leads to difficulties in perceiving this form

    It would seem that a compromise could be the use of a pop-up window with the help text next to the field, however, problems can lurk here:
    • Users, not knowing that there is contextual help, can even begin to ponder the questions that arise before filling out the form. But we don’t want users to strain, right?
    • In those cases when checkboxes, radiobuttons and other controls are used, except for textboxes, users will see contextual help only after selecting;
    • Tooltips may overlap some of the key information;
    • Again, on mobile platforms, such a solution can be very inconvenient for the user;

    Only in one case does it make sense to hide contextual help under the icon or not to design it at all - when the expected percentage of users who may need such help in this particular web form is so low that introducing such a function into the interface becomes unprofitable.
    In cases where contextual help is necessary, but its explicit addition is difficult, you can use tooltips - tooltips (Fig. 16). The most successful area of ​​their application is checkboxes and radiobuttons, i.e. those controls in which the pop-up window does not interfere with the input of information and will not distract the user.
    At the same time, it is possible to inform the user about the availability of contextual help by arranging the control header with dashed underlining, which is the usual standard for this kind of links.
    However, we should not forget that users who visit the site from a smartphone or tablet will be deprived of the opportunity to see such tips if they appear when you hover over the link.
    Using tooltips
    Fig. 16 A compromise is to use tooltips

    Conclusion


    All forms have a standard, well-established set of controls, which are familiar to most users and can implement almost all the required functions. Adding any new elements, as well as changing the design and functions of the standard should be carried out carefully. The interface specialist in developing forms must be guided not by his own preferences, but by user convenience and economic rationality.
    Each implemented element of the form, each used out of place control leads to inconvenience for the user, lower conversions and, ultimately, loss of profit by the company. After all, the devil is in the details, remember this.

    Disclaimer: the article is by no means written to “teach” anyone. The main goal is to open a discussion on such a delicate topic as creating convenient forms. Let's learn from each other to make the world a better place.

    Also popular now: