Les Interfaces Homme Ordinateur

Auteur: Laurent HenocqueCours réalisé pour les élèves de l’ESIL-IRM-2

mis à jour en Décembre 2011

1

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.

2

Objectifs du Cours

• Ce cours propose un point de vue assez large sur 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.

3

Actuellement

• Plateformes: Windows / Xwindow / Mac

• Protocoles: X11 / Html / Xml / Xslt / Xpath ...

• Serveur : Php / Python / Ruby / Java / Go / Dart

• Client : Javascript / Flash ActionScript / Java / Dart

• Client Mobile : Java (Symbian, Androïd) / Objective C (iPhone IOS) / C++

• ...

4

Enjeux

• Interopérabilité

• Portabilité

• Bibliothèques de composants

• Hégémonie

• Maîtrise du monde (MacOS vs. Windows, IOS vs. Android, ...)

5

Exemples de Types d’interfaces

avancéesInterfaces Homme Ordinateur

6

Interfaces multimodes

• Mode Standard / mode Expert

• Exemple : Nero Burning Rom

7

Interfaces "MDI"

• Multiple Document Interfaces = interfaces à documents multiples

• gestion d'un espace de travail interne à l'application

• raccourci pour faire tourner les documents

• présence d’Onglets

• Ex : Visual C++, Eclipse, Word, Powerpoint etc.

8

Interfaces MDI à fenêtres indépendantes

• Ex : Word, Powerpoint

• Le système d’exploitation peut induire un style: cas de MacOS qui suscite des fenêtres indépendantes

• Systèmes hybrides : les navigateurs web comme Firefox / Safari / Chrome / IE

9

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

10

IDE à perspectives multiples

• Organisations prédéfinies de fenêtres de travail selon le type de tache effectuée

• Ex : Eclipse

11

Interfaces Wizards

• L'utilisateur est guidé par une succession d'écrans

• Ex : installeurs, mode standard (non expert) de nombreuses interfaces (Nero), Dr Divx

12

Environnements à Plugins

• Des applications dont les fonctionnalités peuvent être complétées par l’utilisateur, par ajout simple de modules

• Ex: Eclipse

13

Interfaces mono écran

• Toutes les applications pour téléphones et appareils mobiles tactiles ou non, dont l’écran possède une petite taille (moins de 10 cm)

• Iphone, téléphones sous android, etc...

• Ce modèle permet toutefois l’affichage de fenêtres de messages indépendantes de la fenêtre principale

14

Concepts Fondamentaux

Les Interfaces Homme Ordinateur

15

Trois Niveaux logiques dans les interfaces

• Niveau graphique 2D (interaction de bas niveau)

• Niveau composant (Widget / Charte graphique)

• Niveau dialogue (modèles et objets d'interaction)

16

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

17

Concepts Fondamentaux de bas niveau dans les IHM

• Fenêtre

• Dessin /Attribut Graphique /Contexte Graphique

• Prise en charge des événements ‘élémentaires’

• Plan visuel

• Instrument de pointage (pointeur)

• Protocole de ré-affichage (événement <expose>)

• Hiérarchie de fenêtres

• Modalité18

Concepts fondamentaux de niveau Composant

• Attribut (actif, couleur, etc...)

• Callback

• Distribution des événements (Dispatch)

• Prise en charge des événements par automate (bouton)

• Accélérateur clavier

• Hiérarchie d'objets imbriqués

• Menu / Pop up menu

• Components / Gadgets / Widgets etc.19

Concepts Répandus de niveau Dialogue

• Feuille à onglets, Fenêtre de type ‘SplitPane’

• Assistant (Wizard)

• Menus hiérarchiques et dynamiques

• Fenêtre de sélection de fichier

• Sélecteur d'arborescence (tree)

• Menu contextuel bouton droit (popups)

• Changement de "skin"

• Bouton "advanced"/ ou "propriétés"20

Feuille à Onglets

21

Wizard

22

Selection de fichiers

23

Explorateur d'arborescences

24

Communication Inter Applications

• Copier Coller

• Drag and drop

• Ole DCOM

• Corba

• Architectures de Plugins, utilisation de l’inversion de contrôle : communication par apis prédéfinies

25

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

26

Cas particulier de la 3D

• Utilisation de la souris en 3D

• Logique de l'envoi d'événements par projection(sur clic notamment)

• Problème de l'identification de l'objet pointé

• Problème des points de contrôle et de leur manipulation

• Navigation 3D

27

Cas particulier : la simulation d'appareil

• L'ordinateur remplace de nombreux appareils électroniques

28

Processus de Réalisation d’interfaces

29

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

30

Réalisation d'une interface en environnement industriel

• Application multi poste, développement en équipe

• Choix techniques complexes (distribution, bases de données, repository pour les sources, 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)

31

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

32

Les grands paradigmes techniques

Les Interfaces Homme Ordinateur

33

Principe Fondamental

• Assurer la séparation des interfaces et des applications:

• au niveau du code source

• au niveau des exécutables

34

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, tout ce qu’on peut faire avec Corba35

Prise en charge de l'utilisateur

• Utilisateur maître

• threads

• possibilité d'interruption de tâche à tout moment

• Utilisateur guidé plus ou moins contraint

• remplissage de formulaires

• fenêtres modales

36

Couches Réseau Utilisées

• pipes, sockets tcpip, la fonction ‘select’

• rmi

• ole

• http

• corba

37

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

38

X Windows

Client 1

Client 2

Client 3

Serveur X

Client 4

Client 5

Serveur X

Protocole X

39

Windows

Ole Server

Windows Windows

Ole Server

Client 1 Client 2 Client 3 Client 4 Client 5

40

Jsp/Php/Asp

Web Server:80

Prg 2

Prg 1

Web Server:80Prg 4

Prg 3

Navigateur

Navigateur

41

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)

42

Avantages de XWindow• Fenêtre = ressource partagée

Window Id

Machine 2Machine 1

Machine 3

43

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

44

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

45

Copie d'une "struct" pour C (XWindow)

char buffer

struct

...

46

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

47

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 direct48

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

49

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

50

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

51

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.

52

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

53

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 :

54

Thin Client permet la survie de logiciels ‘historiques’

• Un serveur exécute un logiciel sur une machine dotée d’un OS et de fonctionnalités de la même époque

• La copie d’écran est compressée et transmise sur le réseau dans une page web (comme avec chicken of the VNC)

• Les actions du client devant l’application sont transmises au serveur.

• Utilisé par exemple pour des jeux vidéo anciens

55

Bibliothèques Graphiques et de

Composants d’Interfaces Les Interfaces Homme Ordinateur

56

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 graphique57

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

58

Evénements de base

• <enter>

• <leave>

• <focus>

• (<left-ctrl><right-alt><left-shift>)<ButtonDown>

• <buttownUp>

• <pointerMotion>

• etc...

59

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()

60

Couche Dialogue

• Non implantée en XWindow (sauf le file selector)

• Disponibilité de bibliothèques de styles graphiques comme Motif, bâties sur Xt

• Implantée par des objets de haut niveau sous windows (assistants)

61

Modèles pour la portabilité des

InterfacesLes Interfaces Homme Ordinateur

62

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, Cobol63

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/

64

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

65

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

66

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

67

Taux de Portabilité par Compilation

Windows

Linux

Atari Os

68

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

69

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

70

É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

71

Dialogue, Modalité,

SignalétiqueInterfaces Homme Ordinateur

72

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

73

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

74

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

75

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

76

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

77

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'aspect78

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 draw79

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

80

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

81

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

82