Description
Dans un contexte où l’expérience utilisateur (UX) est un critère majeur de succès pour les applications web, cette formation vise à fournir aux participants les compétences nécessaires pour concevoir des interfaces ergonomiques, accessibles et optimisées pour les utilisateurs. À travers des méthodes centrées utilisateur, les participants apprendront à analyser, concevoir et tester des parcours utilisateurs pour répondre aux besoins réels de leurs clients ou utilisateurs finaux.
Objectifs
- Comprendre les concepts clés de l'ergonomie adaptée aux sites web
- Appréhender les méthodes de recherche utilisateur
- Concevoir et organiser les informations pour une expérience optimale dans le respect des normes
- Optimiser le parcours utilisateur, sa navigation sur le site
- Améliorer l'accessibilité de son site web
Récapitulatif
Public
Webmaster, webdesigners, chefs de projet digitaux, graphistes, concepteurs de sites web..
Prérequis
Avoir une bonne connaissance de l'outil informatique et d'internet
Méthodes et modalités pédagogiques
Formation réalisée en Présentiel, Distanciel ou Dual-Learning selon la formule retenue.
Moyens et supports pédagogiques
Mise à disposition d'un poste de travail sur nos formations en Présentiel.
Mise à disposition de nos environnements de visio sur nos formations en Distanciel
Remise d'une documentation pédagogique numérique pendant la formation
La formation est constituée d'apports théoriques, d'exercices pratiques et de réflexions
Dans le cas d'une formation sur site Entreprise, le client s'engage à avoir toutes les ressources pédagogiques nécessaires (salle, équipements, accès internet, TV ou Paperboard...) au bon déroulement de l'action de formation conformément aux prérequis indiqués dans le programme de formation
Modalités de suivi et d'évaluations
Auto-positionnement des stagiaires avant la formation
Émargement des stagiaires et formateur par 1/2 journée
Exercices de mise en pratique ou quiz de connaissances tout au long de la formation permettant de mesurer la progression des stagiaires
Auto-évaluation des acquis de la formation par les stagiaires
Questionnaire de satisfaction à chaud et à froid à l'issue de la formation
Programme détaillé
Introduction à l'UX et au design centré utilisateur
- Définitions clés de l'UX.
- Différences entre UX, UI et
- Méthodes et posture
- Exemple de travaux pratiques : Débat collaboratif sur des exemples concrets d'expériences utilisateur réussies et ratées.
Cadrage & stratégie
- Définition des objectifs
- Audit
- Euristiques de
- Projet d'apprentissage : Vision board du projet d'apprentissage.
- Exemple de travaux pratiques : Création en binôme d'un vision board pour un projet fictif.
Recherche utilisateur
- Collecter des données qualitatives (entretiens, focus groups).
- Collecter des données quantitatives (A/B testing, web analytics).
- Méthode Design
- Projet d'apprentissage : Plan de recherche utilisateur + création de 2
- Exemple de travaux pratiques : Réalisation d'un persona à partir d'un scénario utilisateur fourni.
Analyse & synthèse
- Mapping des
- Empathy
- Projet d'apprentissage : Empathy map + problématiques
- Exemple de travaux pratiques : Construction d'une Empathy Map pour un utilisateur cible.
Définir le parcours utilisateur
- Parcours actuel vs souhaité.
- User Journey
- Projet d'apprentissage : Création d'une User Journey Map d'un client qui cherche à construire une
- Exemple de travaux pratiques : Représenter graphiquement un parcours utilisateur complet.
Stratégie SEO
- Les trois piliers du SEO : technique, notoriété &
- Bonnes pratiques
- Projet d'apprentissage : Audit SEO et proposition de structuration
- Exemple de travaux pratiques : Analyse SEO d'une page web et recommandations d'amélioration.
Principes d'ergonomie & wireframes
- Heuristiques de Nielsen appliquées au
- Création de wireframes low-
- Projet d'apprentissage : Wireframes des écrans
- Exemple de travaux pratiques : Réalisation de wireframes pour une page d'accueil et une page produit.
UI & Design Tokens
- Typographie, couleurs, iconographie,
- Design system et atomic
- Projet d'apprentissage : Création de tokens (Figma Variables).
- Exemple de travaux pratiques : Création d'un jeu de design tokens pour un site fictif dans Figma.
Accessibilité & inclusion
- Normes
- Exemples de bonnes
- Projet d'apprentissage : Audit d'accessibilité rapide sur
- Exemple de travaux pratiques : Audit d'accessibilité d'un wireframe fourni, avec recommandations d'amélioration.
Prototypage & interactions
- Liens, animations, composants
- Projet d'apprentissage : Prototype cliquable du parcours utilisateur
- Exemple de travaux pratiques : Création d'un prototype cliquable d'un parcours utilisateur dans Figma.
Test utilisateur
- Types de tests : 5 seconds, guerrilla, A/B.
- Projet d'apprentissage : Script de test + mise en place rapide en binôme.
- Exemple de travaux pratiques : Réalisation d'un test utilisateur rapide sur un prototype.
Itérations & prise en compte du feedback
- Méthodologie Lean
- Projet d'apprentissage : Roadmap d'amélioration.
- Exemple de travaux pratiques : Itération sur le prototype en fonction des retours collectés.
Design system & collaboration
- Structure, documentation, Design tokens &
- Collaboration via Figma pour les développeurs.
- Projet d'apprentissage : Création d'une librairie de composants + documentation
- Exemple de travaux pratiques : Création et documentation d'une librairie de composants partagée.
Présentation finale du projet et clôture
- Démo du prototype
- Feedback croisé entre
- Évaluation via grille de critères.
- Évaluation des acquis
- Exemple de travaux pratiques : Présentation en groupe et feedback structuré