Imbrication de cases à cocher dans un bouton radio: Y a-t-il une meilleure façon?

Question

Je crée une application qui permet aux utilisateurs de remplir une auto-évaluation de leur entreprise. Nous aimerions donner aux utilisateurs la possibilité d'imprimer leur travail avec quelques options:

1. Imprimez toutes les questions/réponses (y compris celles qui n'ont pas reçu de réponse)

2. N'imprimez que les questions auxquelles l'utilisateur a répondu.

3. N'imprimer que les questions auxquelles l'utilisateur a répondu, et faire correspondre une ou des réponses particulières .

Ces trois options s'excluent mutuellement, elles sont donc un bon candidat pour les boutons radio, mais la troisième option présente certaines difficultés car elle nécessite une sélection sub.

Voici comment je l'ai conçu:

Existe-t-il une meilleure façon de présenter ce formulaire?

Answer 1

Utilisez le modèle de boutons radio "exposer à l'intérieur"

Ce que vous avez est en fait correct, mais masquez les listes de contrôle (ou tout autre contenu dynamique) comme l'a suggéré Cody Reeves ici.

Luke W passe en revue ce modèle dans son livre Web Form Design.

Voici un exemple tiré de Chris Coyier formulaire de travail Codepen .

Si vous ajustez votre conception, vous pourriez probablement vous débarrasser de la ligne grise sous le dernier bouton radio. Cela rend les cases à cocher distinctes du choix auquel elles appartiennent.

Answer 2

Une solution consisterait à masquer les cases à cocher jusqu'à ce que la radio "Uniquement les types de réponse" soit cochée. Cela atténuerait la plupart de la confusion que l'utilisateur peut avoir avec le formulaire actuel, car ils ne se verront pas proposer toutes les options en même temps jusqu'à ce que cela soit nécessaire.