Design web forms. User experience tips. - Ordo Ab Chao Group

Design web forms. User experience tips.

Layout Web Forms

Do you like filling in forms? Probably not. It’s not what we like to do. You just want to buy a ticket, book a hotel room, make a purchase, and so on, but completing a form is a necessary evil to deal with. We’ll show you how to design web forms, taking into account UX considerations. What influences a person’s attitude to submit a form?

  • It could be time consuming.
  • Complicated forms are often difficult to understand (or you just do not feel like filling them out).
  • The form asks for personal information you do not want to share: credit card details, mobile number, home address, etc.

In the following, we will try to answer the most common questions about form creation.

We need to stop worrying about proving the value of design and just focus on outcomes that provide value.

(Denis Weil, Innovation Executive formerly at McDonald’s)

Design a form with a two-column layout?
Eye tracking studies have shown that single-column forms are better than multi-column ones. Why? The way we scroll down a website is similar to the way we fill a form: going from top to bottom, focusing on the content. A form with parallel columns can easily mislead users and distract them. To keep users in flow and not to interrupt vertical alignment, place fields one below the other in a column. Sure, every rule has its exceptions. As we can see in the example, short or logically related fields (mobile phone number, city, country and area code) can be arranged in a line.

If the form has a complicated structure (eg, the checkout phase in an online store or the registration phase in a credit platform), it can be visually divided into semantic groups, with white space or between headlines added between them. This gives users the feeling that they are making progress through the form without feeling overwhelmed.

Where should labels be placed?

Labels tell users what information is contained in a particular form field. These are usually outside the form field. Recently, there were only two variants for the placement of labels: over the fields and left-aligned. Some time ago, an alternative appeared in designing the form: designers began to animate forms and hide labels in placeholders.

LABELS OVER THE FIELDS

This is the most common placement and, as confirmed by Google UX Research, for a good reason. It adapts better to the smartphone sizes, which is essential for responsive markup.

LEFT-SIDED PLACEMENT

Left-aligned labels get more attention. In addition, the contact form will occupy less space vertically. But keep in mind that such an approach only works for desktop views. For mobile devices, size is a problem (the screen is too narrow for a left label and a field). This could cause problems for users.

PLACEMENT OF LABELS IN FIELDS

Interactive labels placed inside the field are becoming increasingly popular with UX designers because they can be scanned before they are filled out. The animation may be different, but the process is the same: after clicking on the label placeholder label, the label does not disappear, but moves to the top of the field, giving the user the option to enter the data.

The advantages of this approach are obvious: it saves space and the animation is understandable to the user. But animation in forms is not always the best solution. It depends on the context of the form. If you are working on a form with very few fields (a login or newsletter field), the labels aligned above are not so necessary because not much information needs to be retrieved by the user. It works better on complex shapes with multiple sections. Despite the benefits of this method, keep in mind what a drop-down selection will look like and the animation will fit.

Nevertheless, interactive label placeholders gain from the static ones. When the box is clicked, the label moves up, remains visible while the static disappears.

Can we use wildcard text instead of a label?

There are many ways to give hints. One of these is a common implementation of statements in form fields. Unfortunately, testing users repeatedly shows that placeholders in form fields often affect usability. They can complicate the process of filling out a form, especially if the form consists of more than a dozen fields. Missing placeholder text burdens the short-term memory of the users. It makes it difficult for people to remember what information belongs in a field, and to search for and fix errors. It also puts an extra burden on users with visual and cognitive impairments.

As we have seen, the difficulty is to keep the placeholder text out of sight when the user clicks on the field. Without labels, the user can not verify their work before submitting the form. You could easily forget what data you need to fill in the current field and if the previous ones are error free. The user would have to uncover the placeholder text by deleting the text in each field one by one to verify that its input matches the description.

Such an approach would not be comfortable even for users who move between fields by pressing the Tab key. They will not get used to analyzing the data in the next field before switching to it. Wildcard text that disappears when the cursor is placed in the form field irritates users navigating the keyboard.

Despite the disadvantages, there are cases in which the use of a label as a placeholder is quite appropriate. For example, for a newsletter subscription, we could only fill out one field, “Email.”

How to reduce the mental effort of a form

KEEP DISTANCE

A label and its field should be grouped visually so as not to confuse users. It must be clear which label belongs to which field. Pay attention to the distances, so that the assignment of the field names is clearly recognizable.

AUTO FOCUS ON THE FIRST INPUT FIELD

Autofocus leads the user to the starting point of the form. We recommend emphasizing the first field with a border color, background color, or both. To speed up the registration or purchase.

AVOID CAPITAL LABELS AS LABEL

Capitalized letters as labels are hard to read. Besides, NO ONE WANTS TO BE GIVEN!

Are buttons considered part of the UX of a form?

A button should cause users to perform an action. That’s why the Button design should always pay attention to recognizability and clarity. Think of your website or app as part of a conversation started by a busy user. The button plays a crucial role in this conversation.

THE BUTTON SHOULD EXPLAIN THE MEASURE

A good dialog box is not just asking users what action to take. It’s also about making each option as clear as possible. That’s why it’s so important to have a custom label for each option that acts as “just-in-time” help and gives users more confidence in choosing the right action.

Name the button to explain what it does instead of using a generic label (like “OK”). Whenever possible, use a verb instead of “Yes” or “OK” so that your buttons outside the explanatory text or title make sense. Note that your CTA should reflect the intent of the user. If it is registration, then name the button “Register”.

EMPHASIZE PRIMARY CTAS

The primary action associated with a form must carry a greater visual weight. Secondary actions should have the least visual weight to minimize the risk of error.

DESIGN BUTTONS

Activate the button only when all form fields are filled out. This can be a great way to help the user verify their data before sending it.

Is it possible to facilitate the completion of a web form?

ADD AUTO-FILL

Automating user input prevents errors by reducing the number of fields they must complete. Auto-Filling also helps filling forms 30% faster, according to the Google study. If the user is already registered with your service, please fill in his / her details in the relevant fields at check-out automatically. Also, note that you can automatically populate city and region text fields based on postal code or geolocation data. Do not forget to leave these fields available for editing to give users control.

MASKED INPUT FIELDS

This is a plugin that automatically formats a field. Such a solution goes well with dates, times, mobile numbers and more. This plugin makes it easy to fill in a web form.

BE INVENTIVE

For example, use the field length as an indication of the answer. This is useful for fields with a limited number of characters, such as: For example, the mobile phone field, the address, and the postal code.

AVOID DROPDOWN BUTTONS WITH ONLY 2 OR 3 OPTIONS

With just a few options, radio buttons are the better way to get your message across quickly and not slow the user down. Everything is immediately clear without additional clicks.

VALIDATE Web FORMS

Timely input validation is critical. Highlight the fields where errors were found and explain why the field was not validated.

Explain all the requirements for the data and their format. If the password of a user must contain six characters, mention this. Do not let the users guess. Make the process handy and understandable.

ADD COMFORT

This could be a password preview or other opportunity for users to review the data before sending. If your service has special password requirements, notify users about it before completing the field.

Incidentally, when filling out the password field, the user is quite often confronted with a known problem: the Caps Lock key. We recommend that you inform users by holding down the Caps Lock key to prevent them from dropping off the form and causing a negative reaction to your site.

ENABLE LOGIN VIA SOCIAL MEDIA

Social sign-in could be a really powerful tool; It saves users a lot of time. When designing your web form and offering fast social media registration, do not forget to reassure customers of the security of their social media data and explain exactly what information you need. Inform users that you will not use their data without permission. To enhance the feeling of security, you can add a lock symbol.

Does the user’s location affect the UX of a web form?

Yes, be aware of local differences. If a service is designed for two or more local markets (such as the US, Europe and Asia), you should be aware of the differences between them. It should come as no surprise that names of fields, notes, entries and more vary by region.

Here are some things to look out for:

  • Each country has its own number format, which is why input masks should vary.
  • The US says ZIP code, while in Europe it’s the postcode.
  • The field “State” is only needed in the USA.

Conclusion

As we can see, designing a good form of registration is difficult. UX design is important. In order to improve UX, the designer has to put himself in the position of the user. Do not risk users being disappointed or wasting valuable time figuring out how your form works. Make your form clear from the start and place visible labels outside empty form fields. Forms are an important part of many conversion goals. Make sure your users can reach them quickly and accurately.

    • This field is for validation purposes and should be left unchanged.

    Sie erhalten die Studie als Link zugesendet