Chapitre II
Interfaces Graphiques et Styles d’Interaction
Interfaces Graphiques et Styles d Interaction
Plan du cours
I. Définitions
II C t H bit l d IG II. Composants Habituels des IG III Multifenêtrage
III. Multifenêtrage
IV. Développement d’IG
IV. Développement d IG
V. Types d’interactions
VI. Conclusion
I. Types d'interfaces
Il existe deux types d'interface permettant à l'utilisateur d'exploiter les applications d'un logiciel :
applications d un logiciel :
1. Les interfaces textes (Interfaces en Lignes de Commandes):
nécessitent que l'utilisateur saisisse les commandes qu'il souhaite voir exécuter.
On retrouve ce mode d'exploitation principalement dans les
i t tè
environnements système.
Les interfaces textes sont principalement réservées aux informaticiens pour leur permettre d'installer ou de configurer
2 Les interfaces graphiques (mode fenêtré ou windows)
p p g
les environnements technologiques de travail.
2. Les interfaces graphiques (mode fenêtré ou windows).
Interface Graphique (1/3)
(en anglais GUI pour Graphical User Interface)
Interface: un dispositif destiné à permettre les p p interactions entre machine et utilisateur,
Graphique: l es objets à manipuler sont dessinés
sous forme de pictogrammes à l’écran que
sous forme de pictogrammes à l’écran, que
l'usager peut manipuler avec un dispositif de
pointage tel que la souris.
Interface Graphique (2/3)
Ce type d'interface a été créé par les ingénieurs du Xerox PARC (Palo Alto Research Center) à la fin des années 1970, pour remplacer les p p interfaces en ligne de commande, puis développé et popularisé par Apple avec l'ordinateur Macintosh, par Apple avec l ordinateur Macintosh, commercialisé en 1984.
Les IG sont les dispositifs courants des appareils informatiques notamment les ordinateurs les informatiques, notamment les ordinateurs, les guichets automatiques bancaires, les téléphones portables et les récepteurs GPS
téléphones portables et les récepteurs GPS.
Interface Graphique (3/3)
Les interfaces utilisateur qui intègrent des éléments graphiques sont souvent désignées par l’acronyme WIMP qui est l’abréviation de:
WIMP:
Windows Icons Menus Pointers Windows, Icons, Menus, Pointers
ou Rubans
II. Composants Habituels d’une IG
1. Les éléments d'affichage simple Étiquette (Label)
Icône (Icons)
2 Les boutons 2. Les boutons
Bouton poussoir (button)
Case à cocher (Check box)
Bouton radio (Radio button)
( )
3.Les menus
Menu de commande (Command menu)
Menu contextuel (Context menu)
Menu circulaire (Pie menu)
Onglets
2 onglets3 onglets 5 onglets
Rubans
Le ruban a été mis en œuvre pour la première fois dans Microsoft Office 2007.
Ongletsg Ruban Word avec 8 ongletsRuban Word avec 8 onglets
Le ruban remplacep les menus, les barres d'outils et de nombreuses autres barres, et volets.
Toutes les fonctionnalités sont placées en un seul endroit et, par conséquent améliorer la convivialité
améliorer la convivialité.
Le ruban est conçu pour rendre les fonctionnalités de l'application plus facilement repérables, et accessibles avec moins de clics de souris.
4.Les listes
Liste (fort encombrement)
Liste (fort encombrement)
Contenu ordonné affiché en permanence (3 à 8 éléments)
( )
Eventuellement items masqués + barre de défilement Sélection simple ou multiple (cases à cocher)
Liste déroulante (faible encombrement)
Contenu exhaustif visible après un clic sur la flèche Contenu exhaustif visible après un clic sur la flèche
Valeur choisie toujours visible (un seul élément)
Valeur éventuellement éditable (sélection ou saisie directe) Valeur éventuellement éditable (sélection ou saisie directe) choix facultatif : (aucun)
paramètres : (par défaut)
Liste arborescente
(encombrement modulable) (encombrement modulable)
Contenu hiérarchisé
Choix du contenu affiché 12
a Fenêtres Modales 5. Les fenêtres
a. Fenêtres Modales b
On doit fermer le dialogue pour retourner à la fenêtre principale
b.b.
retourner à la fenêtre principale
Obligatoire quand la commande en cours ne peut être suspendue
cours ne peut être suspendue
Déplaçable pour laisser l’utilisateur voir la tâche amont
c. Fenêtre (Boite ) de dialogue
d. Fenêtre flottante
Palette d’outils
Barres d’outils flottantes
e. Fenêtre jaillissante (pop‐up)
À l’initiative du système
Infobulle / Bulle d’aide
f Informations textuelles f. Informations textuelles
6. Zones de texte ou Champs de saisie
Zones de saisie mono-ligne
Texte sur une seule ligne
Texte sur une seule ligne
Correspondant à une unité d’information
Zones de saisie multi-lignes
Redimensionnable
Barre de défilement
Remarque: à adapter au besoin
Type (mono/multi-ligne)
Dimensions
Contraintes:
Format
Format
Nombre de caractères max.
7. Autres composants
III. Multifenêtrage
Avec superposition
(à éviter) i f i é
informations masquées
temps d’accès à la fenêtre masquée (via la barre de taches)
(via la barre de taches)
Sans superposition : Mosaïque
h é h
hiérarchique
fenêtre d’application avec fenêtres fillesFenêtres d’applications: exemple
MDI :Multiple Document Interface
fenêtre principale : Espace de travail
fenêtre principale : Espace de travail
fenêtres filles : Contiennent les documents
IV. Développement des IG
L’interface graphique peut être vue de trois façons : L interface graphique peut être vue de trois façons :
1. l’aspect utilisateur consistant à l’utiliser, tout simplement ; 2. l’aspect programmeur consistant à programmer cette
interface pour les utilisateurs, en utilisant une bibliothèque d f ti
de fonctions ;
3 l’aspect concepteur consistant à créer cette bibliothèque de 3. l aspect concepteur consistant à créer cette bibliothèque de
fonctions.
IV. Développement des IG (suite)
Pour quel système d’exploitation et sur quel matériel doit‐on développer cette application ?
‐ Est‐ce uniquement pour Linux ? Windows ? Peut‐être les deux ? Peut être d’autres etc
deux ? Peut‐être d autres etc.,
‐ pour la faire fonctionner sur un PC, un SUN ou un Mac etc.pour la faire fonctionner sur un PC, un SUN ou un Mac etc.
‐Si l’indépendance est un facteur clé, il est important de regarder s’il existe des bibliothèques indépendantes des plateformes permettant de réaliser ces interfaces graphiques.
‐ A noter, qu’il faut tenir compte des coûts associés pour effectuer le portage de l’application vers d’autres systèmes
effectuer le portage de l application vers d autres systèmes.
IV.1.Bibliothèques (Boîtes à outils)
Ces bibliothèques sont parfois désignées en anglais parq p g g p les termes de «widget toolkit» ou encore «GUI toolkit» , autrement dit des boîtes à outils.
La boite à outils fournit les composants graphiques nécessaires à l'élaboration de l'interface graphique
nécessaires à l'élaboration de l'interface graphique..
Les boites à outils sont programmées en utilisant un
Les boites à outils sont programmées en utilisant un langage de programmation donné (C, C++, Java, etc.).
Le choix du langage de programmation à utiliser pour coder l’IG peut être du même type que celui de la boite à outils.
Comme il peut être différent, si la boite à outils le permet.
IV.2. Exemples de boites à outils p
Qt multiplateforme et interfaçable dans de nombreux
Qt, multiplateforme et interfaçable dans de nombreux langages
GTK l i l f i f bl d d b
GTK+, multiplateforme et interfaçable dans de nombreux langages
Tk, multiplateforme et interfaçable avec de nombreux langages
wxWidgets ou anciennement wxWindows, multiplateforme
L'interface de Windows, appelée API Windows ou Win32
L interface de Windows, appelée API Windows ou Win32
Swing et SWT pour Java
V. Styles d’Interactions
Les interactions homme-machines définissent les moyens et outils mis en œuvre afin qu'un humain puisse moyens et outils mis en œuvre afin qu un humain puisse contrôler et communiquer avec une machine.
Différents styles d'interaction sont envisageables pour la communication entre l'homme et la machine Ils font communication entre l homme et la machine. Ils font appel aux différents canaux d'entrée-sortie dont nous disposons:
disposons:
En entrée : nos cinq sens q (vue, ouïe, toucher, ( , , , odorat, goût)
En sortie : nos actuateurs (membres doigts yeux
En sortie : nos actuateurs (membres, doigts, yeux,
tête, voix, ...)
26Il existe plusieurs types d’interaction :
1. Langage naturel
2. Langage de commandes 3. Menus
4. Formulaires & Requêtes 5. Manipulation directe p
6. Interaction gestuelle
7. Interaction multimodale, etc.
7. Interaction multimodale, etc.
1. Langage naturel
Le mode d’interaction en langage naturel désigne un dialogue homme‐
machine similaire à celui entre deux personnes.
Une interface vocale rend possible l'interaction humaine orale avec les ordinateurs, en utilisant la reconnaissance vocale pour comprendre les commandes et répondre aux questions
commandes et répondre aux questions.
Des interfaces utilisateur vocales sont ajoutées aux:
Des interfaces utilisateur vocales sont ajoutées aux:
automobiles,
systèmes d’exploitation des ordinateurs,
il é l hi à l
appareils ménagers comme les machines à laver,
télécommandes des télévisions, etc.
Google Home sont des enceintes connectées associées à un Assistant personnel intelligent qui permettent aux appareils de réagir aux pe ette t au appa e s de éag au commandes vocales des utilisateurs.
Siri (Apple) et Google Assistant, sont des interfaces en langage naturel qui vous permettent d’interagir
l è d’ l d l
avec les système d’exploitation de votre appareil en utilisant votre propre langue parlée.
G l A i t t SiriSiri
Alexa (Amazon) est un Assistant personnel intelligent Google Assistant
capable d'interaction vocale, de lire de la musique, faire des listes de tâches, régler des alarmes, lire des livres audio, et donner la météo, le trafic et d'autres informations
é l é l ôl l i il
Alexa
en temps réel et également contrôler plusieurs appareils intelligents.
A t d l’i t ti LN
Avantages de l’interaction en LN
Convient aux utilisateurs qui ne peuvent pas utiliser le clavier (handicapés)
Fournit une interface plus sûre/hors danger dans certains environnements ex: Conduite d'une voiture.
Inconvénients
2. Langage de commande
Principe
écrire une ligne de commandes (avec syntaxe et vocabulaire)
accès direct aux fonctionnalités du système pour les experts mais pas utilisable par des novices.
Exemples : Dos, Unix
delete *.*
copy A:* doc c:
copy A: .doc c:
Avantages g
concision (>langage naturel)
structuration
ibilité d’ t i (défi iti d i t )
possibilité d’extensions (définition de macros, scripts)
Inconvénients
Inconvénients
nécessite un apprentissage et une pratique régulière
3.Menus
Sélection d’un item dans un menu
liste de commandes déclenchées par un clic
mise en évidence de l’option choisie
Nombre d’arguments de la commande
aucun (ex : quitter) ( q )
un (ex : rechercher)
plusieurs (ex : remplacer)
Ordre des arguments
Ordre des arguments
Commande puis Arguments (ex : remplacer)
Arguments puis Commande (ex : copier)
4. Formulaires et Requêtes
1. Formulaires : Répondre à des questions
pour entrer des informations nombreuses p
mécanisme simple mais fonctionnalités limitées
questions fermées (oui/non, choix multiples, listes)
questions ouvertes: champs à remplir
4. Formulaires et Requêtes (suite)
2. Requêtes : In terrogation du système par l’utilisateur
langages de requêtes
langages de requêtes
plus complexe
tili é b d d é
utilisé en base de données
5. Manipulation directe (1/2)
Le terme manipulation directe a été introduit par Ben Schneiderman en 1982.
Représentation permanente à l’écran
Représentation permanente à l écran
des objets
des actions possibles
Principe objet/action
l'utilisateur désigne le ou les objets qu’il veut manipuler puis les actions les unes à la suite des autres
l exemple:
Sélection du texte, puis centrer italique, changer la police
5. Manipulation directe (suite 2/2)
Opérations
rapides et réversibles
Avantages
p
avec effet visible immédiatement
Avantages
plus fort engagement de l’utilisateur
impression d’agir sur l’environnementp g (≠ transme re une commande)
Inconvénients
Inconvénients
encombrement de l’écran
ambiguïté du sens des icônes
jugée moins rapide par les experts :
répétition de la même tâche (l’opération de copier tous les fichiers dont les noms commercent par c doit être faite à la main)
les noms commercent par c doit être faite à la main).
6. Interaction Gestuelle (
Tactile, Multi‐touch)
Appuyez pour sélectionner une image.
Balayez vers la gauche ou la droite pour avancer ou reculer dans l'album de photos par exemple.
Pincez ou étirez pour zoomer ou dézoomer.
C d d’ i l t d l i
Commander d’un simple geste de la main une quantité d’objets connectés tels que des lampes, des appareils électroménagers des stores ou du des appareils électroménagers, des stores ou du matériel informatique, etc.
Vidéo représentant la manipulation de cartes graphiques Par Interaction Gestuelle
7. Interaction Multimodale
L'interaction est dite multimodale si elle met en jeu plusieurs modalités sensorielles et motrices:
Mode parlé : commandes vocales, guides vocaux, ...
Mode écrit : entrées par le clavier et la tablette graphique affichage
Mode écrit : entrées par le clavier et la tablette graphique, affichage du texte sur l'écran, ...
Mode gestuel : désignation 2D ou 3D (souris gants de données
Mode gestuel : désignation 2D ou 3D (souris, gants de données, écran tactile), ...
Mode visuel graphiques images animations
Mode visuel : graphiques, images, animations, ...
Le paradigme fondateur de l’interaction multimodale est le fameux «put that there » de Richard Bolt (1963): paroles et gestes
Les téléphones portables: clavier et un système de reconnaissance vocale permettant par exemple de lancer directement un appel en
t i l t l d d t
prononçant simplement le nom du correspondant.
Les consoles de jeux: écran tactile et boutons classiques ou
Les consoles de jeux: écran tactile et boutons classiques ou proposent des manettes de jeux intégrant des capteurs de mouvements.
8. Interaction par la pensée: Interface Cerveau‐ordinateur
les interfaces cerveau‐machine (ICM) sont des dispositifs qui devraient permettre à des personnes souffrant de handicaps majeurs ou de paralysie totale de retrouver une certaine autonomie.
Par la pensée, des personnes
amputées pourraient contrôler les mouvements de leur prothèse,
ayant perdu la parole pourraient parler ou écrire via un ordinateur,
paralysées pourraient contrôler f
un fauteuil roulant, …
Vidéo représentant différentes IHM incluant des interactions par le Corps entier, la Capture de mouvements, la Reconnaissance faciale, et laReconnaissance vocale.
