Right now I am developing a Fragment for an Android application in a university course and I am facing a usability problem, where I and my fellow students can't really find a good solution.
The challenge is to show the user that a checkbox has a link to a text field. That means, if the checkbox is filled out, the text field has to be filled out too (and of course just the filled out text field without the checkbox is also not valid).
Our approach right now:
Optic:
We are linking the checkbox and text field with a "card design"
Interaction Design:
Here we have some "solutions", but where are not happy with them:
A) when the user clicks into the text field the checkbox gets selected, and when he leaves we check if the text is empty and then unselect the checkbox.
B) when the user writes something into the text field the checkbox gets selected and when he deletes all the text we unselect the checkbox
C) the text field is inactive (the user cannot write in it) until the checkbox is ticked (I don't really like this solution, because users will try to click in the checkbox I think. And we are not sure how to handle the filled out text field, when the checkbox gets unselected)
Of course we additionally check all the input when the user clicks next, but this is not really error prevention.
These fields are not XOR. the user can check both checkboxes (and then has to fill out both text fields)
We would really much appreciate some feedback and suggestions!