Ressources
Lexique UX/UI & Tech
Un guide rapide pour décrypter le jargon du design d'interface, de l'accessibilité et du web.
Design & UX
- UI User Interface
- L'Interface Utilisateur regroupe tout ce qui est visuel sur un produit numérique (boutons, couleurs, typographies, espacements). C'est le design graphique interactif.
- IA Information Architecture
- L'Architecture de l'Information est l'art d'organiser, de structurer et de nommer les contenus de manière logique pour que l'utilisateur trouve facilement ce qu'il cherche.
- CTA Call To Action
- Un appel à l'action. Typiquement un bouton ou un lien incitant l'utilisateur à cliquer ("Acheter", "S'inscrire", "Me contacter").
Accessibilité & Éco-conception
- RGESN Référentiel Écoconception
- Le Référentiel Général d'Écoconception de Services Numériques est le guide pour réduire l'impact environnemental des interfaces numériques françaises.
- ARIA Accessible Rich Internet Applications
- Des attributs HTML spécifiques qui complètent la sémantique de base pour communiquer l'état ou le rôle d'un élément interactif complexe aux lecteurs d'écran (ex: menus déroulants, modales).
Technique & Performance
- HTML / CSS / JS
- Les trois langages fondamentaux du web : HTML pour la structure (le squelette), CSS pour l'apparence (le design), et JS (JavaScript) pour l'interactivité (le comportement).
- DOM Document Object Model
- L'arbre structurel qu'un navigateur crée pour représenter une page web. Manipuler le DOM permet de rendre une interface dynamique (transitions, mises à jour en temps réel).
- BEM Block Element Modifier
- Une méthodologie de nommage des classes CSS très stricte qui permet de créer des composants indépendants et réutilisables, idéale pour construire un Design System.
- SEO Search Engine Optimization
- L'optimisation pour les moteurs de recherche. Les techniques visant à améliorer le positionnement d'un site web dans les résultats Google via le code, le contenu et l'UX.
- FOUC Flash Of Unstyled Content
- L'apparition temporaire d'une page non formatée que l'utilisateur expérimente si la feuille de style (CSS) se charge après le HTML. À éviter à tout prix !
Projet & Métier
- TJM Tarif Journalier Moyen
- L'indicateur de tarification d'un freelance indépendant, calculé sur la base d'une journée de travail.
- POC Proof Of Concept
- La preuve de concept est une réalisation expérimentale très courte destinée à démontrer la faisabilité d'une idée ou d'une interface avant d'investir massivement.
- ROI Return On Investment
- Le Retour sur Investissement. Un design réussi doit se traduire par un ROI positif (plus de ventes, moins de support client, temps de développement réduit).
Design & Méthodologie
- UX Design User Experience Design
- Conception de l'expérience globale d'un utilisateur avec un produit, en se concentrant sur la facilité d'utilisation, l'accessibilité et la satisfaction.
Exemple : Simplifier le parcours d'achat en réduisant le nombre d'étapes de 5 à 3 pour augmenter les conversions. - CX Design Customer Experience Design
- Conception de l'expérience client globale sur tous les points de contact avec une marque (site web, emails, service client, magasin physique, etc.). Plus large que l'UX, le CX englobe l'ensemble du parcours client.
Exemple : Créer une expérience cohérente où un client reçoit un email personnalisé après son achat, puis un suivi SMS pour la livraison, et enfin une enquête de satisfaction adaptée à son historique d'achat. - Double Diamant
- Méthodologie de design en 4 phases : Découvrir (explorer le problème), Définir (préciser le problème), Développer (explorer les solutions), Délivrer (finaliser la solution).
Exemple : Pour refondre un site e-commerce, commencer par des interviews utilisateurs (Découvrir), identifier les points de friction (Définir), prototyper plusieurs solutions (Développer), puis tester et lancer (Délivrer). - Design System
- Ensemble de composants réutilisables, de règles de design et de code qui assurent la cohérence visuelle et fonctionnelle d'un produit.
Exemple : Un catalogue contenant tous les boutons, couleurs, typographies et composants standards utilisés sur un site, avec leurs règles d'utilisation. - Agile Scrum
- Méthode de gestion de projet itérative qui divise le travail en sprints courts (1-4 semaines) avec des objectifs précis et des ajustements réguliers.
Exemple : Travailler par sprints de 2 semaines avec des réunions quotidiennes de 15 minutes pour synchroniser l'équipe.
Recherche Utilisateur
- User Research Recherche Utilisateur
- Ensemble de méthodes pour comprendre les besoins, comportements et motivations des utilisateurs.
Exemple : Mener des interviews avec 15 clients pour comprendre pourquoi ils abandonnent leur panier d'achat. - Persona
- Profil fictif représentant un type d'utilisateur cible, basé sur des données réelles.
Exemple : "Marie, 35 ans, mère de 2 enfants, utilise son smartphone pour faire ses courses en ligne pendant sa pause déjeuner." - User Story
- Description courte d'une fonctionnalité du point de vue de l'utilisateur.
Exemple : "En tant que client, je veux enregistrer mes cartes de paiement pour payer plus rapidement lors de mes prochains achats." - JTBD Jobs To Be Done
- Framework qui se concentre sur ce que les utilisateurs essaient d'accomplir plutôt que sur leurs caractéristiques démographiques.
Exemple : "Quand je rentre tard du travail, je veux commander un repas rapidement pour nourrir ma famille sans stress." - Shadowing
- Observer un utilisateur dans son environnement naturel sans intervenir pour comprendre son comportement réel.
Exemple : Suivre un employé pendant sa journée de travail pour voir comment il utilise l'outil métier actuel. - AB Test
- Comparer deux versions d'une page ou fonctionnalité pour déterminer laquelle performe le mieux.
Exemple : Tester un bouton rouge vs un bouton vert pour voir lequel génère le plus de clics. - Surveys Questionnaires
- Collecte de données quantitatives via des questionnaires standardisés.
Exemple : Envoyer un questionnaire de satisfaction à 1000 utilisateurs pour mesurer leur niveau de satisfaction sur une échelle de 1 à 10.
Principes de Design
- Bastien & Scapin
- Critères ergonomiques français pour évaluer les interfaces : guidage, charge de travail, contrôle, adaptabilité, etc.
Exemple : Vérifier qu'un formulaire fournit des messages d'erreur clairs (guidage) et ne demande que les informations nécessaires (charge de travail). - Gestalt
- Principes de psychologie qui expliquent comment nous percevons visuellement les éléments : proximité, similarité, continuité, fermeture.
Exemple : Grouper visuellement les champs d'adresse ensemble pour que l'utilisateur comprenne qu'ils sont liés. - RGAA Référentiel Général d'Amélioration de l'Accessibilité
- Norme française pour rendre les sites web accessibles aux personnes en situation de handicap.
Exemple : Ajouter des textes alternatifs aux images, assurer un contraste suffisant, permettre la navigation au clavier.
Outils & Technologies
- Variables Figma
- Système permettant de créer des tokens de design réutilisables (couleurs, espacements, etc.) dans Figma.
Exemple : Définir une variable "color-primary" qui peut être changée globalement pour modifier toute l'interface. - FigJam
- Tableau blanc virtuel de Figma pour la collaboration et le brainstorming.
Exemple : Organiser un atelier d'idéation en ligne avec des post-its virtuels. - Storybook
- Outil de développement pour créer et documenter des composants UI de manière isolée.
Exemple : Afficher tous les états possibles d'un bouton (normal, hover, disabled) dans une bibliothèque consultable. - ZeroHeight
- Plateforme pour créer et partager la documentation d'un Design System.
Exemple : Publier un guide de style avec les règles d'utilisation de chaque composant pour les développeurs.
Analytics & Optimisation
- CRO Conversion Rate Optimization
- Processus d'amélioration du taux de conversion d'un site ou application.
Exemple : Augmenter le pourcentage de visiteurs qui finalisent un achat de 2% à 3,5%. - ContentSquare
- Plateforme d'analyse d'expérience utilisateur qui visualise le comportement des utilisateurs.
Exemple : Voir des heatmaps montrant où les utilisateurs cliquent le plus sur une page. - ABTasty
- Plateforme pour réaliser des tests A/B et personnaliser l'expérience utilisateur.
Exemple : Tester automatiquement 3 versions d'une page d'accueil et afficher la meilleure. - Google Analytics GA
- Outil d'analyse du trafic web et du comportement des utilisateurs.
Exemple : Suivre le nombre de visiteurs, leur provenance et les pages les plus consultées. - Hotjar
- Outil d'analyse comportementale avec heatmaps et enregistrements de sessions.
Exemple : Regarder l'enregistrement d'une session pour voir où un utilisateur a bloqué dans le processus d'achat. - MS Clarity
- Outil gratuit de Microsoft pour analyser le comportement des utilisateurs avec des heatmaps et enregistrements.
Exemple : Identifier que 60% des utilisateurs scrollent rarement au-delà de la moitié de la page d'accueil.
Types de Produits
- BtoC Business to Consumer
- Produits ou services destinés directement aux consommateurs finaux.
Exemple : Une application mobile de réservation de trains pour les particuliers. - BtoE Business to Employee
- Produits ou outils internes destinés aux employés d'une entreprise.
Exemple : Une application métier permettant aux contrôleurs SNCF de rédiger leurs rapports. - PWA Progressive Web App
- Application web qui fonctionne comme une application native avec des fonctionnalités hors ligne.
Exemple : Un site e-commerce qui peut être installé sur l'écran d'accueil du téléphone et fonctionne sans connexion.