We have a user config set up application where two steps need to happen and this is making the flow of screens quite voluminous and cumbersome for users.
When a user is "Enable"d, the card for that user expands and shows the options.
When the user is set up and completed, the card for that user then shows clearly that the user is setup. Others look like they're still in the non-enabled default mode:
The challenge with this one-by-one set up for each user at a time is that it feels laborious, monotonous. So as a time saver we're thinking of a "copy settings" type functionality. See example for user 3 below:
Clicking on that "prefill" option would pre-set User 3 to whatever selections had been made for User 2 above. However this is complex in both development terms and also tiresome for the user even with this little time-saver. There are other challenges -- what if a user setups User 2, then while setting User 3, cancels (Save/Cancel is not shown in this quick and dirty mockup), then DISABLES User 2, then opens up User 3 again. This time there's no "prefill" option unless we force a saved in-memory setup from the first user regardless of whether that user is now enabled or disabled. And so on.
1. Alternative 1: Make users into a dropdown
As shown below. This way, at least there will be less confusing jumping up and down the screen with collapse/expand of each user card. Instead the dropdown (not an HTML select box, just something that looks like a more modern DIV of a "dropdown") will look like cards. As we pick a user, the settings below remain the same, in the exact same location, but change according to whether the user is enabled or not.
This may be visually cleaner especially on smaller screens, but the issue with this approach is that the user will first need to be enabled, which would happen below the dropdown box itself. Perhaps in the same area as the actual configs? A sample of how this would work:
Option 2: Make users tabs
Instead of a dropdown, we could potentially make users tabs. This allows us some ease of 'selecting' users quickly, and the settings appear for users in the same place on the right.
Here's an animated GIF of this option. The animation repeats...
Option 3: Good old Spreadsheet style settings
This seems to be the simplest, but the challenge will be horizontal scroll on bigger screens, and on smaller screens we still need to solve the resolution..
Which of these options is the most usable for complex user config setup such as this? Spreadsheet style seems visually the easiest to us if the separation of each user is clean, but it does have the same info repeated. The repetition in some ways helps avoid the "Copy another user" functionality, but presents the screen scrolling challenge. The tabs on the left have some visual simpicity, but will present presentation challenge on small screens, or if we have, say, 9 users. The dropdown works, but is a two-step setup of first enabling a user and then configuring.
Would appreciate any pointers on how others have solved patterns of this three to four dimensional nature (each user -> enabled/disabled -> each setting type -> within each type each option).