LOG 745Interfaces utilisateurs avancées

2013 hiver

Prof. Michael McGuffin

L’IHM

• Interaction humain-machine• Synonymes (ou presque):

interaction homme-machine,interfaces usagers-machine,{interaction, interfaces} {humain,homme}-{machine,ordinateur}, …

• En anglais: «Human-Computer Interaction» (HCI), «Computer-Human Interaction» (CHI), «Man-Machine Interaction» (MMI), …

L’IHM

• L’étude de la conception, la réalisation, et l’évaluation des systèmes interactifs (et surtout informatisés) destinés à l’usage humain, et l’étude des phénomènes associés.

• NB: le mot interface signifie la surface de contact, ou la frontière, entre deux corps ou deux régions d’espace.L’interaction a lieu à l’interface,ou à travers l’interface.

Sujets à l’intérieur de l’IHM• Méthodologies de conception

– Étant donné une tâche et une classe d’utilisateurs, concevoir la meilleure interface, en respectant les contraintes, qui optimise un aspect de l’utilisabilité (l’efficience, la facilité d’apprentissage, etc.)

• Comment réaliser des interfaces– Algorithmes, outils de programmation,

boîtes à outils, libraries, …• Techniques d’évaluation d’interfaces

– Trouver les faiblesses d’une interface,comparer deux interfaces, mesurer la performance, …

• Développer des interfaces et destechniques d’interaction novatrices

• Développer des modèles et desthéories descriptifs et prédictifs

LOG 350: L’application de ces aspects dans des contextes pratiques

LOG 745: Ces aspects, avec un accent sur les questions de recherche et d’innovation

• LOG 745 «Interfaces utilisateurs avancées»– Version avancée de LOG 350– Programmation et conception

d’interfaces non-conventionnelles/novatrices(exemples: 3D, gestuelle, multitactile, etc.)

– Modèles et expérimentations scientifiques

• Autre cours relié: MGL 835– Couvrent l’ensemble de LOG 350 + LOG 745,

mais avec plus d’accent sur la recherche

• (Cours qui ne sont plus offerts:LOG 740, MGL 820, MGL 830)

D’autres domaines reliés à l’IHM• Facteurs humains, ergonomie

– Ne se limite pas juste aux interactions avec les ordinateurs ou les machines. Met parfois plus d’accent sur le côte humain, et/ou sur le travail (et des tâches répétitives, en particulier), que dans l’IHM.

– S’intéresse à comprendre les capacités humaines, et à appliquer ce savoir à la conception d’objets, d’outils, de systèmes, de machines, de tâches, de services, et d’environnements destinés à l’usage humain

– Des sous-branches: ergonomie physique, ergonomie cognitive (« engineering psychology »)

– Quelques concepts clés: stress, perception, attention, contrôle moteur, mémoire, charge mental, faire des décisions, les erreurs, …

– A été beaucoup développé, par exemple, pendant la deuxième guerre mondiale pour améliorer les contrôles d’avions et d’autres machines, et aussi pour améliorer la performance des ouvriers dans les usines qui effectuent des tâches répétitives

D’autres domaines reliés à l’IHM (2)• L’informatique• La psychologie• Le génie• L’infographie• Le graphisme (« Graphic Design »)• L’intelligence artificielle• La linguistique• La sociologie• etc.

• L’IHM est un domaine multidisciplinaire!

Le développement del’ordinateur personnel

Source: Michel Beaudouin-Lafon, Designing Interaction, not Interfaces, Proceedings of AVI 2004, http://doi.acm.org/10.1145/989863.989865

Pourquoi est-il difficile de bien concevoir des interfaces?

• L’IHM est une « science douce »• L’humain est difficile à modéliser• Il y a une grande variété d’utilisateurs, de tâches,

d’applications, et de périphériques• Brevets• Problèmes de compatibilité entre différents

plateformes• L’inertie des utilisateurs/du marché: les gens sont déjà

« satisfaits » et habitués avec leurs interfaces actuelles

Je me présente …• École primaire, secondaire,

et cégep à Chibougamau

• Bacc. en génie informatique (1999)à l’U de Waterloo (en Ontario),maîtrise (2002) et Ph.D. (2007)en informatique à l’U de Toronto

• Entreprises où j’ai travaillé: CAE, SoftImage, Discreet Logic à Montréal; Alias|wavefront, IBM, et Ontario Cancer Institute à Toronto

Mes intérêts de recherche

• La visualisation• Les interfaces utilisateurs• Les techniques d’interaction• L’infographie interactive• Des outils pour la créativité

(dessin, musique, …)

Et vous?• Combien de vous ont pris LOG 350 avec moi?

– Combien ont fait le travail pratique sur écrans multitactiles de 3M en LOG350 ?

– Combien ont fait le travail pratique Android sur tablettes Xoom en LOG350 ?

• Votre programme d’études?• Combien d’autres cours prenez-vous?• Avez-vous déjà fait un stage? Deux stages?• Avez-vous déjà travaillé sur l’interface utilisateur d’un logiciel,

site web, produit, etc.?• Avez-vous déjà fait de l’infographie 3D ?• Vos langages de programmation préférés ?

(coup d’oeil sur le site web,plans de cours, …)

Laboratoire d’enseignement de multimédia A-3446

Travaux pratiques antérieurs …

Ancien travail pratique (2008 été, 2009 hiver) – jeu de tir 3D avec

dispositifs d’entrée spécials (Wiimote ou SpaceNavigator)

Wiimote et Nunchuk

http://en.wikipedia.org/wiki/Wiimote

SpaceNavigator

http://www.3dconnexion.com/3dmouse/spacenavigator.php

SpaceNavigator

Ancien travail pratique (2009 hiver) – visualisation des dépenses

gouvernementales, en collaboration avec

VisibleGovernment.ca

Travail relié de Sébastien Pierre (de http://ffctn.com)

Surface multitactile au Laboratoire multimédia de l’ÉTS, développée par Christophe Viau, étudiant doctoral de Michael McGuffin.1920×2160 pixels, 1×1 mètre.

Maquettes d’interfaces multitactiles créées par des

étudiants (2010 hiver) …

Prototypes fonctionnels d’interfaces multitactiles créées par des étudiants (2010 hiver) …

Écrans multitactiles de 3M• 3 modèles d’écrans 3M au labo:

– 19 pouces, 1440×900 pixels, 10 doigts– 22 pouces, 1680×1050 pixels, 20 doigts– 32 pouces, 1920×1080 pixels, 10 doigts– Voir http://www.3m.com/multitouch pour les modèles plus récents

• NB: Dell a sorti récemment un écran multitactilede 23 pouces, 1920×1080 pixels, 10 doigts, pour < 1000$

modèle 19 pouces

22 pouces

19 pouces

32 pouces

D’autres logiciels multitactilescréés à l’ÉTS

Logiciel de dessin de polygones 2Dhttp://www.michaelmcguffin.com/tmp/multitouchDemos-3Mdisplay/3M_multitouch_demo-2Dpolygons.mov

Logiciel de modélisation de blocs 3Dhttp://www.michaelmcguffin.com/tmp/multitouchDemos-3Mdisplay/3M_multitouch_demo-3Dblocks.mov

Jeu multitactile créé à l’ÉTS

• Un exemple simple d’interface multitactile, modifié par les étudiants de 1er cycle dans le cadre d’un travail pratique

• (À droite) Des étudiants du secondaire 2en visite au laboratoire

Travaux pratiquesde cette session …

TP1: SimpleModeller – logiciel de modélisation 3D en Java (avec OpenGL et JOGL)

TP2 – modification d’un logiciel de tableau blanc multitactile

TP3 – création d’une interface reliée à la musique

• 3 choix– Modification d’un logiciel de “piano roll”– Création d’un instrument de musique multitactile– Création d’un logiciel de visualisation de

l’évolution de l’industrie de la musique

Instruments de musique multitactiles

http://www.youtube.com/watch?v=6yH9ifBvK6o

Visualisation de l’évolution de l’industrie de la musique

• Données à visualiser: plus de 600 artistes, environ 3000 liens d’influence entre les artistes, 193 “styles” de musique (ou “marchés”), couvrant les années 1955-2008

• Données fournies par le Prof. Erik Noyes au Babson College à Massachusetts, États-Unis

• (Babson College est la meilleure école d'affaires en "Entrepreneurship" aux États-Unis en 2010, selon U.S.News http://grad-schools.usnews.rankingsandreviews.com/best-graduate-schools/top-business-schools/entrepreneurship )

Ce que vous pouvez faire cette semaine …

• Formez des équipes (2-4 personnes)– 4 personnes vont devoir faire plus de travail

• Commencez le TP1– Première étape: obtenez une copie de JOGL et assurez

vous d’être capable de compiler le code du TP1

• Algorithme pour décider vers quelle session de labo vous allez: prenez la somme des journées du mois de vos anniversaires; si la somme est paire, allez à la première session. Exemple d’équipe à 3 personnes avec les anniversaires 5 janvier, 29 mars, 13 octobre-> 5+29+13=47 -> impair -> 2ième session de labo