Cours 1) Introduction Définitions Histoire Cours 8 : Révisions jgarcia@ircam.fr 2) Programmation des interfaces graphiques principes de conception 3) MVC Java2D Styles d interaction 4) Interaction graphique Drag and Drop Animations 5) Conception 6) Psychologie et Usabilité 7) Evaluation Périphériques d entrée Interface homme-machine Importance Partie d un system interactif qui :! représente l état interne sur des périphériques de sortie! récupère et traite des entrées des périphériques d entrée l ensemble des dispositifs matériels et logiciels qui permettent à un utilisateur de commander, contrôler, superviser un système interactif System interactif fonctionnel! Machine de paiement de billets, à l aéroport Tullamarine de Melbourne! Pendant un an, un assistant a été embauché pour aider les gens! interface + noyau Photographs courtesy of Penelope Sanderson
Interfaces WIMP Couches logicielles WIMP : Window, Icons, Menus and Pointing Fenêtres, Icones, menus et pointage. Présentation Fenêtre, icones et autres objets graphiques Interaction Menus, boites de dialogue, texte Entrée pointage, sélection, tracé Boucle action perception Feedback Squelette d application MacApp Java Swing, Qt, GTK+, MFC, Cocoa X Windows GDI+, Quartz, GTK+/Xlib, OpenGL Windows, Mac OS X, Linux Programmation évènementielle Facettes des widgets Source : Mouse Click File d attente (queue) while active if queue is not empty event <- queue.dequeue() source <- findsource(event) source.processevent(event) end if end while Présentation apparence graphique Comportement réactions aux actions de l utilisateur Interfaçage avec l application : notifications de changement d état queue.enqueue(event) Cible : Bouton «Cancel» processevent(event) target <- FindTarget (event) if (target NULL) target.processevent(event)
CRAP MVC : interactions entre composants Contraste Répétition Alignement Proximité title subtext three points main point sub point demande d état Vue - présentation des données et des fonctionnalités à l utilisateur entrées utilisateur Modèle - fonctionnalités de l application - accès aux données et traitements notification de changement mise à jour sélection de la vue notification d entrées opérations internes notification de changement d état Contrôleur - gestion des entrées de l utilisateur - comportement de l application Robin Williams Non-Designers Design Book, Peachpit Press Styles d interaction! Conversationnel! Manipulation directe! Gestuelle! Crossing! Manipulation directe Ben Shneiderman (1983) 1. Représentation permanente des objets d intérêt 2. Utilisation d actions physiques au lieu d une syntaxe complexe 3. Opérations rapides, incrémentales, réversibles, dont les actions sur le objets sont immédiatement visibles 4. Apprentissage selon une approche progressive, afin de permettre l utilisation de l interface avec un minimum de connaissances
Interaction gestuelle! Geste 2D: Gestes " Commandes / Interfaces tactiles (stylo, doigts) http://interaction.lille.inria.fr/~roussel/digital-library/media/2004-gr-mm.mov Crossing et steering Au delà du click! Crossing (Franchissement): Utiliser le franchissement pour déclencher des actions http://interaction.lille.inria.fr/~roussel/digital-library/media/2004-crossy.mov/ http://www.lri.fr/~dragice/foldndrop/! Geste 3D: reconnaissance de gestes de la main et du corps http://interaction.lille.inria.fr/~roussel/digital-library/media/2002-minority-report/2002-minority-reportclip.mov http://vimeo.com/2229299 Interaction graphique! Manipulation directe et feedback! Steering (trajectoire): Commandes qui dépendent de la trajectoire Exemples: Menu Hiérarchique, ou http://www.youtube.com/watch?v=wpbipn1b1zq Conception centrée-utilisateur Analyse des besoins et spécification Conception! Machines à états! Tâches élémentaires Utilisateurs! Modes d'interaction Evaluation Prototypage
Modèles conceptuels Utilité vs. usabilité Modèle conceptuel vs modèle mental Principes de Conception (Norman), exercices et exemples Psychologie : Perception, cognition et performance motrice Lois gestaltistes de la perception (exemples et pour critiquer) Cognition : parties de cognition, pour critiquer ou améliorer (exemples)!!! Performance motrice (critique ou calcule) Temps de réaction (Loi de Hick-Hyman) Loi de Fitts Mouvement canalisés Recherche visuelle Catégories d usabilité 1- Compatibilité 2- Guidage 3- Homogénéité 4- Flexibilité 5- Traitement des erreurs 6- Concision Évaluation Techniques informels et rapides : exemples (techniques, qui est l évaluateur, qu est-ce qu il évalue) Techniques formelles et ciblées : variables dépendantes / indépendantes mesures pour IHM