accordéons vs tabs
Quelle est la différence entre les accordéons et les onglets du point de vue UX?
Il s'agit d'une nouvelle publication de ce fil sur SO: https://stackoverflow.com/questions/5690589/difference-between-accordion-and-tabs
(Je sais que les accordéons sont généralement verticaux, tandis que les onglets sont horizontaux, mais je pourrais imaginer les deux dans des orientations opposées)
À l'heure actuelle, il semble que l'accordéon soit mieux adapté aux appareils à écran tactile.
Bonne question!
- Les onglets ont une hauteur illimitée et peuvent s'étendre sur plusieurs écrans, tandis qu'un accordéon doit tenir sur un seul écran. Ce n'est pas une limitation technique, bien sûr, mais ce serait une terrible idée de faire un accordéon qui se dilate hors de mon champ de vision, car alors je devrais faire défiler vers le bas pour cliquer sur la "barre" suivante, juste pour avoir il s'agrandit puis revient en arrière pour l'afficher.
- Les onglets peuvent avoir des tailles différentes (je pense que c'est une mauvaise pratique - à moins qu'ils ne soient si grands que vous ne les remarquiez pas de taille différente - mais ils le peuvent), et les éléments d'accordéon sont liés à la même taille. Vous pouvez potentiellement faire un accordéon qui change sa taille pour différents éléments, mais je pense que de telles personnes devraient être fouettées (edit: ok, à moins que ce ne soit vraiment bien fait).
- Avec des onglets, vos moyens de navigation sont très proches les uns des autres et restent toujours au même endroit. Vous pouvez les parcourir rapidement. Avec les accordéons, chaque fois que vous cliquez, vous changez les emplacements des déclencheurs de navigation et vous les déplacez de l'autre côté du contrôle.
ÉDITER
4 - Les accordéons sont plus "expérientiels" - vous pouvez animer la transition entre les diapositives facilement, c'est amusant et c'est logique. La transition animée entre les onglets est très rare, elle ne se fait jamais avec des "onglets traditionnels" - ceux avec le véritable onglet en haut - et ce ne sont généralement que des images qui se remplacent, pas l'effet de diapositive cool que vous obtenez avec les accordéons.
5 - Vous pouvez déclencher des accordéons avec le survol de la souris. Vous ne le faites pas avec des onglets.
6 - Grâce à l'option mouseover, un accordéon peut être un moyen de navigation en soi (révéler avec mouseover, puis cliquer pour naviguer), tandis que les onglets affichent presque toujours le contenu.
7 - Avec les accordéons, vous pouvez afficher une partie du contenu de chaque élément dans l'état par défaut, et vous pouvez vous assurer que certains contenus sont toujours visibles. Avec les onglets, seule l'étiquette de chaque diapositive est toujours visible.
L'accordéon sur ce site illustre plusieurs de ces points - examinez son comportement et voyez comment vous ne pouvez rien faire avec des onglets.
Accordéons
Quel problème cela résout-il?
Lorsqu'il y a trop d'éléments pour tenir dans un espace limité ou lorsque le nombre d'éléments, s'ils sont affichés en même temps, submergerait l'utilisateur, alors la question est de savoir comment donner à l'utilisateur l'accès à tous les éléments en morceaux digestibles et sans nécessitant un défilement, ce qui peut retirer l'utilisateur du contexte ou de la position de la page qu'il préfère.
Quand utiliser ce modèle
À utiliser lorsque le nombre d'options est élevé, l'espace est limité et la liste des éléments peut être logiquement regroupée en blocs plus petits et de taille à peu près égale.
Quelle est la solution?
Présentez un ensemble d'options à deux niveaux.
- Le niveau supérieur correspond aux catégories ou aux regroupements.
- Le niveau secondaire est la liste des options qui appartiennent à chaque groupe.
Les accordéons sont généralement conçus comme une pile de panneaux pliables (et non avec l'apparence d'arbres hiérarchiques) avec les éléments de catégorie de niveau supérieur utilisés comme étiquettes. Les étiquettes de catégorie peuvent fonctionner comme des poignées pleine largeur ou peuvent être fournies avec une icône de développement/réduction cohérente. Un accordéon peut avoir un panneau ouvert par défaut lors de l'affichage initial.
Pourquoi utiliser ce modèle?
La principale raison d'utiliser un élément accordéon est de compresser une grande quantité d'options dans un espace limité.
Onglets de navigation
Quel problème cela résout-il?
L'utilisateur doit parcourir un site pour localiser le contenu et les fonctionnalités et avoir une indication claire de leur emplacement actuel sur le site.
Quand utiliser ce modèle
- Il existe 3 à 10 titres de catégorie.
- Les titres des catégories sont relativement courts et prévisibles.
- Le nombre de catégories ne devrait pas changer souvent.
- Toute la largeur de la page est nécessaire pour le contenu. Une autre approche consiste à utiliser une barre de navigation de gauche
- Les catégories appartiennent à un seul site.
- Vous devez représenter les options de navigation de plus haut niveau sur un site.
- Vous devez indiquer l'emplacement actuel de l'utilisateur dans l'ensemble des options disponibles. 8.Vous devez modifier la page entière et non une sous-section de contenu dans la page.
- Vous avez besoin d'un moyen de contrôler le plus haut niveau de navigation.
Pourquoi utiliser ce modèle?
Les onglets fournissent le contexte. Ils offrent la possibilité de donner une indication visuelle de l'emplacement d'un utilisateur dans un ensemble d'informations.
Les onglets s'appuient sur une métaphore du monde réel. L'état sélectionné est renforcé par la métaphore de l'onglet dossier de fichiers d'un dossier physiquement devant les autres de l'ensemble.
Les onglets permettent la navigation. Ils offrent la possibilité de naviguer sur le site.
Toutes les informations proviennent de https://developer.yahoo.com/ypatterns/ . Je vous conseille d'étudier des bibliothèques de modèles d'interface utilisateur éprouvées au cas où vous souhaiteriez explorer ou comprendre davantage. Mais ce ne sont pas des dogmes.
Les onglets indiquent clairement qu'il contient des données, mais un accordéon (en particulier les très stylisés) ressemblera à une information ou à un texte de décoration ou quelque chose ... certains utilisateurs peuvent même ne pas cliquer sur l'accordéon pour savoir s'il en contient. quelque chose.
Référence: Expérience personnelle en tant qu'utilisateur et concepteur Web.
La principale différence entre les onglets et les accordéons est définie par leurs caractéristiques d'interaction et d'affichage, car ce sont essentiellement des conteneurs qui permettent aux gens d'organiser et d'accéder à une grande quantité de contenu. Contrairement aux arbres et aux cartes, ils n'ont pas un niveau d'organisation et de hiérarchie plus profond (sauf si vous les commandez ou les regroupez dans d'autres conteneurs).
Interaction: Les onglets ont généralement une transition plus rapide que les accordéons qui sont généralement animés.
Position: les étiquettes des onglets ne sont pas affectées par les interactions, alors qu'un accordéon étendu fait bouger certaines étiquettes à l'écran
Affichage: Les onglets ne peuvent afficher que le contenu d'un onglet à la fois, tandis que les accordéons peuvent être configurés pour afficher plusieurs sections ouvertes
Selon la façon dont les utilisateurs regardent et interagissent avec les informations, vous pouvez utiliser des onglets ou des accordéons pour aider à présenter le contenu de manière optimale aux utilisateurs.