Ergonomie des IHM pour tablettes et Smartphones

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