Dans quel sens les flèches doivent-elles pointer pour un bouton déroulant?
Dans les images suivantes, j'ai animé une liste déroulante de boutons où la flèche s'anime vers le bas lors de l'affichage du menu déroulant.
Vous vous demandez s'il existe des études d'utilisabilité à ce sujet ou s'il s'agit d'une simple préférence personnelle.
Vous pouvez voir l'animation ici si cela fait une différence https://dribbble.com/shots/2369431-Daily-UI-027-Dropdown
À mon humble avis, je pense que la flèche doit pointer vers le contenu. Ainsi, lorsque la liste déroulante est active, il est plus logique qu'elle pointe vers le bas, lorsque le contenu disparaît, il pointe vers le haut, d'où le contenu provient.
Je considérerais deux choses ici:
- Connexion visuelle à l'action
- Implémentation standard commune
Au premier point - connexion visuelle: si vous voyez une flèche qui pointe vers le haut, vous vous attendez à ce que quelque chose se passe dans cette direction. Vous regarderez automatiquement vers le haut, pas vers le bas. Ainsi, chaque action qui va dans une direction différente se sentira étrangère, détachée. Donc, cet argument dit: Si la flèche pointe vers le bas, les choses devraient descendre.
Le deuxième point - implémentation standard: si vous regardez les normes mobiles, vous constaterez que les flèches qui pointent vers la gauche et la droite contrôlent un va-et-vient: le bouton "retour" a une flèche pointant vers la gauche et la droite pointez vers la droite. La raison en est probablement PAGES dans un livre, où la page suivante est "après celle en cours", ce qui nécessite une action à droite.
La flèche HAUT représente généralement un "retour en haut" ou une fonctionnalité de réduction, tandis que la flèche BAS - même par défaut html - implique des actions qui OUVRENT quelque chose qui est caché. Ce que j'essaie de dire, c'est que le faire différemment s'opposera aux normes communes et sera plutôt confus.
Ainsi, je laisserais toujours la flèche pointer dans la direction où l'action se produira: si elle descend, pointez vers le bas.
Un bouton devrait montrer ce qui se passera au prochain clic - ne pas pointer vers autre chose.
Lorsque le bouton au-dessus d'un menu fermé est cliqué, le contenu descendra - donc le devrait pointez vers le bas (à l'endroit où le contenu apparaîtra)
Lorsque le bouton au-dessus d'un menu ouvert est cliqué, le contenu se déplacera vers le haut dans le bouton - de sorte que la flèche devrait pointer vers le haut.
Les flèches pointant dans notre direction de lecture (droite ou bas) pointent vers l'avant. Les boutons doivent indiquer ce qui se passe lorsque vous cliquez dessus. La flèche sur un bouton déroulant doit pointer vers la droite ou vers le bas car elle indique que le nouveau contenu sera visible une fois cliqué.
Une fois la liste déroulante ouverte, cliquer à nouveau sur le bouton devrait la fermer. Par conséquent, la flèche doit pointer vers le haut ou vers la gauche.
source: http://movio.co/movio-cinema/
Puisque vous posez des questions sur la direction de la flèche, vous voudrez peut-être consulter les normes Microsoft pour les glyphes et les flèches.
Faites défiler vers le bas d'ici , jusqu'au tableau qui répertorie les différents types de flèches et de glyphes. Ça dit des choses comme ça:
- Les chevrons pointent dans la direction où l'action se produira, pour montrer l'état futur.
- Les flèches pointent dans la direction où l'action se produira, pour montrer l'état futur.
- Développer les conteneurs développer ou réduire le contenu du conteneur en place lors de la navigation dans une hiérarchie. Ils montrent l'action future.
- Les triangles rotatifs ressemblent un peu aux leviers rotatifs, de sorte qu'ils pointent dans la direction où l'action s'est produite, de sorte qu'ils montrent l'état actuel.
Vous vous attendez généralement à ce qu'un bouton montre quelle action il va exécuter, pas l'état actuel de ce qu'il bascule.
Considérez le bouton lecture/pause d'un lecteur multimédia. Vous appuyez sur play-icon [ > ] et il devient [ || ] pour indiquer l'action effectuée lorsque vous cliquez à nouveau est maintenant de mettre en pause.
Pour pousser ce point encore plus loin, je signale les icônes de matériaux de Google. Le nom de deux icônes peut vous donner une idée du consensus général sur ce sujet.
Comme indiqué, les icônes adhèrent à l'idée que vous voulez indiquer ce que fera en cliquant sur cette icône. Lorsque le contenu est déjà développé, vous souhaitez fournir un expand_less icône. Lorsque le contenu est masqué, vous souhaitez indiquer que vous pouvez développer pour plus de contenu à l'aide de l'icône: expand_more
Plus j'y pense, plus les flèches en chevron indiquent l'action qui peut avoir lieu quand c'est une action cliquable. Considérez-le donc comme un tiroir de contenu à afficher.
Avec un bouton déroulant, il devrait pointer vers le bas à l'état de repos car vous pouvez "tirer" le contenu vers le bas lorsque vous cliquez dessus. Et repoussez-le lorsque vous voulez le cacher.