LOG 745 Interfaces utilisateurs avancées 2013 hiver Prof. Michael McGuffin.

Présentation au sujet: "LOG 745 Interfaces utilisateurs avancées 2013 hiver Prof. Michael McGuffin."— Transcription de la présentation:

1 LOG 745 Interfaces utilisateurs avancées 2013 hiver Prof. Michael McGuffin

2 LIHM 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 LIHM Létude de la conception, la réalisation, et lévaluation des systèmes interactifs (et surtout informatisés) destinés à lusage 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 despace. Linteraction a lieu à linterface, ou à travers linterface.

4 Sujets à lintérieur de lIHM Méthodologies de conception – Étant donné une tâche et une classe dutilisateurs, concevoir la meilleure interface, en respectant les contraintes, qui optimise un aspect de lutilisabilité (lefficience, la facilité dapprentissage, etc.) Comment réaliser des interfaces – Algorithmes, outils de programmation, boîtes à outils, libraries, … Techniques dévaluation dinterfaces – Trouver les faiblesses dune interface, comparer deux interfaces, mesurer la performance, … Développer des interfaces et des techniques dinteraction novatrices Développer des modèles et des théories descriptifs et prédictifs LOG 350: Lapplication de ces aspects dans des contextes pratiques LOG 745: Ces aspects, avec un accent sur les questions de recherche et dinnovation

5 LOG 745 «Interfaces utilisateurs avancées» – Version avancée de LOG 350 – Programmation et conception dinterfaces non-conventionnelles/novatrices (exemples: 3D, gestuelle, multitactile, etc.) – Modèles et expérimentations scientifiques Autre cours relié: MGL 835 – Couvrent lensemble de LOG 350 + LOG 745, mais avec plus daccent sur la recherche (Cours qui ne sont plus offerts: LOG 740, MGL 820, MGL 830)

6 Dautres domaines reliés à lIHM Facteurs humains, ergonomie – Ne se limite pas juste aux interactions avec les ordinateurs ou les machines. Met parfois plus daccent sur le côte humain, et/ou sur le travail (et des tâches répétitives, en particulier), que dans lIHM. – Sintéresse à comprendre les capacités humaines, et à appliquer ce savoir à la conception dobjets, doutils, de systèmes, de machines, de tâches, de services, et denvironnements destinés à lusage 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 davions et dautres machines, et aussi pour améliorer la performance des ouvriers dans les usines qui effectuent des tâches répétitives

7 Dautres domaines reliés à lIHM (2) Linformatique La psychologie Le génie Linfographie Le graphisme (« Graphic Design ») Lintelligence artificielle La linguistique La sociologie etc. LIHM est un domaine multidisciplinaire!

8 Le développement de lordinateur personnel Source: Michel Beaudouin- Lafon, Designing Interaction, not Interfaces, Proceedings of AVI 2004, http://doi.acm.org/10.1145/ 989863.989865

9 Pourquoi est-il difficile de bien concevoir des interfaces? LIHM est une « science douce » Lhumain est difficile à modéliser Il y a une grande variété dutilisateurs, de tâches, dapplications, et de périphériques Brevets Problèmes de compatibilité entre différents plateformes Linertie des utilisateurs/du marché: les gens sont déjà « satisfaits » et habitués avec leurs interfaces actuelles

10 Je me présente … École primaire, secondaire, et cégep à Chibougamau Bacc. en génie informatique (1999) à lU de Waterloo (en Ontario), maîtrise (2002) et Ph.D. (2007) en informatique à lU de Toronto Entreprises où jai travaillé: CAE, SoftImage, Discreet Logic à Montréal; Alias|wavefront, IBM, et Ontario Cancer Institute à Toronto

11 Mes intérêts de recherche La visualisation Les interfaces utilisateurs Les techniques dinteraction Linfographie interactive Des outils pour la créativité (dessin, musique, …)

12 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 dautres cours prenez-vous? Avez-vous déjà fait un stage? Deux stages? Avez-vous déjà travaillé sur linterface utilisateur dun logiciel, site web, produit, etc.? Avez-vous déjà fait de linfographie 3D ? Vos langages de programmation préférés ?

13 (coup doeil sur le site web, plans de cours, …)

14 Laboratoire denseignement de multimédia A-3446

15 Travaux pratiques antérieurs …

16 Ancien travail pratique (2008 été, 2009 hiver) – jeu de tir 3D avec dispositifs dentrée spécials (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 pratique (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 dinterfaces multitactiles créées par des étudiants (2010 hiver) …

31

32

33

34 Prototypes fonctionnels dinterfaces multitactiles créées par des étudiants (2010 hiver) …

35

36

37

38

39 É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écentshttp://www.3m.com/multitouch NB: Dell a sorti récemment un écran multitactile de 23 pouces, 1920×1080 pixels, 10 doigts, pour < 1000$ modèle 19 pouces

40 22 pouces 19 pouces 32 pouces

41 Dautres 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

42 Jeu multitactile créé à lÉTS Un exemple simple dinterface multitactile, modifié par les étudiants de 1er cycle dans le cadre dun travail pratique (À droite) Des étudiants du secondaire 2 en visite au laboratoire

43 Travaux pratiques de cette session …

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

45 TP2 – modification dun logiciel de tableau blanc multitactile

46 TP3 – création dune interface reliée à la musique 3 choix – Modification dun logiciel de piano roll – Création dun instrument de musique multitactile – Création dun logiciel de visualisation de lévolution de lindustrie de la musique

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

48 Visualisation de lévolution de lindustrie de la musique Données à visualiser: plus de 600 artistes, environ 3000 liens dinfluence 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 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