Meilleure approche pour présenter des panneaux pliables / extensibles avec des en-têtes de bouton radio
L'utilisateur se verra proposer plusieurs options (comme des boutons radio), et il/elle doit sélectionner une option avant de passer à l'étape suivante. Les sections individuelles seront extensibles/pliables pour que l'utilisateur puisse voir le contenu dans chaque panneau avant de faire une sélection.
Le problème que j'ai est de savoir s'il faut placer le bouton radio à l'extérieur (bord gauche) et développer/réduire la flèche à l'intérieur, ou vice versa. Je penche vers l'option A car ils interagissent avec un bouton radio, et le bouton est généralement à l'extrême gauche. L'icône de flèche peut être à l'intérieur car le bouton radio ne fait pas partie du contenu extensible/pliable. Cependant, j'ai reçu une idée différente de mon superviseur (option B), et je me demande quelle approche est plus intuitive.
J'ai fait une recherche à ce sujet et je n'ai pu trouver aucune étude/résultat. Vos commentaires sont très appréciés!
Tout d'abord je proposerais de regarder la séquence de vos utilisateurs. Doit-il lire les trois (ou plus) des panneaux pour prendre une décision? Dans l'affirmative, ne serait-il pas plus pratique de l'étendre tout le temps? Je peux imaginer devoir étendre chaque élément et le lire attentivement peut être pénible.
Si ce n'est pas le cas, je dirais à nouveau de regarder le flux de l'utilisateur. Son objectif est de sélectionner une liste. C'est (dans votre cas) fait par un bouton radio (que je suppose que vous voulez vraiment utiliser pour cela). Je voudrais donc que ce soit présenté en premier (comme dans la version A). Je ne pense pas que la présentation du triangle s'effondrant juste après soit la solution que vous recherchez, car cela suggérerait que le bouton radio n'est pas lié à l'étiquette d'une sélection. Je suggère de déplacer la flèche/triangle sur le côté droit de l'étiquette.
De cette façon, vous avez un bouton radio qui correspond clairement à l'étiquette et un panneau pliable qui sort de l'étiquette.
Ce que je peux imaginer pour travailler aussi, c'est de déplacer le bouton radio complètement à droite de l'écran et d'avoir le triangle/flèche sur le côté gauche de la liste.
Je pense que vous devriez utiliser l'option A, car dans ce cas, le bouton radio a une hiérarchie plus élevée que le triangle. Laissez un espace entre le bouton radio et le triangle afin que le triangle et le titre soient regroupés en tant qu’élément entier.
Quelques réflexions et questions pour vous.
L'utilisateur doit-il le faire de manière séquentielle? Si c'est le cas, cela ressemble à un petit sorcier. Vous pouvez supprimer complètement les boutons radio et désactiver les sections sous le premier, en les activant progressivement.
Quel rôle joue vraiment le bouton radio? En règle générale, les boutons radio sont par paires, représentant un état soit/ou. L'utilisateur ne pouvait-il pas simplement cliquer sur la section d'en-tête et développer les données associées, sans avoir besoin du bouton radio, simplifiant ainsi l'interface? Je ne suis pas certain que vous ayez besoin d'un bouton radio pour faire une sélection. Focus et ou en cliquant sur la sélection devrait être suffisant pour la révéler.
S'il est nécessaire d'afficher un état dans la section d'en-tête, et que ce rôle a été joué par le bouton radio, vous pouvez ajouter une icône, comme une coche, aux sections terminées. Mais je n'ai pas lu cette exigence, alors n'hésitez pas à l'ignorer.
Si je l'ai bien compris, vous avez fourni une liste d'options et vous souhaitez que vos utilisateurs sélectionnent l'une des options (une seule sélection à la fois) avant de passer à la section suivante. De plus, lorsqu'une des options est sélectionnée, du contenu s'affiche (sous forme d'arborescence) en dessous.
Pour faire la sélection individuelle, vous avez utilisé l'approche des boutons radio (pour garder la sélection unique) qui étendra également le nœud pour afficher son contenu.
D'une manière ou d'une autre, le mélange des notations des nœuds de l'arborescence et des boutons radio peut faire s'arrêter l'utilisateur et réfléchir pendant un moment au résultat de l'action (sélection de l'option/extension du nœud/les deux). Je vous suggère d'utiliser une structure arborescente simple où le nœud sélectionné est mis en surbrillance. À la fois, un seul nœud se développera (en réduisant les autres nœuds) et sera sélectionné afin que vous puissiez supprimer le bouton radio.
Cela gardera l'écran propre et l'expérience utilisateur meilleure, car il n'y a qu'une seule option disponible avec le nœud. Ici, il sera simple et simple de cliquer sur le nœud> (le système met en surbrillance le nœud tel que sélectionné) afficher les détails> passer à la section suivante.