Les Interfaces Homme Ordinateur

Les Interfaces Homme Les Interfaces Homme OrdinateurOrdinateur

Présentation généralePrésentation généralemis à jour en Février 2008mis à jour en Février 2008

ActuellementActuellement• WindowsWindows• XwindowXwindow• MacMac• HtmlHtml• Xml/Xslt/Xpath...Xml/Xslt/Xpath...• PhpPhp• Gif/JpegGif/Jpeg• Flash ActionScript swfFlash ActionScript swf• JavascriptJavascript• JavaJava• bibliothèques propriétairesbibliothèques propriétaires• ……

EnjeuxEnjeux• InteropérabilitéInteropérabilité• PortabilitéPortabilité• Bibliothèques de composantsBibliothèques de composants• HégémonieHégémonie• Maîtrise du mondeMaîtrise du monde


Exemples et conceptsExemples et concepts

Interfaces multimodesInterfaces multimodes

• Mode Standard / mode ExpertMode Standard / mode Expert• Exemple : NeroExemple : Nero

Interfaces "MDI"Interfaces "MDI"• Multiple Document Interfaces = interfaces Multiple Document Interfaces = interfaces

à documents multiplesà documents multiples

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

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

Interfaces MDI gérées à fenêtres Interfaces MDI gérées à fenêtres indépendantesindépendantes• Ex : Word, PowerpointEx : Word, Powerpoint

• Systèmes hybrides : Netscape / FirefoxSystèmes hybrides : Netscape / Firefox

IDEIDE• Integrated development environment = Integrated development environment =

Environnement de développement intégréEnvironnement de développement intégré

• Combinaison de fenêtre de message, Combinaison de fenêtre de message, fenêtre de travail, fenêtre d'exploration, fenêtre de travail, fenêtre d'exploration, fenêtre d'informationfenêtre d'information

• Ex : Visual C++, Eclipse, OPL Studio, Ex : Visual C++, Eclipse, OPL Studio, PowerpointPowerpoint

IDE à perspectives multiplesIDE à perspectives multiples• Organisations prédéfinies de fenêtres de Organisations prédéfinies de fenêtres de

travail selon le type de tache effectuéetravail selon le type de tache effectuée

• Ex : EclipseEx : Eclipse

Interfaces WizardsInterfaces Wizards• L'utilisateur est guidé par une succession L'utilisateur est guidé par une succession

d'écransd'écrans

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

Environnements à PluginsEnvironnements à Plugins• Des applications dont les fonctionnalités Des applications dont les fonctionnalités

peuvent peuvent être complétées par l’utilisateur, être complétées par l’utilisateur, par ajout simple de modulespar ajout simple de modules

• Ex: EclipseEx: Eclipse


Concepts FondamentauxConcepts Fondamentaux

Niveaux logiquesNiveaux logiques• Trois niveaux logiques dans les interfaces Trois niveaux logiques dans les interfaces

• Niveau graphique (interaction de bas Niveau graphique (interaction de bas niveau)niveau)

• Niveau composant (Widget / Charte Niveau composant (Widget / Charte graphique)graphique)

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

Analogie avec les languagesAnalogie avec les languages• Trois niveauxTrois niveaux

• Niveau lexical : composants élémentaire Niveau lexical : composants élémentaire (boutons, labels etc...)(boutons, labels etc...)

• Niveau syntaxique : règles de bonne Niveau syntaxique : règles de bonne composition de composants élémentairescomposition de composants élémentaires

• Niveau sémantique : fonctions de Niveau sémantique : fonctions de interfacesinterfaces

Concepts Fondamentaux de bas Concepts Fondamentaux de bas niveauniveau• FenêtreFenêtre• DessinDessin• Attribut GraphiqueAttribut Graphique• Contexte GraphiqueContexte Graphique• ÉvénementÉvénement• Plan visuelPlan visuel• Instrument de pointage (pointeur)Instrument de pointage (pointeur)• Protocole de réaffichage (<expose>)Protocole de réaffichage (<expose>)• Hiérarchie de fenêtresHiérarchie de fenêtres• ModalitéModalité

Concepts fondamentaux de niveau Concepts fondamentaux de niveau ComposantComposant• Attribut (grisé,actif,accélérateur, etc...)Attribut (grisé,actif,accélérateur, etc...)• CallbackCallback• Distribution des événements (Dispatch)Distribution des événements (Dispatch)• Automate de prise en charge des Automate de prise en charge des

événementsévénements• AccélérateurAccélérateur• Hiérarchie d'objetsHiérarchie d'objets• Gadgets/WidgetsGadgets/Widgets• Menu / Pop up menuMenu / Pop up menu

Concepts Répandus de niveau Concepts Répandus de niveau DialogueDialogue• Ces éléments sont sujet à des progrès constants, et Ces éléments sont sujet à des progrès constants, et

à des modesà des modes

• Feuille à ongletsFeuille à onglets• Assistant (Wizard)Assistant (Wizard)• Menus dynamiquesMenus dynamiques• Boite de sélection de fichierBoite de sélection de fichier• Sélecteur d'arborescenceSélecteur d'arborescence• Menu contextuel bouton droitMenu contextuel bouton droit• Changement de "skin"Changement de "skin"• Bouton "advanced"/ ou "propriétés"Bouton "advanced"/ ou "propriétés"

Feuille à OngletsFeuille à Onglets

WizardWizard

Selection de fichiersSelection de fichiers

Explorateur d'arborescencesExplorateur d'arborescences

Communication Inter ApplicationsCommunication Inter Applications

• Copier CollerCopier Coller• Drag and dropDrag and drop• Ole DCOMOle DCOM• Concept de PluginConcept de Plugin• CorbaCorba

Cas particulier des interfaces pour Cas particulier des interfaces pour le graphisme 2Dle graphisme 2D• Différents modèles d'automates pour le graphismeDifférents modèles d'automates pour le graphisme

– PowerpointPowerpoint– XfigXfig

• Bounding BoxBounding Box

• Point de contrôlePoint de contrôle

• Quadtrees pour l'accès rapide aux élémentsQuadtrees pour l'accès rapide aux éléments– permet de cliquer sur un parmi plusieurs centaines de permet de cliquer sur un parmi plusieurs centaines de

milliers d'éléments affichésmilliers d'éléments affichés

Cas particulier de la 3DCas particulier de la 3D• Utilisation de la souris en 3DUtilisation de la souris en 3D• Logique de l'envoi d'événements (click)Logique de l'envoi d'événements (click)• Problème de l'identification de l'objet Problème de l'identification de l'objet

pointépointé• Point de contrôlePoint de contrôle• Navigation 3DNavigation 3D

Cas particulier : la simulation Cas particulier : la simulation d'appareild'appareil

• L'ordinateur remplace de nombreux L'ordinateur remplace de nombreux appareils électroniques,appareils électroniques,

• Le bouton rotatif, l'interrupteur à bascule Le bouton rotatif, l'interrupteur à bascule (switch), l'afficheur graphique, etc.. ont (switch), l'afficheur graphique, etc.. ont été incorporés comme des métaphores été incorporés comme des métaphores utilisablesutilisables

Réalisation d'une interface: cas Réalisation d'une interface: cas simplesimple• Application mono posteApplication mono poste

• Choix d'un environnement cible (Unix/Windows)Choix d'un environnement cible (Unix/Windows)• Choix d'un environnement de développementChoix d'un environnement de développement• Choix d'une bibliothèque de composants Choix d'une bibliothèque de composants

graphiquesgraphiques– portabilité, efficacité, adéquation au besoin ...portabilité, efficacité, adéquation au besoin ...– la bibliothèque apporte sa propre charte graphique, et la bibliothèque apporte sa propre charte graphique, et

des éléments relatifs au dialoguedes éléments relatifs au dialogue• Possibilité d'innover dans la présentation et les Possibilité d'innover dans la présentation et les

interacteurs selon le public visé et le goûtinteracteurs selon le public visé et le goût

Réalisation d'une interface en Réalisation d'une interface en environnement industrielenvironnement industriel• Application multi posteApplication multi poste• Développement en équipeDéveloppement en équipe• Choix techniques complexes (distribution, Choix techniques complexes (distribution,

bases de données etc...)bases de données etc...)• Définition/respect d'une charte graphiqueDéfinition/respect d'une charte graphique• Spécification/Conception de l'interface et du Spécification/Conception de l'interface et du

logiciellogiciel– lié au besoin de respecter des délais et de travailler lié au besoin de respecter des délais et de travailler

en équipeen équipe• Suivi d'un cycle de vie de type développement Suivi d'un cycle de vie de type développement

rapide d'applications (RAD)rapide d'applications (RAD)

L'analyse des besoins en matière L'analyse des besoins en matière d'IHOd'IHO• Analyse du travail pour informatisationAnalyse du travail pour informatisation

• Intégration du prototypage dans un processus Intégration du prototypage dans un processus répétitif de type RAD / spirale de Boehmrépétitif de type RAD / spirale de Boehm– 1 analyse du besoin1 analyse du besoin– 2 réalisation d'un prototype2 réalisation d'un prototype– 3 évaluation avec le client3 évaluation avec le client– 4 évaluation des risques; retour en 14 évaluation des risques; retour en 1

• Le RAD prévoit des échéances fixes, et Le RAD prévoit des échéances fixes, et strictes pour chaque cyclestrictes pour chaque cycle


Les grands paradigmes techniquesLes grands paradigmes techniques

Principe FondamentalPrincipe Fondamental• Assurer la séparation des interfaces et des Assurer la séparation des interfaces et des

applications:applications:

• au niveau du code sourceau niveau du code source

• au niveau des exécutablesau niveau des exécutables

Séparation IHO/ApplicationSéparation IHO/Application• Modèle client/serveurModèle client/serveur

– disparudisparu

• Modèle serveur/serveurModèle serveur/serveur– xwindowsxwindows

• Modèle associatifModèle associatif– windowswindows

Prise en charge de l'utilisateurPrise en charge de l'utilisateur• Utilisateur maîtreUtilisateur maître

– threadsthreads– possibilité d'interruption de tâchepossibilité d'interruption de tâche

• Utilisateur guidé plus ou moins contraintUtilisateur guidé plus ou moins contraint– remplissage de formulairesremplissage de formulaires– fenêtres modales fenêtres modales

Couches Réseau UtiliséesCouches Réseau Utilisées• pipes, sockets tcpippipes, sockets tcpip• rmirmi• oleole• httphttp• corbacorba

Avancées techniques Avancées techniques fondamentalesfondamentales• connexion réseau sécurisée (tcp/ip)connexion réseau sécurisée (tcp/ip)• concept de struct -> object graphiqueconcept de struct -> object graphique• pointeur de fonctions -> callbackpointeur de fonctions -> callback• chargement dynamique de bibliothèquechargement dynamique de bibliothèque• interprétation des symboles d'une dllinterprétation des symboles d'une dll• concept d'objetconcept d'objet• chargement dynamique de classechargement dynamique de classe

X WindowsX Windows

Client 1

Client 2

Client 3

Serveur X

Client 4

Client 5

Serveur X

Protocole X

WindowsWindows

Ole Server

Windows Windows

Ole Server

Client 1 Client 2 Client 3 Client 4 Client 5

Jsp/Php/AspJsp/Php/Asp

Web Server:80

Prg 2

Prg 1

Web Server:80Prg 4

Prg 3

Navigateur

Navigateur

Limitations de XWindowLimitations de XWindow• La communication repose sur un protocole La communication repose sur un protocole

d'assez bas niveau (X) non construit sur la d'assez bas niveau (X) non construit sur la base de RMI, corba, etcbase de RMI, corba, etc

• La communication entre applications se La communication entre applications se fait donc soit via le serveur X par des fait donc soit via le serveur X par des échanges de propriétés, soit directement, échanges de propriétés, soit directement, via tcp/ip ou toute couche supérieure via tcp/ip ou toute couche supérieure (Corba)(Corba)

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

Window Id

Machine 2Machine 1

Machine 3

Avantages de XWindowAvantages de XWindow• Tout est fait pour permettre l'affichage d'informations Tout est fait pour permettre l'affichage d'informations

provenant de différentes machines simultanémentprovenant de différentes machines simultanément

• Totale interopérabilité, tout programme client Totale interopérabilité, tout programme client s'exprimant selon le protocole X peut se connecter à s'exprimant selon le protocole X peut se connecter à tout serveur, même au bout du monde et d'une autre tout serveur, même au bout du monde et d'une autre architecture matériellearchitecture matérielle

• Le protocole X est très léger (pas de codage Xdr)Le protocole X est très léger (pas de codage Xdr)

• La boucle d'événements est sophistiquéeLa boucle d'événements est sophistiquée

Interopérabilité selon XwindowInteropérabilité selon XwindowProblème du ByteSexProblè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 La machine qui établit la connexion envoie un entier particulier, qui permet au destinataire de connaître particulier, qui permet au destinataire de connaître le codage des entiers chez son partenairele codage des entiers chez son partenaire

• Ensuite, si nécessaire, celui qui "subit" la connexion Ensuite, si nécessaire, celui qui "subit" la connexion traduit systématiquement ses entrées pour les traduit systématiquement ses entrées pour les convertir convertir

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

char buffer

struct

...

Copie d'une struct pour XdrCopie d'une struct pour Xdr

struct• Définition récursive:Définition récursive:char* Xdr (struct,buf){char* Xdr (struct,buf){ buf=Xdr(a ,buf);buf=Xdr(a ,buf); buf=Xdr(b ,buf);buf=Xdr(b ,buf); buf=Xdr(c ,buf);buf=Xdr(c ,buf); buf=Xdr(d ,buf);buf=Xdr(d ,buf); buf=Xdr(e ,buf);buf=Xdr(e ,buf); return buf;return buf;}}• A partir des fonctions de base A partir des fonctions de base char* Xdr (int,char*); char* Xdr (int,char*); ......

abc

de

Avantages de WindowsAvantages de Windows• Intégration dans l'environnement Windows Intégration dans l'environnement Windows

où les dll sont totalement interprétées (on où les dll sont totalement interprétées (on peut interroger dynamiquement une dll pour peut interroger dynamiquement une dll pour savoir ce qu'elle offre comme services)savoir ce qu'elle offre comme services)

• Disponibilité de OLE pour les Disponibilité de OLE pour les communications inter applications, possibilité communications inter applications, possibilité de rmi (remote method invocation)de rmi (remote method invocation)

• La fluidité est garantie par une intégration La fluidité est garantie par une intégration totale au systèmetotale au système

• L'accès aux ressources graphiques est directL'accès aux ressources graphiques est direct

Limitations de WindowsLimitations de Windows• Le graphisme et l'interaction sont gérés Le graphisme et l'interaction sont gérés

par l'OS. On ne peut donc pas changer de par l'OS. On ne peut donc pas changer de serveur graphique, ou de window serveur graphique, ou de window manager. On ne peut que changer de manager. On ne peut que changer de "skin"."skin".

• Les couches logicielles traversées sont Les couches logicielles traversées sont nombreuses, et consomment plus de nombreuses, et consomment plus de ressources pour la communication inter ressources pour la communication inter processusprocessus

Avantages du modèle HtmlAvantages du modèle Html• Le client peut choisir son style d'affichage, Le client peut choisir son style d'affichage,

ainsi que le contenu (avec un fichier de ainsi que le contenu (avec un fichier de style css, ou un programme de style css, ou un programme de transformation xslt)transformation xslt)

• Le client choisit son navigateurLe client choisit son navigateur

Limitations du modèle HtmlLimitations du modèle Html• Un programme ne décide pas d'afficher quelque Un programme ne décide pas d'afficher quelque

part, c'est l'utilisateur présent devant son écran part, c'est l'utilisateur présent devant son écran qui choisit d'afficher une adresse (mode ‘pull’)qui choisit d'afficher une adresse (mode ‘pull’)

• L'affichage est en mode "page" et non en mode L'affichage est en mode "page" et non en mode "fenêtre" : cela change grace aux bibliothèques "fenêtre" : cela change grace aux bibliothèques javascript et flash action script : ext-JS, tinyMCE…javascript et flash action script : ext-JS, tinyMCE…

• Toute intervention sur l'écran mobilise beaucoup Toute intervention sur l'écran mobilise beaucoup de ressources:de ressources:– réseauréseau– ré-affichage complet de la page (sauf ajax)ré-affichage complet de la page (sauf ajax)– transfert complet de contexte lors de la requête (cookies transfert complet de contexte lors de la requête (cookies

- m- même en ajax…ême en ajax…))

Gestion du ContexteGestion du Contexte• Dans le cas Html, le protocole permet l'interruption Dans le cas Html, le protocole permet l'interruption

de connexion en gardant la session ouvertede connexion en gardant la session ouverte

Le contexte peut être :Le contexte peut être :

• conservé par le serveurconservé par le serveur• conservé par le clientconservé par le client• non conservénon conservé

soit en mode session, soit de façon rémanentesoit en mode session, soit de façon rémanente

Le Modèle Thin ClientLe Modèle Thin Client• Plutôt que d'exécuter des algorithmes Plutôt que d'exécuter des algorithmes

d'interface complexes au niveau du client,d'interface complexes au niveau du client,

• on crée une "photo" d'écran sur un on crée une "photo" d'écran sur un serveur, que l'on envoie à destination, serveur, que l'on envoie à destination, avec simplement des zones de capture avec simplement des zones de capture d'événements et leurs adresses associéesd'événements et leurs adresses associées

ok

ici :

ou bienla :


BibliothèquesBibliothèques

Couche graphiqueCouche graphique• Sous X Window : supportée par le Sous X Window : supportée par le

protocole Xprotocole X• Dessin de formes de baseDessin de formes de base

– rectanglerectangle– trait, courbetrait, courbe

• Gestion des fenêtresGestion des fenêtres– plansplans– événementsévénements– propriétés associéespropriétés associées

• Gestion du contexte graphiqueGestion du contexte graphique

Couche ObjetCouche Objet• Sous X Window, supportée par la couche Xt Sous X Window, supportée par la couche Xt

(librairie)(librairie)• Sous Windows, supportée par les MFCSous Windows, supportée par les MFC

• Gestion des objets graphiques:Gestion des objets graphiques:

• fenêtres associéesfenêtres associées• propriétés et attributs graphiquespropriétés et attributs graphiques• gestion de la structuregestion de la structure• gestion des automates de prise en charge des gestion des automates de prise en charge des

événementsévénements

Evénements de baseEvénements de base• <enter><enter>• <leave><leave>• <focus><focus>• (<left-ctrl><right-alt><left-(<left-ctrl><right-alt><left-

shift>)<ButtonDown>shift>)<ButtonDown>• <buttownUp><buttownUp>• <pointerMotion><pointerMotion>• etc...etc...

Tables de Translations XWindowTables de Translations XWindow• Langage de désignation interprété, avec Langage de désignation interprété, avec

préférencespréférences• Détaché des objets : affectation externe des Détaché des objets : affectation externe des

callbacks, permettant le paramétrage par callbacks, permettant le paramétrage par l'utilisateurl'utilisateur

• Implanté dans les fichiers de défauts présents Implanté dans les fichiers de défauts présents dans le dossier app-defaultsdans le dossier app-defaults

*.XmPushButton:color=blue*.XmPushButton:color=blueMainWin*CancelButton:color=redMainWin*CancelButton:color=redMainWin.MenuBar.File.Quit:callback=leave()MainWin.MenuBar.File.Quit:callback=leave()

Couche DialogueCouche Dialogue• Non implantée en XwindowNon implantée en Xwindow• Disponibilité de bibliothèques de styles Disponibilité de bibliothèques de styles

graphiques comme Motif, bâties sur Xtgraphiques comme Motif, bâties sur Xt• Implantée par des objets de haut niveau Implantée par des objets de haut niveau

sous windows (assistants)sous windows (assistants)


Modèles pour la portabilitéModèles pour la portabilité

Niveaux de portabilitéNiveaux de portabilité• Interfaces non portables: nécessitent la modification Interfaces non portables: nécessitent la modification

des sourcesdes sources

• Interfaces portables par re compilation/édition de Interfaces portables par re compilation/édition de liens sans modification de sourceliens sans modification de source– Ilog ViewsIlog Views– Haxe pour le web http://haxe.org/Haxe pour le web http://haxe.org/– GWT http://code.google.com/webtoolkit/GWT http://code.google.com/webtoolkit/– permet de développer sur une machine, et de diffuser sur permet de développer sur une machine, et de diffuser sur

un grand nombre de plate formes différentesun grand nombre de plate formes différentes

• Interfaces portables par le recours à une machine Interfaces portables par le recours à une machine virtuellevirtuelle– JavaJava

Portabilité par machine virtuellePortabilité par machine virtuelle• Une seule version de la bibliothèque graphique doit Une seule version de la bibliothèque graphique doit

être conçueêtre conçue

• Les fonctionnalités de cette bibliothèque sont donc Les fonctionnalités de cette bibliothèque sont donc offertes sur toutes les plate formesoffertes sur toutes les plate formes

• Seule la machine virtuelle doit être portéeSeule la machine virtuelle doit être portée

• Dans le cas de Java, cette machine virtuelle est Dans le cas de Java, cette machine virtuelle est généralement portée directement par le couple généralement portée directement par le couple constructeur/OSconstructeur/OS

Portabilité par Compilation Portabilité par Compilation • Pour permettre la portabilité sans édition de Pour permettre la portabilité sans édition de

source, chaque version de la bibliothèque source, chaque version de la bibliothèque définit exactement les mêmes symbolesdéfinit exactement les mêmes symboles

• Chaque implantation de la bibliothèque pour Chaque implantation de la bibliothèque pour une plate forme donnée:une plate forme donnée:– fournit une passerelle vers la plate forme cible par fournit une passerelle vers la plate forme cible par

des appels de fonctions graphiques existantesdes appels de fonctions graphiques existantes– comble éventuellement certains manques si des comble éventuellement certains manques si des

fonctions présentes sur une autre plate forme fonctions présentes sur une autre plate forme doivent être disponibles partoutdoivent être disponibles partout

Taux de Portabilité par Taux de Portabilité par CompilationCompilation

Windows

Linux

Atari Os

Difficultés de la Portabilité par les Difficultés de la Portabilité par les bibliothèquesbibliothèques

• Chaque OS requiert un portage de la Chaque OS requiert un portage de la bibliothèque, même pour la même machinebibliothèque, même pour la même machine

• Plus la bibliothèque utilise des fonctions de Plus la bibliothèque utilise des fonctions de haut niveau, plus elle dépend de leurs haut niveau, plus elle dépend de leurs évolutions : coût de maintenanceévolutions : coût de maintenance

• Chaque fonction spécifique d'une plate forme Chaque fonction spécifique d'une plate forme dont on veut la portabilité doit être implantée dont on veut la portabilité doit être implantée ou simulée sur les autres plate formesou simulée sur les autres plate formes

Look and Feel et simulationLook and Feel et simulation• Chaque plate forme possède un certain style, Chaque plate forme possède un certain style,

aussi appelé "look and feel".aussi appelé "look and feel".– style Windowsstyle Windows– style X11/Motifstyle X11/Motif– style Macstyle Mac

• Une bibliothèque de portabilité peut simuler les Une bibliothèque de portabilité peut simuler les styles (ne pas utiliser les bibliothèques natives styles (ne pas utiliser les bibliothèques natives mais en simuler l'aspect et le comportement)mais en simuler l'aspect et le comportement)

• Une des raisons peut être de rester Une des raisons peut être de rester indépendant des couches objet trop variables, indépendant des couches objet trop variables, comme indiqué précédemmentcomme indiqué précédemment

Émulation de Style graphiqueÉmulation de Style graphique• Cela permet d'émuler X11 sous Windows ou Cela permet d'émuler X11 sous Windows ou

Mac, et réciproquement.Mac, et réciproquement.

• Le changement de style se fait Le changement de style se fait dynamiquement comme un changement de dynamiquement comme un changement de skinskin

• Avantages: on peut développer sur un plate-Avantages: on peut développer sur un plate-forme avec le style de la future plate-forme forme avec le style de la future plate-forme de déploiementde déploiement

Interfaces Homme OrdinateurInterfaces Homme Ordinateur

DialogueDialogue

Interfaces et ProtocolesInterfaces et Protocoles• Une interface donne accès à des ensembles Une interface donne accès à des ensembles

logiciels respectant des protocoleslogiciels respectant des protocoles

• Un protocole est une interface de programmation Un protocole est une interface de programmation dont les fonctions ne peuvent pas être appelées dont les fonctions ne peuvent pas être appelées indifféremmentindifféremment

• Exemple : la pileExemple : la pile

• Le modèle de ces restrictions peut être décrit à Le modèle de ces restrictions peut être décrit à l'aide d'automatesl'aide d'automates

Interfaces et Modalité Interfaces et Modalité • Une interface donne ajoute et supprime Une interface donne ajoute et supprime

des fonctionnalités de façon dynamiquedes fonctionnalités de façon dynamique

• Ces variations forment ce que l'on appelle Ces variations forment ce que l'on appelle la modalitéla modalité

• Les modalités sont constructives ou Les modalités sont constructives ou destructivesdestructives

Fenêtres ModalesFenêtres Modales• Une fenêtre est modale quand elle désactive Une fenêtre est modale quand elle désactive

totalement ou partiellement l'accès au systèmetotalement ou partiellement l'accès au système

• Elle est application modale quand l'OS Elle est application modale quand l'OS multitâche n'est pas verrouillé sur l'application multitâche n'est pas verrouillé sur l'application courantecourante

• Elle est système modale quand l'utilisateur doit Elle est système modale quand l'utilisateur doit impérativement répondre à la question posée impérativement répondre à la question posée pour faire quoi que ce soit d'autrepour faire quoi que ce soit d'autre

Modalité ConstructiveModalité Constructive• La modalité est constructive quand elle La modalité est constructive quand elle

donne accès à des fonctions nouvellesdonne accès à des fonctions nouvelles

• Exemples:Exemples:• après avoir ouvert un fichier, dans un après avoir ouvert un fichier, dans un

éditeuréditeur

• après avoir appuyé sur le bouton "imprimer" après avoir appuyé sur le bouton "imprimer" ce qui donne accès aux paramètresce qui donne accès aux paramètres

Modalité DestructiveModalité Destructive• La modalité est destructive quand elle La modalité est destructive quand elle

supprime l'accès à certaines fonctionssupprime l'accès à certaines fonctions

• Exemples: pendant l'impressionExemples: pendant l'impression

• Le cas particulier des fenêtres modales est Le cas particulier des fenêtres modales est particulièrement saillant et anti-particulièrement saillant et anti-ergonomiqueergonomique

Modalité et SignalétiqueModalité et Signalétique• Le mode dans lequel se trouve une Le mode dans lequel se trouve une

interface doit être perceptible à l'utilisateurinterface doit être perceptible à l'utilisateur

• La signalétique de l'interface doit être La signalétique de l'interface doit être précise et non ambiguëprécise et non ambiguë

• Elle doit être homogèneElle doit être homogène

• Elle doit être dénuée de défauts d'aspectElle doit être dénuée de défauts d'aspect

Signalétique de bas niveauSignalétique de bas niveau• Items de menus grisés quand inactifsItems de menus grisés quand inactifs

• Boutons de mode enfoncés quand actifsBoutons de mode enfoncés quand actifs

• Icône de curseur, icône de pointeurIcône de curseur, icône de pointeur– exemple: paintexemple: paint

• Rémanences d'iconesRémanences d'icones– exemple: couleur de remplissage dans drawexemple: couleur de remplissage dans draw

ConclusionConclusion• Cet ensemble de transparents a servi de Cet ensemble de transparents a servi de

support à un exposé des concepts et état support à un exposé des concepts et état de l'art des différents grands paradigmes de l'art des différents grands paradigmes des interfaces homme ordinateurdes interfaces homme ordinateur

• Il est prolongé par un cours sur la Il est prolongé par un cours sur la spécification des interfacesspécification des interfaces

Les Interfaces Homme Ordinateur

Documents

Transcript of Les Interfaces Homme Ordinateur