4

I have 10 items in a list. These 10 items must be assigned to two buckets. I need to make sure that the 2 buckets can be toggled at any time. However, I need to make it explicit to the user that I'm assigning items to the individual buckets. These items can be assigned to either bucket or both.

Is there any good design pattern or anything someone could share that best shows how to solve for this problem?

JonW
  • 37,354
  • 24
  • 124
  • 158
yeahumok
  • 303
  • 1
  • 5
  • 6
    It sounds like you're trying to create some kind of list builder. I might have some suggestions, but I think your question could use some more information. How is the user interacting with this? Can you provide an example of the task(s) they're trying to accomplish? – Meredith Emily Mar 20 '13 at 19:12
  • More information please. Based on the info so far I can suggest: Imagine a list of all the items and each item has 2 flags beside it (representing each bucket) you can toggle the flags to assign/deassign the item from the bucket. – rk. Mar 20 '13 at 19:56
  • 1
    What do you mean by 'Buckets' here? Do you mean collections / groups of items? I also don't understand what you mean by toggling the buckets. Toggling them how? Disabling them from being used? It's quite hard to understand what exactly the problem is that you're trying to solve, can you expand on the specific issue you're having? Even some mockups or something could help. – JonW Mar 20 '13 at 19:56

2 Answers2

2

There are several ways to solve this problem, please see several options below:

enter image description here

I would prefer to use option 1. It is simple, straightforward and easy to implement.

Renat Gilmanov
  • 2,934
  • 16
  • 17
  • 4
    Option 2 requires items to stay in the left list in order to be thrown into both buckets. This goes against the convention of removing them from the left list once selected for the one (!) on the right. It would therefore require some kind of coloring or other indication that an item in the left list has already been assigned to one or both buckets. – Marjan Venema Mar 21 '13 at 08:08
  • 1
    Option 3 is not giving any immediate information on how many items are left that have to be assigned to a bucket. – Marjan Venema Mar 21 '13 at 08:09
  • Option 1 uses checkboxes implying that an item can also be in both bucket A and B or in neither. Radiobuttons (the round version) would be a better choice. – Pieter B Mar 21 '13 at 08:38
  • @PieterB The OP says "these items can be assigned to either bucket or both", so radio buttons wouldn't really work. – Matt Obee Mar 21 '13 at 11:18
0

The design pattern that you are looking for might actually introduce some complexities with the interface and interaction design. One of the primary concerns with complex interactions or behaviour is how often you have to do this, and over how large a dataset. If it is always going to be 10 items only, I suggest that the behaviour could be to start with a list of items that are all unassigned (or assigned to a default list), then you can use a toggle control to switch each item to either list 1, list 2 or both. If you use an appropriate icon or symbol along with the toggle control (or it can be combined), then you automatically have a representation of which bucket each item in the list belongs to.

You can update then the groupings as each item's grouping is updated.Rough example

Michael Lai
  • 27,124
  • 17
  • 89
  • 186