Formation UX/UI Design : concevoir des produits numériques.

Programme de formation UX/UI Design : concevoir des produits numériques.

Introduction à la formation UX Design

Du design vers l’expérience utilisateur
Perles et mythes de l’UX
Les différences entre l’UX et l’UI
Qu’est-ce qu’une bonne expérience utilisateur ? De quoi dépend-elle ?
Les risques d’une mauvaise UX
Quel retour sur investissement ?
Notion de maturité UX
Exemple de cas pratique : évaluez la maturité UX de votre entreprise

A la découverte de la recherche utilisateur

Améliorer l’expérience avec la démarche de conception centrée utilisateur
Notion d’étude d’usage : approche terrain, postures et environnements d’usage, usage réel vs usage prescrit, fréquence d’usage, contexte matériel et logiciel
Modéliser l’activité de vos utilisateurs : notions de scénarios d’usage et de parcours utilisateur
Tour d’horizon des principaux outils : interviews, observations terrain, questionnaire et étude ethnographique
Exemple de cas pratique : étude d’usage pour la conception d’un produit tactile

Modéliser les utilisateurs

Des utilisateurs finaux ou des « user proxies » ?
Les personas : caractéristiques, freins, objectifs, profil psychologique
Étude ethnographique ou protos personas ?
Carte d’empathie
Exemple de cas pratique : création de 2 personæ

Modéliser les usages

Scénarios d’usage et « job to be done »
Notion de fréquence d’usage
Notion de parcours utilisateur
Représentation sous forme de carte d’expérience : étapes, actions, courbe émotionnelle, points de douleurs, opportunités
Hiérarchiser les scénarios pour optimiser l’effort UX
Optimiser un parcours utilisateur existant
Exemple de cas pratique : création d’un parcours utilisateur pour le scénario d’un persona

Découverte des principes de conception d’une UI

Les étapes de la conception d’une UI
Architecture de l’information : zoning
Maquettage basse et haute fidélité
Les principaux outils de maquettage
Présentation des fondamentaux de Figma
Exemple de cas pratique : création d’une maquette basse fidélité sur Figma

Maquetter un scénario d’usage

Introduction à la notion de design system : styles et échelle typographique, palette de couleur, atomic design, composants graphiques, patrons de conception UX
Du parcours utilisateur vers le storyboard UX
Maquettage en co-conception avec les utilisateurs
Exemple de cas pratique : transformation de la maquette basse fidélité en un storyboard puis en maquette dynamique

Evaluer l’ergonomie d’un produit digital

Définition de l’ergonomie : utilité, utilisabilité et accessibilité
Rendre une application ergonomique : focus sur les critères de Bastien et Scapin
Faire une évaluation experte : identification et hiérarchisation des défauts d’ergonomie, scoring, restitution
Faire des recommandations d’améliorations et proposer un plan d’action
Exemple de cas pratique : évaluation experte d’une application web existante

Conduire un test utilisateur

Les tests utilisateurs : présentiel/distanciel, modérés/non modérés, approche qualitative et quantitative
Recrutement des utilisateurs
Focus sur le test présentiel modéré : définir un protocole de test, préparer et conduire une séance de test, recueil et analyse des données brutes, identification et hiérarchisation des problèmes d’utilisabilité,
Restitution et plan d’action suite à un test utilisateur
Les autres tests : tests AB, tests des 5s, guerilla testing, tests d’arborescence…
Exemples de cas pratiques : préparer d’un test avec OBS Studio, simuler un test à distance avec LookBack, analyser une vidéo d’un test utilisateur

Responsive Design – Concevoir pour tous les écrans

Evolution de la taille des écrans : stratégie mobile first.
Qu’est-ce que le responsive web design ?
Les différents types de design : statique, adaptatif, liquide, responsive
Notion de breakpoint et de grille de conception
Faire un écran responsive avec Figma : contraintes et auto layout
Exemple de cas pratique : portage d’une page d’accueil d’un site web existant vers une version mobile

L’ergonomie mobile

Les différents niveaux de mobilité
Usages et postures d’usage d’un smartphone
Interactions tactiles
Material Design : un design system conçu pour la mobilité
Quelques écrans et composants mobiles
Exemple de cas pratique : maquettage d’un scénario mobile avec Figma