View
110
Download
1
Category
Preview:
Citation preview
Réalisation
Savoir réaliser une IHM
Savoir concevoir une IHM
Savoir évaluer une IHM
Cedric.Dumas@emn.frcontrat Creative Commons Paternité-Pas d'Utilisation Commerciale-
Partage des Conditions Initiales à l'Identique 2.0 France License
2
Réalisation - dld
Styles d’interactions Dispositifs d’Entrée/Sortie
Périphériques de Sortie : écrans
Périphériques d’Entrée périphériques de localisation Interaction multimodale
Gestion : des Entrées des Fenêtres
3
Écrans
Type : cathodique LCD
Écrans bitmap : résolution : pixels per inch (ppi) profondeur : bits par pixel rafraîchissement : images par seconde taille mémoire
4
Écrans
Couleurs directes Tables de couleurs
et les autres Buffers !
5
Périphériques physiques
Retour de toucher capteur piézzo dispositif mécanique
Retour d’effort joystick souris bras etc...
6
Périphériques d’entrée
Périphériques physiques claviers, boîtes à boutons potentiomètres (rotatifs, linéaires) souris, tablettes, manche à balai, boules écrans tactiles, crayons optiques capteurs de position, d’orientation
Périphériques simulés Périphériques logiques Périphériques virtuels
7
Périphériques de localisation
Absolu / Relatif tablette, écran tactile, crayon otique souris, joystick, trackball
Direct / Indirecte écran tactile, stylo optique tablette, souris, joystick, trackball
Discret / Continu Position / Taux de contrôle Position / Force (physiquement)
8
Périphériques de localisation
Control-to-Display Ratio
Loi de Fitts t = 0.1 log (2D / L)
L
D
9
Périphériques de localisation
Multimodalité Bi-latéralisation
main dominante : situe le contexte main non-dominante : agit dans le
contexte
Gestion des entrées !
10
Type d’entrée
Requête Echantillonnage Événement
attente bloquante réponse immédiate file d ’attente
11
Interaction directe : Modèle à base d'événements Création, propagation, réception,
traitement Boucle d’événements
Détection Détermination de la cible / liste des objets
Synthèse des événements Ex : Drag = Click + Move
Machine à état : Down Move Move Move Move Up
12
Modèle à base d'événements gestion 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
13
Gestion d’évènements
Terminaux virtuels une fenêtre appartient à une application une application dessine dans ses
fenêtres une application reçoit les évènements qui
se produisent dans ses fenêtres Notion de focus
la fenêtre qui reçoit les évènements d’un périphérique à l’instant t
14
Types d’évènements
Liés aux périphériques changement de focus entrée/sortie du curseur dans une fenêtre
Liés aux fenêtres demande de ré-affichage création, destruction, … etc...
15
Bilan Interaction directe
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
FenêtrageModèles graphiquesArchitecture Logicielle
17
Systèmes de fenêtrage
Structurer l’espace d’affichage Partager la ressource écran Gestionnaire de fenêtres
interface utilisateur système de fenêtrage
Fenêtre = zone autonome pour l’affichage pour les entrées
18
Modèles de fenêtrage
Sans superposition
Avec superposition
Hiérarchique
19
Systèmes de fenêtrage
X-windows et ses window managers Motif/Motif CDE/Motif OLWM/Openwin AfterStep Fvwm Enlightenment GNOME (Sawfish), KDE (Kwm), Qt
Explorer de Windows (MFC) Finder de MacOS (QuartzExtreme)
window manager desktop environments working environments
20
Librairies graphiques
Modèles de dessin : dessin direct : peinture de formes dessin structuré : arbre d’objets
Définitions des objets graphiques attributs géométriques attributs graphiques
Librairies graphiques Xlib, OpenGL, Direct Draw, etc...
21
Modèle de dessins
Dessin direct Problème : ré-affichage des parties
cachées par le système de fenêtrage (nécessite de
mémoriser le contenu des fenêtres) par les applications (nécessite de
communiquer des demandes de réaffichage aux applications)
Dessin structuré
22
X
Portable Transparent vis à vis des réseaux Architecture client/serveur Solaris, Irix, Linux (XFree86) tous les OS
séparation des composants window manager
23
Boîtes à Outils
X11/Motif X11/GTK Tcl/Tk MFC Swing
24
Architecture logicielle
systèmes de fenêtrage boîtes à outils librairies graphiques
Décomposition modulaire
25
Pourquoi une architecture spécifique? Interfaces graphiques WIMP Standardisation de l ’aspect (look) et du
comportement (feel) Nouvelle philosophie de programmation
Contrôle utilisateur Séparation Interface et Noyau fonctionnel Architectures de type Arch
26
Architecture conceptuelle
Développement d’applications interactives
Spécifications liées au Modèle Arch
Domaine
Adaptateur
Contrôlede Dialogue
Présentation
Interaction
27
Outils de construction d’interfacesCatégories d’Outils Outils correspondants à différents
niveaux de codage : Composant de base Boîte à outils Générateur de présentation Squelette d ’applications
Saut
Application
(Squelette d’application)
Boîte à outils
Composant de base
(Générateur de présentation)
28
Catégories d’outils de construction d’interfacesComposants de base Accès au système de fenêtrage (dit graphique)
X, MacOS, Windows Sémantique graphique
Fonctions graphiques Évolution par enrichissement ou par extension Compatibilité ascendante Ex de système graphique : OpenGL
État des périphériques d ’entrée Boucle de gestion des messages et des évènements
++ Gestion du copier-coller
29
Composants de base Système de fenêtrage 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 ressources, formats de fichier)
30
Catégories d ’outils de construction d’interfaces Trois niveaux de construction
Boîtes à outils
Générateurs d’interfaces
Squelettes d ’applications
31
1er niveau de construction d’interfaces Boîtes à Outils … natives Couche de programmation la plus basse du
système de fenêtrage Conventions de bas niveau * plateformes Boucle de traitement des évènements Accès au système graphique
+ performance, abstraction spécifiques
— temps d ’apprentissage et de construction
Ex : jeux vidéo
32
Boîtes à outil natives Description 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
33
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 développement
34
1er niveau de construction d’interfaces Boîtes à Outils … multiplateformes Pour éviter de développer une version de
l ’application pour chaque plateforme Point commun de toutes les plateformes
Primitives les plus simples Évènements nombreux Composants natifs vs composants
spécifiques Ré-implémentation des composants natifs
par plateforme : Java Swing (99), IlogViews (94)
35
Boîtes à outil multiplateformes Encapsulation Encapsulation des mécanismes spécifiques à chaque
plateforme
+ Bonne extensibilité - Difficultés à respecter le “look and feel” natif - Difficultés à exploiter les utilitaires de
communication entre applicationsApplication
Boîte à Outils générale
Système de fenêtrage
Système d ’exploitation Système d ’exploitation
Système de fenêtrage
36
Boîtes à outil multiplateformes Machine virtuelle Abstraction des mécanismes primitifs (modèle abstrait
générique) Exemples : IlogViews, Java - Production du plus petit dénominateur commun + Portabilité et respect du “look and feel” natif sont
garantisApplication
Boîte à Outils Générique
Système de fenêtrage
Système d ’exploitation Système d ’exploitation
Système de fenêtrage
Adaptation Adaptation
37
2ème niveau de construction d’interfaces Générateurs d’interface 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
PrésentationGénérateur
Système de fenêtrage
Système d ’exploitation
Domaine
Bibliothèque
38
Générateurs d ’interface Gestion du placement Placement statique des composants en wysiwyg
Fenêtres d ’application de taille fixe Résultat fidèle mais qualité d ’usage dépendante des tailles
et des résolution d ’écran Placement implicite dans des conteneurs invisibles
Retaillage difficile Lisibilité et hiérarchisation des informations
Placement sous contraintes / description de relations Rataillage à évaluer à l ’usage
Nécessité de connecter les composants obtenus à l ’application Difficultés à décrire la dynamique de l ’interface
telle que apparition progressive et déplacement des composants
39
Générateurs d ’interfaceCaractéristiques ... Construction isolée de la présentation Temps d ’apprentissage court
… sauf pour la connexion au reste de l ’application
Temps de construction court … pour le standard
Méthodologie recommandée : 1° Interface 2° Connexion au noyau sémantique
Extensibilité et modularité restreintes
40
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 les 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
41
3ème niveau de construction d’interfaces Squelettes d’application Application Frameworks :
Découpage en objets coopérants d’une application graphique interactive
Factorisation des parties de code récurrentes
Développement d’une application spécifique par• Dérivation des classes abstraites d’un squelette• Spécialisation des méthodes
Présentation
Générateur
Système de fenêtrageSystème d ’exploitation
Domaine
Boîte à Outils
42
Squelettes d ’Application Exemples Exemples historiques
MacApp : classes Application, Document, View
NextStep sur station NeXT —> Éditeurs de texte, de dessin
Exemples contemporains Java Swing : Boîte à outils ET squelettes génériques MFC Microsoft OpenStep Apple GNUstep
43
Squelettes d ’Application Caractéristiques ... Peuvent construire toute l ’application
Programmation objet, design pattern Temps d ’apprentissage long / squelettes abstraits Temps de développement court / stéréotypes Méthodologie incrémentale
Description progressivement raffinée des méthodes Connexions simples avec d ’autres protocoles
BdD, web Extensibilité et modularité limitées aux stéréotypes
44
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
Ex : éditeur de texte, de graphe sous NextSTEP+ 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 :
dériver les classes abstraites définir les méthodes requises
- Seules les entrées souris et clavier sont prévues
45
Outils de construction d’interfaces Perspectives Langages spécialisés Langages dédiés à la construction d ’application
graphique interactive Mécanismes de communication entre composants Exemples
Visual Basic Tk avec Tcl , PERL ou Scheme
Facilités syntaxiques Facilités sémantiques : Contrôleur de dialogue
Communication entre Noyau fonctionnel et Présentation
46
Outils de construction d’interfaces Perspectives Méthodologie de conception des interfaces “Design Pattern“, Motifs de conception
Abstraction des squelettes d’applications Découpage de l’application en composants
autonomes Schémas de programmation
But : améliorer la qualité du logiciel en robustesse, modularité, réutilisabilité
Démarche : Identification de Patrons à partir des spécifications Développement orienté objet avec communication
par messages
47
Questions ?
Recommended