GTI 745 Interfaces utilisateurs avancées 2015 été Prof. Michael McGuffin

Présentation au sujet: "GTI 745 Interfaces utilisateurs avancées 2015 été Prof. Michael McGuffin"— Transcription de la présentation:

1 GTI 745 Interfaces utilisateurs avancées 2015 été Prof. Michael McGuffin http://profs.etsmtl.ca/mmcguffin/ twitter: @MJMcGuffin http://profs.etsmtl.ca/mmcguffin/

2 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), …

3 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. – La conception ("design") est préoccupé par les compromis ("tradeoffs") – "Réalisation" peut vouloir dire programmation, ou bien création avec papier / carton, ou fabrication, etc. 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.

4 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 des techniques d’interaction novatrices Développer des modèles et des théories descriptifs et prédictifs GTI 350: L’application de ces aspects dans des contextes pratiques GTI 745: Ces aspects, avec un accent sur les questions de recherche et d’innovation

5 D’autres cours reliés GTI 745 «Interfaces utilisateurs avancées» – Version avancée de GTI 350 – Programmation d’interfaces pour le 3D (OpenGL), visualisation d’informations, interfaces utilisateurs pour la musique, algorithmes de reconnaissance de gestes, interfaces multitactiles … – Exemples d’interfaces expérimentales et novatrices MGL 835 – Couvrent l’ensemble de GTI 350 + GTI 745, mais avec plus d’accent sur la recherche

6 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 À retenir!

7 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!

8 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

9 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, …)

10 Et vous? Combien de vous ont pris GTI 350 avec moi? – Combien ont fait le travail pratique sur écrans multitactiles de 3M en GTI350 ? – Combien ont fait le travail pratique Android sur tablettes Xoom en GTI350 ? 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 ?

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

12 Laboratoire d’enseignement de multimédia A-3446

13

14 Écran “Cintiq 22HD touch” de Wacom

15 Travaux de laboratoire antérieurs …

16 Ancien travail de labo (2008 été, 2009 hiver) – jeu de tir 3D avec dispositifs d’entrée spéciaux (Wiimote ou SpaceNavigator)

17 Wiimote et Nunchuk http://en.wikipedia.org/wiki/Wiimote

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

19

20

21

22

23

24

25 Ancien travail de labo (2009 hiver) – visualisation des dépenses gouvernementales, en collaboration avec VisibleGovernment.ca

26

27

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

29 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.

30 Maquettes d’interfaces multitactiles créées par des étudiants (2010 hiver) …

31

32

33

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

35

36

37

38

39

40 D’autres logiciels multitactiles créés à l’ÉTS Logiciel de dessin de polygones 2D http://www.michaelmcguffin.com/tmp/multitouchDemos- 3Mdisplay/3M_multitouch_demo-2Dpolygons.mov Logiciel de modélisation de blocs 3D http://www.michaelmcguffin.com/tmp/multitouchDemos- 3Mdisplay/3M_multitouch_demo-3Dblocks.mov

41 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 2 en visite au laboratoire

42 Travaux de laboratoire de cette session …

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

44 Lab2 – création de contenu 3D Blender SketchUp Autodesk Maya Minecraft Lego Digital Designer Autodesk 123D Sculpt Etc.

45 Lab3 – modification d’un logiciel de tableau blanc multitactile

46 Lab4 – 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

47 Instruments de musique multitactiles http://www.youtube.com/watch?v=6yH9ifBvK6o

48 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 ) http://grad-schools.usnews.rankingsandreviews.com/best- graduate-schools/top-business-schools/entrepreneurship

49

50

51 Ce que vous pouvez faire cette semaine … Formez des équipes (2-4 personnes) – 4 personnes vont devoir faire plus de travail – Utiliser le site web titanpad pour former et inscrire vos équipes, s.v.p. Commencez le Lab1 – Première étape: obtenez une copie de JOGL et assurez vous d’être capable de compiler le code du Lab1 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

52 Une réponse comme ça ne vaut même pas zéro points.