Form Design: When to Use Multi-Cell Input Fields

There was a number of comments in Twitter…

Although most input fields consist of a single cell, such as an email address, some fields (which are essentially a single value) can be split into multiple cells, such as a bank code.

This is done to make it easier for users to check the entered answer in small chunks, or to help meet formatting requirements, such as an ID number.

While it can be useful to use multiple cells in an input field, in most cases it is unnecessary and has several disadvantages.

In this article, I ll explain why and show you how to help users validate their answers and meet formatting requirements without breaking the input field into multiple cells.

I ll also show you when it s actually beneficial to use multiple input fields.

The problem of input fields with multiple cells

1. They prevent users from easily pasting copied information

Using multiple cells in an input field makes it impossible for users to easily paste copied values.

JavaScript can be used to allow users to paste the copied value into multiple cells of the input field.

However, this solution is not always used. And in those cases where it is used, users may not realize that they are able to copy and paste information.

2. They require more effort to fill

It takes an effort to move from one input field to another. The need to remember where you are and correcting mistakes also increase the cognitive load.

This makes it difficult for a screen reader because the group label is read in conjunction with the cell labels in the input field.

Some sites use JavaScript to automatically move focus to the next input field after filling in the previous one. However, even if this seems like a good way to keep users from manually moving the focus, it is rather troublesome.

First, it can confuse the user, because focus doesn t work that way by default. Typically, the focus remains on the input field until the user decides to move on.

Second, focus often moves too early. The input field may be incomplete from the user s point of view.

For example, if a user accidentally typed in the wrong number, they would have to go back to manual input – something that automatic focus tried to avoid.

If you apply autofocus to one input field, then all these problems go away, because users can freely type or move back without shifting focus and losing context.

3. It can be difficult to make a meaningful label for them.

Writing labels for each cell in an input field can be challenging.

For example, the labels of individual cells in the input field for the bank code will look like “Digits 1 and 2”. It s not particularly helpful.

And there is not enough space for these labels, since fields consisting of several cells are usually small and placed close to each other to show that they are related.

You can visually hide the labels, but this will only solve the problem for sighted users – it still creates unnecessary noise for users using screen readers.

If you find it difficult to write a meaningful label, then you should make one input field.

Bad reasons to use multi-cell input fields and what to choose instead

There are 2 usability problems that can be solved by using a multi-cell input field. However, you can work around these problems in other ways.

1. To help users avoid mistakes

Several cells in the input field are used to help users avoid mistakes.

For example, imagine that the user needs to enter a 10-digit identification number in the format 3-3-4, separated by dashes.

Using multiple cells encourages the user to eliminate unnecessary formatting such as spaces or dashes. This reduces the likelihood of error messages such as “The number must be in the format 123-123-1234”.

But it s better to forgive such mistakes by ignoring extra spaces or dashes, which allows users to enter values ​​the way they like.

2. To help users check the entered answers

Another common reason for using multi-cell input fields is to help users read the information they enter so that they can check for errors.

But you can help users without using multi-cell input fields, just reproduce the answer as snippets either below the field or on the answer check page.

Input masks cause problems

Input masks are designed to help users avoid mistakes and validate their answers.

They work by automatically placing characters in input fields as the user types text, such as inserting a dash after the user enters the first 3 digits of the ID number.

But I don t recommend using them because they can confuse users when a new character appears (either visually or aloud in a screen reader) and they restrict users to a specific format.

Shape expert Caroline Jarrett also observed how users struggle to understand why the information they entered changed when they thought the text they entered was the correct answer…

When to use multi-cell input fields

Even though the use of multi-cell input fields should be a last resort, that doesn t mean they shouldn t be used at all.

You should use them if one field makes it difficult to answer a question or does not allow you to confirm an answer.

Dates are a good example. The format for writing the date by the user depends on where he comes from – 10/9/12 can mean September 10 or October 9 (provided that the year will always be at the end).

Using a multi-cell input field disambiguates for both the user and the server performing validation.

Output

While it may sometimes be necessary to use a multi-cell input field, it has several disadvantages.

If you need to reproduce the answer in parts, do it below the field or separately on the page for checking answers.

Usually, input fields with multiple cells are completely unnecessary. Better to give control to users and forgive simple formatting mistakes.

thanks Emma frith for editing the article.