Concepts UI de A à Z

Un ensemble vertical d'en-têtes qui révèle ou masque chaque section de contenu associée.

Un message persistant placé près du contenu ou de la tâche qu'il explique, avec une urgence adaptée à la mise à jour réelle.

Un ressort rejoint une cible selon sa raideur, sa masse et son amortissement. Un faible amortissement peut dépasser la cible ; un amortissement élevé supprime les oscillations.

Un message visible et persistant qui traverse une région de page pour communiquer une condition affectant largement son utilisation.

Un indicateur visuel et sémantique d’avancement : il expose une valeur dans une plage connue quand elle est mesurable et reste indéterminé sans valeur fiable.

Une région persistante à côté du contenu principal, intégrée à la mise en page et généralement dédiée à la navigation ou à des outils complémentaires.

Une surface ciblée pour une tâche délimitée qui rend le reste de la page temporairement inactif.

Un contrôle nommé qui exécute une action dans l'interface actuelle lorsqu'il est activé.

Un bouton compact représenté visuellement par une icône mais doté de son propre nom d'action accessible et stable.

Un choix binaire indépendant qui peut être coché, décoché ou parfois indéterminé.

Un champ de texte dans un formulaire de recherche nommé qui envoie une requête pour trouver du contenu correspondant.

Un contrôle étiqueté sur une ligne pour saisir ou modifier une valeur textuelle.

Un contrôle de valeur avec une surface associée ; il peut être modifiable ou sans saisie, et cette surface peut être une listbox, une grille, une arborescence ou une boîte de dialogue.

Un groupe visuellement joint d’options adjacentes qui sélectionne une valeur dans un petit ensemble.

Une courbe d’animation transforme le temps écoulé en progression sur une durée fixée. Elle change le rythme, pas la destination.

Un dialogue modal qui interrompt une action lourde de conséquences et exige une confirmation ou une annulation explicite.

Une petite surface contextuelle ouverte volontairement pour afficher du contenu ou des contrôles sans rendre toute la page modale.

Une surface pensée pour mobile, attachée au bord inférieur, qui peut s'ouvrir à des hauteurs stables et accepter le glissement.

Une suite ordonnée de liens vers les pages parentes de la page courante qui situe celle-ci dans la hiérarchie du site.

Un composite tabulaire interactif qui gère un seul point d’entrée clavier et le déplacement directionnel du focus entre les cellules, souvent avec édition ou sélection.

Un ensemble nommé de choix mutuellement exclusifs où sélectionner une option désélectionne la précédente.

Un indicateur animé compact pour un travail dont l'avancement est inconnu, accompagné d'un état d'attente explicite.

Un résumé d’avancement qui distingue les étapes terminées, courante et à venir d’un processus linéaire porteur de sens.

Une courte aide non interactive qui apparaît au survol ou lorsque le contrôle reçoit le focus clavier.

Un contrôle binaire qui expose un réglage en marche ou arrêt.

Une connexion nommée vers une autre destination qui conserve le comportement de navigation standard du navigateur.

Un widget composite d'options nommées qui accepte une ou plusieurs sélections et peut être autonome ou servir de surface contextuelle à une combobox.

Un contrôle de formulaire pour choisir une ou plusieurs valeurs parmi des options prédéfinies sans saisie libre ; une sélection simple apparaît souvent comme un sélecteur fermé, tandis qu'une sélection multiple peut afficher une liste.

Une liste compacte d'actions qui s'ouvre depuis un bouton et suit la navigation clavier d'un menu.

Le mouvement réduit respecte la préférence d’une personne pour moins de mouvement. Un repli conserve la même information lorsque l’animation est désactivée ou indisponible.

Un bref message non bloquant qui apparaît après un événement et peut disparaître après un temps de lecture suffisant.

Un ensemble de libellés qui bascule entre des panneaux de contenu liés en gardant un seul panneau visible à la fois.

Un ensemble de liens de navigation qui parcourt les pages sœurs d’une même collection de contenu découpée par quantité.

Le shimmer ajoute un reflet mobile à un espace réservé pendant l’attente du contenu. Il ne donne ni pourcentage ni promesse sur le temps restant.

Des formes décoratives de substitution qui réservent la mise en page approximative du contenu pendant son chargement.

Une structure tabulaire non interactive qui relie des données statiques par des lignes, des colonnes et leurs en-têtes.

Une transition d’état change un état utile, par exemple Brouillon vers Enregistré. L’animation peut renforcer ce retour ; elle ne détermine jamais si l’enregistrement a réussi.

Une visionneuse modale qui agrandit un média et peut permettre de parcourir une collection associée.

Un panneau temporaire qui glisse depuis un bord de la fenêtre, recouvre la page et se ferme lorsque sa tâche ciblée est terminée.

Un widget composite pour parcourir des éléments hiérarchiques dont les nœuds parents peuvent développer ou replier leurs groupes enfants.

Un contrôle étiqueté pour saisir ou modifier un texte libre sur plusieurs lignes.