Several forms in our B2B web app allows users to choose multiple items from a short list of items. Here's one example:
Now I need to figure out a pattern to allow users to choose a "leader" item from among the selected items, where the "leader" is one item that is special in some way. For example, in the list of routes and drivers above, users need to select which driver will be "on duty" to unlock the warehouse in the morning.
What's a good UX to allow this kind of selection? Any solution must be iPad-friendly, so can't rely completely on mouse-hover behavior or drag-n-drop.
Selection of multiple items and then selected one as default is a similar problem but those solutions would be overkill for my much-simpler case because our lists are always shorter than 20 items, so we don't need to worry about paging, filtering, search, etc.
I've tried a few options so far, none of which I'm happy with:
- Adding a dropdown list above or below the grid to choose the "leader" item. This seems discoverable, but seems inelegant to duplicate the same list twice. This option also requires adding UI in the grid to indicate which row is the "leader" row, so it forces users to conceptually map between both lists and understand why one affects the other. Seems complex.
- Adding a column of radio buttons. This is a technically accurate use of both input controls, a radio button and a checkbox in the same row seems very confusing. Plus it looks really weird!
- Replacing checkboxes with a 3-step slider. This is also technically accurate but the "included" and "leader" settings don't necessarily feel like a continuum for some of the use-cases where we will use this pattern.
- Replacing the checkboxes with dropdown lists (e.g. choices of "off duty", "on duty", "leader"). This is discoverable, but every change takes 2 clicks/taps. Seems like a more elegant solution should be possible.
- Some sort of sorting or drag-drop solution where the first row is "special" and the user must drag or reorder a row to be first to make it the leader. This seems like a bad idea because it implies that the other rows are ordered, which they're not. Plus then I need to help users discover how to re-order rows, which has its own discoverability problems.
Got a better idea?