UX / UI & Design numérique — vocabulaire professionnel

Arborescence

Le plan qui organise toutes les pages et rubriques d'un site en une hiérarchie logique, pour que chaque contenu se trouve à l'endroit où l'utilisateur ira le chercher naturellement.

Charte graphique

Le document qui fixe les règles précises de couleurs, typographies et espacements à respecter, pour que tous les intervenants produisent un résultat homogène.

2 définitions selon le contexte de travail

Composant

Un élément d'interface prêt à l'emploi (un bouton, un champ de formulaire, une carte produit) conçu une seule fois puis réutilisé partout où il est nécessaire, pour éviter de tout redessiner à chaque page.

Déclinaison

L'adaptation du même logo et des mêmes codes visuels à différents formats (carte de visite, site web, réseaux sociaux) tout en gardant une identité reconnaissable.

Design system

Une bibliothèque commune de boutons, couleurs, polices et composants réutilisables qui garantit que chaque nouvelle page ou application reste visuellement cohérente avec les précédentes.

Flux de navigation

L'enchaînement simulé des écrans montrant comment l'utilisateur passe de l'un à l'autre en cliquant, pour valider la logique de navigation avant le développement.

Grille de mise en page

Une structure invisible en colonnes qui aligne tous les éléments d'une page pour donner une impression d'ordre et de cohérence visuelle.

Ligne éditoriale visuelle

L'ensemble des choix de style (photos, illustrations, ton des couleurs) qui donnent une personnalité cohérente à toutes les communications de la marque.

Logotype

Le symbole graphique et/ou le texte stylisé qui identifie une marque en un coup d'œil, décliné ensuite sur tous les supports.

Maquette haute fidélité

Une version quasi finale de chaque écran, avec les vraies couleurs, polices et images, qui montre à quoi ressemblera le produit fini avant même que le développement ne commence.

Micro-interaction

Un petit effet d'animation (un bouton qui change de couleur au survol, une icône qui vibre) qui donne un retour visuel immédiat à l'utilisateur sur l'action qu'il vient d'effectuer.

Parcours utilisateur

Le schéma de toutes les étapes qu'une personne traverse pour accomplir une action sur votre site ou votre application, depuis son arrivée jusqu'à son objectif final.

Persona

Un profil type d'utilisateur imaginé à partir d'entretiens et de données réelles, qui sert de repère pour prendre les décisions de conception plutôt que de deviner au hasard.

Points de friction

Les moments précis du parcours où l'utilisateur bute, hésite ou abandonne, identifiés pour être corrigés en priorité.

Prototype interactif

Une maquette cliquable qui simule le fonctionnement réel de l'application (changement d'écran, ouverture de menu) sans qu'aucune ligne de code n'ait encore été écrite, pour tester l'expérience avant de développer.

Responsive design

La conception d'une interface qui s'adapte automatiquement à la taille de l'écran, qu'il s'agisse d'un téléphone, d'une tablette ou d'un ordinateur.

Spécification d'interaction

Le document qui décrit précisément, pour chaque élément, ce qui doit se passer quand l'utilisateur clique, glisse ou tape, afin que le développeur sache exactement quoi coder.

Test utilisateur

Une séance où des personnes réelles essaient l'application devant le designer, qui observe où elles hésitent ou se trompent pour corriger le problème avant la mise en ligne.

Token de design

Une valeur nommée et centralisée (une couleur, une taille de texte) utilisée dans tout le design system, pour qu'un seul changement se répercute automatiquement partout où elle est utilisée.

Wireframe

Un croquis simplifié en noir et blanc qui positionne les blocs d'une page (menu, image, bouton) sans se soucier des couleurs ni des détails, pour valider l'organisation avant d'habiller visuellement.

Zone de clic

L'espace réel sur lequel l'utilisateur peut appuyer pour qu'un bouton ou un lien réagisse, souvent plus large que le texte affiché pour rester facile à toucher sur mobile.