Error getting theme layout

Eight Web Form Design Best Practices

Posted @ 10:21 am by Yusuf Asgerally | Category: Technology, User Experience | 1 Comment

By the SolutionSet User Experience Team

Filling in a form is a task we deal with every day as web users.  We designers revel in designing forms that create a seamless experience for the user. At SolutionSet, our user experience team has 15 years of experience designing and testing effective and usable interactive forms for clients. Our experience ranges from refining the sign up form to simplifying the complex with simple navigation. Through the years we have seen the good, the bad, and ugly and have strove to find the best way to ensure that web users can understand what information is being asked, what they need to provide, and the best format to provide it in.

This article follows up on our previous post on redesigning the postal address form with eight web form design best practices.

Sample top down form with ajax on state highlighting.

When creating a form, designers must be aware that every single placement of data is crucial for overall efficiency.  It’s crucial to understand the type of information that is being collected and be able to design for ease of entry. On the system side, it’s about getting the right information and preventing errors. On the user side, it’s about a simple way to enter and submit data without having to think too much about what is expected.

Following are eight guidelines that SolutionSet follows when designing intuitive forms for a web user interface. We base these guidelines off of our own work and experts like Luke Wroblewski (LINK http://www.lukew.com/resources/articles/WebForms_LukeW.pdf

We have also shared our SolutionSet forms best practices Visio stencil that you can use. The download link is available at the end of the post.

1. Field Label Alignment

Labeling is all about comprehension and ease of reading. Filed label copy should be in the user’s language or in commonly accepted nomenclature like “State.”  Eye-tracking studies show that top-aligned labels mean quicker reading and comprehension. Therefore, field labels should be top-aligned as a practice to provide a neat, scannable form. The exception is for new or learned terminology. In that case the labels can be right-aligned next to the fields to ensure reading vs. scanning behavior.

Examples of how to correctly align your field labels

2. Required and Optional Fields

Forms on the web handle this simple guideline in a variety of ways. It comes down to answering the question: Are most of my fields required or option? If all fields are required, then include copy that all fields are required and do not individually label the fields with an asterisk, a habit commonly seen on Web forms.  If most fields are required and some optional, then we have found it often better to label optional fields with an (optional) label.  If there is an equal mix of required and optional, then label the required fields with an asterisk to prevent visual clutter.

The exception to this guideline is on lead generation forms. It is recommended to have only required fields on the lead generation form and then on the confirmation page have the optional forms. The rationale behind this design is that the user has already invested time and effort in the form by providing you with required information, and is more likely to put in the additional effort needed to complete the lead capture flow. We always recommend A/B testing for all fields on one form vs. the recommended split and see which one generates the most leads for your intended target audience.

Marking only optional fields when a majority of the form fields are required

3. Field Length

Users and designers want a neat, clean page, but best practices show that field length should reflect the data required to allow users to understand the format of information required. Not to worry – the exception for this is commonly used fields like name or address. These field lengths can be made equal to accomplish an attractive visual design.

Example of using smart field length for form fields

4. Action Buttons

Once a user fills out the entry fields, the next step action (primary action) and secondary action/exit path should be clear. Primary action buttons should be left-aligned with the fields at the bottom of the form so a user can intuit action as the proper next step. Secondary actions should be visually treated differently to the primary action. We have found that treating the secondary action as a link works very well as long as it is displayed in-line with the button to ensure the user sees the relationship between the two options.

The exception to this placement is in a wizard or sequential form. In these scenarios, the “next” button can be placed on the right to indicate sequence. For example, have the primary call to action take shape of an actual button, whereas the secondary call to action, will be placed adjacent to the primary button, but in simple text, thus creating appropriate visual hierarchy.

Examples of Action Buttons

5. Help & Tips

Help and tip information aid a user in filling in the form and provide a quick easy way for users to fill in the form correctly. For example, if a user has to input their checking account number, when they click on the input box for checking account number, a help graphic can populate on the side bar that will inform the user where to find their checking account number.

Visually, the help content should be in-line with the form fields. It can be dynamic upon cursor in the field or on the form at page load depending on the amount of information/help required. The tips and help can be dynamically populated when the user selects a specified input box that contains a help or tip label.

Pre-population also helps a user understand what information is required for a field. Data can be pre-populated if a user accesses an existing record. For a new form, the fields should be blank. For controls, the choice should be defaulted to the first choice in the list.

Example of help tips

6. Tab Order

Indicate tab order of fields in wireframe annotations. The guideline for tabbing order is top-left to right-bottom in a Z formation. The only way to make sure tab order is right is to test it.

7. Error Messages

Ideally, a form should present enough information and allow flexible entry to prevent errors. Errors should be presented inline, in red, and with the solution to allow a user to recognize the correct input format and recommended content. The correctly-entered fields should remain populated and the fields with an error should be cleared.

Forms focused on these guidelines and the overall user task will result in form completion, which on the web means sales, registration, and conversion activities. Making sure a web form follows these tried and true best practices means a satisfied user and client.

Example of inline Ajax validation

Example of submitted form validation

8. Formatting of Data

One of the most confusing elements of a form that we have seen is when users are asked to enter information in a particular format that might be different from how the user might usually visualize the data, e.g. when a form asks a user to enter their phone number in a particular format like (123) 456-7890. This forces the user to spend additional time pre-formatting their data in their mind and has been observed to create frustration in the user.

While the form should provide enough general information to the user like asking them to include area code or country code for international numbers, the user should be allowed to enter their number any way they want. It only takes a few lines of code to reformat the data entered by the user to whichever format you need it to be in for your purposes.

Another practice that we recommend staying away from is splitting a form field up (e.g.: splitting a telephone number field into 3 smaller fields for area code, middle 3 digits and the last 4 digits). This hugely increases the level of effort that the user needs to put into completing the field. Fancy auto advancing scripts only aid to create confusion and we have observed countless instances where users automatically press the Tab key to go to the next field and the script also auto advances the users, and the user ends up entering the wrong data in the wrong field.

When in doubt, keeping it simple is a good way to go.

 

One thought on “Eight Web Form Design Best Practices

  1. Tim says:

    Good article. Although this reply form is violating numbers 1 & 2 :-)

Leave a reply

Error getting theme layout