I have a web form consisting of 12 steps. One of the steps consists of multiple radio-button with simple yes / no questions.
It starts with only one question. If the answer is yes, then there won't be anymore questions, and you can continue to the next step.
If the answer is "No", the next Yes / No question appears. This procedure repeats three times. If you keep answering No, the final form will have five radio-groups, two selects and one input field. As soon as you answer "yes" once, no more content will appear and you can continue to the next step.
The problem now is, that this pattern of repeated appearance of new content is quite bad UX, since it's unexpected for the user.
But I can't figure out a better way to do this. We did some research to figure out, which options are chosen more frequently, to optimize the flow for those scenarios:
Yes / No Question 1 - About 50% will choose Yes over no. For those user, they don't need the additional questions.
Yes / No Question 2 - About 75% will choose Yes over no.
Yes / no Question 3 - About 20% will choose Yes over no.
We already tried the following patterns:
- Hide the additional content and only show it, if the user choses "no".
Positive: for the simple cases, this step in the form is over quickly, since they only have to chose one or two options.
Negative: It's bad UX to unexpectedly keep showing additional questions.
- Show all content and hide the irrelevant options as soon as the user choses "yes"
Positive: There is no necessarily unexpected behaviour, since there are no hidden content. For the simple cases, it's a "relief" if the additional content gets hidden if they pick "yes"
Negative: The form is initially overwhelming with irrelevant information for the simple cases.
- Split up the additional content in sub-steps. The user will navigation to additional steps if some of the choices are "no".
Positive: There won't be happening something unexpected, since the user only sees the relevant information and we can altering the flow based on their choices.
Negative: The form already consists of 12 steps with a counter displayed at the top. Adding more and more pages can lead to frustration and maybe confusion to some users.
- Only "tease" the next question as a disabled radio-group. Enable it if "no", hide it if "yes".
Positive: The fade in of the next question isn't as unexpected as if it was hidden.
Negative: It still shows potential irrelevant content to simple cases.
Those are the patterns I already tried. Currently we use the "tease"-version, but we're still not quite happy with it. Do you have a better idea on how to tackle a "growing form"?