Prioritizing Items from a list of values

by fardown   Last Updated July 22, 2019 09:16 AM - source

I want a user to prioritize 4 items from the highest to lowest priority without being able to select the same priority for each item for the registration process. So far this is the wireframe I have developed.


Is there a better way to design the user interface or will this do fine?

Answers 2

The drag and drop and "older version" of it - using arrows:

options mockup

Drag and drop needs to have well solved interactions (how it behaves and looks like when dragging, how it looks like when you can and can't drop it). This is good thing to do, but only in case if you have a solid library to implement it (true on web, rarely true for desktop app frameworks).

Another option – I am also thinking whether you really need to have all the options prioritized right at this step or whether doing something like encouraging user to pick the most important only and further in the process the next most important etc. Just a thought, whether it is relevant or not depends a lot on user story.

July 10, 2014 07:27 AM

Option boxes are the wrong answer in this case as they aren't suited for this use case. Use option boxes to select one exclusive option.

You might want to rearrange the items. This could be either done by drag and drop or some sorting functions. Drag and drop makes it hard for the user to spot if the functionality's there and also on mobile devices. You could however use a hybrid version like the one shown in the picture below:

rearranging items with arrows or drag and rop

The two lines of vertical dots indicate that dragging and dropping is possible. The arrows on the right are for pushing/dropping an item one up or one down.

July 10, 2014 07:31 AM

Related Questions

Best way to display list of options

Updated March 12, 2019 14:16 PM