Description
Avec l’évolution des usages, les utilisateurs consultent de plus en plus de contenus web sur des supports mobiles tels que les tablettes et smartphones. Cette formation vise à fournir aux participants les compétences nécessaires pour concevoir ou améliorer des sites web en responsive design, en optimisant l’expérience utilisateur pour les appareils mobiles. En complément, des notions spécifiques au design d’applications mobiles seront abordées pour enrichir les compétences des participants.
Objectifs
- Comprendre les concepts clés de l'ergonomie adaptée aux sites web via tablettes et smartphones
- Appréhender les actions des utilisateurs pour optimiser l'ergonomie (lecture ou interaction)
- Concevoir et organiser les informations pour une expérience optimale sur outil mobile
- Optimiser le parcours utilisateur, notamment en fonction de sa posture
- Améliorer l'accessibilité spécifique aux outils mobiles de consultation du site web
Récapitulatif
Public
Webmasters, webdesigners, chefs de projet digitaux, graphistes, concepteurs de sites Web, UX designers…
Prérequis
Avoir une bonne connaissance du Web et de l'utilisation des supports mobiles
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 mobile et au responsive design
- Ergonomie et UX Design : définitions clés.
- Différences UX desktop vs
- Enjeux du tactile, responsive design et mobile-
- Introduction aux limites du site web responsive et complémentarités avec les applications mobiles. Exemple de travaux pratiques : Débat collaboratif sur des exemples d'interfaces responsive
Ergonomie des interactions mobiles
- Contraintes d'affichage, tailles d'écran, zones de confort
- Étude de cas : ergonomie de sites web responsive célèbres et d'applications
- Exemple de travaux pratiques : Analyse ergonomique d'un site web responsive existant.
Architecture de l'information mobile
- Navigation mobile : header, burger menu, bottom
- Organisation des contenus dans une logique d'usage
- Exemple de travaux pratiques : Création d'une carte du site responsive et zoning fonctionnel.
Parcours utilisateur & scénarios
- Création de personas, experience map et contexte d'utilisation.
- Analyse des besoins et motivations des utilisateurs
- Exemple de travaux pratiques : Création d'un persona & customer journey pour un site web responsive.
Introduction au wireframing mobile pour le web responsive
- Types de wireframes : low-fi, mid-fi, high-
- Bonnes pratiques et lois ergonomiques (Fitts, Hick).
- Exemple de travaux pratiques : Réalisation d'un wireframe papier pour une interface responsive.
Construction des écrans clés
- Menus mobiles, tailles de polices, zones d'interaction.
- Analyse heuristique des interfaces
- Exemple de travaux pratiques : Création de wireframes pour un parcours utilisateur complet (site responsive).
Principes UI mobiles et responsive
- Boutons, contrastes, typographie, icônes,
- Ergonomie des formulaires, call-to-action, design visuel pour consultation
- Exemple de travaux pratiques : Amélioration visuelle d'un écran responsive (ex. formulaire de contact).
Introduction à l'accessibilité mobile pour le responsive
- Bonnes pratiques : taille de texte, contrastes,
- Accessibilité spécifique aux sites web
- Exemple de travaux pratiques : Audit d'accessibilité sur les wireframes créés.
Création du prototype interactif pour un site responsive
- Liaisons entre écrans, transitions
- Création d'un mini-parcours de navigation sur
- Exemple de travaux pratiques : Construction d'un prototype interactif pour un site web responsive.
Tests utilisateurs légers
- Méthode d'observation, feedback UX
- Exemple de travaux pratiques : Test utilisateur en binôme et synthèse des retours.
Itérations & finalisation
- Analyse des retours, roadmap d'amélioration.
- Exemple de travaux pratiques : Itérations sur le prototype et finalisation.
Présentation finale et clôture
- Démo du prototype final, feedback croisé entre
- Évaluation des acquis et pistes pour aller plus
- Exemple de travaux pratique : Présentation finale et évaluation qualitative par les pairs.