User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
In a web app I have a table with some editable data (e.g. inputs, checkboxes), e.g. theKnot
I'd like to have an add row functionality with option to add multiple rows at once. What would be the best design for this? An input and a button reading "add guests"? How would you add one guest, then? Or is there a pattern for this?
I was also thinking by adding new row via hotkey (e.g. Ctrl + Shift + Enter), but it's not that discoverable though.
If your user research shows that adding multiple rows is common, then an “Add Guests…” button can open a dialog or mini-litebox for the user to enter the number of rows, with a default number pre-entered (could be 1). However, in many applications, users almost always only need to add one row at a time. Making these users go through a dialog to accept the default of 1 can end up taking more time on average across all users than making other users click “Add Guest” multiple times to add as many rows as they need. Get a distribution of the number of rows added, and you can calculate which design is less effort for the users on average.
Assuming users usually only add one row at a time, and that it’s always feasible (if not easy) to get multiple rows by adding one row at a time, you can still, as a convenience for users, provide an add-multiple-rows functionality in addition to the “Add Guest” button. Because it is rarely used and not strictly required to get the task done, such functionality can be more of an expert shortcut to adding each row one at a time and doesn’t need to be as discoverable:
Split button. You can make the Add Guest button a split button with a drop down arrow beside it that lists common numbers of rows to add (probably low numbers like 2, 3, 4, and 5 are sufficient). The last option in the drop down would be “More…” which opens a dialog for the user to enter an arbitrary number (useful for edge cases where the user needs to add a very large number). This is the most discoverable option.
Row select. If you support multi-selection of existing rows (you probably should), you can have the Add Guest button add as many rows as the user has selected. For example, after the user has added four rows one at a time, the user can select all four rows and click Add Guest to get a total of eight rows. This is fairly common in desktop apps (e.g., MS Word), so it may be more discoverable than you might think, depending on your users. A usability test can tell you if it is for your users.
Typomatic. If the user clicks and holds the Add Guest button (doesn’t lift the finger or release the mouse button), the app can, after a brief delay, start adding rows (e.g., 2 per second) for as long as the user holds down the button, much like holding down on the scroll bar or keyboard key repeats the action. This is best when the user isn’t necessarily after a precise number of rows, and just wants “a bunch.” Deleting a blank row needs to be easy (one click with no verification), so users can quickly correct for overshooting. Discoverability isn't great; users may need training to learn about this "trick."
Expert activation. Alternatively, when the user clicks and holds the Add Guest button, a small box appears prompting the user to type the number of rows to add while holding the button down. There is no OK button; the app adds the entered number of rows when the user releases the button. This one may also need training.
Some of these methods can be combined in the same app.
Providing a hot key or accelerator to add a row is a good idea especially if your users regularly use the app. I personally endorse using the Insert key for this. Because an accelerator is an expert shortcut (has low discoverability, as you note), it should be in addition to the Add Guest button. In fact, you can label the button “Add Guest (Insert key)” to prompt users to use the accelerator.
"Add n rows" is the wrong solution for your problem.
Consider the use cases:
If the user is adding one guest, "add guest" is sufficient (and ideal). This is the most basic, common operation; you should therefore not complicate it by turning it into a split-button or adding popup dialogs or borrowed spreadsheet idioms, or forcing it to compete for user attention with other "add" buttons.)
Power-user functionality should not interfere with mere-human-user functionality.
If the user is adding multiple guests, "add guest" after the data entry for each one is also sufficient for most cases (assuming it's a quick client-side operation to draw another row of input fields, not a roundtrip to the server.) Fill in a row, add a row, fill in the next row, etc. (also see footnote below)
"Add n guests" is only useful for the user who needs to add a lot of guests at once -- so many that clicking the 'add guest' button n times is an excessive amount of work. But it's not very useful for those users either, because they still have to type in the information for all n users individually -- which is a lot more work than just clicking the 'add row' button was. "Add n guests" makes the easy part a tiny bit easier, but leaves the laborious part just as laborious. Not much of an improvement; all you've done is saved them n-1 clicks. Certainly not enough of an improvement to justify the user interface complications it introduces.
If they have that much data to enter, they probably already have it sitting in a text file (or can likely more easily generate it that way than in a bunch of form fields.) So what would actually save them work is "Import guest list" or some similar bulk-add function. Let the user paste or upload a comma-separated or row-separated list of names, for example; parse that input in the browser and give them a chance to confirm or retry before adding the full set of rows to your table pre-filled with data.
This has the additional advantage of being recognizable and familiar, unlike many of the user-training-required or undiscoverable-hotkey suggestions you've received so far: "add" and "import" actions are common and straightforward.
Footnote: One small sop you could throw to the power-users is to have tab from the last input field in the last row automatically create a new row and place its first field into focus. Keyboard-focused users who habitually tab through form fields will discover this without necessarily even noticing that they've done so, and it'll be invisible and therefore undistracting to everyone else. Caveats with this technique: don't automatically create a second empty row if the one above it is still entirely blank (in case the user is accidentally holding down the tab key); silently ignore empty rows when storing data (in case the user accidentally created a new row they don't need.)
You could add a second button to "add X guests" (where X is a number that makes sense for your app, say 5 or 10). It won't be used a lot but might save time for users with long guest lists.
However, it might save you time to begin with just the "Add guest" button and later run some user studies to see if they even need/miss the functionality of adding multiple rows at once. (Then you can run further user studies to decide whether they need to add precise numbers or whether another button is enough.)
The insert table dropdown for Google Docs works pretty well. The input expands as you move your mouse down to include as many cells as you want. You effectively have a table that only allows one column.
