Multiple Items Settings

Question

Are there any known design guidelines for allowing users to apply the same settings to multiple items at the same time?

Also how can I make it clear which items have the similar/same settings?

As a quick example; I have a list of items where each item can have a set of settings independently set different to all other items. But users usually want to configure multiple items to have the same settings and then perhaps go back and pick just one of the items and configure with a slight variation.

I've got two designs in mind for this:

1. By showing the list of items, and when the user selects the item, a panel to the right of the list shows the settings for that item. But this doesn't quite work for the multiple item scenario. I could allow for a check box in the list to allow multiple items to be selected and then the settings panel combines all items settings at once. I don't think its clear which items have the same settings and when 2 selected items have different settings what should the panel show.

2. Make use of an accordion control to allow logical grouping of items and settings. But this also feels a bit clunky because it means the user would have to group items first before allowing them to set settings. This also makes for complicated workflow if the user wants to deviate one of the items settings (they would have to remove the item from the group and add to its own group). I think this also becomes a bit cumbersome if every item have its own unique setting.

Any advice on this design would be much appreciated.

PS. this will be implemented on a online web application.

Answer 1

It would be good to get a better idea of the types of items and settings that you need to apply, but one strategy/pattern that comes to mind is the classic datagrid that is often used for permission settings. So what you would have is the list of users along the right hand side, and a list of permissions across the top, with each cell of the column implemented as a checkbox. What you can then do is create a ALL column for permissions so that ticking that column heading will cause all the permissions for a particular user or permission to be checked, and then if you want to uncheck individual permissions you can do so as well. It is a bit fiddly, but nonetheless a tried and true method.

Answer 2

Finding good UI patterns for complex UI controls is probably in my top three troubles for a UX job. The answer that you aren't going to like is that you should probably come up with 3 separate designs and then try doing hallway usability testing to see which is best/easiest. You can do this pretty quickly with paper prototyping or with a simple wireframing tool. Beyond that, I recommend looking at Web Form Design by Luke Wroblewski. It covers filling in information to forms, which is related, but not quite what you are looking for. Best practices are covered and I keep going back to this book over and over again.

Answer 3

You might try the list builder pattern, as seen on this page (search for List Builder). Display the settings for the list adjacent to the list builder UI (or use a wizard-style "next"). It's true that this pattern is somewhat less common in web apps than it is in desktop apps (if for no other reason than it is a complex operation less commonly performed on the web), but the jQuery UI library provides an [interesting variant] (http://wiki.jqueryui.com/w/page/12137993/ListBuilder) that you may wish to try or you could roll your own.

Answer 4

I like your first approach and would suggest taking that further. You can try including the checkbox as you said to allow for selecting multiple items at once, at which point it's a matter of how you show one settings panel for multiple items. Text fields, for example, which have different answers for the different items could be blanked out or replace with [multiple answers], waiting to be typed over. Checkboxes also have an 'indeterminate' state which you can incorporate, and so on.

But you should give the user the option to easily change the settings for multiple items as they would for just one, the important point here is to ensure they know what they're doing. It's easy to see the consequence of your action when you're just editing a single item, but with multiple selected, some extra steps would include:

1. Having a warning message above the settings like "X items selected"
2. Having a confirmation box when applying the settings, telling the user that the individual settings for X items will be overridden.
3. Also, to drive the point home that editing a single action at a time is the preferred and assumed way of doing things (if this is actually the case), have it so that clicking anywhere on the item, will default to only that item being selected. For users to select multiple items they will specifically have to click the checkbox (because when you think about it, the user assumes that they want to edit just one item so they'll proceed to click directly on it, and if they want to edit multiple items they'll go right to the checkbox because that's whats it there for.

All pretty minor things at first glance but it's the small elements that add up to how intuitive the functionality is, and imo this gives everybody what they want easily.