web-dev-qa-db-fra.com

Y a-t-il un emplacement préféré pour développer / réduire?

Je suis en train de concevoir un formulaire contenant à la fois des groupes d'informations obligatoires et facultatifs. Nous utilisons actuellement des en-têtes de section de groupe dans toute l'application, je les ai donc utilisés ici pour des raisons de cohérence, mais c'est la première fois que nous développons des sections.

Ma question est la suivante: où l'icône de développement/réduction doit-elle se trouver dans ce scénario, où se trouvent un mélange de sections extensibles et statiques?

Le placement du côté gauche semble être plus logique, mais le placement du côté droit garantit que l'étiquette de groupe commence toujours au même endroit.

enter image description here

1
Mike N

Je dirais soit complètement à gauche, soit à droite. Pas en zigzag au milieu. La cohérence est super importante.

Cependant, avez-vous envisagé de faire de la ligne entière un bouton? Cela en ferait une cible tactile beaucoup plus grande. Il présente l'inconvénient mineur de rendre le texte de l'étiquette un peu plus difficile à sélectionner mais pas impossible; essayez de sélectionner l'une des "questions connexes" dans la barre latérale droite par exemple.

Vous vous retrouveriez avec quelque chose comme sur ce site : enter image description here Peu importe comment vous le modélisez, vous pouvez choisir (et je conseillerais) d'inclure toujours un + ou un V comme indicateur de liste déroulante pour montrer la différence entre les en-têtes extensibles et non extensibles.

Si vous avez suffisamment d'espace, mais pas trop, et que votre icône est assez solide (utilise de nombreux pixels, donc ▼ au lieu de ▽), je la déplacerais complètement vers la droite, de sorte qu'elle se démarque de l'étiquette. De cette façon, vous pouvez facilement parcourir les parties qui pourraient se dilater ou non.

2
PixelSnader

L'icône d'expansion à droite peut aider le flux à se sentir plus "naturel". Le placer sur la gauche peut créer un aspect cohérent, mais l '"extensibilité" est une information secondaire, l'information principale que vous voulez que l'utilisateur remarque soit le contenu, alias le texte.

0
qbo

L'option 1 est meilleure par rapport à l'option 2. Les boutons + semblent au moins positionnés de manière cohérente et plus faciles à identifier une fois que son action est apprise.

0
uxpalette