Inspiration

Designing a form? Avoid these 6 common mistakes

Forms function at a crucial part of a user’s journey—sign ups, registration and check out. User friendly form designs are efficient and easy to work with to speed your user to their end goal. It’s all about creating forms that flow well through timely and succinct messaging to create a conversation with your user rather than the feeling of completing boring paperwork.

To avoid building forms that leave your users frustrated and confused, remember to avoid these six common mistakes in form design:

1. Lack of guidance for mistakes

Provide guidance information to clarify why a form entry isn’t correct. If possible, provide feedback in real time so the user does not have to complete a form and hit submit before being informed of a mistake.

Great forms specify any details about an entry that may cause confusion. They provide in-context, specific and actionable feedback to ease the process for a correct entry. Avoid only using color to indicate error. Rather provide contextual guidance to correct the error by the form field where it occurs.

2. Ambiguous spacing

Follow Gestalt’s principle of proximity—when elements are placed close together. They tend to be perceived as a group. Likewise, the proximity between labels and form entries should be close so they can be perceived as groups. Placement of the label depends on length of the full form.

You want to make sure your fields are quick to scan to appear less overwhelming. Both top aligned and infield labels are faster to scan than left aligned labels. Consider adding white space to create chunks of information in a longer form.

3. Lack of sequencing

Apply a logical sequence when asking for information in a form. Having questions in an intuitive sequence allows users to predict what they may be asked next. For example, contact information should flow from a user’s name and address and a checkout form should flow from the details, order summary, payment and confirmation.

For longer forms, break up logical sections and show progress on the form to give more context for the user.

4. Multiple columns

Creating multiple columns disrupts a user’s flow of reading from top to bottom, left to right. Avoid having multiple columns in forms unless the entries are logically related.

5. Disappearing labels

While infield labels may be quick to scan, they leave the user having to struggle to remember what the entry captures in the first place.

Don’t hide important labels for the sake of space and don’t make assumptions that the user will remember your prompt. By spelling out what’s expected in each field (and keeping it there), you can reduce mistakes caused by poor form design.

6. Overcomplicating

Only ask for crucial details in your form. Most users don’t have patience for a long form and may find it easy to drop off if their registration or checkout process is lengthy. Depending on the device being used to (ex. Mobile keyboard vs. Desktop)—consider reducing the user’s manual input to aid the process and reduce mistakes. Make sure elements of your form is convenient and touch friendly for the variety of devices that may be used during form entry.

Conclusion

Sometimes having too much information on one form may be overwhelming or just distracting for a user. Consider reducing the visual clutter on the page but treating each form entry as a question/answer, or separating the form into several pages if needed. That way, the user can focus on each question/set of questions and complete the form in an efficient manner.

Design your form in a way so that it is easy to read and understand through proper spacing, formatting and messaging to guide users toward completion.

 

Featured image: Sign in/sign up form


Joanna Ngai

About the Author Joanna Ngai

Joanna Ngai is a UX Designer at Microsoft and frequently writes about her thoughts on design. You can follow her writing on Medium.