Formation Ergonomie des IHM pour tablettes et Smartphones – Centre de formation M2i
M2i Formation

Découvrez notre formationErgonomie des IHM pour tablettes et Smartphones

Présentiel

2 jours (14 heures) - MOB-IHM

Accueil  ›  Formations Informatique  ›  Mobilité  ›  Ergonomie Web  ›  Ergonomie des IHM pour tablettes et Smartphones

Objectifs pédagogiques

  • Connaître 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.

Paris La Défense06/04/20201 320 € HTDates proposées dans les agences M2iRéserver
Paris La Défense29/06/20201 320 € HTDates proposées dans les agences M2iRéserver
Paris La Défense28/09/20201 320 € HTDates proposées dans les agences M2iRéserver
Paris La Défense30/11/20201 320 € HTDates proposées dans les agences M2iRéserver

Sessions
planifiées
Sessions
ouvertes
Sessions
confirmées
Réserver
le stage

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

Faites évoluer vos compétences

Complétez votre formation