Form Empathy: Use One Input for Name Fields

Published July 7, 2016 by Jason Ferrell

Good form design reduces required inputs whenever possible. A very simple idea that proves this point involves forms that require a user's name information.

Typical Approach

Too often, web forms ask for the user's first and last name and, even worse, a third field for a middle name. Numerous inputs on a form makes the process seem very laborious and reduces the chances of people completing the form.

When a person is completing a form on a touch screen device, the process is even more cumbersome as a user taps then types from field to field. Now we're only talking about 2 or 3 form inputs here, but when combined with other inputs on a form things can get messy quick.

A Better Way

A more empathetic design combines the mulitiple name inputs into a single full name input. If we need to store the name information separately in the back-end system, for some reason, that can easily be accomplished with some server-side logic to split the name data.

Overview

Combining multiple name inputs on forms make it easier to complete the form, which leads to increased form conversions and shows that you value the user's time. Doing so can only increase brand loyalty in the long run, so why not take the time to put some additional thought into form designs?