Megan Leigh McDonald

As a veteran web designer, I’ve created many a form in my day, but recently really took stock of what I’ve learned over the years.  I wanted to describe a set of standards I think sum up what a user should see when signing up for an account, changing important personal account information, or other form related task. After digging around for some advice and looking to previous projects, my standards for forms evolved into something a user would consider quick and easy. The overall impact of both visual and interaction elements, fired me up enough to break the elements down.

Form Modes

A form is comprised not just of editable input fields or drop-downs, but also of modes, states or ‘cases’.  A form could be a form a user fills out for the first time to add a piece of personal account information. Or a form could be used to edit previously saved information. And lastly, it could be used to review and confirm recently edited or added information. These three states should be recognizably different from one another.

Input Mode

Adding data for the first time can be a painstaking process but there are ways to make it easier and quicker on the user. By stacking the labels and field forms, the user can tab through the fields, inputting the data one at a time. Calling out optional fields with a slightly different color signals to the user that all fields except those are required. Concise pieces of help text underneath the fields or as hover tool-tip links next to the label give critical help information to the user.

Review Mode

Getting a user through a confirmation page with the accurate information and into the conversion stream is the most important aspect of review mode. Clearly showing the previously edited or entered information as well as a way to change the information, to proceed or to cancel are very important. Using a left to right structure for the labels and form fields helps the user scan the information and discern if it’s correct or not. A ‘change’ or ‘edit’ link next to the information allows the user to either edit on another page or to expand an inline editing box. Once the changes are approved, the user can save or confirm and advance through the flow.

Edit Mode

A user’s primary need is to filter through the form fields and edit specific ones. In order to do that a left-right pattern enables the user to quickly scan the field names and find the fields that need to be edited. Help tips or tool-tip links as well as ‘optional’ field descriptions can be aligned with the label.

Error Cases

Errors need to be presented in an easy and quick way to signal the user when to revise information in an input or edit mode view of a form. With input mode, an icon as well as text can mark the specific field(s) that need attention. Using red text alone isn’t the best standard to include visually impaired users. For example, a color blind user will completely miss a field label that is red. Unless there is another way to signal to the user that there is an error, that user will more than likely get confused as to why they did not advance through the flow.

Conversion

When a user doesn’t advance through a flow, we lose ‘conversion’. This business term, at face value, suggests lost revenue or lost engagement with the product. As a User Experience Designer working for a business, I am charged with all kinds of goals like saving money on contacts, improving sales on sign-up forms, etc. But in the larger picture, my primary objective is to make the experience better for the user. In theory and more often than not, in practice, this works for the business as well. If ‘form follows function’,  then a well designed form or flow will allow the user to advance and complete it quickly and easily.