Vous n’avez pas les permissions requises pour voir les discussions de ce forum.
Résumé de section
-
Le cours UXD 270 — User-Centered Web Design, anciennement ISM 270, enseigne la démarche de conception qui part des besoins réels des utilisateurs plutôt que des préférences du concepteur. Il couvre la chaîne complète : comprendre l'utilisateur, analyser ses besoins, organiser l'information, concevoir l'interface, prototyper, tester et améliorer.
Le cours repose sur un principe d'ordre qui en constitue le fil conducteur : on ne commence pas par dessiner l'écran. On commence par déterminer qui utilisera le produit, pourquoi, et dans quel contexte. Les six premières semaines sont donc consacrées à la compréhension des utilisateurs, à l'analyse de leurs besoins et à l'organisation de l'information, avant qu'aucune maquette ne soit produite.
Le cours traite successivement les fondements de l'expérience utilisateur et la distinction entre utilité et utilisabilité, les méthodes de recherche utilisateur — entretien, questionnaire, observation, analyse concurrentielle —, la modélisation par personas et scénarios, la construction des parcours utilisateurs et de l'architecture de l'information, les principes ergonomiques et les heuristiques d'évaluation, le design d'interaction et les états des composants, le maquettage du croquis au prototype interactif, les principes d'interface et le responsive, l'accessibilité, et enfin les tests utilisateurs et l'audit ergonomique.
Une distinction est maintenue tout au long du cours entre ce qui relève de l'opinion et ce qui relève de la vérification. Un étudiant ne défend pas un choix de conception parce qu'il le trouve élégant, mais parce qu'il l'a confronté à un besoin identifié, à un principe ergonomique établi, ou au comportement observé d'un utilisateur réel. C'est ce qui distingue un travail de conception d'un travail de décoration.
Il ne s'agit pas d'un cours de développement web. HTML et CSS peuvent être mobilisés ponctuellement pour montrer comment une décision de conception se traduit dans une interface, mais l'objectif reste la conception de l'expérience et de l'interface. Le cours se conclut par un projet complet, de la recherche utilisateur jusqu'au prototype testé et corrigé. -
<< Voir Syllabus >>
-
<< Voir Syllabus >>
-
<< Voir Syllabus >>
-
<< Voir Syllabus >>
-
Contenus :
• Présentation du cours, des modalités d'évaluation et du projet
• Qu'est-ce que l'expérience utilisateur : définition et périmètre
• Expérience utilisateur, interface utilisateur et ergonomie : trois notions distinctes et liées
• Utilité et utilisabilité : un service peut être inutilisable tout en étant utile, et inversement
• Les trois composantes de l'utilisabilité : efficacité, efficience, satisfaction
• Pourquoi une conception fondée sur les préférences du concepteur échoue
• La malédiction de la connaissance : le concepteur ne peut plus voir son produit en novice
• Les étapes d'une démarche de conception centrée utilisateur
• Le principe d'ordre du cours : comprendre avant de dessiner
• Étude de deux interfaces, l'une réussie et l'autre non, et premières observations
Objectifs pédagogiques :
• Définir l'expérience utilisateur et la distinguer des notions voisines
• Expliquer la distinction entre utilité et utilisabilité
• Décrire les étapes de la démarche centrée utilisateur
• Reconnaître une décision de conception fondée sur la préférence du concepteur -
Contenus :
• Pourquoi interroger les utilisateurs plutôt que se fier à son intuition
• Écart entre ce que les gens disent, ce qu'ils font et ce qu'ils croient faire
• Entretien utilisateur : préparation, guide d'entretien, conduite, retranscription
• Questions ouvertes et questions fermées ; questions orientées à proscrire
• Questionnaire : construction, échelles, diffusion, taille d'échantillon, limites
• Observation d'usage : protocole, posture de l'observateur, consignation
• Analyse comparative de services existants selon des critères définis à l'avance
• Analyse des données d'usage existantes lorsqu'elles sont disponibles
• Combien d'utilisateurs interroger : ordres de grandeur et rendements décroissants
• Éthique du recueil : information, consentement, anonymisation
Objectifs pédagogiques :
• Préparer et conduire un entretien utilisateur
• Concevoir un questionnaire sans questions orientées
• Conduire une observation et consigner ce qui est observé
• Distinguer déclaratif et comportement observé -
Contenus :
• Du matériau brut au modèle : synthétiser les entretiens et les observations
• Persona : définition, composition, nombre pertinent pour un projet
• Persona fondé sur des données contre persona inventé : la différence décisive
• Objectifs, contraintes, contexte d'usage et niveau d'expertise
• Prise en compte du contexte local : équipement, connexion, coût des données, langue
• Persona principal et personas secondaires ; arbitrage en cas de conflit
• Analyse des besoins : du besoin exprimé au besoin réel
• Fonctionnalités nécessaires, souhaitables et superflues
• Scénario d'utilisation : rédaction du point de vue de l'utilisateur, pas du système
• Cas nominal et cas d'échec
• Utiliser un persona pour trancher une décision de conception
Objectifs pédagogiques :
• Construire des personas fondés sur les données recueillies
• Identifier objectifs, contraintes et contexte de chaque persona
• Rédiger des scénarios d'utilisation complets
• Mobiliser un persona comme critère d'arbitrage -
Contenus :
• Parcours utilisateur : étapes, décisions, émotions, points de friction
• Cartographie du parcours et repérage des ruptures
• Distinction entre parcours utilisateur et enchaînement d'écrans
• Architecture de l'information : organiser avant de dessiner
• Arborescence : profondeur, largeur, équilibre
• Regroupements : par thème, par tâche, par public, par cycle de vie
• Nommage des rubriques : le vocabulaire de l'utilisateur contre celui de l'organisation
• Systèmes de navigation : menu principal, navigation secondaire, fil d'Ariane, recherche
• Tri de cartes ouvert et fermé : protocole, conduite, exploitation
• Validation d'une arborescence par test de repérage
• Application : arborescence d'une plateforme universitaire
Objectifs pédagogiques :
• Construire un parcours utilisateur et y identifier les points de friction
• Concevoir une arborescence cohérente et la justifier
• Conduire un tri de cartes et en exploiter les résultats
• Nommer les rubriques dans le vocabulaire des utilisateurs -
Contenus :
• Fondements cognitifs : attention, mémoire de travail, charge cognitive
• Affordances et signifiants : ce qu'un élément indique de son usage
• Modèle mental de l'utilisateur et modèle du concepteur
• Loi de Fitts et lois de la Gestalt appliquées à l'interface
• Lisibilité : taille, contraste, longueur de ligne, hiérarchie visuelle
• Guidage : où suis-je, que puis-je faire, comment revenir
• Cohérence interne et respect des conventions établies
• Charge de travail et réduction du nombre d'actions
• Prévention et gestion des erreurs
• Les heuristiques d'utilisabilité de référence, énoncées et illustrées
• Les critères ergonomiques francophones et leur articulation avec les heuristiques
• Conduite d'une évaluation heuristique : protocole, grille, cotation de gravité
Objectifs pédagogiques :
• Énoncer et appliquer les heuristiques d'utilisabilité
• Analyser la lisibilité et la hiérarchie visuelle d'un écran
• Conduire une évaluation heuristique structurée
• Formuler un défaut en termes d'impact sur l'utilisateur -
Contenus :
• L'interface comme comportement et non comme image fixe
• États d'un composant : normal, survol, focus, actif, désactivé, chargement, succès, erreur
• Conception des boutons : libellé, hiérarchie, zone cliquable, action destructrice
• Formulaires : ordre des champs, libellés, aides à la saisie, champs obligatoires
• Validation : au moment de la saisie, à la soumission, et arbitrage entre les deux
• Messages d'erreur : cause, localisation, action corrective
• Retour d'information : toute action doit produire une réponse perceptible
• Temps d'attente : indicateurs, patience de l'utilisateur, chargement progressif
• États particuliers : première utilisation, contenu vide, erreur réseau, absence de résultat
• Fenêtres modales, notifications et interruptions : usage mesuré
• Interactions tactiles : taille des cibles, gestes, absence de survol
• Patrons de conception éprouvés et intérêt de ne pas innover sans raison
Objectifs pédagogiques :
• Concevoir l'ensemble des états d'un composant interactif
• Concevoir un formulaire complet avec sa validation et ses messages
• Traiter explicitement les états particuliers
• Garantir un retour d'information pour chaque action -
Contenus :
• Niveaux de finition et usage de chacun : croquis, basse fidélité, haute fidélité, prototype
• Pourquoi commencer par le papier : rapidité, absence d'attachement, critique facilitée
• Croquis rapide et exploration de plusieurs solutions avant d'en retenir une
• Wireframe : structure, zonage, hiérarchie, sans couleur ni image
• Ce qu'un wireframe doit montrer et ce qu'il ne doit pas montrer
• Annotation des maquettes à destination des développeurs
• Prise en main de Figma : cadres, composants, styles, variantes, bibliothèque
• Construction d'un système de composants réutilisables
• Prototype interactif : liaisons, transitions, parcours complet d'un scénario
• Choix du niveau de finition selon l'interlocuteur et l'étape du projet
• Écueil classique : la maquette trop finie trop tôt, qui bloque la critique
Objectifs pédagogiques :
• Produire des croquis et des wireframes exploitables
• Construire des composants réutilisables sous Figma
• Livrer un prototype interactif parcourant un scénario complet
• Choisir le niveau de finition adapté à l'étape -
Contenus :
• Couleur : palette, rôles fonctionnels, sémantique, contraste
• Couleur comme information : pourquoi elle ne doit jamais porter seule un sens
• Typographie : choix des familles, échelle typographique, hauteur de ligne, longueur de ligne
• Hiérarchie visuelle : taille, graisse, espacement, position
• Grille, alignement et système d'espacement régulier
• Densité informationnelle et espace négatif
• Composants usuels : boutons, champs, cartes, listes, tableaux, navigation
• Iconographie : reconnaissance, ambiguïté, nécessité du libellé
• Conception adaptative : approche par la petite taille d'abord
• Points de rupture et réorganisation du contenu plutôt que simple réduction
• Navigation sur écran étroit : menus, priorisation, accessibilité au pouce
• Contraintes locales : écrans modestes, connexions lentes, poids des images
Objectifs pédagogiques :
• Composer une palette cohérente et vérifier ses contrastes
• Établir et appliquer une hiérarchie typographique
• Organiser une page par une grille et un système d'espacement
• Concevoir les versions large et étroite d'un écran et justifier les réorganisations -
Contenus :
• Pourquoi l'accessibilité : diversité des capacités, des situations et des équipements
• Situations de handicap permanentes, temporaires et circonstancielles
• Les quatre principes des critères de référence : perceptible, utilisable, compréhensible, robuste
• Niveaux de conformité et exigences réglementaires
• Contraste des textes et des composants, seuils à respecter
• Taille des textes, zoom et espacement
• Navigation au clavier : ordre de tabulation, focus visible, liens d'évitement
• Textes alternatifs : décrire la fonction, pas l'apparence ; images décoratives
• Structure du document : titres hiérarchisés, listes, repères de région
• Formulaires accessibles : libellés associés, messages d'erreur reliés aux champs
• Lecteurs d'écran : principe de fonctionnement et démonstration
• Accessibilité sur mobile et tailles de cibles tactiles
• Outils d'audit automatique : ce qu'ils détectent et ce qu'ils ne détectent pas
Objectifs pédagogiques :
• Énoncer les principes et les niveaux de conformité des critères en vigueur
• Vérifier contrastes, tailles et parcours clavier d'une interface
• Rédiger des textes alternatifs pertinents et structurer correctement un document
• Réaliser un relevé d'accessibilité et proposer les corrections -
Contenus :
• Pourquoi tester : l'opinion du concepteur ne prédit pas le comportement de l'utilisateur
• Combien de participants : le rendement décroissant et la règle des cinq utilisateurs
• Préparation : recrutement, tâches, consignes, grille d'observation, matériel
• Formuler une tâche sans indiquer le chemin : la règle la plus difficile à tenir
• Conduite du test : poser le cadre, se taire, ne pas aider, relancer sans orienter
• Protocole de verbalisation à voix haute
• Observer : hésitations, retours en arrière, clics erronés, abandons
• Test à distance et test modéré ou non modéré
• Analyse : relevé des problèmes, hiérarchisation par gravité et par fréquence
• Du problème observé à la correction : formuler une recommandation actionnable
• Audit ergonomique : différence avec le test, structure en constat, impact, recommandation
• Restitution des résultats à une équipe : ce qui passe et ce qui braque
• Itération : corriger, retester, mesurer l'amélioration
Objectifs pédagogiques :
• Préparer un protocole de test utilisateur complet
• Conduire un test sans induire le comportement du participant
• Hiérarchiser les problèmes et formuler des recommandations actionnables
• Réaliser un audit ergonomique structuré