MGL 835 Interaction humain-machine 2013 hiver Prof. Michael McGuffin.

Présentation au sujet: "MGL 835 Interaction humain-machine 2013 hiver Prof. Michael McGuffin."— Transcription de la présentation:

1 MGL 835 Interaction humain-machine 2013 hiver Prof. Michael McGuffin

2 Quelles sont les tendences chez les interfaces utilisateurs ?

3 Dans un taxi à Montréal en 2013: iPhone, appareil GPS, et tablette Android.

4 Microsoft Surface Pro 2

5 Wacom Cintiq 24HD touch multitactile (10 doigts) + stylet (pression, angle, survol) 3700$ en 2013

6 Leap Motion Iris Classon http://i.i.cbsi.com/cnwk.1d/i/tim2/2013/07/18/LeapMotionController_35823002_09_620x433.jpg http://i2.cdn.turner.com/cnn/dam/assets/130722023535-leap-motion-controller-setup-story-top.jpg

7 zSpace Affichage stéréoscopique, suivi de la tête, et localisation dun stylet avec 6 DoF; 4500$ en 2013

8 Oculus Rift http://www.oculusvr.com/

9 PadFone de ASUS

10 PadFone 2

11 Ubuntu Edge 12 M$ crowdsourcés en 1 mois http://www.indiegogo.com/projects/ubuntu-edge

12 Ubuntu Edge 12 M$ crowdsourcés en 1 mois http://www.indiegogo.com/projects/ubuntu-edge

13 Ubuntu Edge http://www.youtube.com/watch?v=EtNhlVn3ETQ Leann Ogasawara Ubuntu Kernel Engineering Manager chez Canonical

14 Écrans courbés LG FlexSamsung Galaxy Round http://arstechnica.com/gadgets/2013/10/bending-it-the-right-way-how-lg-and-samsung- curved-their-phones-differently/

15 PaperTab : écrans flexibles http://www.youtube.com/watch?v=81iiGWdsJgg

16 Google Glass

17 Meta SpaceGlasses Lunettes à réalité augmentée; 700$ en 2014

18 Exemples de résolutions (fin 2013) DiagonalRésolutionPixels per inch Pixels par millimètre Écran HD courant 241920×108092 ppi3.6 ppmm Écran 4K PQ321Q de Asus 31.53840×2160140 ppi5.5 ppmm MacBook Pro Retina de Apple 15.42880×1800220 ppi8.7 ppmm iPad 4 de Apple 9.71536×2048264 ppi10.4 ppmm Galaxy Note 10.1 2014 de Samsung 10.12560×1600299 ppi11.8 ppmm iPhone 5 de Apple 4640×1136326 ppi12.8 ppmm PadFone Infinity de Asus 51920×1080441 ppi17.3 ppmm

19 Tendences Entrée enrichie (multitactile, stylet, main, corps…), de plus en plus de capteurs (GPS, accéléromètres, caméras de profondeur, …) – Multitactile + stylet: Microsoft Surface Pro 2, Wacom Cintiq touch et Cintiq Companion, Samsung Galaxy Note, Samsung Series 7, Panasonic Toughpad, Fujitsu Lifebook, ASUS Taichi 21 – Caméras de profondeur: Kinect, Leap Motion Sortie 3D enrichie (stéréoscopie, suivi de la tête, réalité virtuelle / augmentée) Mobilité et données synchronisées via le cloud Écrans courbés, flexibles Résolution décrans qui augmente sans cesse

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

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

22 LIHM Le côté pratique : – Comment concevoir une interface utilisateur ? É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 programmer les interfaces utilisateurs. Algorithmes, outils de programmation, boîtes à outils, libraries, … Le côté recherche : – Développer des nouvelles et meilleures façons dinteragir. Développer des interfaces et des techniques dinteraction novatrices. – Comment expliquer et mieux comprendre linteraction ? Développer des modèles et des théories descriptifs et prédictifs. Développer des nouvelles méthodologies de conception.

23 Dautres domaines reliés à lIHM Facteurs humains, ergonomie – Ne se limitent pas juste aux interactions avec les ordinateurs ou les machines. Mettent 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éressent à 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, … – Ont été beaucoup développés, 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

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

25 Pourquoi apprendre à concevoir les interfaces? Ne sont-t-ils pas déjà amplement conviviales et intuitives?

26 Je nai pas de choix!

27 Quest-ce que ça veut dire dannuler une opération déjà annulée?

28

29 Vu en 2012 Vu en 2013

30

31

32 Dautres exemples Fonctionnalitées cachées – iPod touch / iPhone: comment faire undo dans lapplication de bloc notes ? Il faut secouer le dispositif ! Dautres exemples ?

33 Il est facile de mal-concevoir une interface Même lorsquune interface est bien conçue, les interfaces graphiques modernes laissent encore beaucoup à désirer – La souris et le clavier sont des instruments dexpression très limités – Lorganisation hiérarchique des fichiers nest pas nécessairement idéale – Etc… (autres problèmes / défis ?)

34 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

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

36 Les utilisateurs atypiques Les interfaces supposent souvent que leur utilisateur a deux mains peut voir et entendre et a un bon contrôle moteur est intelligent et débrouillard na pas peur des ordinateurs peut lire et comprendre langlais est familier avec les conventions des « GUIs » typiques a la motivation dapprendre à utiliser linterface a le temps nécessaire de résoudre des problèmes lorsquils arrivent Quel pourcentage de la population a toutes ces caractéristiques?

37 Toutefois, il existe des procédures systématiques quon peut suivre pour concevoir les interfaces!

38 Principes de base … Ne supposez pas que vous savez ce qui est de mieux pour lutilisateur Ne supposez pas que vous savez ce que sont les buts, les tâches, et les habitudes de lutilisateur Il faut rencontrer, discuter avec, et observer de vrais utilisateurs pour comprendre leurs besoins

39 Le coût de changer la spécification dune interface temps coût

40 Quelques dimensions de lutilisabilité (selon Nielsen) Lefficacité (« efficiency ») – par exemple, en termes de vitesse La facilité dapprentissage (« learnability ») La memorabilité – est-ce quon se rappelle facilement de comment fonctionner linterface? Le taux derreurs; et labsence derreurs catastrophiques La satisfaction Dautres critères et termes à distinguer (ou à éviter?): flexible, puissante, intuitive, fluide, conviviale, ergonomique, utile

41 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

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

43 Et vous? Votre programme détudes? Maîtrise avec mémoire, sans mémoire, doctorat, D.E.S.S. ? Travaillez-vous en même temps? Avez-vous déjà travaillé sur linterface utilisateur dun logiciel, site web, produit, etc.? Êtes-vous à laise dans la programmation? (Quel(s) langage(s)?) Combien de vous ont pris LOG 350/GTI 350 avec moi? Combien de vous ont pris LOG 740/745 ?

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

45 Exemples de sujets pour le survol de littérature …

46 Exemples de code source de petits logiciels événementiels …

47 Exemples de projets de programmation potentiels …

48 SimplePaint – logiciel de dessin 2D en Java http://profs.etsmtl.ca/mmcguffin/code/ http://profs.etsmtl.ca/mmcguffin/code/

49 Visualisateur de réseau 2D (en Java) http://profs.etsmtl.ca/mmcguffin/code/ http://profs.etsmtl.ca/mmcguffin/code/

50 SimpleModeller – logiciel de modélisation 3D en Java (avec OpenGL et JOGL) http://profs.etsmtl.ca/mmcguffin/code/ http://profs.etsmtl.ca/mmcguffin/code/

51 Visualisateur de volumes 3D en Java (avec OpenGL et JOGL) http://profs.etsmtl.ca/mmcguffin/code/ http://profs.etsmtl.ca/mmcguffin/code/

52 Vue radiale de fichiers

53 À faire bientôt Si vous voulez faire le TP1 en équipe, trouvez un co-équipier Assurez vous davoir accès au bibliothèques en ligne à travers le proxy de lÉTS – Comment faire: http://bibliotheque.etsmtl.ca/infos/proxy.html http://bibliotheque.etsmtl.ca/infos/proxy.html – Essayez, par exemple, daccéder à cet article : http://doi.acm.org/10.1145/1349026.1349034 http://doi.acm.org/10.1145/1349026.1349034