What UX is appropriate for alternative voting on a PC and Mobile device?

Question

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.

.

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.

Answer 1

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.

Answer 2

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

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. :)

Answer 3

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.

Answer 4

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.