Need input on where to display an Add User section in relation to a Users table

Question

There are a few approaches being considered (open to other ideas too). In general, we're thinking to avoid the approach of using a modal/dialog with grayed out background, as the solution we go with may be used in many places throughout the app, and so don't want to overuse modals (too disruptive to user flow).

Approaches we're looking at:

1. Display the Add User section in a slide-over panel which will be displayed on top of the Users table (ag-grid based).

See rough GIF example:

_{Large image link}

This approach could be awkward as the height of the table and the Add User section would probably need to match.

2. Display the Add User section below the table (advantage being there would be more space available and we don't obscure the table when the section is being displayed).

3. Display a placeholder/temporary row in the table (top row), where the user can input the User fields and then hit save (which would be located in the far-right column).

For #3, a disadvantage could be that, for instance, there's less room to display validation messages to the user, such as "Name is not valid (must not contain ?:{}_+)". Although perhaps we could show such a validation message in a popover.

However, a potential advantage for #3 is that ag-grid supports inline editing, so once the new User row is added, we could easily allow the user to edit the User row fields inline and again hit save/update button in far-right column.

Answer 1

Comment on Approach #3: The pattern of adding information inline is good, and for inline validation, typically, the row can become a bit bigger to fit it in. A pattern followed by VSCode looks like this:

Another pattern which is followed by JIRA (Atlassian) is that hovering on a table cell brings up a small dropdown triggered by an arrow, and a new table row can be added from there.

My question on seeing approach #1 is how would it scale when a user wants to add multiple rows? The side panel floating in could be overkill perhaps.

Answer 2

Page can be split into two columns(first column has all the content shown in image) and on clicking "Add User", a panel(second column) slides from right to left pushing the first column to squeezing the first column.

Answer 3

Use a modal

Not sure why you dislike modals. A modal allows the user to focus on the task at hand, in your case adding a new user. You won't have any weird layout issues as you say you have in the shared image.