Objectifs pédagogiques
Découvrir l’UX Design et l’importance de l’expérience utilisateur
Connaître les exigences ergonomiques particulières d’une application mobile
S’approprier les bonnes pratiques pour concevoir une app mobile en co-conception avec les utilisateurs réels
Utiliser Figma pour réaliser des prototypes interactifs d’applications pur smartphone et tablette
A qui s’adresse cette formation ?
Prérequis
Programme de formation
Introduction à l’UX Design et à l’ergonomie
Du design vers l’expérience utilisateur
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
Le rôle de l’ergonomie dans l’expérience utilisateur : notion d’utilité et d’utilisabilité
Vers une conception centrée sur l’utilisateur : comprendre, concevoir et tester avec les utilisateurs
Le socle de la démarche UX : les situations, l’activité, le matériel et l’utilisateur
Exemple de cas pratique : étude d’usage pour préparer la conception d’une application mobile
L’ergonomie mobile
Les différents niveaux de mobilité et les nouvelles situations d’usages associés
Des capacités propres : capteurs, possibilité d’interagir avec les applications installées
Techniques de saisie : clavier virtuel, assistance à la saisie
L’interface tactile : comparaison avec la souris, multitouch, gestures et nouveaux paradigmes d’interactions
Les critères ergonomiques de Bastien et Scapin
Exemple de cas pratique : analyse de l’application existante en version mobile
Préparer la conception d’une application mobile
Les questions à se poser avant de faire une application mobile et les pièges à éviter
Stratégie de conception : application web mobile, native ou hybride, aspects multiplateforme
La recherche utilisateur : personas, scénarios d’usage et parcours utilisateur
La phase de conception : atelier d’idéation avec les utilisateurs
Les tests utilisateurs en situation mobile
Approche par l’activité : définition des scénarios critiques
Le storyboard UX
Exemple de cas pratique : création d’un storyboard pour le portage de l’application web OnlyMoov
Concevoir pour tous les écrans, le responsive design
Problématique du responsive design : évolution de la taille des écrans
Les différents type de design : absolus, liquide, adaptatif, responsive
Responsive web design et mobile first design
Notion de breakpoint
Grille de conception
Notion de layout
Techniques sur Figma : contraintes et auto-layout
Exemple de cas pratique : maquettage d’une version responsive de l’écran d’accueil d’OnlyMoov sous Figma
Concevoir un écran mobile
Les 3 étapes : du zoning à la maquette haute fidélité
Notion de design system : atomic design
Introduction à material design
Présentation des composants principaux : boutons, listes, cartes,formulaires
La face cachée de l’IHM : barre de défilement, ligne de flottaison, cut-off design
Le zoning d’un écran android
Quelques écrans types : écran d’accueil, menu principal, formulaires…
Exemples de cas pratique : maquettage de l’écran de choix de la destination
Concevoir une solution mobile ergonomique
Les mythes des applications mobiles
Principes de navigation d’une application mobile
Postures et usage du pouce : principes de conception
Loi de Fitts et conséquences sur le placement des composants
Le mécanisme de notifications
Faire patienter l’utilisateur: animations, barre de progression, skeleton
Quelques applications ergonomiques
Tester une application mobile
Exemple de cas pratique : finalisation de la maquette dynamique
