Form Design: Multiple Inputs Versus One Input

Form Design: Multiple Inputs Versus One Input adamsilver.io3 days ago in #Design Love51

While most fields are made up of just one input, like an email address, some fields (that are essentially one value) could be split into multiple inputs, like a sort code. This is done to help users read back their answer more easily, in small chunks, or to help users meet the formatting requirements of something like a reference number. While using multiple inputs can be helpful, most of the time it’s completely unnecessary and it has a number of drawbacks. Here, I’ll explain why that is and I’ll show you how to help users check their answers and meet formatting requirements without using multiple inputs. And I’ll provide guidance about when it’s actually beneficial to use multiple inputs. # The problem with multiple inputs # 1. They stop users from pasting easily Left: pasting into a multi-input field means the value only ends up in first input and gets cropped. Right: pasting into a single input works appropriately. Using multiple inputs stops users from being able to paste values easily. JavaScript can be used to let users paste a value across multiple inputs. However, multiple-input fields are not always implemented in this way – even if they were, users may not realise that they’re able to do this. # 2. They require more effort to use It takes effort to move from input to input. Remembering where you are and fixing mistakes also increases cognitive load. Screen reader announcements are more frequent and verbose, because the group label is announced in combination with the individual input label. Some sites use JavaScript to automatically move focus to the next input once the previous input is complete. But even though this seems like a good way to save users from moving focus manually it’s really troublesome. Firstly, it can be disorientating because this is not how focus works by default. Normally, focus remains on the input until the user decides to move on. Secondly, a lot of the time focus moves too early. What is technically complete – say the first 2 numbers of a sort code – may not be complete from the user’s point of view. For example, if they typed the wrong number by accident, they‘d have to move back to the input manually – something that automatic focus was trying to avoid. If you make it one input then all these problems go away because they can type freely or move back without focus moving and losing context. # 3. They can be difficult to label meaningfully Left: a multi-input field with meaningless labels that are hard to lay out. Right: a single input field doesn’t need additional labels. Writing labels for each input can be challenging. For example, the individual inputs of a sort code would be something like ‘Digits 1 and 2’. This isn’t particularly useful. And there’s not enough room for these labels because fields that consist of multiple inputs tend to be small, to reflect the required length, and close together, to show they relate to each other. You could visually hide the labels but this only solves the problem for sighted users – it still creates unnecessary noise for screen reader users. If it’s a struggle to write a meaningful label, it should probably be one field anyway. # Bad reasons to use multiple inputs and what to do instead There are 2 usability issues which can be solved by using multiple inputs for one field.  » Read More

Like to keep reading?

This article first appeared on If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply