Design-graphique.com / / design-graphique / difference-ui-ux /

Différence entre UI et UX : définitions, exemples et applications

Différence entre UI et UX : définitions, exemples et applications

L’UI désigne les moyens d’interagir avec un système ; l’UX désigne l’expérience globale vécue pour atteindre un objectif. Les boutons, champs et retours visuels comptent, mais aussi la compréhension du parcours, sa fiabilité et la possibilité de corriger une erreur. Voici comment distinguer ces deux disciplines et les appliquer au Web, aux applications, aux jeux vidéo et aux outils professionnels.

Comprenez la différence entre UI et UX : définitions, histoire, méthodes, Figma, jeux vidéo, Unity, Unreal Engine, accessibilité et exemples concrets.

UI vs UX : quelle différence fondamentale ?

L’UI (User Interface) désigne les moyens par lesquels une personne interagit avec un système. L’UX (User Experience) est l’ensemble de l’expérience vécue avec le produit, le service ou le système, avant, pendant et après son utilisation. L’UI comprend les commandes, les informations présentées et les réactions de l’interface ; l’UX comprend aussi l’utilité, la compréhension, la confiance, la performance et la capacité à atteindre son objectif.

Prenons une réservation de train : les champs de départ et d’arrivée, le calendrier et le bouton « Réserver » appartiennent à l’UI. L’UX dépend également de la transparence des prix, de la fiabilité du paiement, de l’arrivée effective du billet et de l’aide disponible lorsqu’un problème apparaît.

UI et UX : ce qui change concrètement
DimensionUI designUX design
QuestionComment interagit-on avec le système ?Que vit-on pour atteindre son objectif ?
PortéeComposants, présentation, états et interactionsParcours, utilité, efficacité, perception et contexte
Livrables fréquentsMaquettes, composants, prototypes et spécificationsRecherche, parcours, tests, analyses et recommandations
Risque typeUne commande difficile à identifierUn parcours incapable d’aboutir
Mesures possiblesLisibilité, cohérence et erreurs d’interactionRéussite des tâches, effort, satisfaction et confiance

L’UI est une partie majeure de l’UX, mais elle ne la résume pas. Les responsabilités peuvent se chevaucher au sein d’une équipe : l’accessibilité, le prototypage et les tests concernent souvent les deux disciplines.

Autre subtilité : une interface n’est pas toujours graphique. Les interfaces en ligne de commande (CLI), vocales (VUI), gestuelles, tangibles et haptiques sont elles aussi des interfaces utilisateur. Une interface multimodale peut combiner texte, voix, regard et toucher.

Références : Nielsen Norman Group — Définition de l’expérience utilisateur

Qu’est-ce que l’UI design ?

L’UI design conçoit la représentation des informations et les mécanismes permettant aux utilisateurs d’agir, de comprendre les états du système et de recevoir une réponse claire. Il ne se limite pas à rendre un écran beau.

Hiérarchie, composition et typographie

La hiérarchie visuelle guide l’attention par la taille, la position, le contraste, l’espacement et le regroupement. Une grille d’alignement rend les écrans cohérents, tandis qu’une bonne typographie permet de distinguer les contenus, les contrôles, les nombres et les indications importantes.

Couleurs, états et micro-interactions

Une couleur peut signaler une priorité ou un état, mais elle ne doit pas être le seul moyen de transmettre une information essentielle. Les composants doivent aussi définir leurs comportements : normal, survolé, focus, actif, désactivé, en cours de chargement, réussi et en erreur. Les animations et vibrations utiles servent à informer plutôt qu’à décorer.

Une UI peut être non graphique

Une CLI privilégie les commandes textuelles ; une VUI fait appel à la parole ; une interface gestuelle s’appuie sur le mouvement ; une interface haptique utilise le toucher. Les mêmes questions reviennent : que peut faire la personne, comment le sait-elle et comment comprend-elle la réponse du système ?

Illustration d’une interface conçue dans Figma
Maquette illustrative : la conception d’une interface associe présentation, composants et comportements.

Qu’est-ce que l’UX design ?

L’UX design vise à comprendre et améliorer ce que vivent les personnes lorsqu’elles utilisent — ou anticipent l’utilisation — d’un produit ou d’un service. La famille de normes ISO 9241 relie l’expérience utilisateur aux perceptions et réponses des personnes, en tenant compte du contexte et de l’utilisation attendue ou effective.

Avant, pendant et après

L’expérience commence avant le premier clic : réputation, promesse, recherche sur Google, avis et compréhension de l’offre. Pendant l’utilisation, elle dépend du parcours, des performances, de l’effort, de la confiance et de la capacité à récupérer d’une erreur. Après, elle continue avec le résultat obtenu, les confirmations, la sauvegarde, le support, les remboursements ou la réutilisation du service.

UX, utilisabilité, ergonomie, CX, IxD et service design

  • Utilisabilité (usability) : efficacité, efficience et satisfaction pour des tâches dans un contexte donné.
  • Ergonomie et facteurs humains : adaptation des systèmes aux capacités et limites humaines, au bénéfice des performances, du confort et de la sécurité.
  • Interaction design (IxD) : actions, transitions, retours et comportements au contact de l’interface.
  • Architecture de l’information : organisation des contenus, catégories et chemins de navigation.
  • Customer experience (CX) : relation globale entre un client et une entreprise ou une marque.
  • Service design : orchestration des points de contact, acteurs et opérations qui composent un service.

Ces activités sont complémentaires ; leurs frontières professionnelles dépendent de la taille des équipes et du projet.

Illustration d’un parcours utilisateur et de ses différentes étapes
Un parcours utilisateur permet d’examiner l’expérience au-delà d’un écran isolé.

Références : ISO — ISO 9241-210:2019, conception centrée sur l’humain · Nielsen Norman Group — Définition de l’expérience utilisateur

D’où viennent l’UI et l’UX ? Histoire et origines

L’expérience utilisateur ne naît pas avec les smartphones. Ses racines sont l’ergonomie, le design industriel, la psychologie expérimentale et l’interaction humain-machine (HCI). Les commandes d’une machine, les instruments de bord et la signalisation posaient déjà des problèmes de compréhension et d’erreur.

Étapes majeures

  • 1968 — Douglas Engelbart présente publiquement un système interactif préfigurant plusieurs usages modernes de l’ordinateur, notamment l’utilisation de la souris et la manipulation de documents. Cette présentation sera surnommée The Mother of All Demos.
  • 1973 — Xerox Alto constitue une étape majeure dans l’histoire de l’interface graphique personnelle.
  • 1981 à 1984 — Xerox Star, Apple Lisa et Macintosh font progresser et diffuser les conventions graphiques : fenêtres, menus, icônes et pointeur.
  • Années 1990 — Le Web multiplie les enjeux de navigation, d’architecture de l’information, de formulaires et de commerce en ligne.
  • 1993 — Don Norman chez Apple contribue à populariser l’expression « User Experience » pour englober l’expérience globale, au-delà d’un écran ou d’une commande. Il n’a pas inventé toutes les disciplines antérieures auxquelles elle se rattache.
  • Années 2000-2010 — Mobile et tactile introduisent les gestes, les capteurs, les notifications et les usages en mobilité.
  • Années 2020 — IA et interfaces spatiales développent l’interaction conversationnelle, multimodale et tridimensionnelle.

L’enjeu reste constant : rendre des systèmes techniques compatibles avec les capacités, les attentes et les objectifs humains, même lorsque la technologie change radicalement.

L’expression ne commence pas uniquement avec Apple : Don Norman cite aussi son usage par Brenda Laurel dans un ouvrage de 1986. Il est donc plus exact de parler de popularisation que d’invention isolée.

Références : Don Norman — Origines de l’expression « User Experience » · Computer History Museum — Chronologie de l’informatique

Psychologie, ergonomie et principes cognitifs

Une interface efficace s’appuie sur des mécanismes étudiés en psychologie et en facteurs humains. Les principes sont des guides de conception, non des lois magiques capables de prédire chaque utilisateur.

Modèles mentaux et conventions

Les personnes interprètent les commandes à partir de leurs expériences antérieures. Une loupe évoque souvent une recherche et une corbeille une suppression ; ces conventions doivent néanmoins être vérifiées selon le contexte, l’âge, la culture et l’expertise.

Hick-Hyman, Fitts et charge cognitive

Le principe de Hick-Hyman relie, dans certaines conditions expérimentales, le temps de choix au nombre et à la structure des alternatives. Il encourage à organiser les options sans supprimer les fonctions indispensables. La loi de Fitts décrit notamment le rapport entre distance, taille de cible et temps de pointage. La charge cognitive rappelle l’intérêt de présenter les informations au moment pertinent et de privilégier la reconnaissance sur la mémorisation.

Les dix heuristiques de Jakob Nielsen

  1. Visibilité de l’état du système
  2. Correspondance avec le monde réel
  3. Contrôle et liberté
  4. Cohérence et conventions
  5. Prévention des erreurs
  6. Reconnaissance plutôt que rappel
  7. Flexibilité et efficacité
  8. Design esthétique et minimaliste
  9. Identification et récupération des erreurs
  10. Aide et documentation

Flexibilité et efficacité ; 8. Design esthétique et minimaliste ; 9. Identification et récupération des erreurs ; 10. Aide et documentation. Ces principes sont particulièrement puissants quand ils génèrent des hypothèses vérifiées au moyen de tests, plutôt que des décisions arbitraires.

Références : Nielsen Norman Group — Dix heuristiques d’utilisabilité

Méthode : de la recherche UX au produit

L’UX n’est pas une étape qu’on coche au début du projet : c’est une démarche itérative centrée sur les personnes. Les équipes avancent par hypothèses, preuves, prototypes et améliorations.

  1. Comprendre le problème : identifier l’objectif réel, la population concernée, les contraintes et le contexte.
  2. Enquêter : conduire des entretiens, observer les pratiques et analyser les données disponibles.
  3. Cartographier : représenter les flux, les parcours, les situations de blocage et les points de contact.
  4. Organiser l’information : construire des catégories et navigations testables.
  5. Dessiner des wireframes : valider structure et priorité des contenus avant la décoration.
  6. Concevoir l’UI et le design system : composants, comportements, tokens, typographie, états et accessibilité.
  7. Prototyper : rendre le parcours suffisamment réaliste pour le tester.
  8. Tester les usages : observer les tâches, erreurs, hésitations et adaptations.
  9. Développer et mesurer : confronter les intentions aux contraintes réelles, puis améliorer.

Un prototype séduisant n’est pas une preuve d’utilisabilité. Les performances, les traductions, les équipements d’entrée, les exceptions et les situations d’échec doivent être évalués dans le produit réel.

Un cycle de recherche, conception, test et mesure avec retour vers la recherche
Un processus itératif : les observations alimentent la prochaine version.

UI et UX dans les sites web

Un site ne se résume ni à sa page d’accueil ni à la couleur des boutons. Son UI regroupe notamment navigation, recherche, tableaux, filtres, modales, formulaires et messages. Son UX dépend aussi de la pertinence du contenu, de la vitesse, de la stabilité de la page, du fonctionnement mobile et de la réussite du parcours.

E-commerce : du choix au service après-vente

Une fiche produit peut afficher parfaitement le prix, les tailles et le bouton d’achat, tout en créant une mauvaise expérience si les frais de livraison n’apparaissent qu’au dernier moment ou si le suivi de commande est introuvable.

Cas détaillé : un éditeur de PDF en ligne

Un éditeur propose des champs, des sélections de texte, des poignées de transformation et des contrôles de typographie : c’est son UI. Mais une UX convaincante suppose aussi une sélection logique par mot, ligne ou bloc, le maintien du style, l’annulation, l’enregistrement fiable et l’absence de blocage lorsqu’un champ est remplacé intégralement.

Les questions de conception portent aussi sur les fichiers volumineux, les polices absentes, les transformations, les PDF scannés et la qualité de l’export. Plusieurs de ces enjeux sont techniques : améliorer l’apparence seule ne suffira pas.

Web et SEO ne sont pas synonymes

Les performances, les textes structurés et la lisibilité peuvent bénéficier aux utilisateurs et à la visibilité organique. Toutefois, une UX de qualité ne garantit pas un classement particulier : le référencement dépend aussi de la pertinence et de la concurrence des résultats.

Ce cas est un scénario de conception, pas un résultat de test ni la promesse que tout PDF peut être réécrit sans limite. Les polices embarquées, scans et structures de document imposent des contraintes réelles.

Comparaison fictive entre une édition PDF lettre par lettre et une sélection par bloc
Scénario illustratif : le retour d’état et la récupération comptent autant que les contrôles.

UI et UX dans les applications mobiles

Les écrans mobiles imposent des contraintes spécifiques : espace réduit, saisie tactile, usage à une main, lumière variable, interruptions, changement d’orientation et réseau instable.

L’UI mobile doit prévoir des zones d’action confortables, des champs adaptés, un clavier approprié, des états de navigation compréhensibles et une adaptation entre tailles d’écran. Les conventions iOS et Android ne sont pas identiques ; il faut examiner les guides de chaque écosystème.

L’UX mobile doit aussi préserver le contexte de l’utilisateur : panier retrouvé après une interruption, formulaire non perdu lorsqu’un appel arrive, informations essentielles encore accessibles avec une connexion lente, permission expliquée au moment utile.

Tablettes et appareils pliables peuvent nécessiter une réorganisation de la présentation plutôt qu’un simple agrandissement de l’interface. Une UX responsive n’est pas seulement une UI qui rétrécit ou s’étire.

Références : Apple — Human Interface Guidelines

UI et UX dans les jeux vidéo

Dans le jeu vidéo, une difficulté intentionnelle peut enrichir l’expérience. L’enjeu est de différencier le défi choisi par le game design de la friction accidentelle causée par l’interface.

UI d’un jeu : menus, HUD et informations

L’UI comprend HUD, cartes, inventaires, journaux de quêtes, arbres de compétences, choix de dialogue, réglages, sous-titres, prompts de boutons et retours d’état. Un élément non diégétique est superposé sans exister dans l’univers fictionnel ; une UI diégétique existe dans le monde du jeu, par exemple sur un tableau de bord.

UX : bien au-delà du HUD

Elle dépend de la sensation de contrôle, de la lisibilité des animations, de l’apprentissage, des performances, des retours sonores et tactiles, de l’orientation spatiale, de la difficulté et de l’accessibilité. Le level design, le sound design, la caméra et le gameplay y participent directement.

Jeux de combat

Dans un jeu de combat, la réactivité des commandes, la compréhension des distances, les indicateurs d’entraînement, les retours sur les erreurs et la stabilité en ligne façonnent l’expérience. Une animation impressionnante ne sert pas le joueur si elle rend incompréhensible l’échec d’une action.

Jeux d’aventure et jeux complexes

Éclairage, placement des objets, silhouette et direction artistique peuvent guider sans tutoriel envahissant. Un jeu de stratégie peut exiger une information dense ; la qualité UX dépend alors de l’organisation, du filtrage et des possibilités de personnalisation.

L’accessibilité des jeux englobe entre autres sous-titres, options de commandes, taille des textes, contrastes, options de mouvement et aides adaptées. Les Xbox Accessibility Guidelines fournissent un point de départ reconnu.

Interface de jeu fictive distinguant informations visibles et qualité de l’expérience
Le HUD informe ; la compréhension et le contrôle dépendent aussi du jeu lui-même.

Références : Microsoft — Xbox Accessibility Guidelines

Créer une UI avec Unreal Engine, Unity ou Godot

Un outil de conception ne joue pas le même rôle qu’un moteur d’exécution. Figma facilite la conception visuelle et les prototypes ; un moteur de jeu transforme les composants en interfaces fonctionnelles liées au gameplay, à la sauvegarde et aux périphériques réels.

Unreal Engine

Unreal Engine propose UMG (Unreal Motion Graphics) pour composer des widgets, ainsi que Slate comme infrastructure sous-jacente. Common UI peut aider à structurer des menus multiplateformes et à prendre en charge des schémas de navigation adaptés, notamment aux manettes. Les choix dépendent de la version du moteur et des besoins.

Unity

Unity propose UI Toolkit, dont la structure et les styles utilisent notamment UXML et USS, ainsi que uGUI, fondé sur des GameObjects. IMGUI reste présent pour certains usages d’outils et d’éditeur. Aucun système ne rend une interface utilisable à lui seul.

Godot

Godot propose les nœuds Control, les Container et le système de Theme pour organiser les interfaces, personnaliser les éléments et gérer le focus.

Tests réellement nécessaires

Il faut vérifier manette, clavier, souris et tactile selon les plateformes, la navigation par focus, le changement de périphérique, la lisibilité sur télévision, les résolutions, l’internationalisation et les performances. Un écran conçu pour la souris peut devenir très pénible avec un D-pad.

Illustration de la conception d’une interface de jeu dans un moteur temps réel
Exemple illustratif d’interface de jeu : la maquette doit ensuite être confrontée aux commandes et aux situations de jeu.

Références : Epic Games — Interfaces et HUD dans Unreal Engine · Unity — UI Toolkit · Godot — Interfaces utilisateur et nœuds Control

UI et UX des logiciels 3D, CAO et outils professionnels

Les logiciels experts peuvent nécessiter beaucoup de paramètres. Une interface dense n’est pas automatiquement mauvaise : le niveau d’expertise, la fréquence des tâches et l’exigence de précision changent les priorités de conception.

Blender, Maya, logiciels de CAO et éditeurs vidéo

L’UI rassemble panneaux, listes d’objets, hiérarchies, raccourcis, poignées, outils de sélection et vues multiples. L’UX dépend aussi du nombre d’opérations nécessaires, de l’exactitude des résultats, de la performance sur les scènes lourdes, des erreurs récupérables et des workflows répétitifs.

Exemple : retopologie 3D

La qualité visuelle d’une icône de retopologie ne compense pas une sélection imprécise ou un snapping instable. Les fonctionnalités de symétrie, la rapidité d’édition des quads et la possibilité d’annuler sont essentielles. Une commande supplémentaire apparemment mineure, répétée des centaines de fois, devient un problème de productivité.

Concevoir pour novices et experts

Les novices bénéficient de repères et de découverte progressive ; les experts demandent commandes contextuelles, raccourcis, scripts et automatisations. La meilleure réponse peut être une interface progressivement révélée, avec outils avancés accessibles sans encombrer l’essentiel.

Illustration d’un workflow de création 3D dans Blender
Dans un outil 3D, la qualité de l’expérience dépend aussi de la précision et de l’enchaînement des opérations.

UI et UX en réalité virtuelle, augmentée et mixte

En XR, les interfaces ne se limitent plus au plan de l’écran. Leur position, leur taille apparente, la profondeur, la distance de lecture et les mouvements corporels deviennent des paramètres de conception.

Une UI spatiale peut être un panneau flottant, une commande fixée à un objet ou une interaction gestuelle. L’UX spatiale dépend du confort visuel, de la fatigue, de la stabilité du contenu, des mouvements nécessaires et de la compréhension de l’espace.

Transposer une interface 2D en 3D sans adaptation est souvent insuffisant : une petite étiquette lisible à 30 cm sur smartphone peut devenir illisible à plusieurs mètres. Les menus attachés au regard ou placés sans considération de profondeur peuvent aussi être inconfortables.

Les concepteurs doivent prototyper dans le dispositif cible et observer l’utilisation réelle plutôt que conclure sur une capture d’écran desktop.

UI et UX dans l’intelligence artificielle

Une interface conversationnelle transforme la manière de formuler les actions : plutôt que de naviguer uniquement dans des menus, l’utilisateur décrit parfois son intention en langage naturel.

L’UI des produits d’IA peut réunir saisie, conversation, fichiers, suggestions, outils, validations et contrôles multimodaux. L’UX doit surtout permettre de comprendre ce que le système a réellement fait, ce qu’il suggère, les incertitudes présentes et les moyens de vérifier le résultat.

Points à concevoir : possibilité d’annuler, historique, traçabilité des actions, transparence sur les limites, confirmation avant les opérations importantes, protection des données, correction des erreurs et indication des sources lorsque cela est pertinent.

Exemple : génération automatique de pages web

Produire un écran en quelques secondes semble spectaculaire. Si l’application finale est inaccessible, lente, inmaintenable ou contraire aux besoins du client, l’expérience reste décevante. Le designer doit donc évaluer le résultat fonctionnel, pas seulement l’apparence de la réponse initiale.

Domaines d’application : de la santé à l’industrie

L’UI/UX est présente chaque fois qu’une personne interagit avec un système. Les contraintes dépendent fortement des risques, du contexte et des tâches.

Les enjeux UI et UX selon les secteurs
SecteurEnjeux UIEnjeux UX
Banque et fintechSoldes, formulaires, validationsConfiance, prévention des erreurs, sécurité
Santé et dispositifs médicauxAlarmes, valeurs, commandes critiquesSécurité d’utilisation, fiabilité, formation
AutomobileInstruments, alertes, commandesAttention, distraction, sécurité de conduite
Aviation et railÉtats, alertes, procéduresGestion de charge, traçabilité, sécurité
Industrie et HMISupervision, contrôles, tendancesPrévention des erreurs, lisibilité en contexte
E-commerce et servicesRecherche, filtres, paiementAchat, livraison, retour, support
ÉducationLeçons, quiz, progressionCompréhension, motivation, accessibilité
AdministrationFormulaires, authentificationCompréhension des démarches, inclusion
TV et streamingFocus, cartes, télécommandeLecture à distance, navigation directionnelle
Maison connectéeÉtats des objets, commandesRéaction au hors ligne, cohérence domestique
RobotiqueVisualisation des capteurs et commandesContrôle compréhensible, sécurité
Architecture et immobilierPlans, sélecteurs, visite virtuelleOrientation, compréhension des volumes
Culture et tourismeBornes, audioguides, cartesMultilinguisme, orientation, découverte
Transport et logistiqueSuivi, horaires estimés, exceptionsFiabilité des informations et actions
Photo et audiovisuelTimelines, réglages, contrôlesPrécision, création, efficacité
Sport et wearablesMesures brèves, alertesLecture en mouvement, contexte, fiabilité

Un service hospitalier et une application de loisir ne se valident pas de la même façon. Les produits à risque exigent des évaluations adaptées, parfois encadrées par des normes et procédures réglementaires spécifiques.

Quels outils utiliser pour concevoir l’UI/UX ?

Aucun logiciel ne remplace une démarche de recherche et d’évaluation. Il faut distinguer les outils de conception, outils de fabrication, frameworks d’implémentation et méthodes de test.

Figma, moteurs de jeu et outils de production : des rôles complémentaires
UsageExemplesRôle courant
Maquettes et prototypesFigma, Sketch, PenpotÉcrans, composants, interactions simulées
Ateliers et explorationFigJam, Miro, enquêtesOrganisation et synthèse de la recherche
GraphismeIllustrator, Photoshop, AffinityRessources visuelles et pictogrammes
Création 3DBlender, Maya, CAOObjets, animations, illustrations spatiales
Interface webHTML, CSS, JavaScript, React, VueInterfaces interactives réelles
Apps AppleSwiftUIInterfaces natives Apple
Apps AndroidJetpack ComposeInterfaces Android natives
MultiplateformeFlutter, React Native, QtProduits sur plusieurs systèmes
Jeux et temps réelUnreal Engine, Unity, GodotUI liée à la logique du produit
Analyse et qualitéTests utilisateurs, Lighthouse, axeÉvaluation et amélioration
Design systemsTokens, bibliothèques, StorybookDocumentation et cohérence

Chaîne possible : recherche → architecture de l’information → wireframes → UI → prototype → test → design system → implémentation → mesure. Les étapes peuvent être répétées et réordonnées selon le contexte.

UI/UX internationale : langues, continents et cultures

Une interface destinée au monde entier ne peut pas simplement être traduite. Elle peut exiger une localisation : langue, sens d’écriture, formats, moyens de paiement, systèmes administratifs, disponibilité des réseaux et références culturelles.

Attention : un continent n’est pas un profil utilisateur. Les exemples suivants identifient des questions de conception à investiguer et ne décrivent pas les préférences de tous les habitants.

Europe

Pluralité de langues et de réglementations, accessibilité, protection des données, variations des formulaires et parcours administratifs. Un service français peut nécessiter des ajustements pour la Belgique ou l’Allemagne au-delà d’une traduction.

Amérique du Nord et Amérique latine

Au Canada et aux États-Unis : variations de langues, unités, devises et pratiques sectorielles. Dans certains marchés latino-américains : importance de parcours par messagerie, paiements et livraisons locales ; ces hypothèses doivent être validées selon le pays et le public.

Afrique

Extraordinaire diversité des langues, infrastructures et écosystèmes financiers. Au Maroc, par exemple, un produit peut nécessiter du français, de l’arabe ou des langues amazighes selon les utilisateurs. Dans plusieurs marchés africains, le mobile money et, pour certains usages, les interfaces USSD jouent un rôle significatif. Les connexions intermittentes et la diversité des appareils peuvent aussi compter — sans être universelles.

Moyen-Orient et Afrique du Nord : RTL

Les interfaces en arabe nécessitent une gestion rigoureuse de la bidirectionnalité : le texte principal s’écrit de droite à gauche, tandis que numéros, URL et certains fragments latins conservent des comportements particuliers. Il ne faut pas inverser aveuglément logos, cartes, photographies ou graphiques.

Asie du Sud et de l’Est

En Inde, prendre en compte la diversité linguistique et les systèmes d’écriture. En Chine, certains services s’inscrivent dans des écosystèmes de super-applications. Au Japon et en Corée, les écritures et les conventions de services appellent une recherche spécifique. Affirmer que « les Asiatiques préfèrent les écrans denses » serait un stéréotype non fiable.

Océanie

Selon les services, adapter langues, connectivité territoriale et participation des communautés concernées, y compris des populations autochtones.

Traditions, symboles et perception

Une couleur ou un pictogramme peut avoir des associations variables, mais il faut les tester plutôt que d’appliquer des tableaux simplistes de « couleurs par continent ». La bonne démarche associe traduction professionnelle, revue locale, tests d’utilisabilité et données d’usage contextualisées.

Comparaison illustrative d’une interface en français et en arabe, en lecture LTR et RTL
Localiser une interface implique d’adapter le sens de lecture et la disposition, tout en préservant les contenus qui ne doivent pas être inversés.

Références : W3C — Internationalisation HTML et direction du texte

Accessibilité : WCAG et conception inclusive

Une interface peut sembler réussie à son créateur et rester impossible à utiliser pour certaines personnes. L’accessibilité cherche à permettre l’accès aux contenus et aux actions avec des capacités visuelles, motrices, auditives ou cognitives variées.

Les WCAG 2.2 du W3C constituent une référence importante pour le Web. Elles couvrent notamment les alternatives textuelles, la navigation au clavier, le contraste, la compréhension des erreurs et la visibilité du focus.

À titre d’exemple, le niveau AA demande généralement un contraste d’au moins 4,5:1 pour le texte normal, avec des exceptions définies. Le critère de taille minimale des cibles interactives utilise généralement 24 × 24 pixels CSS, lui aussi avec des exceptions. Ces chiffres ne remplacent pas l’application exacte des critères ni les tests.

Bonnes pratiques à vérifier

  • La fonction reste utilisable entièrement au clavier si elle doit l’être.
  • L’ordre de focus et l’indicateur visuel sont compréhensibles.
  • Les erreurs sont décrites en texte, pas uniquement par une couleur.
  • Les alternatives textuelles décrivent utilement les images porteuses d’information.
  • Les contenus sont testés avec des outils d’assistance et des personnes concernées lorsque possible.

Accessible ne signifie pas uniquement conforme à une checklist : l’expérience vécue doit aussi être observée.

Dans les WCAG 2.2, le contraste du texte normal est traité par le critère 1.4.3 et la taille minimale des cibles par le critère 2.5.8 (niveau AA). Les exceptions et l’espacement des cibles comptent : 24 pixels CSS n’est pas une garantie de confort tactile ni une certification.

Illustration de repères d’accessibilité dans un formulaire : labels, focus et message d’erreur
Labels, focus et erreurs explicites facilitent l’utilisation. Une illustration seule ne démontre pas la conformité aux WCAG.

Références : W3C — WCAG 2.2

Éthique : dark patterns et autonomie des utilisateurs

Une interface peut rendre une action facile tout en manipulant le choix de la personne. Les dark patterns ou mécanismes de conception trompeurs cherchent à orienter des décisions par ambiguïté, dissimulation ou pression injustifiée.

Exemples typiques : refus dissimulé, coûts présentés trop tard, désinscription artificiellement compliquée, option précochée sans justification, confirmations rédigées pour induire en erreur. Les conséquences légales varient selon les pays et les secteurs ; il faut consulter les textes applicables.

Une approche responsable doit rendre les conditions compréhensibles, présenter les choix honnêtement, permettre de corriger ou d’annuler et distinguer la satisfaction de l’utilisateur de la seule métrique de conversion. Une hausse des clics ne prouve pas nécessairement une meilleure UX.

Mesurer la qualité UX : méthodes et indicateurs

L’évaluation UX exige de définir des objectifs et des indicateurs adaptés à chaque tâche. Aucune note générale ne résume à elle seule l’expérience.

  • Réussite des tâches : proportion de participants atteignant l’objectif défini.
  • Temps de réalisation : durée, à interpréter selon le contexte ; dans un jeu, une durée longue peut parfois être recherchée.
  • Erreurs et récupération : fréquence, conséquences et possibilité de corriger.
  • Satisfaction et effort : observations complétées par des questionnaires tels que SUS ou CSAT, avec méthode appropriée.
  • Abandon et conversion : données utiles mais dont la cause ne doit pas être déduite sans enquête.
  • HEART : Happiness, Engagement, Adoption, Retention, Task success, cadre de mesure issu de travaux de recherche de Google.

Performances Web

Les Core Web Vitals mesurent notamment LCP (chargement du contenu principal), INP (réactivité des interactions) et CLS (stabilité visuelle). Ils sont importants, mais ne mesurent ni la confiance, ni l’utilité, ni toute la satisfaction.

Construire une analyse solide exige de trianguler les données quantitatives, les observations qualitatives et le contexte de la tâche.

Références : Google Research — Mesurer l’expérience avec HEART · Google — Core Web Vitals

Dix erreurs fréquentes en UI/UX

  1. Commencer par les couleurs avant d’identifier le problème.
  2. Réduire l’UI à la direction artistique et ignorer les comportements.
  3. Confondre prototype et expérience validée.
  4. Copier un concurrent sans comprendre ses utilisateurs.
  5. Concevoir uniquement pour les habitudes de l’équipe.
  6. Appliquer le minimalisme à un outil expert sans tenir compte des besoins de densité.
  7. Oublier les erreurs, interruptions, annulations et reprises.
  8. Tester exclusivement à la souris en oubliant clavier, manette, tactile ou technologies d’assistance.
  9. Traduire sans localiser les formats, usages et conventions.
  10. Traiter l’UX comme un livrable figé plutôt qu’un processus continu.

Méthode de correction : documenter la friction, formuler une hypothèse, créer une alternative, tester avec des utilisateurs représentatifs, mesurer l’effet et conserver les preuves utiles à l’équipe.

L’avenir des interfaces : IA, spatial et multimodal

Les nouvelles générations d’interfaces déplacent progressivement certaines actions du bouton vers l’intention exprimée en texte, voix, geste ou contexte spatial. Les produits multimodaux combinent plusieurs canaux pour interagir et informer.

Les systèmes fondés sur l’IA peuvent préparer des actions, résumer des informations ou produire des contenus. Cela déplace une partie du défi UX vers le contrôle, la vérification, la transparence, la confidentialité et la réversibilité.

Les environnements immersifs font également évoluer l’échelle et la matérialité des commandes. Le regard, la main et le mouvement peuvent compléter la souris ou le tactile, mais ils introduisent d’autres contraintes d’ergonomie.

Aucune technologie ne rend obsolètes les fondations : visibilité du système, feedback, cohérence, prévention des erreurs et respect du contexte humain. Une interface plus avancée n’est pas nécessairement une meilleure expérience.

Questions fréquentes sur l’UI et l’UX

UI vs UX : quelle différence en une phrase ?

L’UI concerne les moyens d’interagir avec un système ; l’UX concerne l’expérience globale de la personne lorsqu’elle utilise ce système pour atteindre un objectif.

L’UI fait-elle partie de l’UX ?

Oui. Une interface influence profondément l’expérience, mais la qualité d’un produit dépend aussi de sa logique, de son utilité et des services qui l’entourent.

Peut-on avoir une belle UI et une mauvaise UX ?

Oui. Une application peut être attrayante mais lente, mal organisée, imprécise ou incapable de terminer un parcours important.

L’UX ne concerne-t-elle que le numérique ?

Non. Elle s’applique aussi aux équipements physiques, interfaces industrielles, services, transports et objets interactifs.

Quelle est la différence entre UX et ergonomie ?

L’ergonomie étudie l’adaptation des systèmes aux caractéristiques humaines ; l’UX comprend aussi les perceptions et l’expérience globale.

Figma sert-il à l’UI ou à l’UX ?

Aux deux selon les activités, surtout pour les maquettes et prototypes. Il ne remplace pas les enquêtes et les tests réels.

Unreal Engine et Unity servent-ils à créer de l’UI ?

Oui : notamment UMG dans Unreal et UI Toolkit ou uGUI dans Unity, en fonction du contexte et de la version du moteur.

L’UX existe-t-elle dans les jeux vidéo ?

Oui. Elle comprend l’apprentissage, la maîtrise des commandes, le gameplay, la lisibilité, les performances et l’accessibilité.

Un UI designer doit-il savoir coder ?

Ce n’est pas une exigence universelle, mais comprendre les possibilités techniques facilite la conception et la collaboration.

Le titre Product Designer est-il équivalent à UX Designer ?

Pas systématiquement. Selon les organisations, le Product Designer couvre davantage de responsabilités en stratégie, UX, UI et collaboration produit.

Pourquoi l’UI change-t-elle selon les pays ?

Langues, formats, conventions, infrastructures, législations, services et habitudes changent ; une bonne localisation s’appuie sur des études locales.

L’IA remplace-t-elle les designers UI/UX ?

Elle automatise ou accélère certains travaux, mais la recherche, le jugement, la responsabilité et l’évaluation des usages restent nécessaires.

Concevoir une interface qui aide vraiment

L’UI construit la relation avec le système ; l’UX donne son sens à l’expérience. Concevoir ne consiste pas seulement à produire un écran spectaculaire : il s’agit de rendre les interactions compréhensibles, utiles, accessibles et fiables dans un contexte réel.

Choisissez une tâche, observez les obstacles, proposez une alternative et vérifiez le résultat avec les personnes concernées. Cette exigence reste valable sur le Web comme dans le jeu vidéo, les outils 3D ou la réalité virtuelle.

À retenir

  • L’UI organise les moyens d’interagir ; l’UX inclut l’expérience complète et son contexte.
  • Un prototype et une belle interface ne prouvent pas qu’un parcours fonctionne.
  • Web, jeux, logiciels 3D et XR ont des contraintes différentes : évaluez les tâches réelles.
  • Localiser implique les langues, les formats, les usages et les conditions d’accès.
  • Mesurez la réussite, les erreurs et la satisfaction, puis améliorez le produit.

Guide pédagogique · interfaces et situations d’exemple fictives

Design-graphique.com · 25 octobre 2026

Sources et références

Continuer le parcours

Retour à l’accueil