The platform is mobile, specifically in a portrait orientation.
The title is the abstract concept; here's the concrete example: There is a list of binary (two possible answer) questions. The questions can be up to 200 characters long. There can be up to 15 questions. There is also a list of person names. The names could be up to 15 characters long. There can be up to 15 names.
The user must choose on person for each question, and then choose and answer (from the two possible answers for that question) for the person. There are an equal number of questions and names, so each name will be associated with one question and vice versa.
For example,
Questions:
- Are you male or female? (Male/Female)
- The tortoise lays on its back, its belly baking in the hot sun, beating its legs trying to turn itself over, but it can't. Not without your help. Do you help the tortoise? (Help the tortoise / Leave it to die)
People:
- Frank
- Alexandra
For the first question, the user picks Frank, and then picks Male.
For the second question, the user picks Alexandra (the only choice remaining at this point), and then picks "Help the tortoise".
Ideally the user can see all the questions before he/she chooses names, and can change his/her mind about which name he/she picks for a question and the answer after it has been chosen.
The general question is how to do a matching one list to another on mobile, with the added wrinkle that every time you match a pair, you also have to do a second choice. I found answers for matching two lists for non-mobile, but the solutions there don't work on a mobile form factor. The challenges I'm encountering are thus two-fold.
1) Making a good matching UI for a mobile form factor.
2) Making a matching UI such that every match requires an auxiliary choice. This latter part is challenging because every time you swap pairs, you need to redo two auxiliary choices.
I came up with the following mockup:
On the left side, boxes that haven't been assigned a person/answer would blink to indicate that you can click on them, once you click on a box, it opens up the pop-up on the right that has a drop-down for the person to match to the question and the answer for that person. The red icons for each person represent unique icons for each person (which I figured would help make it not as text heavy).
The issue with this UI is that it's not clear in the pop-up when you're removing a name from another question, and it also doesn't seem very intuitive, so I was thinking there must be a better way.