Best Practices for Designing Web Forms


Best Practices for Designing Web Forms

When I say web forms, what comes to your mind? Rows of input fields, select dropdowns, buttons? Do you enjoy filling forms? Or do they hinder your journey through websites?

Forms are everywhere. Every website has some sort of forms- sign up, checkout, travel schedulers are some common examples. The way most forms are implemented, users look at them as barriers that they have to jump over to reach their goals.

Inappropriate combination of form elements such as radio dropdowns, labels, and buttons slow users down and makes web experience apathetic. But when implemented with considerate and deliberate design choices, forms can elevate the whole experience of a website.

Wondering what the best practices for saving forms are? Stay with me as we descend into the world of forms. From setting up forms that visitors will love to solving form related pain points and implementing the right forms- we discuss everything.

Should Forms Be Boring?

Absolutely not! Forms as we know them have their root in traditional paper forms. That format has been transferred as such into web forms resulting in a lot of frustration. It's 2020- high time we did better than that!

The ultimate goal should be to get customers through the form in an absolute minimum amount of time while keeping them satisfied and meeting their expectations. Forms should be accessible and friendly, not intimidating and passive. To create such forms, UI UX design services should look into users’ experience while accessing forms. They need to understand the users’ mental model and come up with a design that helps users overcome obstacles.

User Behaviour Patterns

What frustrates users? What delights them? It is essential to know these things to design forms that users can identify with.

Some of the common user frustrations are

  • Tiny scrollable panes and click targets
  • Unexpected page reloads and content shift
  • Input fully cleared on error
  • Generic error messages
  • Disabled buttons, copy-paste feature
  • Identifying buses and crosswalks
  • Complex password requirements
  • Retyping complicated inputs
  • Unsupported back button

Some of the great user delighters are

  • Large checkboxes and radio boxes
  • Legible text, fast experience
  • Helpful error messages
  • Focus states and active states
  • Simple password requirements
  • Smart autocomplete
  • Persistent input even on refresh
  • Predictable tabbing and button actions
  • Easy edits and cancellations

How Do We Identify Web Forms

So how can we say if a form is good or bad? What are the considerations? There are no set principles for this. But three factors we can consider to identify the quality of web forms are speed, accessibility, and usability.

Every second a user spends on a website is precious. So it is essential to maximise the typing speed when the user is dealing with forms. On average, a user requires 400 ms to switch between keyboard and mouse and takes 1100 ms to point a cursor precisely. So when proper tabbing is implemented, users can fill forms faster with minimal use of the mouse as compared to when the tab order is random. Using the mouse to move between fields, a user takes 1900 ms to type a character whereas using tabs, it takes only 280-740 ms. So it is ideal to avoid switching between keyboard and mouse inputs as far as possible.

Auto complete is another important factor. It reduces the completion time by 30%. To identify the performance of a form, we can measure the completion time with a minimum number of tabs required. The complexity of form is the next thing to consider. It can be measured as the maximum number of input fields displayed per step. Complexity increases if the number of fields become more than 6 or 7.

How To Define Input Boundaries

It is necessary to define input boundaries so that there is no room for ambiguity in forms. Let us take an example of checkout forms and see some issues that users face. Account creation, confusing layout, poor autofill, data loss on refresh, privacy concerns are some of the most faced issues during checkout.

How can we improve the checkout forms? Some basic actions that can be taken are

  • Prefill inputs wherever possible
  • Use a single solid entity rather than separate entities, e.g. Full Name instead of First Name, Middle Name, and Last Name.
  • Provide minimum and maximum character length
  • Validate only if needed
  • Simplify country selection by grouping countries into “Frequently used” or “Alphabetical” list

How to Layout Input Elements

The best approach to input elements layout is to display one complex entity at a time. This makes it easier for users to fill in details and also to identify and rectify errors. Always try to maintain a single column. Multi-column layouts can be confusing and increase the chance of users missing certain fields. Also, long forms are discouraged as it would demand a lot of scrolling up and down.

Summing Up

Forms contain more than what they present at first sight. It is essential to spend time on designing forms because if the form is bad, it will have a tremendous impact on the conversion rate of websites. The practices that we discussed here are sure to come handy for every UI UX design company while designing websites/services as forms are omnipresent in all designs.