Ralisation Savoir raliser une IHM Savoir concevoir une

Réalisation Savoir réaliser une IHM Savoir concevoir une IHM Savoir évaluer une IHM Cedric. Dumas@emn. fr contrat Creative Commons Paternité-Pas d'Utilisation Commerciale. Partage des Conditions Initiales à l'Identique 2. 0 France License

Réalisation - dld n n Styles d’interactions Dispositifs d’Entrée/Sortie u Périphériques de Sortie : F écrans u Périphériques d’Entrée F périphériques de localisation F Interaction multimodale n Gestion : F des Entrées F des Fenêtres 2

Écrans n Type : u cathodique u LCD n Écrans bitmap : u résolution : pixels per inch (ppi) u profondeur : bits par pixel u rafraîchissement : images par seconde u taille mémoire 3

Écrans n Couleurs directes Tables de couleurs n et les autres Buffers ! n 4

Périphériques physiques n Retour de toucher u capteur piézzo u dispositif mécanique n Retour d’effort u joystick u souris u bras etc. . . 5

Périphériques d’entrée n Périphériques physiques F claviers, boîtes à boutons F potentiomètres (rotatifs, linéaires) F souris, tablettes, manche à balai, boules F écrans tactiles, crayons optiques F capteurs de position, d’orientation n Périphériques simulés Périphériques logiques Périphériques virtuels 6

Périphériques de localisation n Absolu / Relatif u tablette, écran tactile, crayon otique u souris, joystick, trackball n Direct / Indirecte u écran tactile, stylo optique u tablette, souris, joystick, trackball n n n Discret / Continu Position / Taux de contrôle Position / Force (physiquement) 7

Périphériques de localisation n Control-to-Display Ratio n Loi de Fitts t = 0. 1 log (2 D / L) L D 8

Périphériques de localisation n n Multimodalité Bi-latéralisation u main dominante : situe le contexte u main non-dominante : agit dans le contexte Gestion des entrées ! 9

Type d’entrée Requête attente bloquante Echantillonnage Événement réponse immédiate 10 file d ’attente

Interaction directe : Modèle à base d'événements n n Création, propagation, réception, traitement Boucle d’événements u Détection u Détermination n Synthèse des événements u Ex n de la cible / liste des objets : Drag = Click + Move Machine à état : Down Move Up 11

Modèle à base d'événements gestion n n Bouche de scrutation Gestion de la file d’attente des événements système Construire le dialogue à partir de ces événements Comportement lié aux objets graphiques 12

Gestion d’évènements n Terminaux virtuels u une fenêtre appartient à une application u une application dessine dans ses fenêtres u une application reçoit les évènements qui se produisent dans ses fenêtres n Notion de focus u la fenêtre qui reçoit les évènements d’un périphérique à l’instant t 13

Types d’évènements n Liés aux périphériques u changement de focus u entrée/sortie du curseur dans une fenêtre n Liés aux fenêtres u demande de ré-affichage u création, destruction, … u etc. . . 14

Bilan Interaction directe n n n Objets liés à la manipulation directe : 10 % ? Différencié l’interaction directe sur les objets d’intérêts, les documents de l’interaction dans les menus, etc. Évolution de Manipulation Directe vers Interaction Instrumentale Un utilisateur pilote un instrument physique pour manipuler un instrument logique 15

Fenêtrage Modèles graphiques Architecture Logicielle

Systèmes de fenêtrage n n n Structurer l’espace d’affichage Partager la ressource écran Gestionnaire de fenêtres u interface utilisateur u système de fenêtrage n Fenêtre = zone autonome u pour l’affichage u pour les entrées 17

Modèles de fenêtrage n Sans superposition n Avec superposition n Hiérarchique 18

Systèmes de fenêtrage window manager desktop environments working environments n X-windows et ses window managers F Motif/Motif CDE/Motif OLWM/Openwin F After. Step Fvwm F Enlightenment F GNOME (Sawfish), KDE (Kwm), Qt n Explorer de Windows (MFC) n Finder de Mac. OS (Quartz. Extreme) 19

Librairies graphiques n Modèles de dessin : u dessin direct : peinture de formes u dessin structuré : arbre d’objets n Définitions des objets graphiques u attributs géométriques u attributs graphiques n Librairies graphiques u Xlib, Open. GL, Direct Draw, etc. . . 20

Modèle de dessins n Dessin direct u Problème : ré-affichage des parties cachées F par le système de fenêtrage (nécessite de mémoriser le contenu des fenêtres) F par les applications (nécessite de communiquer des demandes de réaffichage aux applications) n Dessin structuré 21

X n n n Portable Transparent vis à vis des réseaux Architecture client/serveur Solaris, Irix, Linux (XFree 86) tous les OS séparation des composants window manager 22

Boîtes à Outils n n n X 11/Motif X 11/GTK Tcl/Tk MFC Swing 23

Architecture logicielle u systèmes de fenêtrage u boîtes à outils u librairies graphiques n Décomposition modulaire 24

Pourquoi une architecture spécifique? n n Interfaces graphiques WIMP Standardisation de l ’aspect (look) et du comportement (feel) Nouvelle philosophie de programmation u Contrôle utilisateur u Séparation Interface et Noyau fonctionnel u Architectures de type Arch 25

Architecture conceptuelle n n Développement d’applications interactives Spécifications liées au Modèle Arch Contrôle de Dialogue Adaptateur Présentation Domaine Interaction 26

Outils de construction d’interfaces Catégories d’Outils n Outils correspondants à différents niveaux de codage : Application u u Composant de base (Squelette d’application) Boîte à outils Générateur de présentation (Générateur de présentation) Squelette d ’applications Boîte à outils Composant de base Saut 27

Catégories d’outils de construction d’interfaces Composants de base n Accès au système de fenêtrage (dit graphique) X, Mac. OS, Windows u Sémantique graphique u n Fonctions graphiques Évolution par enrichissement ou par extension u Compatibilité ascendante u Ex de système graphique : Open. GL u n État des périphériques d ’entrée u Boucle de gestion des messages et des évènements ++ Gestion du copier-coller 28

Composants de base Système de fenêtrage n n Niveau primitif des applications graphiques interactives Différentes catégories de fonctions offertes : • • • gestion de session (ouverture, fermeture, gestion du temps) gestion des évènements gestion du graphique écran communication avec le gestionnaire de fenêtres communication entre les applications utilitaires (gestion de 29 ressources, formats de fichier)

Catégories d ’outils de construction d’interfaces Trois niveaux de construction Boîtes à outils Générateurs d’interfaces Squelettes d ’applications 30

1 er niveau de construction d’interfaces Boîtes à Outils … natives Couche de programmation la plus basse du système de fenêtrage n Conventions de bas niveau * plateformes n Boucle de traitement des évènements n Accès au système graphique + performance, abstraction spécifiques — temps d ’apprentissage et de construction Ex : jeux vidéo n 31

Boîtes à outil natives Description n n Bibliothèque d’accès au Système de Fenêtrage Bibliothèque d’objets de contrôle : Widgets Mécanismes d’extension des objets de contrôle Mécanismes de communication entre les objets Application Boîte à Outils : Bibliothèque Système de fenêtrage Système d ’exploitation 32

Boîtes à outil natives Caractéristiques + Couverture de l’ensemble de l’arche, de l ’interface au noyau fonctionnel . Appels fonctionnels, callbacks, gestion des évènements - Plusieurs mois d’apprentissage -- Temps de développement important pour une application complète. Peu de méthodologie de construction préconisée ++ Tous les modèles graphiques sont supportés + Modularité des widgets - Modularité de l’ensemble de l’application dépendante du programmeur - Extensibilité de l’ensemble dépendante du programmeur - Code rarement compact ==> Méthodologie de 33 développement

1 er niveau de construction d’interfaces Boîtes à Outils … multiplateformes n n Pour éviter de développer une version de l ’application pour chaque plateforme Point commun de toutes les plateformes u Primitives les plus simples u Évènements nombreux u Composants natifs vs composants spécifiques n Ré-implémentation des composants natifs par plateforme : Java Swing (99), Ilog. Views (94) 34

Boîtes à outil multiplateformes Encapsulation n Encapsulation des mécanismes spécifiques à chaque plateforme u + Bonne extensibilité u Application u - Difficultés à respecter le “look and feel” natif - Difficultés à exploiter les utilitaires de communication entre applications Boîte à Outils générale Système de fenêtrage Système d ’exploitation 35

Boîtes à outil multiplateformes Machine virtuelle n Application Abstraction des mécanismes primitifs (modèle abstrait générique) u Exemples : Ilog. Views, Java u - Production du plus petit dénominateur commun u + Portabilité et respect du “look and feel” natif sont garantis Boîte à Outils Générique Adaptation Système de fenêtrage Système d ’exploitation 36

Générateurs d’interface n n n Générateurs de la partie Présentation de l’application Éditeurs graphiques à manipulation directe La partie générée peut être : • • • du code natif (C, C++, Java), rapide mais difficile à modifier du code intermédiaire, fichier de ressources interprété par l’appli, modifiable mais lent un mélange des deux : code intermédiaire et “talons” de communication entre adaptateur de noyau fonctionnel et fonctions natives Générateur Présentation Bibliothèque Système de fenêtrage Système d ’exploitation 37 Domaine

Générateurs d ’interface Gestion du placement n n n Placement statique des composants en wysiwyg u Fenêtres d ’application de taille fixe u Résultat fidèle mais qualité d ’usage dépendante des tailles et des résolution d ’écran Placement implicite dans des conteneurs invisibles u Retaillage difficile u Lisibilité et hiérarchisation des informations Placement sous contraintes / description de relations u Rataillage à évaluer à l ’usage Nécessité de connecter les composants obtenus à l ’application Difficultés à décrire la dynamique de l ’interface u telle que apparition progressive et déplacement des 38 composants

Générateurs d ’interface Caractéristiques. . . n n Construction isolée de la présentation Temps d ’apprentissage court u… sauf pour la connexion au reste de l ’application n n Temps de construction court … pour le standard Méthodologie recommandée : u 1° Interface u 2° Connexion au noyau sémantique n 39 Extensibilité et modularité restreintes

Générateurs d ’interface … Caractéristiques. Seule la Présentation est générée + Enrichissement des mécanismes de la BAO sous-jacente. Générateurs dédiés à un certain type d’interfaces, exemple : Formulaire + Temps d’apprentissage court si on suit les stéréotypes. Talons de communication efficaces si on reste proche des modèles génériques - Le modèle graphique reste celui du SDF natif - Seules entrées souris et clavier sont prévues - Difficultés à réutiliser des composants inter-applications et des talons existants. Les applications générées sont compactes en code sous condition d’utiliser des bibliothèques dynamiques 40

3ème niveau de construction d’interfaces Squelettes d’application n Application Frameworks : Découpage en objets coopérants d’une application graphique interactive Factorisation des parties de code récurrentes n Développement d’une application spécifique par • Dérivation des classes abstraites d’un squelette • Spécialisation des méthodes Générateur Présentation Boîte à Outils Système de fenêtrage Système d ’exploitation 41 Domaine

Squelettes d ’Application Exemples historiques u Mac. App : classes Application, Document, View u Next. Step sur station Ne. XT u —> Éditeurs de texte, de dessin n Exemples contemporains Java Swing : Boîte à outils ET squelettes génériques u MFC Microsoft u Open. Step Apple 42 u GNUstep u

Squelettes d ’Application Caractéristiques. . . n Peuvent construire toute l ’application u Programmation n objet, design pattern Temps d ’apprentissage long / squelettes abstraits Temps de développement court / stéréotypes Méthodologie incrémentale u Description progressivement raffinée des méthodes n Connexions simples avec d ’autres 43 protocoles

Squelettes d’application … Caractéristiques ++ Extensibilité : grande richesse dans les dérivations -- Grande complexité : trop modifiables ++ Modularité : utilisation rigoureuse des protocoles, pas de spécialisation u Ex : éditeur de texte, de graphe sous Next. STEP + Les squelettes peuvent aider à construire toutes les parties de l’application. . Les composants communiquent par invocation de méthodes ou par callback. Certains formalismes sont très compacts (interacteurs). D’autres sont de très bas niveau (gestion du graphique interne) + Construction (relativement) rapide d’applications collant au modèle du squelette - Long temps d’apprentissage (= Fonction du degré d’abstraction des squelettes). Méthodologie de développement : u 44 dériver les classes abstraites

Outils de construction d’interfaces Perspectives Langages spécialisés n n n Langages dédiés à la construction d ’application graphique interactive Mécanismes de communication entre composants Exemples u u n n Visual Basic Tk avec Tcl , PERL ou Scheme Facilités syntaxiques Facilités sémantiques : Contrôleur de dialogue u Communication entre Noyau fonctionnel et Présentation 45

Perspectives Méthodologie de conception des interfaces n “Design Pattern“, Motifs de conception Abstraction des squelettes d’applications u Découpage de l’application en composants autonomes u Schémas de programmation u n But : améliorer la qualité du logiciel en robustesse, modularité, réutilisabilité n Démarche : Identification de Patrons à partir des spécifications u Développement orienté objet avec communication par messages 46 u

Questions ? 47