Mobile UI for choosing without replacement a item from list b for every item in list and then choosing between two options

Question

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.

Answer 1

Here is a suggestion attached, which aims to take care of few important things:

1) Each question demands user focus, since there are two actions pending on the user to complete the same. The list UI you have shared, makes it difficult for the user to comprehend what needs to be done, both in terms of action and their priority/order.

2) Real estate provided to each question should be sufficient enough so that there is less strain and visual clutter.

Keeping this in mind, I suggest a card based UI, with each question on its card as seen. Its a typical carousel arrangement with user being able to swipe through the cards. Additionally, as seen, the flow is changed to reflect order - so

1) The user selects a name first

2) Reads the questions

3) Chooses from two options (these get activated only if 1) is true).