Comment devez-vous montrer qu'un accordéon est développé?
Lorsque vous avez un accordéon, vous avez besoin d'une façon d'afficher l'état actuel développé.
Il existe un certain nombre de façons différentes de gérer cela, et chacune est utilisée par un certain nombre de sites Web et de cadres respectés. Par conséquent, il n'est pas clair quelle méthode est la meilleure à utiliser dans quelle situation.
Quand est-il préférable d'utiliser quelle méthode? Points bonus pour toute étude à ce sujet.
Pas de symboles du tout, juste de la couleur pour indiquer l'expansion
Gmail pour Android l'utilise, mais voici quelques exemples plus clairs:
Chevrons gauche et bas à droite
Ceux-ci sont utilisés par la BBC Global Experience Language :
Chevrons de haut en bas à droite
Ceux-ci sont utilisés dans la documentation Android Design Guidelines et dans Silverlight .:
Chevrons droit et bas à gauche
Symboles plus (+) et moins (-) à droite
Ceci est utilisé par défaut dans ExtJS
Symboles plus (+) et moins (-) à gauche
Je passe un bon moment à examiner différentes options pour les accordéons (en partie en écrivant la question), et bien que non définitive, ma pensée actuelle est la suivante:
Côté gauche vs côté droit
Si vous avez cases à cocher dans votre accordéon, il est logique d'avoir l'indicateur du côté opposé à vos cases à cocher. Cela vise principalement à éviter la situation avec de nombreux indicateurs très proches les uns des autres, mais rend également moins probable pour un utilisateur de sélectionner accidentellement une option lorsque son intention était de sélectionner l'autre.
C'est un raisonnement similaire à celui pour lequel le sélecteur d'étoiles et la case à cocher sont situés sur des côtés opposés dans gmail pour Android.
Sinon, avoir les cases à cocher à gauche ou à droite semble être principalement une décision de conception. En ce qui concerne le design, je privilégie le droit car il garde l'attention de l'utilisateur sur le contenu.
Affordance
Si vous n'avez pas d'icône comme indicateur, il y a peu d'indications que vous regardez un accordéon plutôt qu'une simple liste. Cela peut ne pas être un problème pour beaucoup de gens, mais je voudrais recommander d'avoir une certaine forme d'indicateur. Cela devrait le rendre plus facile à utiliser, aux dépens (sans doute) d'avoir une conception plus occupée.
Facilité de numérisation et de compréhension
L'utilisation d'un chevron haut/bas ou gauche/droite a toujours été problématique pour moi. Je ne sais jamais si le chevron haut est un état ou une action, et il est difficile pour les personnes dyslexiques de faire la différence. gauche/bas (indicateur à droite) ou droite/bas (indicateur à gauche) semble causer le moins de confusion tout en étant facile à numériser.
+ et - sont les plus claires en termes de ce qu'ils font, mais ils se sont révélés (lors de tests internes) plus lents à se distinguer lors de la numérisation rapide. Je les éviterais donc si la vitesse de numérisation était importante.
Couleur et teinte
C'est la méthode la plus simple où l'utilisation de la couleur (ou de la teinte) pour indiquer qu'un élément a été développé est toujours une bonne idée. Il peut être très subtil et faire la distinction entre les éléments réduits et développés.
Google subtil dans leurs Android directives de conception, mais je recommanderais de faire la différence plus clairement.
Je suggère de les combiner:
- chevrons à droite (plus naturel, surtout au toucher, mais pas d'offense si vous le laissez à gauche) - bien sûr, toute la barre doit être cliquable pour s'agrandir/se contracter - pas seulement le chevron
- retrait pour le niveau inférieur
- couleur d'arrière-plan (plus claire pour les niveaux inférieurs)
- ombre (pour montrer que le niveau inférieur est derrière/en dessous du niveau supérieur)
- en option: développer/contracter le texte à droite
Je crois que la combinaison peut être vraiment sympa, donc inutile d'en choisir un seul, alors que tous rendent le design plus clair pour l'utilisateur.
En voici un pour lancer la discussion. Ce que je vois, c'est une question sur la meilleure représentation de l'état du système dans un menu accordéon. Visibilité de l'état du système à partir des 10 heuristiques d'utilisation de Nielsen. Voici ma justification pour chaque option:
Pas de symboles du tout, juste une couleur pour indiquer l'expansion:
État représenté par la couleur.
Conception minimale et fonctionne bien pour un utilisateur Web régulier (quelqu'un qui est assez intelligent pour savoir comment naviguer sur la page Web). Bien que votre deuxième exemple (outils de blog) ne soit pas la même chose que celui de gmail. Gmail utilise 3 couleurs, sélection = vert, élément de menu principal = gris foncé, éléments de sous-menu = gris clair. Alors que le blog utilise seulement 2 couleurs. Je pense que le système 3 couleurs a un meilleur appel à l'action que le système 2 couleurs.
Chevrons:
État représenté par des chevrons/flèches.
Personnellement, je préfère la gauche et le bas à la droite et le bas et le haut et le bas.
Les haut et bas prennent le plus de temps à comprendre. Est-ce que up signifie que l'en-tête monte pour révéler des choses? Ou le contenu glisse-t-il dans l'en-tête?
Les droite et bas sont simples à comprendre (OMI), les points droits vers le titre et les points bas vers le contenu de la barre de titre.
Les gauche et bas sont mon choix préféré. Ils ont la même simplicité de droite et de bas mais ne sont pas forcément à votre avis. Vous pouvez vérifier l'état en jetant un coup d'œil au chevron à l'extrémité droite, ou vous pouvez continuer à lire les titres à l'extrémité gauche.
Plus (+) et moins (-):
État représenté par les symboles +/-
Le même argument que les chevrons, je préfère le placement de l'extrémité droite des symboles +/- car ils sont présents, mais à la périphérie et ne nécessitent pas nécessairement mon attention.
Une alternative que vous avez manquée est: Double application de l'état, utilisez la couleur en combinaison avec les symboles chevron/plus-moins.
Maintenant, le choix entre les chevrons, +/- ou les couleurs des barres est plus une décision de conception pour moi. Mais j'essaierais tout d'abord de voir si la double application semble utilisable ou non. Sinon, j'irais avec les chevrons/plus-moins pour un thème plus minimal (si vous n'utilisez pas beaucoup de couleurs) et j'irais avec la couleur si je veux un design minimal plus centré sur les couleurs où vous avez beaucoup de couleurs mais pas beaucoup d'icônes/symboles.
Ceux que j'aime le mieux de ceux-ci sont ceux-ci, mais pas pour l'une des raisons mentionnées
Dans le premier, à part la couleur d'arrière-plan, il est évident que les éléments sont supprimés de l'élément au-dessus d'eux parce que les sous-éléments sont tous en retrait.
Dans le second, il est évident que l'élément et le texte en dessous appartiennent ensemble parce que, contrairement à tous les autres exemples, il n'y a pas de séparateur entre eux. Encore une fois, la couleur d'arrière-plan différente est également importante, pour indique qu'il est sélectionné.
Honnêtement, je n'ai même pas remarqué quels exemples avaient des flèches pointant vers le haut ou vers le bas ou hors de l'écran, ou même pas de flèches du tout. Ce qui est vraiment important, c'est de pouvoir dire d'un coup d'œil quels éléments sont regroupés en tant que sous-menu de l'élément au-dessus d'eux. Ainsi, par exemple, celui-ci:
est terrible; les sous-éléments ont le même arrière-plan, la même police, la même indentation, etc.
+1 Chevrons droit et bas à gauche
Il s'agit d'un symbole d'interface utilisateur couramment utilisé et la plupart des gens le reconnaîtront d'après leur expérience.
Je pense que les flèches pointant vers le bas à gauche fonctionnent mieux, les + et les -s sont ennuyeux et rendent votre cerveau confus. J'aime les choses du côté gauche, mais je suis droitier, donc cela pourrait avoir une influence. Et les flèches pointant vers le bas ou à travers sont Nice, vous pouvez généralement facilement comprendre ce qu'elles signifient. Il doit également y avoir un retrait, les couleurs doivent avoir un contraste moyen, comme ouvert = blanc et fermé = gris clair.
De l'article: Où placer les icônes de vos icônes de menu accordéon
"Il y a deux icônes courantes utilisées pour réduire: l'icône moins et X. Les utilisateurs peuvent mal interpréter l'icône moins car elle représente souvent la suppression ou la suppression. Les utilisateurs ne devraient pas avoir l'impression de perdre des options de menu lorsqu'ils réduisent le menu.
L'icône X représente mieux l'effondrement car elle est souvent utilisée pour fermer les fenêtres modales. Lorsque les utilisateurs réduisent le menu, ils le ferment, sans le perdre. Cela correspond mieux à ce que font les utilisateurs et à ce qu'ils attendent. "
Utilisez les habitudes apprises depuis près de vingt ans avec Windows et en particulier Windows Explorer et dans de nombreux arbres, voir sur le Web: [+] et [-] à gauche.
Vous serez sûr que tous les utilisateurs reconnaîtront ces symboles ergonomiques.
Et soyez prudent avec la flèche à gauche, c'est nouveau avec l'interface mobile pour expliquer qu'il y a une page après, alors gardez la flèche pour ce comportement. Je suis d'accord avec certains écrits, les flèches bas et gauche ou bas et haut sont confuses. .. donc si vous devez réfléchir un peu de temps à chacun vous utilisez une interface. ... le choix n'est pas bon.
Jetez un œil à cet article UX sur les menus d'accordéon et la position de l'icône. Cela vous indiquera que la prochaine option est la meilleure:
