Accueil › Formations › Informatique › Mobilité › Ergonomie Web › Ergonomie des IHM pour tablettes et Smartphones
Objectifs pédagogiques
- Utiliser les interfaces d'applications pour mobiles, tablettes et Smartphones
- Présenter les fondements de l'ergonomie des IHM mobiles
- Montrer les bonnes pratiques pour concevoir et améliorer l'expérience utilisateur.
Niveau requis
Avoir des connaissances Web.
Public concerné
Webdesigners, chefs de projets, développeurs, DA et infographistes.
Programme
Jour 1
Nouveau marché, nouveaux usages
- Contexte, chiffres, marché, évolution
- L'offre, les usages, géolocalisation, haptique, réalité augmentée
Approche UX centrée utilisateur
- Comportement, attentes et parcours utilisateurs
- Personas
- L'affordance
- Design émotionnel
Processus cognitifs
- Communication homme-machine
- Modèle du processeur humain
- Systèmes (perceptif, cognitif, moteur)
Ergonomie tactile
- Les critères ergonomiques
- Les normes (ISO 9241-10, ISO 13407)
- La navigation
- Devices
- Modes de navigation (ludique, intuitive, plaisante)
- Niveaux (principal, secondaire, raccourci contextuel, liens transversaux)
- La gestuelle tactile touch et multi-touch (Hold, Tap, Drag, Flick...)
- Avantages et contraintes de la conception mobile et tactile
Conception d'une interface
- Cahier des charges, spécifications
- Les guidelines
- L'approche mobile first
- Spécificités des principaux OS (iOS Apple, Android et Windows 8)
- Interaction et interactivité
Architecture de l'information
- Recommandations
- Structure du dialogue
- Organisation des contenus (Card Sorting)
Design graphique mobile
- Affichage (tailles des éléments, résolutions, contrastes)
- Accessibilité et visibilité (codes couleurs, identité graphique...)
- Les composants et leur traitement (tableaux, formulaires, listes...)
- Texte (agencement, lisibilité, polices de caractères, tailles...)
- Zoning et grilles
- Recommandations
Exemple de travaux pratiques (à titre indicatif)
- Conception initiale d'une interface graphique pour Smartphone ou tablette comportant les essentiels de l'accessibilité aux parties de l'écran comportant de la présentation et de la saisie
Jour 2
Responsive Design
- Principes
- Contenu fluide (multi-colonnes, multipages)
- Grille fluides, médias flexibles, Media Queries et viewport
- HTML 5 et CSS 3
Exemples de travaux pratiques (à titre indicatif)
- Conception d'un IHM s'adaptant aux diverses tailles d'écran
- Exploitation des techniques HTML 5 et CSS 3, en utilisant les Media Queries pour retailler l'écran de façon automatique pour une même application
Maquettage d'une IHM mobile / tablette
- Wireframes et prototypes
- Recommandations
Exemples de travaux pratiques (à titre indicatif)
- Maquettage
- Exercices sur outils Balsamiq et Axure
Evaluation d'une IHM mobile / tablette
- Grille et critères
- Tests de perception
- Tests utilisateurs
Exemple de travaux pratiques (à titre indicatif)
- Mise en oeuvre de tests de perception et évaluation
Le contenu de ce programme peut faire l'objet d'adaptation selon les niveaux, prérequis et besoins des apprenants.
Modalités d’évaluation des acquis
- En cours de formation, par des études de cas ou des travaux pratiques
- Et, en fin de formation, par un questionnaire d'auto-évaluation ou une certification (M2i ou éditeur)
