1

I have a screen where the user can select between 3 options. These are multi-selectable. However, each option has specific settings (minimum 3, maximum 8) for it. How should this be displayed?

I feel like modals could solve this but I'm unsure if modals are good in general. Are there any other patterns for such cases?

Is adding them one below the other a good idea? input fields .

These are for an RBAC UI. X,Y,Z can be thought of different features that a user can choose to have access to. However, this pattern will be used for more than just choosing b/w features.
There are many other fields that need to be disclosed progressively. Eg, If a user chooses their country as United States, their form for the rest of the configuration will be different from the form had they chosen say, India. And in some cases, they might be able to choose both US and India, in which case, forms for both need to be displayed. What I'm confused about is how to handle all these progressive disclosures in a consistent pattern. Also, this is for a Desktop only UI.

  • 1
    My gut reaction (without further context) would be to show either X, or Y, or Z (i.e. a one-at-a-time select or tab-like display). Showing them stacked would probably seem awkward (e.g. having to scroll down to get to Z). Of course, you may have a situation where stacking makes sense: perhaps edit in more detail if you think this is the case. – TripeHound Aug 6 at 12:20
  • What is the context, what are the settings? Could you separate that in steps? Are some settings same for all three options? Also within each settings how much field / content do you have (regarding mobile visibility and to stay in screen) – xul Aug 6 at 12:21
  • @TripeHound Added some more context. – Ashwin Nepal Aug 7 at 6:03
2

I agree, Ashwin, that modal dialog boxes would be annoying.

Generally, I see two patterns that might work for you here, depending on whether it's useful to the user to see all settings for the options x, y, z at the same time, or if it's OK that they only see one set based on the selection.

For the former, what Daniellillo shows is a solid pattern. A vertical-layout variant of that can be found in Safari's preferences:

enter image description here

In this setup, though, it might be tricky to reflect whether any required fields have been filled out, or not. Especially if you don't have any locking functions in place that, say, require filling out all settings when (re-)activating x, y, or z. (That kind of rigidity may annoy users, too, though, if they can't freely fill out different forms in the order they prefer.)

The other pattern would be to follow the same overall layout as in the image above, but in a way that shows x, y, and z with their respective sub-settings. I.e., you'd have a row for each of the three, with what you show as rectangles placed on the left of that row, and the sub-settings to the right next to it.

Whatever approach you end up using, I recommend that you persist any data that the user has entered, so that, if they de-activate any of the x, y, or z boxes, they don't lose any data, especially if they did so inadvertently.

0

When the next button is clicked there's no need to keep the info in the same filling area than the one to be filled by the user. You can recover the info as a text under the button:

enter image description here

0

When X is clicked, and Y is click, X should hide ?

It can be a more transparent and clear solution and doesn't cause diffraction.

When there are many elements, I recommend dividing rows and columns into even numbers with many divisors (12,4,2) - it will be easier to responsive design.

0

This might be a good use case for a more complex card/tile/panel UI element, where you can incorporate some actions/behaviours in clickable buttons (i.e. select/deselect) and allow the container element to expand when it is in a selected state to enter in the parameters (see example in Material Design Card UI element)

However, I think it depends on what the rest of the user interface looks like, how this section/page relates to the rest of the application, and how much information is contained within each of the three options.

You will need to take all of these things into consideration, and hopefully it will help you make an informed design decision that you can then test with users.

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.