Conception d’Applications Multimédia pour le Web et les Mobiles (en Situation de Handicap)

1. Conception d’Applications Multimédia pour le Web et les Mobiles (en Situation de Handicap) Cours d’option SI5, MAM5 VIM, Master IFI IHM, Thème : Applications multimédia interactives pour le web et les mobiles : accessibilité en situation de handicap Contenu pédagogique : Analyse d’exemples et développement d’un projet de logiciel pédagogique en collaboration avec l’IME Les Hirondelles à Biot (Croix Rouge française) http://users.polytech.unice.fr/~strombon/camash Jean-Paul Stromboni, septembre 2014

2. Contenu et principe du cours • On se cantonne en principe aux animations 2D (pas obligatoire) • On étudie l’animation multimédia interactive sur le web ou en tactile, dans le cadre de jeux vidéo pédagogiques, soit avec : • Flash Action Script d’Adobe ou HTML5, utilisation d’un navigateur web • Android , utilisation d’un écran tactile … • On se fixe une contrainte d’accessibilité en situation de handicap, et on se pose la question : • Comment utiliser les technologies d’animation multimédia interactive sur le web ou les mobiles pour compenser ou réduire un handicap ? • On concrétise dans un projet ciblé sur des utilisateurs en situation de handicap intellectuel à l’IME Biot Les Hirondelles, avec ses deux classes spécialisées : • Isabelle COLAS <Isabelle.Colas@croix-rouge.fr> propose une liste de logiciels pédagogiques pour la classe spécialisée • Objectif, concevoir, réaliser et livrer un logiciel pédagogique à l’IME

3. Travail demandé • Travail individuel : • Description et analyse d’un jeu vidéo ‘accessible’ à un handicap • Recherche personnelle et synthèse sur le thème du cours : • Handicap intellectuel par exemple, • Logiciels pédagogiques pour le handicap intellectuel • Apport de l’informatique, du web, des mobiles dans ce domaine • Vous pouvez proposer un autre thème à valider : article de recherche, concepts, applications innovantes, technologies utiles ... • Travail en groupes de projet (de 2 à 3 élèves) : • Concevoir un jeu vidéo pédagogique choisi sur ou inspiré par la liste de l’IME (situation de handicap intellectuel) : • Constituer un dossier de conception, décrivant gameplay, structure, storyboard, composants, planning … • Mettre en œuvre (4 semaines), collaborer avec IME, • tester, l’IME est proche de l’école (500m) • présenter le projet lors d’une démonstration finale (semaine examen)

4. Planning du cours CAMASH • Semaine 1 : présentation du cours, analyse d’exemple avec Flash et ActionScript • Rendre analyse d’exemple semaine 3 • Semaine 2 : constitution des groupes de projet, 2 à 3 élèves, évent. analyse d’exemples utilisant html5, Action Script ou Android • Choix d’un projet (visite d’Isabelle Colas pour répondre aux questions) • Semaine 3 : le dossier de conception doit être validé avant la mise en œuvre • Validation du dossier de conception, puis démarrage du projet, • Semaines 4, 5, 6 et 7 : mise en œuvre, suivi hebdomadaire, • Visite d’Isabelle Thomas pour tester les projets, semaine 6 ou 7 • Rendu recherche/synthèse personnelle • Semaine 8 : démonstration des projets avec des élèves de l’IME, et livraison des projets : • Chaque groupe fournira un bilan de la séance de démonstration • On demande une notice pour chaque projet (aide, installation, utilisation)

5. Évaluation et notation • Analyse individuelle d’exemple : 0.25 • Recherche/synthèse personnelle : 0.25 • Livraison du résultat : 0.25 • Démonstration finale : 0.25 • Ponctualité et assiduité : bonus/malus individuel.

6. Qu’est ce qu’un jeu ? • D’après wikipédia : • « on peut définir le jeu comme une activité de loisirs d’ordre physique ou bien psychique, soumise à des règles conventionnelles, à laquelle on s’adonne pour se divertir, tirer du plaisir et de l’amusement. » • D’autres définitions du concept de ‘jeu’ qui vous semblent plus complètes ? (citez les sources au besoin)

7. Les enjeux des jeux (entre autres vidéo) • Divertissement, • Évasion (dans un univers virtuel) • Plaisir de la résolution des problèmes posés par l’ordinateur • Exemples ? • Apprentissage, support pédagogique • logiciels reconnus d’intérêt pédagogique (RIP), cf. FLOC • Simulation, sans risque physique ou autre • Des exemples ? • Intégration sociale • Jeux multi-joueurs, • Jeux en réseau (ex. handicapés et non handicapés jouent ensemble)

8. Savez vous ce qu’on appelle l’état de « flow » ? • Notion introduite par Mihalyi Csikszentmahalyi (@£§!), cf. Wikipédia • le flow est l’état mental atteint par une personne complètement immergée dans ce qu’elle fait, dans un état maximal de concentration, • Cette personne éprouve alors un sentiment d’engagement total et de réussite • Composants du flow (compléter sur Wikipédia ou autre) : • Objectifs clairs • Équilibre entre difficulté et compétences • Activité perçue comme une source de satisfaction • Haut degré de concentration sur un champ limité de conscience • Perte du sentiment de conscience de soi, … • Distorsion de la perception du temps • Rétroaction directe et immédiate • Sensation de contrôle de soi et de l’environnement

9. Qu’est ce qui fait un bon jeu ? • D’après Wolfgang KRAMER, auteur de jeux « renommé » : • Les jeux, c’est une histoire de goûts ! … • Il cite des critères objectifs à considérer pour évaluer un jeu : • L’originalité • La « rejouabilité » • La surprise • La courbe de tension • La facilité d’apprentissage et de maîtrise • Un temps d’attente raisonnable • Un contrôle créatif • L’uniformité (titre, thème, format, graphismes, …) • La qualité du matériel • Les règles cohérentes

10. Qu’est ce qui fait un bon jeu (suite) ? • Complexité et influence du joueur • Jeux simples et courts demandent des règles simples et courtes • Complexité des règles et influence du joueur corrélées • Et d’après vous, qu’est ce qui fait un bon jeu ? • Vous concevrez un jeu simple ( car peu de temps disponible) mais accessible au moins partiellement à une situation de handicap

11. La notion de gameplay • Contraction de « how the game plays », fiches de jeu des premiers jeux d’arcade. • Plusieurs sens (d’après Thomas Gaudy, thèse 2009 sur les jeux vidéos accessibles) : • Premier sens, restrictif : les effets des boutons et commandes du jeu • Second sens : ensemble des possibilités et des couplages entre le joueur et l’univers de jeu, avec les buts à atteindre par le joueur, et les règles, les contraintes, et les moyens d’y parvenir. • Quelle serait votre définition du ‘gameplay’ ? Qu’en dit Wikipédia ?

12. Qu’est ce qu’un gameplay riche et simple ? • Gameplay riche : on ne se lasse pas de jouer, plaisir, surprise générés par le jeu, gestion de la tension et de l’attention, intérêt suscité, développement de stratégies …, le flow est là  • Gameplay pauvre : le jeu est prévisible, on s’ennuie, … • Gameplay simple : peu d’actions possibles au joueur, on apprend vite à jouer • Gameplay complexe : c’est l’inverse • Exemple de gameplay simple et riche : tétris (pour ceux qui aiment) • Pouvez vous donner d’autres exemples ? • Et un exemple de gameplay riche et complexe ? • Un exemple de gameplay pauvre ?

13. Qu’est ce qu’un jeu vidéo (ou JV) ? • Définition tirée de wikipédia : «un jeu vidéo est un jeu électronique disposant de vidéo. Le joueur utilise des périphériques pour agir sur le jeu et percevoir l’environnement virtuel » • Intéressant d’aller compléter la lecture de l’article wikipédia, avec • Histoire du jeu vidéo ? • Industrie du jeu vidéo ? • Genres vidéo-ludiques ? • Débats et controverses ? • Effets physiologiques et psychologiques ? • Place du jeu vidéo dans la société moderne ? • ?

14. Accessibilité des jeux vidéo • voir Alexis Sepchat, labo Handicap et Nouvelles technologies (HaNT), thèse ‘ ‘, page , année. • Gameplay et état de flow passent par la qualité des couplages entre le joueur et l’univers de jeu, à deux niveaux : • Accessibilité de l’interface homme machine, • information du joueur sur l’état du jeu • Réactions du joueur aux défis posés par le jeu • Accessibilité du niveau demandé : temps de réponse, savoirs, précision, mémoire, raisonnement, inventivité, …

15. Capacités sensorielles, motrices, intellectuelles Sensoriel : lire les informations fournies par le jeu : • Vision : ~ 80% des infos sont visuelles (sous titrage intelligent, close captionning) • Audition (synthèse vocale) • Toucher (braille, écran tactile) • Goût (parfois associé au toucher) • Odorat (en lien avec la mémoire) Moteur : contrôler le jeu, c’est connaître la posture du joueur, et utiliser les muscles pour la modifier : • Proprioception (position des membres, des doigts, …) • Vestibulaire (sens de l’équilibre) • Système musculaire : bouton, clavier, position de la tête, des yeux, … • Voix, système phonatoire, souffle, … Intellectuel : une définition de l’intelligence ? Les facultés qui permettent de connaître l’environnement : • Percevoir, mémoriser, apprendre, imaginer, raisonner • Ressentir les relations de cause à effet

16. Situations de handicap • Trop de lumière, je n’arrive pas à lire l’écran de mon téléphone • Trop de bruit, je n’arrive pas à entendre le message de mon correspondant • Avec ce pansement, je n’arrive pas à utiliser le clavier, • Avec ce stress, je n’arrive plus à réfléchir • Avec ce surmenage, je n’arrive plus à trouver mes mots • Qu’est ce qu’il vient de dire, le prof déjà ? Etc …, • Vous voyez d’autres exemples de situations de handicap ?

17. Catégories de handicaps • Quatre grandes catégories • déficience visuelle, DV • déficience auditive, ou DA • Déficiences ou handicap moteur, DM • déficience cognitive, DC • innées, ou acquises, elles ont un effet majeur sur le développement et la perception du monde : • un aveugle de naissance n’a pas de perception de l’espace, à la différence d’un voyant devenu aveugle • Le principe de la LSF est différent de celui de la langue écrite • occasionnelles, on parle de situation de handicap • Qui était Helen Keller ?

18. Comment compenser les situations de handicap ? • remplacement des canaux sensoriels déficients • Exemple : DV, utiliser l’audition et le toucher • DA, utiliser un sous titrage intellignet (close captionning) • DM, utiliser la voix, la posture, • DC ? • Utilisation de périphériques adaptés • tablette tactile (DV, DM, ?) • Télécommande (DM) • Webcam (DM, DV) • Wiimote, Kinect (DV) • Applications adaptées ?

19. Analyse détaillée d’un jeu vidéo accessible • En TD, on demande une étude détaillée du jeu Terrestrial Invaders, (TI), l’un des UA games du laboratoire Forth à Patras en Grèce, et un bilan de ses enseignements : • Exécuter et analyser ce jeu en notant ce qui concerne l’accessibilité du menu d’accueil et en détaillant au moins deux niveaux de ce jeu • Décrire le gameplay des niveaux de jeu étudiés • Établir une liste des composants utilisés: sons, texte, images, animations • Noter les procédés utilisés pour rendre le jeu accessible • Quels sont les handicaps compensés dans les niveaux ? • Comment implémenterait on ces procédés avec Flash ? Avec … ? • C’est un rapport individuel à rendre à la fin de la semaine 2 au format pdf.

20. Liens utiles, références, à compléter • http://www.floc-multimedia.com/, site de jeux RIP, voir les démos ‘Logico Floc’ et ‘Bouge avec Floc’ • http://www.ics.forth.gr/hci/ua-games, concept d’UA-Games (?) jeu Terrestrial Invaders, à télécharger et à analyser ? • http://www.timgames.org/mudsplat, site de l’équipe Tim (Mudsplat) • Labo HaNT, à Polytech’Tours, cf. Thèse d’Alexis Sepchat • Thèse CNAM de Thomas Gaudy, juillet 2008 (?) • http://fa1ckg.free.fr/, site de jeux pour DV (?) • http://www.igda.org/accessibility/ , site International Game Developer Association, GA-SIG, Game Accessibility Group, avec son livre blanc pour l’accessibilité (?) • Le livre blanc du W3C • AudioGameMaker, un outil logiciel pour créer des jeux audio • Voyez vous d’autres liens et références pour enrichir cette liste ?