Making forms more user-friendly

Practical tips for designing simple and inclusive forms for the web.

Multi-step form by Flowbase

I was recently working on creating a better form experience for a project at work when it dawned on me that I had no idea what separated a good form from a bad one. Do I design a multi-step or a single-page form? Should I use placeholder text or not? How do I make my forms more inclusive?

Almost every meaningful interaction that happens on the web — to sign up a new subscriber, sell a product or service, initiate customer support or get feedback — is achieved via forms. So while they may not be the most exciting element to design, good form design is an extremely valuable skill to possess.

After going through a few different resources I was able to compile a shortlist of the best practices that I found the most effective. However, keep in mind that forms are highly contextual elements — and exceptions to best practices are often required.

Before we begin, let’s quickly cover the five main components of a form:

• Structure — the layout of the form and the order of the individual fields.
• Input fields — interface elements such as text boxes, radio buttons or checkboxes.
• Field labels — Descriptions for the corresponding input field.