les interfaces homme ordinateur - laurent henocquelaurent.henocque.com/oldsite/doc/interfaces...
TRANSCRIPT
Les Interfaces Homme Ordinateur
Auteur: Laurent HenocqueCours réalisé pour les élèves de l’ESIL-IRM-2
mis à jour en Janvier 2010
Licence Creative Commons
• Cette création est mise à disposition selon le Contrat Paternité-Partage des Conditions Initiales à l'Identique 2.0 France disponible en ligne
• http://creativecommons.org/licenses/by-sa/2.0/fr/
• ou par courrier postal à Creative Commons, 559 Nathan Abbott Way, Stanford, California 94305, USA.
Objectifs du Cours
• Ce cours propose un point de vue assez large sue la problématique des interfaces homme machine (ordinateur)
• On y aborde divers aspects techniques (bibliothèques, interopérabilité, portabilité, composants) et conceptuels (modalité, signalétique)
• Les aspects d’ergonomie ne sont pas vus de manière systématique, mais évoqués en plusieurs points.
Actuellement
• Plateformes: Windows / Xwindow / Mac /
• Protocoles: X11 / Html / Xml / Xslt / Xpath...
• Serveur : Php / Python / Ruby / Java
• Client : Javascript / Flash ActionScript / Java
• Client Mobile : Java (Symbian, Androïd) / Objective C (iPhone)
• ...
Enjeux
• Interopérabilité
• Portabilité
• Bibliothèques de composants
• Hégémonie
• Maîtrise du monde
Exemples de Types d’interfaces
avancéesInterfaces Homme Ordinateur
Interfaces multimodes
• Mode Standard / mode Expert
• Exemple : Nero Burning Rom
Interfaces "MDI"
• Multiple Document Interfaces = interfaces à documents multiples
• gestion d'un espace de travail interne à l'application
• Ex : Visual C++, Eclipse, Word, Powerpoint etc.
Interfaces MDI à fenêtres indépendantes
• Ex : Word, Powerpoint
• Systèmes hybrides : Netscape / Firefox
IDE
• Integrated development environment = Environnement de développement intégré
• Combinaison de fenêtre de message, fenêtre de travail, fenêtre d'exploration, fenêtre d'information
• Ex : Visual C++, Eclipse, OPL Studio, Powerpoint
IDE à perspectives multiples
• Organisations prédéfinies de fenêtres de travail selon le type de tache effectuée
• Ex : Eclipse
Interfaces Wizards
• L'utilisateur est guidé par une succession d'écrans
• Ex : installeurs, mode standard (non expert) de nombreuses interfaces (Nero), Dr Divx
Environnements à Plugins
• Des applications dont les fonctionnalités peuvent être complétées par l’utilisateur, par ajout simple de modules
• Ex: Eclipse
Concepts Fondamentaux
Les Interfaces Homme Ordinateur
Trois Niveaux logiques
• Trois niveaux logiques dans les interfaces :
• Niveau graphique 2D (interaction de bas niveau)
• Niveau composant (Widget / Charte graphique)
• Niveau dialogue (modèles d'interaction)
Analogie avec les languages
• Trois niveaux
• Niveau lexical : composants élémentaire (boutons, labels etc...)
• Niveau syntaxique : règles de bonne composition de composants élémentaires
• Niveau sémantique : fonctions des interfaces
Concepts Fondamentaux de bas niveau
• Fenêtre
• Dessin /Attribut Graphique /Contexte Graphique
• Événement
• Plan visuel
• Instrument de pointage (pointeur)
• Protocole de ré-affichage (événement <expose>)
• Hiérarchie de fenêtres
• Modalité
Concepts fondamentaux de niveau Composant
• Attribut (actif, couleur, etc...)
• Callback
• Distribution des événements (Dispatch)
• Automate de prise en charge des événements
• Accélérateur
• Hiérarchie d'objets
• Gadgets/Widgets
• Menu / Pop up menu
Concepts Répandus de niveau Dialogue
• Feuille à onglets
• Assistant (Wizard)
• Menus dynamiques
• Fenêtre de sélection de fichier
• Sélecteur d'arborescence (tree)
• Menu contextuel bouton droit
• Changement de "skin"
• Bouton "advanced"/ ou "propriétés"
Feuille à Onglets
Wizard
Selection de fichiers
Explorateur d'arborescences
Communication Inter Applications
• Copier Coller
• Drag and drop
• Ole DCOM
• Concept de Plugin
• Corba
Cas particulier des interfaces pour le graphisme 2D
• Différents modèles d'automates pour le graphisme
• Powerpoint
• Xfig
• Bounding Box
• Point de contrôle
• Quadtrees pour l'accès rapide aux éléments
• permet de cliquer sur un parmi plusieurs centaines de milliers d'éléments affichés
Cas particulier de la 3D
• Utilisation de la souris en 3D
• Logique de l'envoi d'événements (click)
• Problème de l'identification de l'objet pointé
• Point de contrôle
• Navigation 3D
Cas particulier : la simulation d'appareil
• L'ordinateur remplace de nombreux appareils électroniques
Processus de Réalisation d’interfaces
Réalisation d'une interface: cas simple
• Application mono poste
• Choix d'un environnement cible (Unix/Windows)
• Choix d'un environnement de développement
• Choix de bibliothèque de composants graphiques
• portabilité, efficacité, adéquation au besoin ...
• la bibliothèque apporte sa propre charte graphique, et des éléments relatifs au dialogue
• Possibilité d'innover dans la présentation et les interacteurs selon le public visé et le goût
Réalisation d'une interface en environnement industriel
• Application multi poste, développement en équipe
• Choix techniques complexes (distribution, bases de données etc...)
• Définition/respect d'une charte graphique
• Spécification/Conception de l’IHM et du logiciel
• lié au besoin de respecter des délais et de travailler en équipe
• Suivi d'un cycle de vie de type développement rapide d'applications (RAD)
L'analyse des besoins en matière d'IHO
• Analyse du travail pour informatisation
• Intégration du prototypage dans un processus répétitif de type RAD / spirale de Boehm
• 1 analyse du besoin
• 2 réalisation d'un prototype
• 3 évaluation avec le client
• 4 évaluation des risques; retour en 1
• Le RAD prévoit des échéances fixes, et strictes pour chaque cycle
Les grands paradigmes techniques
Les Interfaces Homme Ordinateur
Principe Fondamental
• Assurer la séparation des interfaces et des applications:
• au niveau du code source
• au niveau des exécutables
Séparation IHO/Application• Modèle client/serveur avec terminaux de
visualisation et saisie par tabulations
• disparu
• Modèle client /serveur moderne : interfaces web et approche Vue / Controleur (MVC)
• Modèle serveur/serveur
• XWindow
• Modèle associatif
• Windows
Prise en charge de l'utilisateur
• Utilisateur maître
• threads
• possibilité d'interruption de tâche
• Utilisateur guidé plus ou moins contraint
• remplissage de formulaires
• fenêtres modales
Couches Réseau Utilisées
• pipes, sockets tcpip
• rmi
• ole
• http
• corba
Avancées techniques fondamentales
• connexion réseau sécurisée (tcp/ip)
• concept de struct -> object graphique
• pointeur de fonctions -> callback
• chargement dynamique de bibliothèque
• interprétation des symboles d'une dll
• concept d'objet
• chargement dynamique de classe
X Windows
Client 1
Client 2
Client 3
Serveur X
Client 4
Client 5
Serveur X
Protocole X
Windows
Ole Server
Windows Windows
Ole Server
Client 1 Client 2 Client 3 Client 4 Client 5
Jsp/Php/Asp
Web Server:80
Prg 2
Prg 1
Web Server:80Prg 4
Prg 3
Navigateur
Navigateur
Limitations de XWindow
• La communication repose sur un protocole d'assez bas niveau (X) non construit sur la base de RMI, corba, etc
• La communication entre applications se fait donc soit via le serveur X par des échanges de propriétés, soit directement, via tcp/ip ou toute couche supérieure (Corba)
Avantages de XWindow• Fenêtre = ressource partagée
Window Id
Machine 2Machine 1
Machine 3
Avantages de XWindow
• Tout est fait pour permettre l'affichage d'informations provenant de différentes machines simultanément
• Totale interopérabilité, tout programme client s'exprimant selon le protocole X peut se connecter à tout serveur, même au bout du monde et d'une autre architecture matérielle
• Le protocole X est très léger (pas de codage Xdr)
• La boucle d'événements est sophistiquée
Interopérabilité selon XWindow
1 2 3 4Machine 1
(4 + 3*28 + 2*216 + 224)
1 23 4
12 34
1234
Machine 1
Machine 2
Machine 3
• La machine qui établit la connexion envoie un entier particulier, qui permet au destinataire de connaître le codage des entiers chez son partenaire
• Ensuite, si nécessaire, celui qui "subit" la connexion traduit systématiquement ses entrées pour les convertir
Copie d'une "struct" pour C (XWindow)
char buffer
struct
...
Copie d'une struct pour Xdr
struct
• Définition récursive:char* Xdr (struct,buf){ buf=Xdr(a ,buf); buf=Xdr(b ,buf); buf=Xdr(c ,buf); ... return buf;}
• A partir des fonctions de base
char* Xdr (int,char*); ...
abc
de
Avantages de Windows• Intégration dans l'environnement Windows où les
dll sont totalement interprétées (on peut interroger dynamiquement une dll pour savoir ce qu'elle offre comme services)
• Disponibilité de OLE pour les communications inter applications, possibilité de rmi (remote method invocation)
• La fluidité est garantie par une intégration totale au système
• L'accès aux ressources graphiques est direct
Limitations de Windows
• Le graphisme et l'interaction sont gérés par l'OS. On ne peut donc pas changer de serveur graphique, ou de window manager. On ne peut que changer de "skin".
• Les couches logicielles traversées sont nombreuses, et consomment plus de ressources pour la communication inter processus
Avantages du modèle Html
• Le client peut choisir son style d'affichage, ainsi que le contenu (avec un fichier de style Css, ou un programme de transformation Xslt)
• Le client choisit son navigateur
Limitations du modèle Html
• Un programme ne décide pas d'afficher quelque part, c'est l'utilisateur présent devant son écran qui choisit d'afficher une adresse (mode ‘pull’)
• L'affichage est en mode "page" et non en mode "fenêtre".
• Toutefois, cela change grace aux bibliothèques javascript et flash action script : ext-JS, tinyMCE…
• Adobe Air / Flex, ainsi que l’approche Widget permettent de réaliser des applications “web” hors navigateur
Autres Limitations du modèle Html
• Mobilise beaucoup de ressources:
• réseau
• ré-affichage complet de la page (sauf ajax)
• transfert complet de contexte lors de la requête (cookies - même en ajax…)
• Actuellement, la connection entre le client (page) et le serveur ne peut pas être permanente (limitation au niveau des serveurs) : donc le serveur ne peut pas envoyer d’événements à la page.
Gestion du Contexte
• Dans le cas Html, le protocole permet l'interruption de connexion en gardant la session ouverte. Le contexte peut être :
• conservé par le serveur
• conservé par le client
• non conservé
• soit en mode session, soit de façon rémanente
Le Modèle Thin Client• Plutôt que d'exécuter des algorithmes d'interface
complexes au niveau du client, on crée une "photo" d'écran sur un serveur, que l'on envoie à destination, avec simplement des zones de capture d'événements et leurs adresses associées
ok
ici :
ou bienla :
Bibliothèques Les Interfaces Homme Ordinateur
Couche graphique
• Sous X Window : supportée par le protocole X
• Dessin de formes de base
• rectangle, trait, courbe ...
• Gestion des fenêtres
• plans
• événements
• propriétés associées
• Gestion du contexte graphique
Couche Objet• Sous X Window, supportée par la couche Xt
(librairie)
• Sous Windows, supportée par les MFC
• Gestion des objets graphiques:
• fenêtres associées
• propriétés et attributs graphiques
• gestion de la structure
• gestion des automates de prise en charge des événements
Evénements de base
• <enter>
• <leave>
• <focus>
• (<left-ctrl><right-alt><left-shift>)<ButtonDown>
• <buttownUp>
• <pointerMotion>
• etc...
Tables de Translations XWindow
• Langage de désignation interprété, avec préférences
• Détaché des objets : affectation externe des callbacks, permettant le paramétrage par l'utilisateur
• Implanté dans les fichiers de défauts présents dans le dossier app-defaults
• *.XmPushButton:color=blue
• MainWin*CancelButton:color=red
• MainWin.MenuBar.File.Quit:callback=leave()
Couche Dialogue
• Non implantée en XWindow
• Disponibilité de bibliothèques de styles graphiques comme Motif, bâties sur Xt
• Implantée par des objets de haut niveau sous windows (assistants)
Modèles pour la portabilité
Les Interfaces Homme Ordinateur
Niveaux de portabilité
• Interfaces non portables: modification des sources
• Interfaces portables par re compilation/édition de liens sans modification de source
• permet de développer sur une machine, et de diffuser sur un grand nombre de plate formes différentes
• Interfaces portables par le recours à une machine virtuelle
• Java, Cobol
portabilité par re compilation
• Exemples d’interfaces portables par re compilation/édition de liens sans modification de source
• Ilog Views,
• Haxe pour le web http://haxe.org/
• GWT http://code.google.com/webtoolkit/
Haxe (http://haxe.org) peut compiler vers:
• Javascript en générant un unique fichier .js
• Flash 6 à 8 en générant un unique fichier .swf
• Flash 9 / Tamarin (un unique fichier .swf)
• NekoVM (unique fichier .n de bytecode)
• code source AS3
• code source PHP
• code source C++
Portabilité par machine virtuelle
• Une seule version de la bibliothèque graphique doit être conçue
• Les fonctionnalités de cette bibliothèque sont donc offertes sur toutes les plate formes
• Seule la machine virtuelle doit être portée
• Dans le cas de Java, cette machine virtuelle est généralement portée directement par le couple constructeur/OS
Portabilité par Compilation • Pour permettre la portabilité sans édition de source,
chaque version de la bibliothèque définit exactement les mêmes symboles
• Chaque implantation de la bibliothèque pour une plate forme donnée:
• fournit une passerelle vers la plate forme cible par des appels de fonctions graphiques existantes
• comble éventuellement certains manques si des fonctions présentes sur une autre plate forme doivent être disponibles partout
Taux de Portabilité par Compilation
Windows
Linux
Atari Os
Difficultés de la Portabilité par les bibliothèques
• Chaque OS requiert un portage de la bibliothèque, même pour la même machine
• Plus la bibliothèque utilise des fonctions de haut niveau, plus elle dépend de leurs évolutions : coût de maintenance
• Chaque fonction spécifique d'une plate forme dont on veut la portabilité doit être implantée ou simulée sur les autres plate formes
Look and Feel et simulation
• Chaque plate forme possède un certain style, aussi appelé "look and feel".
• style Windows, style X11/Motif, style Mac
• Une bibliothèque de portabilité peut simuler les styles (ne pas utiliser les bibliothèques natives mais en simuler l'aspect et le comportement)
• Une des raisons peut être de rester indépendant des couches objet trop variables, comme indiqué précédemment
Émulation de Style graphique
• Cela permet d'émuler X11 sous Windows ou Mac, et réciproquement.
• Le changement de style se fait dynamiquement comme un changement de skin
• Avantages: on peut développer sur un plate-forme avec le style de la future plate-forme de déploiement
Dialogue, Modalité,
SignalétiqueInterfaces Homme Ordinateur
Interfaces et Protocoles
• Une interface donne accès à des ensembles logiciels respectant des protocoles
• Un protocole est une interface de programmation dont les fonctions ne peuvent pas être appelées indifféremment
• Exemple : la pile
• Le modèle de ces restrictions peut être décrit à l'aide d'automates
Interfaces et Modalité
• Une interface ajoute et supprime des fonctionnalités de façon dynamique
• Ces variations forment ce que l'on appelle la modalité
• Les modalités sont constructives ou destructives
Fenêtres Modales
• Une fenêtre est modale quand elle désactive totalement ou partiellement l'accès au système
• Elle est application modale quand l'OS multitâche n'est pas verrouillé sur l'application courante
• Elle est système modale quand l'utilisateur doit impérativement répondre à la question posée pour faire quoi que ce soit d'autre
Modalité Constructive
• La modalité est constructive quand elle donne accès à des fonctions nouvelles
• Exemples:
• après avoir ouvert un fichier, dans un éditeur
• après avoir appuyé sur le bouton "imprimer" ce qui donne accès aux paramètres
Modalité Destructive
• La modalité est destructive quand elle supprime l'accès à certaines fonctions
• Exemples: pendant l'impression
• Le cas particulier des fenêtres modales est particulièrement saillant et anti-ergonomique
Modalité et Signalétique• Le mode dans lequel se trouve une interface doit
être perceptible à l'utilisateur
• La signalétique de l'interface doit être précise et non ambiguë
• Elle doit être homogène
• Elle doit être dénuée de défauts d'aspect
Signalétique de bas niveau
• Items de menus grisés quand inactifs
• Boutons de mode enfoncés quand actifs
• Icône de curseur, icône de pointeur
• exemple: paint
• Rémanences d'icones
• exemple: couleur de remplissage dans draw
Principes ergonomiques essentiels
• Ne pas utiliser simultanément plus de cinq signaux ayant des significations différentes
• Sauf choix justifié, veiller à ce que la couleur moyenne de vos écrans soit grise (moyenne des valeurs de pixels)
• Ne pas utiliser de fenêtres modales
• Permettre à l’utilisateur d’organiser son espace de travail (fenêtres flottantes, fenêtres à séparation contrôlée : JSplitPane ...)
Fluidifier l’interaction
• Limiter les besoins de recourir au menu (icônes, accélérateurs, boites à outils configurables ...)
• Utiliser des bascules (le même bouton initie et désactive une fonction)
• Utiliser les objets visibles pour s’auto activer
Conclusion
• Cet ensemble de transparents a servi de support à un exposé des concepts et état de l'art des différents grands paradigmes des interfaces homme ordinateur
• Il est prolongé par un cours sur la spécification des interfaces