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.

  • Incidentally, please feel free to edit the question if it doesn't meet this site's standards; this is my first question here.
    – DylanSp
    Dec 17, 2018 at 0:58

2 Answers 2


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.

enter image description here


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.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.