ORSYS : 05. UX design et ergonomie pour tablettes et smartphones

À l’issue de la formation, l’apprenant sera capable de mettre en œuvre les principes clés d’ergonomie et d’UX Design (Expérience Utilisateur) dans la conception ou l’amélioration d’interfaces tactiles (tablettes et Smartphones), afin d’en optimiser l’attractivité et la navigation.

Objectifs pédagogiques

1.      Comprendre le vocabulaire et les concepts clés de l'ergonomie et de l'UX design

2.      Connaître les exigences ergonomiques du développement d’applications sur les appareils tactiles

3.      Appréhender la conception centrée sur l'utilisateur

4.      Disposer d'une méthodologie de conception et d’évaluation d’interfaces mobiles : charte graphique, navigation, guidage, adaptabilité, etc.

5.      Découvrir l'analyse heuristique des IHM mobiles

6.      Connaître les meilleures pratiques pour conduire le cycle de maquettage d’une application Web compatible avec les mobiles

Participants

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.

Programme :

 1. Introduction et définition : qu'est-ce que l'ergonomie ?

1/2 jour- Définition de l'ergonomie. Pourquoi a-t-on besoin d'ergonomes ?- Le rôle et les bénéfices de l'ergonomie.- L’ergonomie, L’UX Research, l’UX Design et l’UI Design.- L'ergonomie et l'accessibilité : contrainte ou complémentarité ?- Des normes ISO pour une base standardisée.- Introduire l'ergonomie dans le cycle de conception.- Compatibilité des méthodes UX avec le processus Agile.- Types d'intervention : conception ou correction.

Echanges

Présentation de sites affichés sur mobile, d’Apps dédiées. Echanges d’expérience sur l’accessibilité, sur l’utilisation d’une application mobile…

2. Spécificités des IHM mobiles

1/4 jour- Affichage, interactions tactiles.- L’évolution de l’utilisation des applications mobiles.- Contraintes liées à l’usage mobile.- Apps dédiées, une application pour chaque plateforme d’exploitation.- Tendances.- Application native.- Tendances.- Web App.- Le Responsive Design.- Les limites du site Web responsif : approche mobile first.- Contraintes d’affichage, résolution d’écran, dimension en DP, les coins et bord  infinis.  

3. Étudier les utilisateurs, leurs tâches et le contexte

3/4 jour- Le fonctionnement cognitif humain.- La population cible : établir des Personas.- Mécanismes psychologique des Personas.- Buts, motivations et émotions de l’utilisateur.- Experience Map et contexte d’utilisation.- Analyse des besoins.- Exemples de scénarios utilisateur.- Modélisation des tâches : tri de cartes, arbre des tâches.

Travaux pratiques

Identification  de Personas et plusieurs taches/scénarios d’interaction. Expérience Map et arbres de tâches.

 4. Maquetter une interface mobile

3/4 jour- Qu'est-ce que le maquettage ?- Sketching, le maquettage basse fidélité.- Le maquettage moyenne fidélité.- Le maquettage haute fidélité.- Les outils disponibles du marché.- Les principes de conception d'une maquette en "Material Design".

Travaux pratiques

Conception d'interface à partir d'outils basse fidélité visuelle (Balsamiq, Wireframe Sketcher).

 5. Les critères d’ergonomie universels

1/4 jour- Les critères "universels" : simplicité, intuitivité, cohérence, sensation de contrôle, affordance.- Les lois de la Gestalt.- Mouvements oculaires sur IHM.- Loi de FITTS.- Loi de Hick.- Ergonomie du contenu, sémantique, wording.- Principe de coopération de Grice.  

 6. Ergonomie des IHM mobiles

1/4 jour- Menus mobiles.- Textes lisibles, taille des polices.- Zones d’information, zones d‘interaction.- Couleurs, images, une affaire de culture.- Ergonomie des icônes mobiles, des widgets.- Ergonomie des formulaires, gestion des erreurs, call-to-action.- La navigation dans une interface mobile : surface d’affichage et quantité d’info.- La navigation : navigation à tiroirs, à onglets.- Gestion du temps.

Echanges

Présentation d’exemples de site mobiles et échanges.

 7. L'analyse d’interface avec problèmes d’ergonomie

1/4 jour- La méthode de l'analyse heuristique : points forts, points faibles, ROI.- Méthodologie de l'analyse heuristique- Une grille d'analyse des IHM mobiles.- Étude de grilles d'analyse et d'audit.

Travaux pratiques

Audit de différentes interfaces sur Smartphones / tablettes présentant des problèmes d'ergonomie. Observation et identification des points à améliorer par les participants.