interfaces spécialisées

Interfaces spécialisées

Interfaces et Scénarisation (COM2571)10 décembre 2013

Grégory Petithttp://lrcm.com.umontreal.ca/greg/COM2571/

On rend les TP2!!!

La semaine dernière

Évaluation de vos maquettes

Et donc on fait quoi aujourd’hui?Interfaces haptiques

Réalité augmentée

Accessibilité

Retour sur l’examen

Interfaces haptiques

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)

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

Géomatic Touch

Saitek X52 Flight Control System

Sony DualShock

Novint XOI

Appareils haptiques

CyberGrasp

ApplicationSimulation

Domaine médical Télé-opérationPilotage (sports, armée)

RéadaptationAprès paralysie

Réalisme augmentéeJeux

Démo - CyberGrasp

http://www.youtube.com/watch?v=k2nuXX2thBA

Réalité augmentée

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.

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

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)

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

Accessibilité

Différents types déficiences Déficience visuelle

Déficience motrice

Déficience auditive

Déficience cognitive

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

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!

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

Graphismes tactiles numériques

Cat

Tablette avec picotsVirtual Tactile Display

Le Tactograph

Illustrations de manuels scolaires

Illustrations de manuels scolaires

Illustrations de manuels scolaires

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?

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

TactoWeb

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)

Technologie de réadaptationClaviers adaptés

Technologie de réadaptationContrôle de la souris adapté

Contrôle oculaire – Dasher

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)

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

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)

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)

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)

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)

Examen

Examen17 décembre de 13h à 16h

Salle D440

Documents du cours autorisés

Ordinateurs non-autorisés

Des questions sur l’examen?

Des questions???

Merci de votre attention!

Bon examen!

gregory.petit@polymtl.cahttp://lrcm.com.umontreal.ca/greg/COM2571/