Rank interface is not intuitive

[lognaturel]

We want to improve the rank question to make it more intuitive

Solution

• Add drag icon
• Container around the option
• Selected state is blue when the user drags the item (same as it is today)
• Add dialog title and support text so the user knows how to use this widget
• The CTA should say "Save" or "Done" to confirm the action

Content

Rank items Tap and drag items to change the order

or select and drag...

Figma

[lognaturel]

This would be helped by addressing https://github.com/getodk/collect/issues/6047 as well. Since that one is a change in how the question type is displayed, maybe we should address it in this release. I was surprisingly confused when I opened up the dialog.

[alyblenkin]

Thank you for adding this issue!

Given that the ranking happens in a dialog, do we need to require a long press to move or could a normal press be used?

I don't think it requires the long press. The drag icon make it's a lot more clear what you're supposed to do and you could simply tap and drag to move the item.

If we do keep the long press because that's easier for now, but I agree we should add text to help explain what's happening.

Other ideas to consider

• I also played around with an option where we don't have the numbers on the left. I don't know if it's necessary. Maybe we only show them when we display the order when they leave the dialog.
• Should the CTA say "OK" or "Save"? I think it should say "Save" or "Done" to confirm the action. "OK" would make more sense if I was acknowledging something, but the user is taking an action.
• A title would be helpful here given ranking happens in a dialog