UX/UI, Ergonomie et Webdesign

UX design et ergonomie pour tablettes et smartphones

Objectifs

  • Comprendre le vocabulaire et les concepts clés de l'ergonomie et de l'UX design
  • Connaître les exigences ergonomiques du développement d’applications sur les appareils tactiles
  • Appréhender la conception centrée sur l'utilisateur
  • Disposer d'une méthode de conception et d’évaluation d’interfaces mobiles : charte graphique, navigation, guidage...
  • Découvrir l'analyse heuristique des IHM mobiles
  • Connaître les bonnes pratiques pour conduire le cycle de maquettage d’une application Web compatible avec les mobiles

Programme de la formation

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

  • 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…

Spécificités des IHM mobiles

  • 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 responsive : approche mobile first.
  • Contraintes d’affichage, résolution d’écran, dimension en DPI, les coins et bord infinis.

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

  • 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.

Maquetter une interface mobile

  • 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).

Les critères d’ergonomie universels

  • 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.

Ergonomie des IHM mobiles

  • 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.

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

  • 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.

Please login to get access to the quiz
Photoshop – Niveau 2 (Prev Lesson)
(Next Lesson) UX design et ergonomie des sites Web
Back to UX/UI, Ergonomie et Webdesign