Dans quel sens les flèches doivent-elles pointer dans un accordéon pliable? Gauche / bas… bas / haut?
Quelle est la meilleure façon d'indiquer qu'il est possible d'ouvrir et de fermer un élément de style accordéon?
Flèche pointant vers la gauche/flèche pointant vers le bas
Flèche pointant vers le bas/flèche pointant vers le haut
Signe plus/signe moins
… ou autre chose?
Je dirais que la convention veut que la flèche pointe vers la droite lorsqu'elle est repliée et vers le bas lorsqu'elle est développée.
Voir cet exemple, si le troisième est ouvert:
Je ne suis pas sûr qu'il y ait encore une réponse définitive. Voici comment je vois les options.
Conventions des flèches
Les arbres ont utilisé des flèches pointant vers la droite pour les flèches fermées et vers le bas pour les flèches ouvertes, qui, comme le mentionne FreshCode dans sa réponse, ont été généralisées aux expanseurs. C’est une convention raisonnablement bien établie, qui remonte à Vista pour Windows et au milieu des années 90 pour Mac (où ils étaient connus sous le nom de "petites flèches").
Je crains que cela ne cause de la confusion. Dans d'autres utilisations des flèches comme les menus en cascade, les menus fractionnés, les boutons de menu et les listes déroulantes, la flèche suggère uniquement un affichage temporaire de certaines options, pas l'ouverture fixe d'un volet entier qui doit être explicitement fermé. Dans ces autres utilisations des flèches, la direction de la flèche indique inévitablement le mouvement que l'utilisateur obtient lors de l'activation. En revanche, dans les arbres ou les expandeurs, les flèches pointant vers la droite provoquent un mouvement vers le bas et la flèche pointant vers le bas provoque un mouvement vers le haut. Je n'ai pas été témoin de ce problème (par exemple, les utilisateurs pensant que la flèche vers le bas signifie "étendre encore plus"), mais je n'ai pas été témoin d'une grande utilisation de l'expandeur.
Conventions de contrôle des fenêtres
Il serait peut-être préférable d'utiliser une flèche vers le bas pour signifier fermé afin qu'au moins la direction de la flèche soit cohérente avec le mouvement qu'elle crée et avec son utilisation dans d'autres contrôles. Un expandeur ouvert aurait une icône X "Fermer", tirant parti de son utilisation pour Windows. Cependant, les utilisateurs pourraient peut-être penser que le "X" signifie Supprimer comme dans "effacer toutes les entrées que je viens de mettre dans l'expandeur", et les utilisateurs craignent donc de fermer un expander.
Une façon plus appropriée d'utiliser les contrôles de fenêtre est peut-être d'utiliser respectivement les icônes de réduction et d'agrandissement pour les expandeurs ouverts et fermés. Cependant, toute utilisation des conventions de contrôle de fenêtre est probablement plus efficace si les contrôles sont à droite, comme ils le sont pour Windows. Cela peut induire une rotation supplémentaire de la souris car les contrôles d'entrée ont tendance à être justifiés à gauche. De plus, je craindrais que les utilisateurs ne confondent les contrôles de l'expandeur avec les contrôles de la fenêtre lorsque l'expandeur défile vers le haut de la fenêtre.
Autres conventions d'arborescence
L'utilisation de "+" pour signifier fermé et "-" pour signifier ouvert est une alternative vue dans les contrôles d'arbre pré-Vista qui évite la contradiction de directionnalité de la flèche. Cela semble fonctionner correctement, mais, comme la plupart des options que j'ai couvertes jusqu'à présent, je me suis toujours demandé si certains utilisateurs ne savaient pas si les symboles étaient censés représenter action l'utilisateur obtient l'activation ou le courant état de l'expandeur (ils supposent que "-" signifie que l'expandeur est fermé - ou du moins pas complètement ouvert).
Les icônes "taps" utilisées par Java Swing.
Pour une raison quelconque, j'ai l'impression qu'ils gèrent de manière moins ambiguë le problème action/état.
Bouton de basculement
La manière habituelle que je recommande de traiter le problème d'action/état est d'utiliser les boutons de basculement comme je l'ai décrit dans la réponse ne icône devrait-elle afficher l'état actuel ou l'état suivant? Dans cette application, cela signifie que vous utilisez même icône qui signifie "ouvrir ceci" (je pense que le signe plus est le moins ambigu) pour les deux expandeurs fermés et ouverts, mais le bouton de l'icône a une apparence en relief pour les expandeurs fermés et un aspect déprimé pour les expanseurs ouverts.
Ai-je mentionné aucune réponse définitive?
Avec autant de problèmes, je ne pense pas que nous sachions vraiment lequel est le meilleur sans quelques tests utilisateur. Il est tout à fait possible que cela ne fasse pas beaucoup de différence. Si vous finissez par effectuer des tests, veuillez publier vos résultats ici.
Lance Gutin chez Vidget a fait des recherches sur les utilisateurs à ce sujet . Mon seul point à retenir est que c'est une mauvaise idée de ne pas utiliser d'icône, et de placer l'icône à droite augmente le temps de tâche. Je pense que le problème est que c'est un problème qui n'a pas de bonnes solutions.
En analysant les résultats, les données les plus convaincantes impliquaient l'emplacement de l'icône. Présentés avec une icône à droite de l'élément de menu, de nombreux participants ont préféré cliquer sur l'icône plutôt que sur l'étiquette de texte (figure 2). De plus, dans tous les cas, les conceptions avec des icônes à droite ont entraîné des temps de tâche plus lents (figure 3).
Ce que je vois le plus souvent, c'est une flèche vers le bas ou pas de flèche. (Glamour est une exception avec une flèche droite, mais je dois admettre que je m'attendais à ce qu'il navigue vers une page de commentaires séparée et ne fonctionne pas comme un accordéon.)
Facebook
NYTimes
Washington Post
Glamour
Stackexchange
J'adore utiliser des flèches pour explorer une structure arborescente/fichier. Mais je pense que le contenu d'un accordéon ressemble beaucoup à un dialogue, en particulier je ne m'attends pas à un arbre.
Pour moi, les accordéons ont leurs commutateurs expand/collapse sur la droite (c'est là que je pense que vous placez votre symbole gauche/bas) et les arbres ont le leur sur la gauche. Ils utilisent respectivement des symboles +/- ou des flèches.
Je pense à un volet de dossier par rapport à un panneau de fonctionnalités, comme Windows Explorer vs Visual Studio.
Mais en réponse à votre question, si je devais utiliser des flèches dans un accordéon, Up ne communiquerait pas fermé, il communiquerait cassé. A MON HUMBLE AVIS.
À mon avis, le modèle d'arbre Windows (gauche/bas) n'a aucun sens, mais il semble que beaucoup d'utilisateurs aient appris à l'utiliser.
(bas/haut) Cela a plus de sens pour moi, mais je suppose que je ne suis pas votre utilisateur.
(plus/moins) est moins déroutant comme Michael Zuschlag l'a mentionné
Peut-être faire des tests A/B?