A l'issue de cette formation, vous serez capable de :

• Identifier les enjeux et les critères de l'ergonomie d'interface pour le Web
• Appliquer l'ergonomie dans une démarche centrée utilisateur
• Evaluer la qualité de vos interfaces.

Jour 1

Qu'est-ce que l'ergonomie?

• Définitions de l'ergonomie Web
• De l'interactivité à la notion d'interface
• Utilisabilité et IHM
• Les critères de base de l'ergonomie
• Les normes ISO 9241
• La conception centrée sur l'opérateur humain

Exemples de travaux pratiques (à titre indicatif)

• Démonstration de sites Web avec pauvre ergonomie comparée à des sites bien étudiés en matière d'utilisation

L'organisation de l'information

• Utiliser des modes organisationnels adaptés (taxinomie)
• Prendre en compte les attentes utilisateur
• Favoriser la compréhension
• Etiquetage
• Cohérence...
• Rendre l'information navigable
• Listes
• Menus
• Plan de site...
• Favoriser les recherches
• Moteurs
• Index
• Comprendre la notion d'interaction
• Optimiser les menus et les parcours de navigation
• Optimiser la gestion des outils
• Applications
• Fonctionnalités

Exemples de travaux pratiques (à titre indicatif)

• A partir d'un cahier des charges simplifié, organiser les composants graphiques sur les pages en identifiant les avantages et inconvénients de chaque proposition

Connaître les futurs utilisateurs

• Sondages et questionnaires auprès des utilisateurs
• Recueil et analyse des données de comportement face à une interface graphique
• Synthèse des résultats

Réalisation d'une maquette

• Granularité du maquettage à entreprendre
• L'importance du feedback utilisateur
• Quid du "mobile first"
• Les diverses philosophies de design
• Focus sur Balsamiq

Exemples de travaux pratiques (à titre indicatif)

• Installation et conception de maquettes en utilisant le produit Balsamiq, à partir d'un cahier des charges simplifié

Jour 2

La conception visuelle d'interfaces

• Théories cognitives et phénomène de perception
• Lecture visuelle de la page-écran
• Parcours
• Scan visuel
• Répartition et hiérarchisation de l'information
• Standards et conventions de représentation
• Le concept d'affordance
• La notion d'habillage dans la conception de site
• La notion de grille de conception
• La notion de "Web safe"
• Area
• Color
• Font...
• La gestion typographique des textes
• La gestion des images
• Format
• Poids
• Définition
• La gestion des contenus riches
• Audio
• Vidéo
• Animation...
• La gestion des formulaires et des erreurs d'utilisation
• Les apports de JavaScript et Ajax
• Les apports de HTML 5 et de ses API
• Les interfaces de type SPA
• Les frameworks à base de composants graphiques tels que Angular, React et Vue
• Les avantages pour la conception graphique des nouveaux frameworks à base de composants

Exemples de travaux pratiques (à titre indicatif)

• Conception d'interfaces graphiques reprenant les éléments vus dans le chapitre comme :
• La structuration des écrans
• La présentation des formulaires
• L'affichage des erreurs
• L'utilisation des images et vidéos
• Le choix de la typographie

L'adaptation multisupports

• Les spécificités ergonomiques des écrans tactiles
• Les spécificités ergonomiques des Smartphones (type iPhone)
• Les spécificités ergonomiques des tablettes tactiles (type iPad)
• Les spécificités ergonomiques des applications dédiées
• Facebook
• Android
• IOS...
• Les produits dédiés au comportement responsive
• Les produits de conception mobile et hybride

Exemples de travaux pratiques (à titre indicatif)

• Sur la base d'une application réalisée pour un écran PC, étudier le choix des éléments retenus s'il devait être passé sur des interfaces Smartphone et tablette
• Dans un deuxième temps, expliquer comment la démarche "mobile first" influe sur la conception des interfaces graphiques

Jour 3

Mise en oeuvre

• Les 12 règles de base de l'ergonomie
• Conduire une analyse ergonomique
• Faire un audit ergonomique
• Analyser une cible : la méthode des personas
• Réaliser des tests d'utilisations
• Concevoir des scénarios d'utilisation (user story)
• Réaliser des schémas fonctionnels (use case)
• Concevoir un zoning
• Créer des storyboards visuels

Exemples de travaux pratiques (à titre indicatif)

• Sur la base d'une étude de cas simple présentée, étudier et appliquer les diverses étapes vues dans le chapitre menant à une ergonomie optimale