Yahoo! User Interface blog (YUIBlog)

Résultats de l'enquête Motif Accordéon

Il ya quelques mois nous avons partagé nos réflexions actuelles sur la composante "accordéon" de navigation , et a demandé à la communauté des développeurs web et les concepteurs qui ont lu ce blog à un sondage pour nous aider à déterminer les paramètres par défaut, les pratiques actuelles, et d'autres directives à incorporer dans une motif de l'accordéon et de donner leur avis sur un composant Accordion YUI.

J'ai eu un certain temps maintenant d'examiner et d'étudier les résultats et je voulais les partager avec la communauté que nous écrivons une version «bêta» de la structure et soyez prêt à le partager, donc sans plus tarder, voici les résultats (à noter que cette enquête ne doit pas être considérée comme strictement scientifique).

Qui a répondu

Les répondants ont identifié eux-mêmes des façons suivantes:

• Concepteur de 21,4%
• Développeur de 32,1%
• Hybride (deux concepteur et développeur) 42,3%
• Aucune de ces 4,2%

Distinctions Terminologie

Des majorités écrasantes dans tous les répondants ont convenu que

• Accordéon et Menu Accordéon signifient la même chose (73%)
• Accordéons et contrôles d'arborescence sont deux choses différentes (89%)

De nombreux commentateurs décrit la différence entre les accordéons et les arbres le long de ces lignes: «Contrôle Arbre implique généralement une profondeur de hiérarchie qui n'est généralement pas présent avec un accordéon."

Une petite majorité a déclaré que les groupes spéciaux Accordéon et repliables se référer à la même chose (60%).

Ces majorités sont uniformes dans les rôles.

Présentation d'accordéons

Une solide majorité (68%), dit que les accordéons peuvent être disposés aussi bien horizontalement que verticalement (et en fait le modèle est bien attestée sur le web). Les gens suggéré que les étiquettes sur un accordéon horizontal doit être écrit verticalement et / ou rotation.

Une majorité encore plus grande (72%) a déclaré que les accordéons ne peut avoir que deux niveaux (ce qui s'aligne avec la distinction entre les accordéons et les arbres):

Une légère majorité (53%) a déclaré que les accordéons peuvent être imbriqués dans d'autres accordéons. Les commentaires écrits suggéré que le libellé de la question conduit certains à répondre que c'est certainement possible, mais pas nécessairement souhaitable, en faisant des suggestions telles que: «Si vous adéquatement les gouttières, ce serait possible, mais généralement une très mauvaise idée - un peu comme l'aide trop nombreux onglets et ayant les emballer en plusieurs lignes. "

Ce fut l'une des questions où l'auto-décrit les concepteurs et les développeurs ont pris côtés opposés. 57% des développeurs et hybrides ont convenu que les accordéons peuvent être imbriquées, alors que 64% des créateurs ont dit qu'ils ne peuvent pas l'être. (Aucun des Aboves 50/50!)

Si je devais deviner, je dirais que les développeurs (et hybrides), plus intimement liée à la façon que le pourquoi peut-être été exprimé plus d'un "vous pourriez le faire ..." point de vue, tandis que les concepteurs ont pu exprimer plus un "... mais vous ne devriez pas" point de vue.

Comment doivent se comporter Accordéons

Une petite majorité (54%) estime que les accordéons devrait permettre à plus d'un panneau peut être ouverte à la fois. Les deux comportements peuvent être trouvés en ligne, donc notre impression est que ce comportement peut dépendre davantage sur les contraintes de l'espace de conception et de l'objectif de l'accordéon que sur une règle générale d'une façon ou l'autre.

Cette question a également divisé le long des lignes d'identité, mais d'une manière ambiguë. Hybrides préféré un panneau-à-la-fois la règle par une majorité infime, tandis que concepteurs et développeurs, et aucun des Aboves convenu que plusieurs panneaux sont corrects par des majorités légèrement plus grand.

Une majorité beaucoup plus grande (73%) estime que l'accordéon peut avoir un état complètement fermé (qui est, qu'il n'est pas nécessaire qu'il y ait toujours une fenêtre ouverte). L'exception est que les seuls Aucun des Aboves brisé à 60% pour la position qu'il doit toujours y être un panneau ouvert.

Plusieurs commentateurs ont suggéré que c'est une bonne pratique d'avoir un panneau ouvert par défaut, et pour que le panneau soit à être le premier, le plus récemment utilisés.

Une autre grande majorité (76%) croit que la taille globale d'un accordéon peut changer selon les besoins, plutôt que d'être contraint à une taille uniforme. (Bien sûr, il ya des contextes, tels que l'écran d'un appareil mobile, dans lequel il peut être un choix valide, ou même une contrainte de conception d'un accordéon maintenir une taille constante.)

Une très faible majorité (51%) ont suggéré que les accordéons devrait ouvrir sur un clic (par opposition à des hover) et une minorité presque aussi importante (45%) ont dit que cela dépend. Fait intéressant, moins de 4% étaient disposés à indiquer les accordéons devrait ouvrir sur hover comme une règle.

Les commentaires écrits sur cette question offrait beaucoup de bonne nourriture pour la pensée, tels que:

Ouverture d'un panneau doit nécessiter une action explicite. Si un accordéon a plusieurs panneaux, ouverture sur hover pourrait être une expérience choquante. Plutôt, l'utilisation d'une infobulle pour transmettre les détails de ce qui est résumé dans le panneau, et ont explicitement à l'utilisateur «clic» pour ouvrir ce panneau.

Dépend de la configuration de chaque accordéon.

J'ai mis ces exemples ensemble [ plusieurs , capotage ], afin que le développeur peut effectivement utiliser le «meilleur ajustement» pour chaque cas d'utilisation.

En outre, il devrait y avoir la possibilité d'utiliser retournement avec des règles différentes: (plus ouvert) ou (éléments doivent être ouverts sur mouseover seulement).

Pour usages de pointe, un accordéon devrait ouvrir au survol lors des opérations de glisser-déposer. En toute autre circonstance, vous ne pouvez pas croire que le vol stationnaire est intentionnel.

Accessibilité

Enfin, nous avons demandé une pêche question ouverte pour toute les problèmes d'accessibilité connue avec des accordéons et a obtenu beaucoup de réponses grand. (Pour notre sujet, par exemple, la plupart des gens ont convenu que faisant l'étiquette entière cliquable, et pas seulement une petite icône est important.)

Voici un échantillon de perspicacité d'autres sur l'accessibilité avec des accordéons:

Je pense qu'il est sûr de supposer que l'interaction est une interaction Accordéon avancés. Beaucoup de problèmes d'accessibilité peuvent se poser.

1. Le contenu est caché derrière des panneaux afin que les gens ne peuvent pas le trouver.
2. Selon la taille de la zone cliquable ou le déclencheur pour ouvrir / fermer les panneaux il pourrait y avoir des problèmes avec la dextérité manuelle nécessaires.

Accordéons devrait ouvrir tous les panneaux si javascript n'est pas disponible (bien que peut produire un «clignotement» pour ceux qui ont javascript).

Cela dépend si le contenu dans les panneaux cachés est présent dans les DOM ou est récupéré à l'ouverture du panneau. Si elle est récupérée, l'accent doit être placé sur le panneau nouvellement ouvert.

Eh bien, je crois vraiment que le titre devrait être cliquable, spécialement si le contenu de l'élément sera chargé en utilisant AJAX (un peu comme une approche TabView), mais la réalité est que parfois le développeur (devraient avoir) / (vouloir) le contrôle à personnaliser ce comportement. Voici la liste des exemples que j'ai créé pour une application widget Accordéon basés sur YUI 2.x, c'est probablement l'un des composants les plus utilisés de l'extension bouillonnant YUI.

Nous avons eu un cas où le «label» de l'accordéon était un lien vers un article de blog complet, et ne pouvait donc pas être en accordéon cliquables. Dans ce cas, nous avons écrit une icône dans la source avec JS pour faire le travail. A condition de l'icône est suffisamment grand et / ou livré avec un touch, je ne vois pas une difficulté majeure ...

Accordéon contrôles serveur dans le but de lots montage de contenus dans moins d'espace. Comme il s'agit d'une préoccupation visuelle, il serait très bien pour un lecteur d'écran pour simplement lire tout le contenu et d'ignorer le fait qu'il est affiché comme un accordéon visuellement. Il suffit d'une icône à cliquer pour élargir un panneau. Il pourrait y avoir une option de configuration pour permettre à l'étiquette au complet pour développer un panneau, ou il peut être laissé au développeur la mise en œuvre d'attacher un écouteur à l'étiquette qui appelle à un public «ouvert» ou «élargir» la fonction d'ajouter cette fonctionnalité.

Il suffit de penser d'un accordéon comme une vue par onglets. La superficie de l'aire entière étiquette doit être cliquable, mais si elle contient d'autres contrôles (par exemple un "rejet" ou bouton "Fermer") je suggère que l'étiquette (texte) sera cliquable, ou au moins la zone clikable seulement d'étendre jusqu'à la interactives contrôle (c'est à dire pour une légende contenant un bouton, la zone ci-dessus, ci-dessous et «après» le bouton doit être cliquable).

Libérer le modèle Projet

Un intervenant demande aux contraintes artificielles de l'enquête (un flic juste, si vous me demandez):

Je n'aimais pas cette enquête. Les questions n'étaient pas assez flexibles. En tant que développeur concepteur /, je crois que tous les éléments de l'interface doivent être adaptés au site ou une application particulière web. Poser des questions en noir et blanc ne laisse pas de place pour les différences évidentes entre les projets. Certains projets ont besoin d'une règle dure et rapide, tandis que la même règle pourrait être totalement inapproprié pour une autre application. Pour la plupart, je ne pouvais d'répondu à chaque question avec un "ça dépend" résultat.

Soyez assurés que le modèle ne recommandons douceur et le code YUI sera flexible et puissant. L'enquête n'a pas été conçu pour limiter les choix des gens, mais plutôt de recueillir les opinions et les préférences, de sorte que même des commentaires sur de ne pas avoir dur et rapide des règles est utile.

Nous avons publié une version bêta du modèle de l'accordéon dans le Pattern Library Yahoo! Design. Si vous souhaitez améliorer les informations supplémentaires sur le modèle, de manière à forme libre, s'il vous plaît goutte ou visitez le rapport du forum de discussion.

Trouver des conversations: Bloglines | technorati

Partager et prolonger: Conservez ce lien avec del.icio.us | Digg it! | reddit!