Une infobulle donne un petit indice. Une popover peut contenir plus de texte, des choix ou des boutons.
Utilisez une info-bulle lorsqu'un petit nombre de mots suffit. Utilisez un popover lorsqu'une personne doit lire ou faire plus sans quitter la page. Ouvrir le guideComparer les modèles d'interface utilisateur faciles à confondre
Deux modèles peuvent se ressembler mais faire des travaux différents. Utilisez ces règles courtes pour choisir le bon.
Une modale bloque la page jusqu'à la fin de la tâche. Une popover reste à côté de son bouton et laisse la page continuer de fonctionner.
Utilisez une fenêtre modale pour une tâche qui doit être terminée en premier. Utilisez un popover pour des détails supplémentaires ou une petite action. Ouvrir le guide Menu déroulant & Menu contextuel — Pack d'apprentissageDropdown & Context Menu — Learning Bundle vs. SélectionnerSelect vs. Combobox modifiableEditable Combobox
Un menu déroulant lance des actions. Un select permet de choisir dans une liste fixe. Un combobox te laisse aussi écrire ou chercher.
Utilisez un menu pour les actions. Utilisez une sélection pour une courte liste fixe. Utilisez une boîte combinée pour une liste longue ou consultable. Ouvrir le guideLes onglets permettent de passer d'une section de contenu à une autre. Un contrôle segmenté change un petit mode, filtre ou valeur dans la même vue.
Utilisez des onglets pour des sections de contenu séparées. Utilisez un contrôle segmenté pour quelques choix courts qui modifient le même contenu. Ouvrir le guideUn accordéon ouvre des sections dans une page et peut en garder plusieurs ouvertes. Les onglets montrent une section à la fois dans un espace commun.
Utilisez un accordéon pour les questions ou sections que les gens peuvent lire ensemble. Utilisez des onglets pour quelques vues séparées lorsqu'une seule importe à la fois. Ouvrir le guideUn toast est un court message qui ne bloque la tâche. Une alerte reste ou interrompt car il ne faut pas la manquer.
Utilisez un toast pour confirmer une action terminée. Utilisez une alerte en cas d'échec, de danger ou pour un choix nécessitant une attention immédiate. Ouvrir le guideUne info-bulle donne un court libellé ou un indice. Une carte de survol montre un aperçu plus riche d'une personne, d'un élément ou d'un lien.
Utilisez une info-bulle lorsqu'un petit nombre de mots suffit. Utilisez une carte flottante lorsque l'aperçu peut éviter de se rendre sur une autre page. Elle doit également fonctionner au clavier et au tactile. Ouvrir le guide macOS Context MenumacOS Context Menu vs. Menu déroulant & Menu contextuel — Pack d'apprentissageDropdown & Context Menu — Learning Bundle
Un menu contextuel affiche les actions pour l'élément sur lequel tu cliques ou appuies. Une liste déroulante s'ouvre depuis un bouton visible avec un but précis.
Utilisez un menu contextuel comme raccourci supplémentaire, et non comme seul chemin. Utilisez un menu déroulant lorsque les gens ont besoin de voir où le menu s'ouvre. Ouvrir le guideUn carrousel montre des diapositives séparées avec des commandes. Un bandeau garde une ligne de contenu en mouvement.
Utilisez un carrousel lorsque chaque élément nécessite du temps et des contrôles. Utilisez un défilement seulement pour une décoration peu importante qui peut se mettre en pause ou s’arrêter lorsqu’on le demande. Ouvrir le guideUne lightbox est une fenêtre modale faite pour les images ou les vidéos. Un modal normal contient un choix, un formulaire ou une petite tâche.
Utilisez une boîte lumineuse pour agrandir les images ou les vidéos. Utilisez une fenêtre modale lorsque la tâche principale est d'agir ou de décider. Ouvrir le guideLa maçonnerie agence des cartes de différentes hauteurs en colonnes. Une grille bento utilise des tailles de cartes planifiées pour montrer ce qui est le plus important.
Utilisez le maçon pour de nombreux éléments séparés de différentes hauteurs. Utilisez une grille bento pour un petit ensemble dont la taille montre l'importance. Ouvrir le guideUne barre latérale reste dans la mise en page. Un tiroir glisse pendant un court moment et peut cacher ou pousser la page.
Utilisez une barre latérale pour les outils ou les liens que les gens utilisent souvent lorsqu'il y a de la place. Utilisez un tiroir pour les tâches moins courantes ou les petits écrans, et facilitez sa fermeture. Ouvrir le guideUn bouton avec trois lignes ouvre la navigation. Un bouton avec trois points ouvre plus d'actions pour un élément à proximité.
Utilisez trois lignes pour la navigation masquée, principalement sur les petits écrans. Utilisez trois points lorsque les actions supplémentaires d'un élément ne rentrent pas et nommez le bouton « Plus d'actions ». Ouvrir le guideLe lissage suit une courbe de timing définie. Un ressort se déplace comme un vrai ressort et s'arrête de lui-même.
Utilisez lissage pour les fondus, les changements de couleur et les étapes temporisées. Utilisez un ressort pour les objets qui bougent ou suivent un glissement. Ouvrir le guideUn sélecteur de pas change un chiffre par étapes fixes. Un curseur choisit un endroit sur une échelle.
Utilisez un sélecteur par étapes pour de petits changements précis. Utilisez un curseur lorsque la position approximative est plus importante que la saisie d'un nombre exact. Affichez toujours la valeur et prenez en charge le clavier. Ouvrir le guideUne feuille appartient à une seule fenêtre et contient une petite tâche. Une alerte affiche un court message ou un choix qui demande votre attention tout de suite.
Utilisez une feuille pour les paramètres, l'enregistrement ou un court formulaire lié à un document. Utilisez une alerte pour un avertissement, une erreur ou une vérification en une étape. Ouvrir le guide État Vide, Erreur et Succès — Pack d'apprentissageEmpty, Error & Success State — Learning Bundle vs. SqueletteSkeleton
Un état vide signifie qu'il n'y a pas de contenu. Un squelette signifie que le contenu est encore en cours de chargement et que sa forme est connue.
Utilisez un état vide pour expliquer pourquoi il n'y a rien et quoi faire ensuite. Utilisez un squelette pour un chargement rapide lorsque vous connaissez la disposition. Ouvrir le guideUne barre d'outils place des actions courantes dans une fenêtre. La barre des menus garde toutes les commandes de l'application en haut de l'écran.
Mettez les actions courantes de document ou de sélection dans la barre d'outils. Gardez toutes les commandes, les raccourcis clavier et les actions moins courantes dans la barre de menu. Ouvrir le guide