11 practical tips for customer portal developers to make forms more efficient

Forms are not an end in themselves—and yet some information is more important than others. This should also be immediately recognizable for users by highlighting mandatory fields as such. There are various ways to do this, such as highlighting the label of the mandatory field in color or using a larger font. Making the frame thicker or in a specific mandatory field color—and finally graying it out when the mandatory field is filled in—is just as clear a signal to the user as using an asterisk as a marker. Regardless of which variant you choose, it is important to find a balance between emphasis and simplicity.

Another way to keep your form lean and clear is to organize content into logical groups. In this way, you enable users to understand the form and fill it out quickly. If a content unit has already been filled in and is no longer relevant in the further course of the form—such as the contact information of the reporter—you can simply collapse it and thus reduce the complexity. There is then no more thematic jumping back and forth in your head during use.

To make the form as easy as possible for users to understand, it helps to give input fields a label that is as short as possible. The length should not exceed one or two words and the label should be placed above the field. In contrast to lateral placement, this shortens the processing time and also creates additional space on the horizontal dimension. Although the form grows vertically as a result, the advantage outweighs the disadvantage; users do not have to look at the label and input field at the same time. Avoid at all costs writing in capital letters—this is difficult to read and prevents the content from being skimmed quickly. It is better to capitalize the first letter, as in a sentence. You should also ensure that labels are used consistently both within the form and across forms. This creates orientation and thus ensures a better UX.

If you are faced with the supposedly detailed question “Drop-down or option selection?”: It depends. With two to five possible answer options, radio buttons (usually circles in which a selection symbol can be placed with a click) are better than a drop-down bar. The reason: Users have preformulated answers immediately in view and can therefore choose more quickly. The vertical arrangement of the buttons is definitely preferable to the horizontal one, as it allows users to work more quickly.

In addition to predefined answer options, the autofill function and search suggestions in input fields provide a real speed boost. Users love them because they reduce the cognitive load—and less typing is required. This reduces the error rate and has a positive effect on the UX, especially for users with mobile devices.

Decades ago, two researchers—Bljuma Zeigarnik and Maria Ovsiankina—explained why you should ideally work with a progress bar in your form. While the Zeigarnik effect states that people remember unfinished tasks much better than completed tasks, the Ovsiankina effect supplements this statement by attesting to an inner urge to complete these unfinished tasks. The bar hooks in at precisely this point, supporting the memory of the components of the form that still need to be processed and stimulating the subconscious need to complete them in order to reduce cognitive tension. The ideal place for the progress bar is directly under the title of the form. If you want, you can also see this as a little gamification.

Ideally, users should be able to navigate the form intuitively without much thought—but this requires a well-thought-out structure. In order to design the web form clearly, it is advisable to structure content blocks using graphic tricks to identify them as meaningful sections. You can use various design laws for this, such as the

• law of proximity: If elements such as input fields are arranged close to each other, they are perceived as a unit. The effect can be enhanced by using frames or colored backgrounds.

Or the

• law of continuity: lines can also be used in forms to demonstrate the connectedness of individual interaction fields in a section: In this way, elements arranged along an alignment line are perceived as belonging together.

In addition to the spacing style between elements, there are other options, such as structuring by tabs with a summarizing title. In this way, users not only have to scroll less, but also get a convenient overview of the individual sections, between which they can switch intuitively. However, if the aim is to work through the form as quickly and stringently as possible, then a design with scrollable sections is preferable to the tab variant. Important: When designing forms, it is essential to find a solution that also works responsively, i.e. that can be adapted to different screen sizes without compromising the structure or overview. 

This tip should in no way be misunderstood as a request to use as many of the 16 million possible RGB colors as possible. Rather, it is important to make conscious use of their enormous impact. Colors not only have a signaling effect (as in the traffic light example), highlight content or can guide the user’s gaze by prioritizing elements and thus encouraging certain actions. They can also give a form freshness and a modern look. Depending on the maturity of the company, however, the color scheme is determined by the corporate identity.

5 quick tips for color selection

1. Be sure to unify the header, font and icons in terms of color and coordinate them with each other. This gives the form a consistent look.

2. Using the CI palette is almost always a good choice, as the corporate colors allow users to immediately identify the form as part of the corporate world.

3. Take legibility into account when choosing colors, even in different modes from “light” to “dark”. Tools such as the Contrast Checker or Adobe Color Contrast Analyzer are suitable for ensuring sufficient contrast. Also pay attention to the topic of accessibility (download factsheet).

4. When choosing colors, consider the different emotional effects, also in combination with other colors. Cultural backgrounds and the context of use play a major role here.

5. Because never just one, but always a combination of colors is used: Use tools to find a coherent color concept. Adobe Color, Coolors or Paletton are just three of many alternatives.

It happens by itself: Users subconsciously recognize lines in the form along which the individual elements are arranged. This does not require thick, black grid bars—rather, it is a matter of virtual lines created by the framing of control elements, buttons or labels. If you’re thinking that lines provide orientation, be careful. Vertical lines in particular should be used as sparingly as possible in form design, as they can have a negative impact on the UX.

The illustration clearly shows that too many vertical lines make the form more difficult to grasp visually, which has an unfavorable effect on the UX balance.

Structure has a major influence on the performance of the form. The division into columns also plays an important role here. If possible, this should be used sparingly, because: Single-column content leads to a higher processing speed. Users find it easier to grasp the content. In addition, the path along which users work their way through the form is more stringent in a single-column layout, as it leads them clearly from top to bottom. With several columns, more information can be accommodated in a smaller space, but at the same time there are several ways to complete the form—and these are not always the most efficient.

On the one hand, your form is consistent if users always find input fields in the same place and in the same order. On the other hand, structuring elements such as tabs should also have the same summarizing title from form to form and be arranged logically. True to the motto: Once users have understood the form, they will understand all future forms.