Forms are a great element that can help site visitors get in touch with your company. However, it’s important that your forms deliver a good user experience, otherwise, you’re giving the user a chance to click away from your site and fill out the competitor’s form. Today, we’re going to show you how to design great forms with 6 Guidelines for Perfect Form Design, so sit down, grab some popcorn, and enjoy as we show you the art of building beautiful, usable forms.
1. Build Great Input Fields
A form, essentially, is just a collection of input fields. Input fields can vary based upon the type of input you require from the user, including plain text, email addresses, and phone numbers, to name a few. When designing forms, great input field design is essential. Here are a few tips on how to design input fields:
- Input fields should have labels describing what type of input you require from the user, and these should always be placed above the field itself.
- Avoid uppercase when possible, as it makes the text difficult to read.
- Use placeholders inside the field to let the user know how to write their response.
- Use limiters to make the text easier to read, shown in the above image.
- Resize your fields according to the type of input they accept. For example, a Zip Code field shouldn’t be 80 characters wide when it only requires 5 characters.
2. Deliver Good User Experience
Your form should deliver the best, most enjoyable experience for users, and you should try to eliminate any possibilities of confusion. If the user is easily confused by your form, you’re giving them a chance to click away and use a competitor’s contact form. Here are a few tips on how to build a better user experience in your forms.
- Add help text next to the labels where users might get more confused.
- Add a focus state around the input fields to show the user which one is selected.
- Highlight and explain errors, so the user can understand what’s going wrong, and how to fix it.
3. Use a Single Column Structure
When building forms, make sure to use a single-column structure. When a person is reading your page, their eyes start at the top of the page and move toward the bottom of the page, creating a visual momentum. By placing forms on top of each other, you make it easier for the user to read and understand what the form is asking for.
Consider placing your input fields as inline-block elements so that they stack above each other.
4. Consolidate Input Fields
Attention spans are at an all-time low, and people don’t want to press more buttons than they have to. By consolidating forms, you reduce the number of actions the user has to take in order to provide input. For example, a ‘First Name’ and ‘Last Name’ field can be consolidated into a ‘Full Name’ field.
5. Group Related Sections
If your form is longer than most, consider grouping sections of the form that are related to each other and marking them with headings. Consider a payment form, which asks for quite a bit of input (name, address, phone, card details, shipping address, etc). You can group information on this form into personal information, billing information, and payment information, so the user knows the context of the information they’ll be inputting in the section.
6. Include Proper Spacing
Form spacing is a critical element that provides clarity and context to the user. Group your input fields and labels together, say with 4px to 8px of spacing between. Group those together with a slightly higher margin between them, say 12px to 16px. Group sections together with headings, as shown in the graphic above.
Element Six Design is an Oklahoma City web design agency with a mission to modernize the web. For more information, contact us here and we’ll reply to you within 24 hours.