Pourquoi ce cours? INTRODUCTION. Quelques définitions. Petit sondage. Avez-vous déjà conçu et développé une application interactive? pour éviter ca...

Transcription

1 1 Pourquoi ce cours? 2 pour éviter ca... INTRODUCTION Quelques définitions 3 Petit sondage 4 Un système interactif est un système dont le fonctionnement dépend d'informations fournies par un environnement externe qu'il ne contrôle pas. Les systèmes interactifs sont également appelés ouverts, par opposition aux systèmes fermés - ou autonomes dont le fonctionnement peut être entièrement décrit par des algorithmes. L interface est l ensemble des dispositifs matériels et logiciels qui permettent à un utilisateur de commander, contrôler, superviser un système interactif. L Interaction Homme-Machine est la discipline consacrée à la conception, la mise en oeuvre et à l évaluation de systèmes informatiques interactifs destinés à des utilisateurs humains ainsi qu à l étude des principaux phénomènes qui les entourent. Avez-vous déjà conçu et développé une application interactive? Quel langage, quelles librairies avez-vous utilisé? Combien de temps avez-vous passé sur la conception et l implémentation de l interface? Comment avez-vous procédé? Qui a utilisé votre application, pendant combien de temps?

2 Une petite anecdote 5 L IHM 6 une histoire vécue (projet ANR Reactive, équipe MINT): au début de l histoire (milieu de vie du projet), des médecins disent à l équipe d informaticiens «on aimerait une fenetre de configuration»... Évolution des interfaces 7 Évolution des interfaces 8 Interfaces à ligne de commande: donnent accès à une commande (une fonction du système) Menus et écrans de saisie: donnent accès à une application (un sous ensemble des fonctions du système)

3 Évolution des interfaces Evolution des interfaces 9 Multi-fenêtrage, interfaces iconiques et manipulation directe: donnent accès à l ensemble des fonctions du système, au delà, à celles du réseau 10 Manipulation directe Dialogue contrôlé par l utilisateur Représentation permanente Apprentissage exploratoire (opérations rapides, incrémentales, réversibles) WYSIWIG: «What you see is what you get» Évolution de l interactivité Loi de Moore, loi se Buxton 11 Le degré d interactivité d un système peut se mesurer au nombre et à la nature de ses échanges avec les utilisateurs Deux éléments importants ont contribué à l augmentation du degré d interactivité: la possibilité d exécution en parallèle de plusieurs tâches l avènement des interfaces graphiques 12

4 Why interaction is more powerful than algorithms Comment ce problème est-il traité? Interaction is a more powerful paradigm than rulebased algorithms for computer problem solving, overturning the prevailing view that all computing is expressible as algorithms. The paradigm shift from algorithms to interaction captures the technology shift from mainframes to workstations and networks, from number-crunching to embedded systems and graphical user interfaces, and from procedure-oriented to object-based and distributed programming. The radical notion that interactive systems are more powerful problemsolving engines than algorithms is the basis for a new paradigm for computing technology built around the unifying concept of interaction. Pourquoi s intéresser à l IHM? 15 Pourquoi s intéresser à l IHM? 16 Parce que ne pas s y intéresser coûte très cher : enquête de l US Government Accounting Ofce 2% des dépenses en logiciel pour des softs livrés et utilisés 25% pour des softs jamais livrés 50% pour des softs livrés mais jamais utilisés Un cas extrême, mais représentatif de la crise du logiciel (196x) et sans doute encore valable aujourd hui Solution proposée à l époque : le Génie Logiciel Problème : les méthodes de Génie Logiciel peuvent créer l illusion que la clé de la conception réside dans l application d un processus rigoureux permettant de transformer des besoins en un système S intéresser à l utilisateur "nal coûte cher, mais les changements tardifs ou après coup peuvent coûtent encore plus, par réduction des alternatives Les architectes conçoivent les maisons dans lesquelles nous vivons, pas les ingénieurs

5 Pourquoi s intéresser à l IHM? Pourquoi s intéresser à l IHM? 17 La conception d interfaces aujourd hui: Les concepteurs d interfaces sont consultés en fin de projet Et pourtant: Users do not care about what is inside the box, as long as the box does what they need done As far as the customer is concerned, the interface is the product (Jef Raskin) 18 Où sont les designers d interaction? Cette fonction est méconnue et son importance sousestimée pas de place dans l organigramme le design d interaction est considéré comme une souspartie de l informatique, mais les informaticiens s intéressent plus à la construction interne qu à la partie externe Objectif général : déplacer la courbe puissance / simplicité Simplifier 19 20

6 Simplifier et enrichir 21 Pourquoi est-ce dif"cile? 22 Exemple d environnement complexe: le cockpit d un airbus Pourquoi s intéresser à l IHM? 23 Un système interactif est différent d un système algorithmique : il doit pouvoir réagir à tout moment, même lorsqu il est déjà en train de faire quelque chose Premier problème : les informaticiens sont souvent formés à l algorithmique, au calcul, mais pas à la réactivité... Deuxième problème : les langages de programmation les plus utilisés ont été conçus pour le calcul, pas pour la réactivité (e.g. les entrées sorties ne sont possibles qu à l initiative du programme) 24 Une mauvaise interface peut engendrer Apprentissage long et difficile Fatigue, risque d erreurs Perte de productivité Désorientation Coûts de formation élevés Accidents, désastres Irritation, frustration, gêne, anxiété, insatisfaction De nouvelles charges ont été retenues lundi contre un ancien directeur technique d'airbus Industries après un rapport faisant état d'un dysfonctionnement de l'a-320 dans l'instruction de la catastrophe du Mont SainteOdile. Bernard Ziegler, 72 ans, avait été mis en examen en janvier 1997 pour "homicide et blessures involontaires" en relation avec "l'ergonomie du mode de descente de l'appareil". 17 janvier 2005 AFP

7 Pourquoi s intéresser à l IHM? L utilisabilité 25 Une bonne interface permet une interaction facile et naturelle tout en permettant de réaliser les tâches requises va au delà de l aspect esthétique en prenant en compte l utilisabilité 26 L utilisabilité peut être définit comme «"le degré selon lequel un produit peut être utilisé, par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité, efficience et satisfaction, dans un contexte d utilisation spécifié"» Norme ISO 9241 Challenges Challenges 27 Les concepteurs d interfaces doivent faire face à de nombreux défis: Large gamme d utilisateurs Différents contextes d utilisation Différentes configurations matérielles Traduction de l information dans différentes langues 28 Les IHMs sont omniprésentes et incontournables Elément de productivité essentiel Le coût de développement des IHMs est très élevé Souvent 50% (ou plus) du code/travail total Double objectif Concevoir des systèmes fiables et faciles à utiliser en un temps et à un coût raisonnables -> optimiser le ratio performances / coût

8 Pourquoi s intéresser à l IHM? Méthode classique «en cascade» 29 La conception d interfaces est un processus itératif: La définition de la tâche change en même temps que l interface est conçue L implémentation est influencée par la définition de la tâche et l interface Once the product s task is known, design the interface first; then implement to the interface design (Jef Raskin) 30 Conception itérative Solution: une conception itérative centrée sur l utilisateur 31 Réalisation rapide de prototypes ou de «mock ups» Approche empirique (essais-erreurs): aspect chaotique de la conception 32

9 33 Interfaces WIMP INTERACTION WIMP 34 Windows (fenêtres) Icônes Menus, boîtes de dialogue Pointer (pointage) Avantages: Apprentissage rapide Environnements standards Techniques d interaction simples à utiliser et programmer Concept: Engelbart ~1967 Concept: Xerox Star 35 36

10 Xerox Star 37 Xerox Star 38 Projet lancé en 1975, commercialisé en hommes/ année de travail pour un système destiné aux «business professionnals» Un an de réflexions, discussions qui ont mené au Red book Caractéristiques importantes Un échec commercial Un système trop nouveau, trop puissant, trop différent Une cible marketing mal évaluée (ex: pas de tableur) Un prix trop élevé ($16,500) Une architecture fermée (impossible de développer des applications hors Xerox) Un manque de volonté politique pour sortir du marché de la photocopie Mais une influence certaine sur les systèmes actuels Un écran blanc et noir de 17 Une souris à deux boutons Un clavier spécial muni de deux pavés de touches de fonction Maintenant 40 Un disque dur de 10 à 40 Mo Un lecteur de disquettes 8 pouces Périphériques d interaction Xerox Star Opérations rapides pour accéder à l écran 385 Ko de mémoire Une connexion éthernet Périphériques de stockage: Conception matérielle guidée par les besoins logiciels Un système fonctionnant «naturellement» en réseau Une interface graphique basée sur la métaphore du bureau L utilisation d icônes et de fenêtres et l idée du WYSIWYG Un système basé sur les documents (l utilisateur ne connaît pas les applications) Ensemble restreint de commandes génériques accessibles par des touches spécifiques 39 CPU microcodé d une puissance inférieure à 1 MIPS

11 Pourtant, beaucoup de choses ont changé Périphériques d entrée Les technologies d affichage ont évolué Entrée discrète Claviers, boites à boutons Apprentissage long: (1 frappe/s pour les débutants, 5 f/ s pour les utilisateurs intermédiaires, jusqu à 15 f/s pour les confirmés) Claviers Dvorak: 20 f/s Dimensions: carré de 12mm, force entre 40 et 125g, déplacement entre 3 et 5 mm Importance du retour sonore Multitap techniques prédictives (15 à 20 mots/mn) Périphériques d entrée Périphériques d entrée 43 Entrée continue Périphériques directs: écran tactile, stylo optique Avantages " Interaction sans intermédiaire " Peu d apprentissage Inconvénients: " Fatigant " Une partie de l écran cachée " Précision limitée 44 Périphériques indirects: 3 familles Isotonique (souris, trackball) Élastique (joystick) Isométrique (trackpoint)

12 Périphériques d entrée Périphériques d entrée 45 Fonctions de transfert: sa nature dépend du degré de résistance du périphérique Périphériques isotoniques: contrôle en position Périphériques élastiques / isométriques: contrôle en vitesse Périphériques isotoniques deux fois plus performants que les périphériques élastiques/isométriques Espace de travail minimal pour les périphériques isométriques. Utile lorsque les transitions avec le clavier sont nombreuses. 46 Fonctions de transfert pour périphériques isotoniques CD Gain (Control Display gain) CD Gain constants (problèmes de précision ou déplacements trop importants) CD Gain dynamiques (fonctions continues et discontinues): amélioration de la précision et réduction des distances parcourues Périphériques d entrée Système de fenêtrage 47 Pointage indirect avec périphériques isotoniques Avantages " Faible coût " La main reste dans une position confortable " Positionnement précis Inconvénients " L utilisateur doit saisir le périphérique pour commencer " Prend de la place sur le bureau " Débrayage nécessaire pour les déplacements importants " Apprentissage (pour la souris): 5 à 50 mn 48 Buts: permettre à plusieurs applications de partager l écran et les périphériques d entrée Une fenêtre est une zone autonome pour l affichage et/ou l entrée de données Fonctions du système de fenêtrage: Gestion de sessions (ouverture, fermeture ) Affectation des périphériques d entrée (focus) Communication entre les applications Gestion des différentes fenêtres

13 Gestionnaire de fenêtres Modèles de fenêtrage 49 A window manager is a software package that helps the user monitor and control different contexts by separating them physically onto different parts of one or more display screens Before window managers, people had to remember their various activities and how to switch back and forth 50 Avec ou sans superposition Eventuellement hiérarchique B. Myers. A taxonomy of window manager user interfaces. IEEE Computer Graphics and Applications 8(5), 1988 Manipulation des fenêtres Modèles de conception des IHMs 51 Opérations classiques Placer, déplacer Dimensionner Icônifier, maximiser, restaurer la taille initiale Fermer Décorations Cadre et/ou barre de titre Menu, icônes, raccourcis clavier Opérations plus originales Réduire à la barre de titre Toujours au dessus ou au dessous 52 Principe de base: séparation interface / noyau fonctionnel Partage de données entre l interface et le noyau fonctionnel

14 Modèles de conception des IHMs MVC 53 Variations de ce principe: Modèle de Seeheim (1983) Modèle de l arche (1992) Modèle-Vue-Contrôleur (MVC 1979 avec SmallTalk) Présentation-Abstraction-Contrôle (PAC années 80) 54 Trois composantes: Modèle : données de l application Vue : présentation, interface utilisateur Contrôleur : traitements, logique de contrôle, gestion des événements, synchronisation MVC MVC 55 Le modèle Représente le comportement de l application " Contient les données manipulées par l application " Assure la gestion de ces données et leur intégrité " Mise à jour des données (insertion, suppression, modification) " Méthodes pour accéder à ces données Possibilité d avoir plusieurs vues partielles des données 56 La vue Correspond à l interface avec laquelle l utilisateur interagit Présentation des résultats renvoyés par le modèle Réception des actions de l utilisateur (clics souris..) et envoi de ces informations au contrôleur La vue n effectue aucun traitement, se contente d afficher les traitements effectués par le modèle

15 MVC Mise en œuvre de MVC 57 Le contrôleur Gestion des événements de synchronisation pour mettre à jour le modèle Reçoit tous les événements de l utilisateur et enclenche les actions à effectuer Si changement des données, le contrôleur demande la modification des données au modèle Le contrôleur n effectue aucun traitement, ne modifie aucune donnée 58 Modèle asymétrique Une paire Contrôleur/Vue est associée à un seul modèle Un modèle peut se voir associé plusieurs paires Contrôleur/ vue Listes des dépendants et notification Les paires Contrôleur/Vue d un modèle sont enregistrées dans une liste de «dépendants» Lorsque l état du modèle est modifié, tous les dépendants sont notifiés Implémentation de MVC dans Smalltalk-80 MVC : exemple d interaction 59 3 classes abstraites définissent les comportements génériques des composants MVC Class Model Mécanismes permettant la gestion des dépendants Mécanismes de diffusion des notifications Class View Affiche une représentation du modèle Transmet les interactions utilisateur au contrôleur Class Controller Permet le contrôle et la manipulation d un modèle et d une vue L utilisateur clique sur un bouton de l interface 2. Un contrôleur (une fonction enregistrée pour gérer l événement) est appelé pour prendre en charge l événement 3. Le contrôleur notifie le modèle de l action de l utilisateur (éventuellement modification de l état du modèle) 4. Le modèle notifie les vues qu un changement d état a eu lieu 5. Les vues utilisent le modèle pour générer l interface appropriée 6. Attente des événements suivants

16 Conclusion sur le MVC 61 Avantages: Vues multiples synchronisées Vues et contrôleurs modulaires Développement de composants réutilisables Cohérence interne et externe des interfaces Inconvénients Complexité de communication entre les composants (principalement entre C et V)