Search code examples
user-interfacesetuser-experienceassignbipartite

What are UI/UX patterns and their pros/cons for 1-to-1 assignments of items from two different sets?


Think of two different "bipartite" sets of items: vehicles and drivers. The user has to make 1-to-1 assignments between these items like so:

  • Each vehicle can be assigned to 0 or 1 driver.
  • Each driver can be assigned to 0 or 1 vehicle.

What would be suitable UI/UX patterns for this?

I've already thought about providing three "drag-and-drop" lists: (1) unassigned vehicles, (2) unassigned drivers, and (3) 1-to-1 assignments of vehicles and drivers. But I'm not sure about the "most comfortable" workflows/actions for creating new assignments, flipping vehicles/drivers of two assignments, managing large numbers of items, etc. with as few clicks/actions as possible. Or maybe there is a UI/UX pattern I'm not aware of at all.


Solution

  • Important Gotchas

    1. When you're managing multi-list selection you need to be very specific about context - is this going to be on a narrow screen such as a phone or portrait tablet? Narrow screens are often poor for side-by-side lists.

    2. This sounds like quite an industrial application - is it done in a setting where people are standing or walking and may be jostled? Drag-n-drop can lose things half-way.

    One idiom is a copy-paste variant where tapping an item in one list selects it and you either can tap another item, or some other cancel zone or tapping in the second list pastes the connection.

    If the lists are long, offer an option to show only the free items so you can focus on those left to be assigned. That can be a simple toggle, maybe three-way between All/Free/Set.