47
Réalisation Savoir réaliser une IHM Savoir concevoir une IHM Savoir évaluer une IHM [email protected] contrat Creative Commons Paternité-Pas d'Utilisation Commerciale-Partage des Conditions Initiales à l'Identique 2.0 France License

Réalisation Savoir réaliser une IHM Savoir concevoir une IHM Savoir évaluer une IHM [email protected] contrat Creative Commons Paternité-Pas d'Utilisation

Embed Size (px)

Citation preview

Page 1: 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

Réalisation

Savoir réaliser une IHM

Savoir concevoir une IHM

Savoir évaluer une IHM

[email protected] Creative Commons Paternité-Pas d'Utilisation Commerciale-

Partage des Conditions Initiales à l'Identique 2.0 France License

Page 2: 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

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

Page 3: 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

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

Page 4: 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

4

Écrans

Couleurs directes Tables de couleurs

et les autres Buffers !

Page 5: 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

5

Périphériques physiques

Retour de toucher capteur piézzo dispositif mécanique

Retour d’effort joystick souris bras etc...

Page 6: 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

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

Page 7: 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

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)

Page 8: 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

8

Périphériques de localisation

Control-to-Display Ratio

Loi de Fitts t = 0.1 log (2D / L)

L

D

Page 9: 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

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 !

Page 10: 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

10

Type d’entrée

Requête Echantillonnage Événement

attente bloquante réponse immédiate file d ’attente

Page 11: 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

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

Page 12: 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

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

Page 13: 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

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

Page 14: 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

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

Page 15: 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

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

Page 16: 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

FenêtrageModèles graphiquesArchitecture Logicielle

Page 17: 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

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

Page 18: 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

18

Modèles de fenêtrage

Sans superposition

Avec superposition

Hiérarchique

Page 19: 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

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

Page 20: 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

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

Page 21: 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

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é

Page 22: 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

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

Page 23: 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

23

Boîtes à Outils

X11/Motif X11/GTK Tcl/Tk MFC Swing

Page 24: 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

24

Architecture logicielle

systèmes de fenêtrage boîtes à outils librairies graphiques

Décomposition modulaire

Page 25: 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

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

Page 26: 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

26

Architecture conceptuelle

Développement d’applications interactives

Spécifications liées au Modèle Arch

Domaine

Adaptateur

Contrôlede Dialogue

Présentation

Interaction

Page 27: 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

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)

Page 28: 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

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

Page 29: 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

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)

Page 30: 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

30

Catégories d ’outils de construction d’interfaces Trois niveaux de construction

Boîtes à outils

Générateurs d’interfaces

Squelettes d ’applications

Page 31: 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

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

Page 32: 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

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

Page 33: 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

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

Page 34: 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

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)

Page 35: 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

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

Page 36: 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

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

Page 37: 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

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

Page 38: 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

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

Page 39: 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

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

Page 40: 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

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

Page 41: 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

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

Page 42: 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

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

Page 43: 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

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

Page 44: 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

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

Page 45: 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

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

Page 46: 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

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

Page 47: 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

47

Questions ?