LOG745 – Interfaces utilisateurs avancées Les interfaces pour la musique Maxime Dumas – Hiver 2013.
Interfaces spécialisées
description
Transcript of Interfaces spécialisées
![Page 1: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/1.jpg)
Interfaces spécialisées
Interfaces et Scénarisation (COM2571)10 décembre 2013
Grégory Petithttp://lrcm.com.umontreal.ca/greg/COM2571/
![Page 2: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/2.jpg)
On rend les TP2!!!
![Page 3: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/3.jpg)
La semaine dernière
Évaluation de vos maquettes
![Page 4: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/4.jpg)
Et donc on fait quoi aujourd’hui?Interfaces haptiques
Réalité augmentée
Accessibilité
Retour sur l’examen
![Page 5: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/5.jpg)
Interfaces haptiques
![Page 6: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/6.jpg)
Haptique = Sens du toucherLe 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)
![Page 7: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/7.jpg)
Types de retour haptiqueLe plus basique Vibration
Contrôleurs de jeux
Retour d’effort sur 2 dimensionsAide à l’écriture, la géométrie
Retour d’effort sur 3 dimensionsExploration d’objets virtuels en 3D
![Page 8: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/8.jpg)
Géomatic Touch
Saitek X52 Flight Control System
Sony DualShock
Novint XOI
Appareils haptiques
CyberGrasp
![Page 9: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/9.jpg)
ApplicationSimulation
Domaine médical Télé-opérationPilotage (sports, armée)
RéadaptationAprès paralysie
Réalisme augmentéeJeux
![Page 10: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/10.jpg)
Démo - CyberGrasp
http://www.youtube.com/watch?v=k2nuXX2thBA
![Page 11: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/11.jpg)
Réalité augmentée
![Page 12: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/12.jpg)
Réalité augmentéeRé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.
![Page 13: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/13.jpg)
ApplicationsArtshttp
://www.psfk.com/2013/04/augmented-reality-street-art.html
Formation http://mashable.com/2013/10/05/volkswagen-augmented-reality/
Commercehttp://www.gizmag.com/ikea-augmented-reality-catalog-app/28703/
DivertissementcolAR: http://www.youtube.com/watch?v=EGMjsYHD7Ak
![Page 14: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/14.jpg)
ApplicationsÉducation
http://www.youtube.com/watch?v=j4qgT2QJUFA
JeuxEyeToy, Wii, KinectLego (http://www.youtube.com/watch?v=
PGu0N3eL2D0)Billard (
http://www.youtube.com/watch?v=8Y8Cr5Ja-RM)
![Page 15: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/15.jpg)
Interfaces tangiblesInteraction 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
![Page 16: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/16.jpg)
Accessibilité
![Page 17: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/17.jpg)
Différents types déficiences Déficience visuelle
Déficience motrice
Déficience auditive
Déficience cognitive
![Page 18: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/18.jpg)
Déficience visuelleCauses principales:
Diabète GlaucomeDégénérescence Maculaire Liée à l’Âge (DMLA)
Deux de ces trois causes interviennent avec l’âge Majorité de personnes non-voyantes tardives
![Page 19: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/19.jpg)
Déficience visuelleOutil de réadaptation Lecteurs d’écran
Linéarisation de la page Web
Sortie de l’information via :Synthèse vocalePlage Braille
JAWS : le plus utilisé dans le monde
Démo!
![Page 20: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/20.jpg)
Limitations des lecteurs d’écranFrustration 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
![Page 21: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/21.jpg)
Graphismes tactiles numériques
Cat
Tablette avec picotsVirtual Tactile Display
![Page 22: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/22.jpg)
Le Tactograph
![Page 23: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/23.jpg)
Illustrations de manuels scolaires
![Page 24: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/24.jpg)
Illustrations de manuels scolaires
![Page 25: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/25.jpg)
Illustrations de manuels scolaires
![Page 26: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/26.jpg)
TactoWebAccès au Web pour les personnes non-voyantes
Supprimer la frustration provoquée par les lecteurs d’écranfrustration liée à la linéarisation de la informationliné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?
![Page 27: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/27.jpg)
TactoWebExploration multimodale du Web via le Tactograph
Création d’un fureteur tactile et sonorePrendre 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
![Page 28: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/28.jpg)
TactoWeb
![Page 29: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/29.jpg)
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) AmputationSource: Jean-Marie d’Amour (IDV6019 – Accessibilité du Web et du Multimédia)
![Page 30: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/30.jpg)
Technologie de réadaptationClaviers adaptés
![Page 31: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/31.jpg)
Technologie de réadaptationContrôle de la souris adapté
![Page 32: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/32.jpg)
Contrôle oculaire – Dasher
![Page 33: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/33.jpg)
Déficience auditiveSurdité à la naissance
Langue des signes comme langue maternelleOraliste (langue des signes comme
complément)
Incapacité auditive acquiseIncapacité 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)
![Page 34: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/34.jpg)
Principaux obstacles sur le WebDifficulté de compréhension du langage parlé
à l’écritContraction des motsAccent parlés mis à l’écritLangage SMS
Clips audio ou vidéo sans équivalent textuelSous-titreRésumé textuel
![Page 35: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/35.jpg)
Solutions à ces problèmesLangage 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-titrageSource: Jean-Marie d’Amour (IDV6019 – Accessibilité du Web et du Multimédia)
![Page 36: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/36.jpg)
Déficience cognitiveLimitations 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 verbauxSource: Jean-Marie d’Amour (IDV6019 – Accessibilité du Web et du Multimédia)
![Page 37: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/37.jpg)
Principaux obstacles sur le WebDifficulté de compréhension du langage écrit
Phrases trop longuesParagraphes trop longs
Colonnes de texte trop largeTailles de polices trop petitesTexte en italiqueInterligne simpleTexte sans illustrationsImages en mouvement distrayantesNavigation offrant trop de choix sur la même
pageSource: Jean-Marie d’Amour (IDV6019 – Accessibilité du Web et du Multimédia)
![Page 38: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/38.jpg)
Solutions à ces problèmesUtiliser un langage simpleDé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)
![Page 39: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/39.jpg)
Examen
![Page 40: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/40.jpg)
Examen17 décembre de 13h à 16h
Salle D440
Documents du cours autorisés
Ordinateurs non-autorisés
Des questions sur l’examen?
![Page 41: Interfaces spécialisées](https://reader035.fdocuments.fr/reader035/viewer/2022062222/568166d2550346895ddae5d1/html5/thumbnails/41.jpg)
Des questions???
Merci de votre attention!
Bon examen!
[email protected]://lrcm.com.umontreal.ca/greg/COM2571/