I need to design a UX that allows for IRV or alternative voting (aka ranked vote)

These illustrations were the first concepts I've encountered.

enter image description here . enter image description here

Has anyone come across a UX for IRV voting that works well for iPad, PC, and mobile? (or have suggestions?)

I'm trying to adapt the service to cases where there may be a small number of choices (as shown above) and/or something that may have a much larger set of choices to choose from.

  • Noticing that you are using the Australian Electoral Commission ballot paper, are there any specific constraints you need to comply with, or is this a more general question?
    – Michael Lai
    Jul 27, 2014 at 23:16
  • @MichaelLai - It's a consumer application, so consumers may request that I adhere to guidelines that I may not be aware of. What do you suggest or know of that may be applicable? Jul 27, 2014 at 23:18
  • Also noticing that you are from the US so I am pretty sure there are some differences between the US and AUS election regulations. I guess the biggest difference is that it is not compulsory to vote in the US, so at least the user interactions may need to be a little bit more relaxed for the US consumers? Unless you are talking about voting in general and not for elections...
    – Michael Lai
    Jul 27, 2014 at 23:30
  • @MichaelLai This is a general voting utility, though it is helpful to know that compulsory voting is a feature that some people may require. Thank you. Jul 27, 2014 at 23:35

4 Answers 4


If there are a small set of choices, it might make the most sense to have the user drag them into the ranking they want (drag your first pick to the top of the list, second pick under them, etc.)

If you want to scale this to a large set of choices (assuming only a small set of ranked positions), you might want some kind of search with autocomplete so that users can initially populate their ranked positions, followed by the ability to sort them by dragging.

  • +1 I was about to suggest drag+drop reordering :) Further development ideas could include 'move to position x'.
    – kwah
    Jul 27, 2014 at 10:46

In the case you have to adapt to small number of choices, you could try something like this:

enter image description here

It is a simple form with two selects and a table. It could working on mobile devices and desktop systems.

Also could be easy to collect the data and implement the form.

It is just an idea. :)


Voting is a general pattern that is seen not just for elections but on many other websites as well (like this one). The biggest advantage about making the voting form digital is that you can make changes easily, and have more flexibility in being able to change the order and ranking of the votes much easier compared to pencil and paper.

The features that I see being essential are:

  1. Allowing the users to rank the items (drag and drop into positions could be a nice feature for tablets and touchscreens).
  2. Allowing the users to change the order (by either using move up/down buttons or drag)
  3. Allowing the users to reset or clear the list
  4. You don't need to show candidate names in fixed position, just the voting order from first to last preference.

An interesting feature that you would definitely explore is that in many preferential voting systems, the major parties give preferences to certain candidates, and instruct their voters/supporters to follow this. That means you may want to develop a function that allows users to select a voting preference that pre-fills the voting order.


You may want to retain the recognisability of traditional (printed) voting cards as to make the transition from print to digital a lot easier for a user. Something deemed too complicated (e.g. drag and drop) may cause problems if you are trying to optimise for the largest audience possible.

Take your second image in your screenshot for example. This could obviously be easily converted into a digital interface. A table with the same layout but replace the empty circles with a column of radio buttons (to only allow one choice per column). Make the cells are big enough to work on touch screen devices.

You may also implement some kind of status graphic that appears as users make their choices e.g. a large 1 to the left of the row if that is their first choice, a large 2 beside the 2nd choice row, etc.

By all means consider alternative ui's but don't forget about the usability for the masses, especially on something like a voting slip.

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.