Interfaces spécialisées

1. Interfaces spécialisées Interfaces et Scénarisation (COM2571) 10 décembre 2013 Grégory Petit http://lrcm.com.umontreal.ca/greg/COM2571/

2. On rend les TP2!!!

3. La semaine dernière Évaluation de vos maquettes

4. Et donc on fait quoi aujourd’hui? • Interfaces haptiques • Réalité augmentée • Accessibilité • Retour sur l’examen

5. Interfaces haptiques

6. Haptique = Sens du toucher • Le sens du toucher est le seul qui est bidirectionnel. • On ne peux pas toucher sans ressentir un retour tactile et inversement • Interaction haptique = interaction tactile entre le système et l’usager, basé sur un retour tactile du système. • ≠ Interaction tactile (interaction tactile entre le système et l’usage, sans retour tactile du système)

7. Types de retour haptique • Le plus basique  Vibration • Contrôleurs de jeux • Retour d’effort sur 2 dimensions • Aide à l’écriture, la géométrie • Retour d’effort sur 3 dimensions • Exploration d’objets virtuels en 3D

8. Appareils haptiques Sony DualShock GéomaticTouch CyberGrasp Novint XOI Saitek X52 Flight Control System

9. Application • Simulation • Domaine médical  Télé-opération • Pilotage (sports, armée) • Réadaptation • Après paralysie • Réalisme augmentée • Jeux

10. Démo - CyberGrasp http://www.youtube.com/watch?v=k2nuXX2thBA

11. Réalité augmentée

12. Réalité augmentée • Réalité augmentée = superposition d’une couche virtuelle au monde réel. • L’accès à la réalité se fait via une interface « transparente »  écran avec une caméra à l’arrière. • La caméra doit être fixe par rapport à l’interface. • La couche virtuelle s’adapte en direct au monde réel en suivant le mouvement de la caméra.

13. Applications • Artshttp://www.psfk.com/2013/04/augmented-reality-street-art.html • Formation http://mashable.com/2013/10/05/volkswagen-augmented-reality/ • Commerce http://www.gizmag.com/ikea-augmented-reality-catalog-app/28703/ • Divertissement colAR: http://www.youtube.com/watch?v=EGMjsYHD7Ak

14. Applications • Éducation • http://www.youtube.com/watch?v=j4qgT2QJUFA • Jeux • EyeToy, Wii, Kinect • Lego (http://www.youtube.com/watch?v=PGu0N3eL2D0) • Billard (http://www.youtube.com/watch?v=8Y8Cr5Ja-RM)

15. Interfaces tangibles • Interaction avec un système via des éléments de notre environnement physique • Exemples: • http://www.youtube.com/watch?v=nWhbKHNildM • http://www.youtube.com/watch?v=yWLvQ9u-u_0

16. Accessibilité

17. Différents types déficiences • Déficience visuelle • Déficience motrice • Déficience auditive • Déficience cognitive

18. Déficience visuelle • Causes principales: • Diabète • Glaucome • Dégénérescence Maculaire Liée à l’Âge (DMLA) • Deux de ces trois causes interviennent avec l’âge  Majorité de personnes non-voyantes tardives

19. Déficience visuelle • Outil de réadaptation  Lecteurs d’écran • Linéarisation de la page Web • Sortie de l’information via : • Synthèse vocale • Plage Braille • JAWS : le plus utilisé dans le monde • Démo!

20. Limitations des lecteurs d’écran • Frustration lors de leur utilisation due à : • Mauvaise mise en page troublant la lecture • Conflit entre l’application et le lecteur d’écran • Formulaires mal conçus et mal libellés • Absence de texte alternatif pour les images • Liens et boutons ambigus • PDFs inaccessibles • Plantage du lecteur d’écran  Absence de représentation de la structure de la page due à la linéarisation de l’information  Un seul chemin de navigation possible

21. Graphismes tactiles numériques Cat Virtual Tactile Display Tablette avec picots

22. Le Tactograph

23. Illustrations de manuels scolaires

24. Illustrations de manuels scolaires

25. Illustrations de manuels scolaires

26. TactoWeb • Accès au Web pour les personnes non-voyantes • Supprimer la frustration provoquée par les lecteurs d’écran frustration liée à la linéarisation de la information linéarisation de l’information due à une seule modalité de sortie • Donc utiliser une navigation spatiale plutôt qu’une navigation séquentielle  Comme pour les graphismes tactiles alors?

27. TactoWeb Exploration multimodale du Web via le Tactograph Création d’un fureteur tactile et sonore Prendre en compte les différents éléments Web: • en-têtes • liens • paragraphes • menus • listes numérotées et à puce • Formulaires  Associer les bons retours tactiles et sonores aux éléments Web

28. TactoWeb

29. Déficience motrice – causes • Maladies ou autre cause organique • Encéphalopathie et paralysie cérébrale (DMC) • Pathologie du système locomoteur • Sclérose en plaque et autres maladies évolutives • Accident • Traumatisme cranio-cérébral • Lésion musculo-squelettique • Blessure médullaire (colonne vertébrale) • Amputation Source: Jean-Marie d’Amour (IDV6019 – Accessibilité du Web et du Multimédia)

30. Technologie de réadaptation Claviers adaptés

31. Technologie de réadaptation Contrôle de la souris adapté

32. Contrôle oculaire – Dasher

33. Déficience auditive • Surdité à la naissance • Langue des signes comme langue maternelle • Oraliste (langue des signes comme complément) • Incapacité auditive acquise • Incapacité légère ou modérée (personne malentendante) • Incapacité moyenne ou sévère (personne sourde) Source: Jean-Marie d’Amour (IDV6019 – Accessibilité du Web et du Multimédia)

34. Principaux obstacles sur le Web • Difficulté de compréhension du langage parlé à l’écrit • Contraction des mots • Accent parlés mis à l’écrit • Langage SMS • Clips audio ou vidéo sans équivalent textuel • Sous-titre • Résumé textuel

35. Solutions à ces problèmes • Langage plus simple • Information clé donnée au début • Illustration visuelle • Transcription en langue des signes • Contraste de la parole avec le fond sonore • Transcription textuelle • Sous-titrage Source: Jean-Marie d’Amour (IDV6019 – Accessibilité du Web et du Multimédia)

36. Déficience cognitive • Limitations liées à : • à la compréhension • à la concentration • à la mémorisation • au raisonnement • Exemples de trouble : • Dyslexie (lecture) • Dyscalculie (calcul et chiffres) • Dysgraphie (écriture) • Troubles d’interprétation des stimuli visuels et auditifs • Troubles d’interprétation des indices non verbaux Source: Jean-Marie d’Amour (IDV6019 – Accessibilité du Web et du Multimédia)

37. Principaux obstacles sur le Web • Difficulté de compréhension du langage écrit • Phrases trop longues • Paragraphes trop longs • Colonnes de texte trop large • Tailles de polices trop petites • Texte en italique • Interligne simple • Texte sans illustrations • Images en mouvement distrayantes • Navigation offrant trop de choix sur la même page Source: Jean-Marie d’Amour (IDV6019 – Accessibilité du Web et du Multimédia)

38. Solutions à ces problèmes • Utiliser un langage simple • Découper le contenu • Phrases courtes • Courts paragraphe • Listes plutôt que paragraphes plein texte • Colonnes moins larges • Taille du texte suffisante • Éviter l’italique plus difficile à lire et les polices sérif • Interligne agrandi (1,5) • Illustrer le texte avec des images ou des vidéo • Éviter le mouvement • Navigation scénarisée réduisant la charge cognitive Source: Jean-Marie d’Amour (IDV6019 – Accessibilité du Web et du Multimédia)

39. Examen

40. Examen • 17 décembre de 13h à 16h • Salle D440 • Documents du cours autorisés • Ordinateurs non-autorisés • Des questions sur l’examen?