Search code examples
user-interfacedrag-and-dropuser-experience

Drag and drop lists - multiple items with same priority


Initially, I had the following requirements:

  1. There are 2 lists with items. The user needs to be able to move the items from one list into the other.
  2. Each item needs to have a priority.

enter image description hereI've implemented the following solution:

The user can drag and drop the items and I'm also keeping track of their priority. For example, in List1, Item1 has priority 1 and Item2 has priority 2 and so on. In List2, there is just Item4 with priority 1.

So this solution covers all the requirements.

The problem is that now there is a new requirement: multiple items can have the same priority.

So I can have Item1 and Item2 with priority 1 and Item3 with priority 2.

Can this current solution be adapted to this new requirement? I did think about it but wasn't able to find a solution.

Or is there a completely different approach that is more suitable?

Thanks!


Solution

  • The first pattern this problem made me think of was the Animation/Build Order panel in Keynote. In that panel you can give items unique positions or group with others so animations play at the same time. I feel that UX can work the same here kind of.

    Essentially in the UI you could have items with the same priority "grouped".

    Items grouped by priority

    Just as important is the experience while dragging. You need to have UI to clearly tell the user what the result will be when they release the drag.

    • Am I creating a unique priority for this item?
    • Or am I grouping this with another?

    Keynote does this with a underline/border style if I remember correctly. When dragging/dropping it is pretty common to use a dashed outline to show the resulting position. For example,

    UI while dragging prioritized items

    One final question you'd need to address – Is there a priority inside the priority groups? In other words, when grouped in a priority does the order of those items matter?