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:

enter image description here Large image link

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

  1. 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).

  2. 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.


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:

vscode error pattern

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.

  • 1
    Thanks. We're leaning towards the inline approach #3, and that VSCode validation pattern is something we could try to use. I think bulk add of rows would work better with #3 than #1, didn't give much thought to how it might work for #1 as we've been focusing just on single add, but I agree it's a point worth considering, especially as we'd like the solution to be an app-wide pattern which is flexible. – SomeDeveloper Jun 20 '20 at 9:16

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.

  • I experimented with this approach at an earlier point and found that the table is less useful and doesn't look great when it's condensed (especially if there are many columns in the table or if the Add User section takes significant space). – SomeDeveloper Jun 20 '20 at 9:02

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.

  • The answer in ux.stackexchange.com/questions/35385/… gives a good summary of why we think we ought to avoid too many modals (we would still use them in places such as requiring the user's confirmation of a delete action). "The user won't have to shift her gaze. The rest of the table isn't blocked and can be used as reference when filling in the values. The fields are automatically mapped to their respective columns. With the model dialog you need a host of labels that the user needs to mentally map back to the table" – SomeDeveloper Jun 20 '20 at 9:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.