How best to display a rankable list with a heading and submit button?

Question

I'm designing an app where users can vote on a list of choices by ranking them in order. The voting screen needs to have:

• The title of the vote
• The list of choices
• a button to submit the user's ranking.

What I've got now, as displayed in Chrome on an Android phone, is:

What I'm not sure about:

• Indicating that the top is most preferred and the bottom is least preferred; I'm not sure if the text I'm currently using is sufficiently clear. If there's a more concise way of communicating that, I'd definitely like to use that.
• The location of the submit button; I want to make sure it doesn't get mixed in with the ranking part of the screen. Right now, there's a 3em separation between the "Least preferred option!" text and the button.
• Communicating that the choices can be reordered by drag-and-drop, though I think the drag handles on the left might be sufficient.

Any feedback on these concerns (or other parts of the design) is quite welcome.

Answer 1

Use labels in the table headers to indicate ranking, and make clear that items can be moved.

Ranking as a concept

Test with your users, but Ranking (or equivalent word) is a fairly common concept in voting (e.g. ranked choice voting). Ranking implies that first is best in most cases, so you don't need the extra labels.

If you have labels that update once the user has dragged the item into place, it can also reinforce the interaction and its results.

Signifiers that are prominent for ordering choices

This is a start, but I tried emphasizing the drag handles, and separated the elements a user interacts with from the items they are ranking.

In this case, I used a blue background, but i'm sure there are other ways to visually indicate something similar.

Answer 2

To answer to your list of issues:

• To be sure that top is most preferred and the bottom is least preferred, you can add an icon to your description "↑" or you can move the drag icon to right (see Material design - Lists / Behavior ) and add a label in the left side (1st/ 2nd...)

• Use the same margins you use in the rest of the app for the buttons

• The icon is enough. Just make sure it will be used the indicated mouse cursor.