Almost every website has some sort of web form on it, and it's often the lead method for whatever type of conversions that website strives for. For blogs, it may be a comment or contact form, for a web designer, it would be a project request form. For any type of membership based sites, it would be registration forms, login forms, and etc. Having a great design that helps with usability in web forms is essential for stronger conversion rates and a user experience that will bring in repeat visitors.
In this article we're going to talk about web form usability, but from merely a design standpoint. We'll discuss which design considerations can ease a user's experience, and increase conversions for the overall website.
Usability Design Considerations for Web Forms
Space, Padding, and Layout
White space within web forms can help the user navigate through the form and allow them to easily recognize labels, input elements, and other features such as descriptions. Having a separation between elements via white space is important for users to be able to quickly see what type of information needs to be put in and where, and in what format.
Always use proper spacing via padding or margins between different input elements, as well as adequate spacing between related elements, such as a label and its input field. Just like with standard typography, adhering form elements to their baseline rhythm can increase a web form's aesthetics, as well as keep proportion for finding sections easily. Remember white space wherever its needed — especially in multi-column or otherwise more complex web forms.
Spacing between elements can also help proximity and meaning. Form fields often have descriptions that may explain to the user what data is to be entered, or in which format. Fields will have labels as well that identify what data goes where, and spacing and proximity should help define naturally what information is required. Using enough spacing should allow a user to recognize instantaneously the purpose of form fields.
Icons, Typography, and Other Design Details
Awesome typography, icons, and other design elements can be a great way to make a web form look good, but also draw the eye to important features and create correct hierarchy. Graphical elements can be used to separate various sections of the overall form, or icons can be used to provide meaning to the input sections. Most often we see icons as a lead to a "Help" tool tip or something similar.
Typography can also lead to a better design, and specifically in terms of usability, can be used to separate headings from labels, and so on. It can create hierarchy within the typography of a web form. The more interesting the font, the more likely it will draw hierarchy.
Of course, even for the simplest of web forms, icons and additional design elements can merely add personality as well, such as in the design above.
Simplicity & Ease of Use
Better usability in web forms leads to more conversions. Simplicity is a long-standing method for increasing usability for many web elements, not just web forms. So, always think: 'how can I make this web form simpler?' You may first think of taking out all unnecessary fields, which is a great start. However, think both visually and in terms of usability too. For example, if you require a first and last name field, put them on the same line, sharing the same horizontal space with other fields, and also making it easier when tabbing.
Other examples may be including drop downs where necessary, DatePickers for dates, and thinking of formats in those pre-defined areas of being tab and type friendly. Does your user have to fill out their state? Provide the predefined data with both the full state name and abbreviation. Most users will try to type in the abbreviation as a shortcut (IA - Iowa, MN - Minnesota, etc.).
These are just a couple of examples to get started. To ensure the most simplistic approach and easiest approach for users, first define what fields are absolutely necessary for this particular form. (Can you break it up or have the user fill in some data later? Is all the data required, or can it be optional?) Then, run through the form yourself a few times, and find ways in which the process can be made quicker.
Highlight Focus on Validation Error
One obvious design "rule" can be to use color to bring the correct type of attention to a form field. Red will indicate an error, yellow can indicate a warning or simply a side piece of content you'll want your user to take note of (maybe a legal description after selecting a particular option, for example). Green of course means go — it can notify progress, such as a username being unique and therefore possible to use, or success after a registration or form step completed.
Pay attention to good design when it comes to correcting users, a positive design in this area can create an overall positive experience. Let the user find and fix any errors fast, and use positive markers along the way to keep them going.
Form Steps and Progress
Some web forms just have to be long. This may be during something like an initial registration, detailed quote form, or perhaps a profile setup where extra user information is needed. As long as the web form design is user-friendly in every other design area, this shouldn't be a problem. Many web forms will use steps and let the user know their progress in order to keep them motivated through the process.
Form steps can be defined all on one page, or can be set up to go through different pages. Whether a web form uses a multi-page setup or not depends really on the length. If there are simply two or three sections that are each short themselves, then having several pages may just make the process too long for the user. However, if there are several sections with very detailed information (maybe you need to take a lot of personal information down, and then have the user write out longer descriptions like bios), then a multi-page setup may be best.
A form "progress bar" can come with many creative approaches. You can use percentages, or simply lay out all the steps in useful icons and highlight what has been completed, and where they currently are. When using progress, it can be a great idea to let the user jump around — either ahead or backwards in the form steps.
Get creative with this sort of navigation. A user may be more apt to finish a form if they can choose when they fill out their bio, or if they can skip a step for now. This is especially useful for data that they may need to reference later, such as getting their driver's license number, or finding another person's information (e.g. many financial type of websites may require beneficiary information).
Primary and Secondary Buttons
The very last step for any web form is, of course, to submit the data. Many designers may not think much about the standard submit form, other than that it matches the design. UI designers think differently though. The submit button, whether it's "Join Now", "Submit Application", or "Request a Quote", should be the primary button visually. Secondary options may be canceling or resetting a web form, or going back to a previous page.
Within web form design there are trends, best practices, and qualifications for a great user experience, just as there are with every other type of web element. Web forms need great design, and any area of a website where a user would be putting in sensitive data should look professional and well put together. Between purely aesthetics and design for usability, there are a number of elements that can improve web forms.
What additional trends or best practices have you noticed in today's web forms? How can the user experience of web forms be improved through design alone?