Over the past few decades, the internet has evolved into a refined engine of information transfer. Amid all of that change, the humble form has retained its role. The form has always been the skeleton key that unlocks a world of information with simple requests.
While the role hasn’t changed, designers have given forms many upgrades over the years that guide our users. Today’s forms allow users to uncover knowledge and opportunity with less headache and friction than users formerly encountered.
Listed below are a set of guidelines and examples that highlight logical adjustments you can make to elevate any form — regardless of the task it is meant for.
Simplify the Layout and Alignment
Source: newpragmatic.com
Few things are more frustrating for users than filling out forms. So rather than trying to come up with an innovative new trick to make your form stand out — stick to the basics and make it easy to complete.
The first (and best) move is to use a single-column design for your form. While this is better for everyone, it also makes the transition from mobile to desktop seamless.
Also, aligning your form labels above each form field makes it significantly easier for the user to provide you with the information you are seeking.
Group Related Information
Source: newpragmatic.com
In the same vein of the first step, the way you group information plays a crucial role in how users process the form. Some forms won’t require many groupings because they are short. However, when forms begin to ask things like address and credit card information, your user will appreciate it when you logically chunk fields together.
Break It Up and Show Progress
Source: newpragmatic.com
Some forms are long by default, and there won’t be much you can do to shorten the experience (foreign travel visa applications come to mind). For those instances, I encourage you to add more pages to your experience.
Specifically, breaking up your form into logical chunks and leveraging multiple pages for the completion of a form significantly lowers the cognitive load for users. While the movement of form fields to another page or pages is excellent, you still need to provide feedback to your user to ensure they have a handle on how long the form is.
Multi-page steppers, wizards, or progress bars are a necessity in mobile designs where space is always limited, but the approach has gained traction on traditional websites as well.
Optional Fields > Required Fields
Source: newpragmatic.com
There are often numerous fields that are required for the successful completion of a form. Rather than slapping an asterisk on each field you need, label the optional fields instead.
Think Beyond Text Fields
Source: newpragmatic.com
Many types of content are easier to collect by using something other than a traditional text field. Specifically, this is for data like dates, phone numbers, dropdowns, etc.
Additionally, when designing for mobile, the use of specific fields for numbers or dates will trigger different keyboard options. This alone makes form completion on a mobile device significantly easier.
Provide Inline Feedback
Source: newpragmatic.com
Almost everyone has missed a form field or entered the wrong information into a form before. This universally halts forward progress for the user. Generally, it is the feedback associated with the error that matters most in these cases. Far too often, the user is presented with a vague ‘something’s wrong’ bit of feedback that can drive a user crazy. A far better experience for the user is to provide specific feedback pointing to the error in question so that it can be addressed. Remember, good microcopy can improve any experience.
Don’t Allow Submission Until the Form is Complete
Source: newpragmatic.coms
The easiest way to trigger an error is to submit an incomplete form, but a well-designed form shouldn’t allow submission until all required form fields have been completed. By using inline form field validation in addition to removing the ability to use the submit button until the form is completed, you can avoid the accidental submission issue altogether.
Associated Exercises
| Name | Section |
|---|---|
| Form Design | Interface Design |
| Information Design | Interface Design |