2

Several forms in our B2B web app allows users to choose multiple items from a short list of items. Here's one example:

enter image description here

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?

2

I agree with your second proposed solution (radio button being the technically the right input to use here).

I also can see how those would look confusing together, especially because as I understand it, an item has to be checked in order for it to next be selected as a leader, and the two together do not represent this dependency well on top of looking awkward.

Maybe something like this?

enter image description here

1

If you are just limiting yourself to the current UI design patterns and controls then I don't think you'll have something that is going to solve the problem the way you like. But on the other hand if you want to try something left field then there is also a risk that the user's just won't get it.

Dissecting the problem logically, there are two layers of state/status information that you need to display.

  • First Layer: Selected or Not selected
  • Second Layer: Leader or Not leader

If you present both layers at the same time it is going to be confusing for the user because they won't necessary understand the relationship between the two, which is what is going to happen if you add a dropdown to the table or an extra column to start with. What you need to do is show the first layer, then lead into the second layer of information/interaction.

This means that if you select an item then you reveal the option to make that item a leader. A possible suggestion would be to reveal a toggle button or radio button for each row that is selected. Since each selected row is then automatically added to the group list, you can then control the behaviour of the toggle button or radio button accordingly.

1

@Michael Lai's answer was a good one and it put us on the right track. The workflow we eventually selected was a two-phase UI like he suggested, however user testing drove us to switch the workflow from his suggestion. Users will chose a leader first, then choose other selections (with the leader already selected and disabled so it can't be unselected).

Here's the final design we ended up going with.

enter image description here

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.