les interfaces homme ordinateurlaurent.henocque.com/dcblogv1/public/supports_de... · les...

Les Interfaces Homme Ordinateur

Auteur: Laurent HenocqueCours réalisé pour les élèves de

Polytech Marseille - Informatique - 4ème annéemis à jour en Janvier 2014

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

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

• ...

Enjeux

• Interopérabilité

• Portabilité

• Bibliothèques de composants

• Hégémonie

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

Exemples de Types d’interfaces

avancéesInterfaces Homme Ordinateur

Interfaces multimodes

• Mode Standard / mode Expert

• Exemple : Nero Burning Rom

Interfaces à documents multiples "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.

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

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

Interfaces à Plugins

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

• Ex: Eclipse

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

Concepts Fondamentaux

Les Interfaces Homme Ordinateur

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)

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

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.

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"

Feuille à Onglets

Wizard

Selection de fichiers

Explorateur d'arborescences

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

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

• Leap Motion

• 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

Cas particulier : Interfaces Skeuomorphiques

• 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, 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)

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 / Agile

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

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

Couches Réseau Utilisées

• pipes, sockets tcpip, la fonction ‘select’

• 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 (reprise par NodeJS - fonction 'select')

Interopérabilité selon XWindowLe Problème du ByteSex

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 (son "endianness")

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

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 via un client VNC)

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

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

Bibliothèques Graphiques et de

Composants d’Interfaces 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 (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)

Modèles pour la portabilité des

InterfacesLes 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

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

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