Le vocabulaire de l'interface

Montrer des informations sans demander d'interaction lourde au visiteur.

Carte (card)

Bloc à ombre ou bordure légère qui regroupe des informations liées : titre, texte, parfois image et bouton, souvent en grille.

Quand l'utiliser : liste d'éléments comparables (produits, formules) ; une carte = un élément.

Quand l'éviter : texte continu (un article), où elle fragmente la lecture.

Suite d'éléments empilés verticalement, plus dense qu'une grille de cartes et plus rapide à parcourir.

Quand l'utiliser : 5+ éléments à parcourir vite (notifications, tâches) ; passe mieux qu'une grille sur mobile.

Quand l'éviter : si chaque élément mérite d'être mis en valeur : cartes en grille.

Disposition en colonnes et lignes à largeur égale : contrairement à la liste (empilée), la grille présente les éléments côte à côte.

Quand l'utiliser : éléments visuellement riches qui méritent leur espace (projets, produits), idéal pour comparer d'un coup d'œil.

Quand l'éviter : données denses ou tabulaires (le tableau est plus lisible) ; 1-2 colonnes sur mobile.

Grille de données en lignes et colonnes, avec en-têtes, pour comparer plusieurs attributs alignés.

Quand l'utiliser : à partir de 3 colonnes à comparer (export comptable), idéal sur écran large.

Quand l'éviter : illisible en largeur sur mobile ; pour 2 colonnes, une liste suffit.

Liste de sections repliées, ouvertes une par une au clic sur leur titre : chacune masque son contenu jusque-là.

Quand l'utiliser : FAQ, ou information secondaire à rendre disponible sans l'imposer.

Quand l'éviter : contenu que tout le monde doit lire : personne ne déplie tout, affichez-le directement.

Plusieurs vues d'une même zone d'écran, alternées au clic sur un onglet : une seule visible à la fois.

Quand l'utiliser : contenus liés mais exclusifs (Profil / Sécurité / Facturation), ou vues alternatives (mois / année).

Quand l'éviter : contenus à comparer simultanément : l'utilisateur ne voit pas les deux d'un coup.

Petite pastille colorée qui indique un statut : « Nouveau », « Payé », « En attente ».

Quand l'utiliser : signaler un état d'un coup d'œil dans une liste ou un tableau ; la couleur porte du sens (vert = ok, rouge = problème).

Quand l'éviter : décoratif sans information : ça surcharge.

Petite image ronde ou carrée d'un utilisateur ; à défaut de photo, ses initiales sur fond coloré.

Quand l'utiliser : à côté d'un nom d'utilisateur, en barre du haut (compte connecté), un commentaire, une liste de membres.

Quand l'éviter : sans identité utilisateur à afficher, il n'apporte rien.

Trait horizontal fin qui marque une coupure entre deux blocs sans changer de section.

Quand l'utiliser : entre deux groupes d'un formulaire long, ou pour aérer une carte dense.

Quand l'éviter : à profusion : un trait tous les deux paragraphes hache la lecture.