Décider par comparaison
Compare des concepts proches.
46 comparaisons répondent à une décision précise avec une règle, neuf dimensions et des sources.
Tu ne sais pas quoi comparer ?
Pars d’une situation réelle.
Réponds à trois questions maximum pour obtenir un concept recommandé, ses alternatives et le lab à tester.
Changer de vue ou révéler du contenu
Faut-il changer de vue, choisir un mode compact ou révéler du contenu dans le flux ?
- Accordéon vs Contrôle segmentéChoisis Accordéon si l’utilisateur ouvre des sections de détail facultatives, comme une FAQ, et peut en laisser plusieurs ouvertes. Choisis Contrôle segmenté si l’utilisateur bascule un réglage ou un mode d’affichage compact entre deux et cinq valeurs.Voir la décision
- Accordéon vs OngletsChoisis Accordéon si plusieurs sections peuvent rester ouvertes en même temps et se lisent de haut en bas, comme une FAQ. Choisis Onglets si les vues sont de même niveau et qu’une seule doit occuper l’espace à la fois.Voir la décision
- Contrôle segmenté vs OngletsChoisis Contrôle segmenté si le choix est une valeur, comme un tri ou une unité, qui change la façon d’afficher le même contenu. Choisis Onglets si chaque option affiche son propre panneau de contenu dans une zone commune.Voir la décision
Surfaces modales
La tâche consiste-t-elle à agir, à confirmer une décision sensible ou à consulter un média ?
- Dialogue d'alerte vs Visionneuse modaleChoisis Dialogue d’alerte si l’utilisateur doit décider avant une action lourde de conséquences. Choisis Visionneuse modale si consulter un média en grand est la tâche, sans décision sensible.Voir la décision
- Dialogue d'alerte vs Boîte de dialogue modaleChoisis Dialogue d’alerte si l’utilisateur doit confirmer ou annuler une action lourde de conséquences, sans autre saisie. Choisis Boîte de dialogue modale si la tâche demande plusieurs champs ou étapes tout en gardant la page en arrière-plan.Voir la décision
- Visionneuse modale vs Boîte de dialogue modaleChoisis Visionneuse modale si consulter ou parcourir des images ou vidéos est la tâche principale. Choisis Boîte de dialogue modale si l’utilisateur remplit un formulaire ou accomplit une autre tâche délimitée.Voir la décision
Informer l'utilisateur
Le message est-il temporaire, persistant dans son contexte ou global à la page ?
- Bannière d'annonce vs Alerte dans le contexteChoisis Bannière d’annonce si le message concerne toute la page ou la session, comme une maintenance planifiée. Choisis Alerte dans le contexte si le message explique un problème dans un formulaire, un champ ou un envoi, là où il s’est produit.Voir la décision
- Bannière d'annonce vs Notification temporaireChoisis Bannière d’annonce si la condition persiste et que l’utilisateur doit la garder en tête en utilisant la page. Choisis Notification temporaire si tu confirmes un résultat de fond à faible risque qui ne demande aucune action.Voir la décision
- Alerte dans le contexte vs Notification temporaireChoisis Alerte dans le contexte si le message doit rester visible tant que le problème n’est pas résolu, comme une erreur de formulaire. Choisis Notification temporaire si tu confirmes un résultat à faible risque que l’utilisateur peut ignorer sans conséquence.Voir la décision
Surfaces attachées à un bord
La surface doit-elle rester persistante, entrer depuis un bord latéral ou monter depuis le bas ?
- Feuille basse vs Volet latéralChoisis Feuille basse si l’action est compacte, surtout sur mobile, et gagne à rester au-dessus du contenu. Choisis Volet latéral si le panneau est plus structuré et entre depuis la gauche ou la droite.Voir la décision
- Feuille basse vs Barre latéraleChoisis Feuille basse si la surface apparaît pour une tâche ponctuelle, surtout sur mobile, puis disparaît. Choisis Barre latérale si la navigation doit rester visible et persistante dans l’espace de travail.Voir la décision
- Volet latéral vs Barre latéraleChoisis Volet latéral si le panneau s’ouvre pour une tâche ciblée puis se ferme, comme des filtres ou un détail. Choisis Barre latérale si la région doit rester en place pour naviguer ou garder des outils à portée.Voir la décision
S’orienter dans un parcours
Faut-il situer la page dans une hiérarchie, parcourir des pages de résultats ou montrer l’étape d’un processus ?
- Fil d’Ariane vs PaginationChoisis Fil d’Ariane si la page courante a des parents vers lesquels l’utilisateur peut vouloir revenir. Choisis Pagination si une longue liste ou un ensemble de résultats est découpé en pages stables et partageables.Voir la décision
- Fil d’Ariane vs Indicateur d’étapesChoisis Fil d’Ariane si les pages ont des parents et que l’utilisateur peut remonter d’un niveau. Choisis Indicateur d’étapes si un processus linéaire a des étapes terminées, courante et à venir.Voir la décision
- Pagination vs Indicateur d’étapesChoisis Pagination si les pages sont des tranches équivalentes d’une collection et qu’aucune ne doit être terminée avant une autre. Choisis Indicateur d’étapes si un processus linéaire comporte au moins trois étapes utiles que l’utilisateur accomplit dans l’ordre.Voir la décision
Déclencher ou naviguer
Le contrôle déclenche-t-il une action, change-t-il de destination ou doit-il rester iconique ?
- Bouton vs Bouton icôneChoisis Bouton si l’action est principale ou peu familière et qu’un libellé visible évite un malentendu. Choisis Bouton icône si une action familière se répète dans une barre dense et que l’espace compte plus qu’un libellé visible.Voir la décision
- Bouton vs LienChoisis Bouton si l’activation change quelque chose ici, comme envoyer, ouvrir ou supprimer. Choisis Lien si l’activation emmène vers une autre page ou route que l’on peut ouvrir dans un nouvel onglet.Voir la décision
- Bouton icône vs LienChoisis Bouton icône si l’activation agit sur place, comme copier, fermer ou ajouter aux favoris. Choisis Lien si l’activation mène vers une autre page ou route, même quand seule une icône est visible.Voir la décision
Choix et états binaires
S’agit-il d’une valeur indépendante, d’un choix exclusif groupé ou d’un réglage marche ou arrêt ?
- Case à cocher vs Groupe de boutons radioChoisis Case à cocher si l’utilisateur peut cocher zéro, une ou plusieurs options. Choisis Groupe de boutons radio si exactement une option doit être retenue parmi des alternatives visibles.Voir la décision
- Case à cocher vs InterrupteurChoisis Case à cocher si l’utilisateur sélectionne un nombre libre d’options ou approuve une affirmation, comme accepter des conditions. Choisis Interrupteur si un réglage unique est activé ou désactivé, comme les notifications ou le thème sombre.Voir la décision
- Groupe de boutons radio vs InterrupteurChoisis Groupe de boutons radio si l’utilisateur choisit une option parmi plusieurs alternatives nommées, comme un mode de livraison. Choisis Interrupteur si la seule question est de savoir si un réglage est activé ou désactivé.Voir la décision
Choisir dans une liste
La personne choisit-elle une valeur native, filtre-t-elle en saisissant ou navigue-t-elle dans une liste ?
- Combobox vs Liste d'optionsChoisis Combobox si l’utilisateur saisit ou filtre pour atteindre une valeur et que les options n’apparaissent qu’à la demande. Choisis Liste d’options si les options restent visibles dans la page ou si plusieurs peuvent être sélectionnées à la fois.Voir la décision
- Combobox vs Liste de sélectionChoisis Combobox si l’utilisateur doit filtrer, saisir ou parcourir une surface plus riche qu’une liste fermée. Choisis Liste de sélection si les valeurs sont connues et peu nombreuses et que le natif suffit.Voir la décision
- Liste d'options vs Liste de sélectionChoisis Liste d’options si les options exigent un rendu personnalisé, restent visibles ou permettent une sélection multiple avec des raccourcis clavier que tu contrôles. Choisis Liste de sélection si un ensemble connu de valeurs tient dans un champ de formulaire simple et que le natif suffit.Voir la décision
Structurer et explorer des données
Faut-il lire des données tabulaires, interagir cellule par cellule ou développer une hiérarchie ?
- Grille de données vs TableauChoisis Grille de données si l’utilisateur édite, sélectionne ou parcourt beaucoup de cellules au clavier. Choisis Tableau si les données se lisent et se comparent sans interaction dans les cellules.Voir la décision
- Grille de données vs Vue arborescenteChoisis Grille de données si les données sont tabulaires et que l’utilisateur édite ou parcourt beaucoup de cellules efficacement. Choisis Vue arborescente si la structure est une vraie hiérarchie, comme des dossiers, que l’utilisateur développe niveau par niveau.Voir la décision
- Tableau vs Vue arborescenteChoisis Tableau si l’utilisateur compare des valeurs entre lignes et colonnes sans structure parent-enfant. Choisis Vue arborescente si les éléments ont des parents et que l’utilisateur descend de niveau en niveau.Voir la décision
Petites surfaces contextuelles
As-tu besoin d’une explication brève, d’un contenu contextuel interactif ou d’une liste d’actions ?
- Menu d'actions déroulant vs Fenêtre contextuelleChoisis Menu d’actions déroulant si chaque élément est une action comme Modifier ou Archiver. Choisis Fenêtre contextuelle si le contenu est explicatif ou interactif sans se limiter à une liste d’actions.Voir la décision
- Menu d'actions déroulant vs InfobulleChoisis Menu d’actions déroulant si l’utilisateur doit choisir une action comme Modifier, Dupliquer ou Archiver. Choisis Infobulle si un texte court explique simplement une icône ou un contrôle et que rien n’y est cliquable.Voir la décision
- Fenêtre contextuelle vs InfobulleChoisis Fenêtre contextuelle si le contenu comprend un lien, un contrôle ou plus d’une phrase ou deux. Choisis Infobulle si quelques mots clarifient une icône peu familière et que leur absence sur mobile est acceptable.Voir la décision
Mouvement et effets
Le mouvement explique-t-il un changement, signale-t-il un état ou décore-t-il seulement ?
- Courbe d’animation vs Mouvement réduit et repliChoisis Courbe d’animation si tu cherches un rythme de durée fixée. Choisis Mouvement réduit et repli si tu cherches le même résultat sans mouvement.Voir la décision
- Courbe d’animation vs Reflet de chargementChoisis Courbe d’animation si tu cherches un rythme de durée fixée. Choisis Reflet de chargement si tu cherches une décoration facultative d’attente.Voir la décision
- Courbe d’animation vs Animation à ressortChoisis Courbe d’animation si tu cherches un rythme de durée fixée. Choisis Animation à ressort si tu cherches une réponse physique amortie.Voir la décision
- Courbe d’animation vs Transition d’étatChoisis Courbe d’animation si tu cherches un rythme de durée fixée. Choisis Transition d’état si tu cherches un retour d’état persistant.Voir la décision
- Mouvement réduit et repli vs Reflet de chargementChoisis Mouvement réduit et repli si tu cherches le même résultat sans mouvement. Choisis Reflet de chargement si tu cherches une décoration facultative d’attente.Voir la décision
- Mouvement réduit et repli vs Animation à ressortChoisis Mouvement réduit et repli si tu cherches le même résultat sans mouvement. Choisis Animation à ressort si tu cherches une réponse physique amortie.Voir la décision
- Mouvement réduit et repli vs Transition d’étatChoisis Mouvement réduit et repli si tu cherches le même résultat sans mouvement. Choisis Transition d’état si tu cherches un retour d’état persistant.Voir la décision
- Reflet de chargement vs Animation à ressortChoisis Reflet de chargement si tu cherches une décoration facultative d’attente. Choisis Animation à ressort si tu cherches une réponse physique amortie.Voir la décision
- Reflet de chargement vs Transition d’étatChoisis Reflet de chargement si tu cherches une décoration facultative d’attente. Choisis Transition d’état si tu cherches un retour d’état persistant.Voir la décision
- Animation à ressort vs Transition d’étatChoisis Animation à ressort si tu cherches une réponse physique amortie. Choisis Transition d’état si tu cherches un retour d’état persistant.Voir la décision
Attendre et suivre une progression
La durée est-elle inconnue, mesurable ou faut-il préserver la forme du contenu ?
- Barre de progression vs Squelette de chargementChoisis Barre de progression si une tâche a une valeur d’avancement fiable, comme un envoi en octets. Choisis Squelette de chargement si une zone de page charge un contenu dont la mise en page est connue à l’avance.Voir la décision
- Barre de progression vs Indicateur d'attenteChoisis Barre de progression si tu connais une valeur fiable, comme des octets envoyés ou des étapes terminées. Choisis Indicateur d’attente si l’opération est courte et sans valeur d’avancement utile.Voir la décision
- Squelette de chargement vs Indicateur d'attenteChoisis Squelette de chargement si la zone en chargement est grande et que sa forme finale est prévisible, comme une carte ou un article. Choisis Indicateur d’attente si l’attente est courte ou la zone petite, comme à l’intérieur d’un bouton.Voir la décision
Saisir du texte
Attend-on une valeur courte, un texte multiligne ou une requête de recherche ?
- Champ de recherche vs Champ de texteChoisis Champ de recherche si le texte saisi est une requête sur un site, un catalogue ou un ensemble de résultats. Choisis Champ de texte si la valeur est un nom, un e-mail, un code ou une autre saisie courte conservée comme donnée.Voir la décision
- Champ de recherche vs Zone de texte multiligneChoisis Champ de recherche si l’utilisateur cherche quelque chose et attend des résultats, pas un enregistrement. Choisis Zone de texte multiligne si l’utilisateur rédige un message, une note ou une description sur plusieurs lignes.Voir la décision
- Champ de texte vs Zone de texte multiligneChoisis Champ de texte si la valeur est un nom, un e-mail, un code ou une autre saisie courte. Choisis Zone de texte multiligne si l’utilisateur rédige un message, une note ou une description.Voir la décision