web-dev-qa-db-fra.com

J'ai un formulaire avec 4 boutons radio qui modifient une partie du formulaire. Quelle est la meilleure façon de le gérer?

Est un site pour un service de boost pour un jeu vidéo.
http://i.imgur.com/jivOBmf.png (Veuillez ignorer l'orthographe)

Selon l'option choisie (type de boost), le formulaire changera un peu. Toute la section à droite (rang souhaité, img et les deux menus déroulants) changera en un grand nombre et un curseur de plage.

J'ai donc deux questions:

  1. Lorsque l'utilisateur doit entrer dans le formulaire, l'option attendue sera-t-elle la plus utilisée préchargée? ou être tous cachés sauf les boutons radio, et afficher le reste lorsque l'utilisateur choisit une option?

  2. Lorsque l'utilisateur clique sur une option, puis clique sur une autre, devrait-il changer tout le formulaire, juste la partie qui changera ou peut-être les deux colonnes (rang actuel et rang souhaité)

Merci David

1
David Rivera

Q1 - cela dépend: A) êtes-vous plus intéressé à vous assurer que l'utilisateur choisit l'option la plus appropriée sans aucun type d'influence? Masquez tous les champs dépendants. B) par l'utilisation du formulaire, vous comprenez clairement que la majorité des utilisateurs choisiront une option populaire, principalement sans explorer les options restantes? R: présente cette option populaire sélectionnée.

Q2 - le point le plus important est de s'assurer que les utilisateurs comprennent la dépendance du formulaire à partir de l'option supérieure. Conservez également toutes les valeurs soumises sur les formulaires, même si les utilisateurs modifient la sélection supérieure pour vérifier les autres options.

Je recommanderais d'effectuer des tests utilisateur pour comprendre si les utilisateurs ont encore des doutes sur les interactions d'écran et les options de formulaire.

0
louvaro

J'ai vu quelque chose dans ce sens quand acheter un iPad Pro . L'option de couleur initiale modifie l'image sur le côté gauche et réduit la sélection en vous montrant ce que vous avez sélectionné.

Étape 1:

enter image description here

Étape 2 (après avoir cliqué sur la couleur):

enter image description here

Étape 3 (après avoir sélectionné Stockage):

enter image description here

0
icc97