Introduction

(1)

²

Cours IHM

Interaction Homme Machine

Akli ABBAS

abbasakli@gmail.com

Département Informatique

Université de Bouira

(2)

²

Objectifs



Produire des logiciels ergonomiques tenant

compte de l’aspect usager.



Étudier les différents formalismes de

spécification d’interfaces

(3)

²

I? H-M ?

 Interface Homme – Machine

 Interaction(s) Homme – Machine

Interface Homme-Machine: Ensemble des dispositifs

matériels et logiciels (clavier, souris, tactile, logiciels, sites web,

Ecran ….) permettent à un utilisateur de commander,

contrôler, superviser

un système interactif

Interaction Homme-Machine : Discipline consacrée à la

conception

, la

mise en œuvre

et à l'

évaluation

de

systèmes interactifs

destinés à des utilisateurs humains

ainsi qu'à

l'étude des principaux phénomènes

qui les

entourent

(4)

²

•_IHM: _{est l’étude de l’ensemble des aspects de} _{la conception}_{, de} l’implémentation et de l’évaluation des systèmes interactifs pour satisfaire aux mieux les besoins d’un utilisateur.

Þ_{Conception: Aspects créatifs (Design) ;}

Þ_{Implémentation: Aspects techniques de réalisation (Programmation);} Þ_{Evaluation: Aspects liés à la validation de l’ergonomie (tests) .}

07:45 Cours IHM par : A. ABBAS 4

(5)

²

 Interface Homme – Machine

 Interaction(s) Homme – Machine

Pourquoi Interaction et pas Interface?

Les boutons, les menus, les couleurs, les icônes, les

animations ne suffisent pas à rendre un système utilisable

(facile à apprendre, facile à utiliser, en adéquation avec les

besoins, limitant les erreurs…)

Ce qui compte aussi, c’est l’interaction :

– la séquence d’actions nécessaires pour accomplir une

tâche

– l’adéquation entre le système et le contexte dans lequel il

est utilisé

(6)

²

Il y a trois éléments à considérer : l’

utilisateur (H

omme), le

système

interactif (M

achine) et

la manière dont ils communiquent

(

I

nterface).

Interface utilisateur / Machine : est employé comme un langage (moyen) de communication entre eux. Elle est

constituée par les parties matérielles et logiciels dont l’utilisateur se sert pour voir, entendre, parler, … et dialoguer avec la machine (échange d’informations).

Homme Utilisateur Homme Utilisateur Machine Informatique : Ordinateur, Mobile (tablette, Smartphone, …), Robot, … Machine Informatique : Ordinateur, Mobile (tablette, Smartphone, …), Robot, … In te rf a c e

(7)

²

7

Système (informatique) interactif



_{Prend en compte les entrées de manière interactive}



_{Il fournit à l'utilisateur, lors de son exécution, une représentation}

perceptible d’une partie de son état interne, afin que ce dernier

puisse le modifier en fournissant des entrées.



_{Les entrées permettent de modifier l’état interne du système, et il}

y a ainsi interaction: les entrées fournies par l'utilisateur

dépendent des sorties produites par le système et inversement.



_{Le système est ouvert : les dépendances entre entrées et sorties}

sont inaccessibles au système.

(8)

²

 Préhistoire des ordinateurs (Avant 1945)

•Basile Bouchon, 1725 met au point le premier système de

programmation d’un métier à tisser grâce à un ruban perforé.

• En 1728, Jean-Baptiste Falcon, son assistant, remplace le

ruban par une série de cartes perforées reliées entre elles.

8

Cartes perforées

• Ces cartes de perforation ont été utilisées par

(Herman Hollerith, 1890), le 1

er

fondateur de la boite

IBM, dans le traitement des informations du

recensement des américains (Stockage des

informations de chaque individu : nom, âge, ….).

 Interaction Homme-Machine est limitée aux

traitements des cartes ainsi que leur contrôle.



Interaction Homme-Machine est limitée aux

traitements des cartes ainsi que leur contrôle.

(9)

²

Evolution IHM (Historique)

Ordinateurs de 1

ère

génération (1945 -1956)

Premiers ordinateurs:

9

 Interaction niveau matériel (langage dépendant de la

machine);

 Calculateurs simples avec un temps d’exécution très long;  Utilisation réservée aux experts ;

 Interaction Homme-Machine quasiment-inexistante.  Interaction niveau matériel (langage dépendant de la machine);

 Calculateurs simples avec un temps d’exécution très long;

 Utilisation réservée aux experts ;

 Interaction Homme-Machine quasiment-inexistante.

(10)

²

 Ordinateurs de 2

ème

et 3

ème

générations (1956 – 1971)

10

• Technologie : Séparation matériel/logiciel

-

Systèmes d’exploitation (ex: OS/360, IT, DOS/360, Unix, …);

- Langages de haut niveau (Fortran, Cobol, PL/1, Basic);

- Syntaxe des commandes hermétique et difficile à apprendre.

• Interaction :

-

Dispositifs d’entrée/sortie limités : Console de grande taille, Lecteurs/ Perforateur de cartes(pour écrire les programmes)

=> Rechercher de nouveaux dispositifs d’E/S;

=> Rechercher de nouvelles formes d’interaction.

07:45 Cours IHM par : A. ABBAS

(11)

²

11

• Recherche de nouveaux dispositifs d’interaction:

 Ordinateurs de 2

ème

et 3

ème

générations (1956 – 1971)

- La souris : inventée et présentée au public en

1968 par Douglas Engelbart, basée sur le

trackball.

- Les 1ers _{claviers informatiques (1960):}

• Un des systèmes commercialisé avec de nouveaux dispositifs E/S: -> IBM 370 (Année 1970):

-Clavier

-Ecran alphanumérique (Affichage de caractères ) -Interaction par langage de commandes.

 Interaction toujours réservée aux

experts.



Interaction toujours réservée aux

experts.

(12)

²

Ordinateurs modernes (1970, ….)

Vers de nouvelles techniques d’interactions:

Evolution des ordinateurs personnels :

Interfaces graphiques (GUI : Graphical User Interface, à la fin1970):

-_{Premier modèle de machine} de bureau(orienté

professionnel), commercialisé .

- _{Echec commercial à cause} de son prix élevé et sa

relative lenteur. ……

….

• L’utilisation des GUI ont permis d’obtenir des systèmes conviviaux faciles à utiliser : - Manipulation directe sur les objets représentés à l’écran;

- Traitements de textes et images via des objets sur l’interface; - Affichage conforme à l’impression.

(13)

²

13

->

Navigateurs web :

Surfer le web à la recherche et l’acquisition des

informations diffusées et partagées dans le monde des sites web.

-

Le web a été basiquement conçu pour partager automatiquement des

informations entre les scientifiques, universités et instituts du monde

entier.

-

Le

World Wide Web (WWW)

fut le premier site web créé et mis en ligne

par Berners-Lee en 1990 (

info.cern.ch

).

 Interaction conviviale à toute

personne novice.



Interaction conviviale à toute

personne novice.

(14)

²

14

 IHM Aujourd'hui :

dépasse une interaction avec une simple interface graphique

=> nouveaux besoins et nouvelles technologies pour l’IHM !!

- De nouveaux dispositifs d’E/S pour interagir :

TouchPad: Pointage sur

PC-Portable (Pavé Tactile)

Manette de jeux pour les

commander TrackBall

(nouvelle forme

pour la souris) Gant numérique _{(portant des}

capteurs de positions et de directions pour interagir avec le monde virtuelle en temps réel) Kinect destinée à la Xbox (Basée

sur la détection des mouvements des objets face à une Caméra)

Casque 3D : s’immerger dans un

monde virtuel 3D

(15)

²

15

 IHM Aujourd'hui :

- De nouveaux dispositifs d’E/S pour interagir :

Tablette graphique (reconnaissance de : pointage, tracé graphique,

écriture manuscrite)

Système GPS : Géo-positionnement par satellite

Dispositifs Mobiles : petits, puissants , offrent des services de connexion

Synthétiseurs vocaux : créer de la parole artificielle à partir d’un

texte saisi

(16)

²

16

 IHM Aujourd'hui :

-

Exemples d’E/S :

1) Ecran Tactile: est un périphérique le plus utilisé aujourd’hui, permettant d’interagir avec l’interface graphique de nos téléphones, tablettes, Smartphones.

2) Leap Motion: est un dispositif de reconnaissance gestuelle de mouvements des mains. Son objectif est de contrôler et de déplacer des objets de l’interface avec une réalité virtuelle.

3) Casque Epoc: permet de détecter le conscient humain pour le reproduire dans un jeu vidéo.

- Interfaces de la réalité virtuelle: (Reality-Based Interfaces ) Simulation des aspects du monde réel sur des interfaces à 3D tout en permettant à des activités sensori-motrices et cognitifs d’une personne d’interagir dans ce monde virtuelle.

(17)

²

17

 Dans l'étude des interactions homme-machine il y a donc trois

éléments à considérer : l'utilisateur(l'Homme), le système interactif (la

Machine) et leur manière de communiquer (l'Interface).

 Une bonne connaissance de ces trois éléments est donc nécessaire à la réalisation d'une interface homme-machine réussie.

 En plus de ces trois éléments, il faut naturellement avoir une très

bonne connaissance du domaine qu'est censé couvrir le logiciel, le site web, etc. (que l'on nomme parfois l'espace du problème).

 Le développement des interfaces utilisateurs nécessite de la part de l'informaticien de vastes compétences pluridisciplinaires.

 En plus de compétences informatiques, il doit posséder un certain

nombre de soft-skills, des qualités humaines et relationnelles telles que qualité d'écoute, communication, créativité, sens de l'initiative, empathie, collaboration, etc.

(18)

²

Les éléments de l’IHM : l’Homme

18

 C'est l'élément essentiel (prioritaire) du trio interface homme-machine (la machine est au service de l'homme et non le contraire).

• Quels sont ses besoins et ses attentes (phase d'analyse) ?

• Quelles sont ses capacités physiques, ses limitations (handicaps) ?

• Quelles sont ses capacités cognitives, ses connaissances du domaine traité, le contexte dans lequel il évolue ?

 Connaître certains éléments du système sensoriel et du comportement humain est important pour concevoir une bonne interface. Par exemple :

- Qu'il s'attend à avoir une rétroaction (feedback) pour chacune de ses actions (comme lorsqu'il manipule des objets du monde réel).

(19)

²

Les éléments de l’IHM : l’Homme

19

 Modéliser un humain est le sujet de nombreuses recherches:

• Le modèle du processeur humain proposé par (Card et al., 1983) est vu comme un système de traitement de l’information qui comporte 3 sous-systèmes interdépendants :

– système sensoriel (auditif/visuel), – le système moteur,

– le système cognitif.

• Chaque sous-système dispose – d’un processeur

(20)

²

Les éléments de l’IHM : l’Homme

20

1- L’information est stimulée puis détectée et interceptée par l’ensemble sensoriel (les sens) de l’humain(exp: vue, ouïe, …).

• Pour la vue : - champ visuel 180° ; - Acuité visuelle : 0.04mm-50cm; - perception de la couleur, du mouvement, de la profondeur; - plus sensible aux mouvements qu’aux couleurs.

2- L’information est par la suite envoyée, par le processus sensoriel, à la mémoire de travail (mémoire à court terme) pour être stockées.

4- Le système moteur est responsable de gérer les mouvements motrices d’une personne suivant le raisonnement du système cognitif en réponse à l’information (ou stimulus) détectée. Par exemple: saisie sur un champs texte, pointé la souris sur un objet graphiques, ….

3- La compréhension et l’interprétation de l’information est réalisée par le système cognitif. Ce dernier permet de contrôler le comportement d’un individu (l’homme) en fonction du contenu porté par l’information.

(21)

²

Les éléments de l’IHM : l’Homme

21

 Le stockage de l’information chez l’hommes est suivant :

• Mémoire à long terme: capacité infinie avec une durée de stockage illimitée.

 Conséquence : utilisation fréquente d’un logiciel (application) favorise l’apprentissage de ses fonctionnalités par répétition.

• Mémoire à court terme:

- Mémorisation de 7 items ± 2 (de 5 à 9 items selon leur état de fatigue ou stresse ou suivant la difficulté de compréhension du problème);

- Favoriser un meilleur stockage en représentant les unités d’informations par des motifs visuels et acoustiques groupés : objets avec des formes, couleurs, localisation, … en établissant des liens entres-eux.

- Oubli : 15 à 30 secondes.

 Conséquence : utilisation des messages brefs (avec de mots simples mais exprimant bien l’intérêt), et à se limiter à la représentation des informations utiles à l’utilisateur afin d’éviter à la mémoire à court terme (visuelle et auditive) d’atteindre sa limite de saturation ce qui dégradent le stockage et la gestion des informations stimulées.

(22)

²

Les éléments de l’IHM : l’Homme

22

 Quelques principes de base à satisfaire l’homme dans une IHM sont : • Le temps de réponse d’un système ne dépasse pas 2 secondes ;

• Accéder à l’information souhaitée pas plus de 3 clics;

• Le temps de pointage pour atteindre une cible dépend de la distance et de sa taille (suivant la loi de Fitts) :

- Plus l’objet cible est proche du pointeur de la souris, plus il est facile à l’atteindre et vice-versa ;

(23)

²

Les éléments de l’IHM : l’Homme

23

 Quelques principes de base à satisfaire l’homme dans une IHM sont : • Utilisation des interfaces intuitives qui seront utilisables sans formation; • La lisibilité et signification des couleurs:

- Privilégier un bon contraste caractères/fond (sombre sur fond claire : noir sur blanc) , et éviter certaines combinaisons de couleurs (fatigue et stresse visuelle) :

(24)

²

Les éléments de l’IHM : l’Homme

24

 Quelques principes de base à satisfaire l’homme dans une IHM sont : • Limiter le nombre de couleurs (7 maximum), et faire

attention à la portabilité des couleurs selon : les écrans (résolution), et les personnes (faciles à distinguer);

• Utiliser des couleurs suivant leur signification (rouge: stop/vert: exécuter) ou même en respectant les habitudes socio-culturelles de l’homme (rouge=joie en chine);

• La lecture de l’écran :

- 1ère visualisation : parcours en Z; ensuite parcours

sélectif; puis recherche;

(25)

²

Les éléments de l’IHM : l’Homme

25

 Quelques principes de base à satisfaire l’homme dans une IHM sont : • Affichage du texte sur écran suivant la typographie suivante :

- polices sans sérif (sans empattement) : Arial, Calibri, Geneva, …; - gras, italique, souligné, ralentissent la lecture;

- MAJUSCULES moins lisibles que les minuscules. • Langage employé :

- Utiliser le langage de l’utilisateur ; - Eviter les abréviations et les impasses;

- Respecter l’ordre des actions pour une meilleure compréhension;

- Produire des messages : concis; homogènes; à la voix active, à la forme affirmative; explicites; polis, ….

(26)

²

Les éléments de l’IHM : l’Homme

26

 Quelques principes de base à satisfaire l’homme dans une IHM sont : • Mettre en évidence les éléments importants pour mieux les détecter (1); • Regrouper les commandes en fonction :

- de leur signification (2);

- de l’objet auquel elles se rapportent (3).

(27)

²

Les éléments de l’IHM : Machine

27

 Pour un humain c’est une boite noir :

• Où il faut programmer explicitement les feedback (événements pour répondre aux besoins);

• Les informations stockées et les opérations effectuées ne sont pas directement visibles.

 Son mode de fonctionnement est assez différents de l’homme:

• [+] peut mémoriser un grand nombre d’informations et les retrouver rapidement sans pertes;

• [+] peut exécuter des instructions autant de fois nécessaires sans erreurs (pas de notions de fatigue);

• [-] incapables de faire certaines choses qui apparaissent triviales (tirer des conclusions, ne pas répéter les mêmes erreurs, ….).

 Tout doit être programmé, même les actions élémentaires :

• Naturellement, avec un considérable effort, on peut améliorer la situation et tendre vers une certaine intelligence artificielle dont les objectifs visent à rapprocher la machine à l’homme.

(28)

²

Les éléments de l’IHM : Machine

28

 La machine est vu comme un système interactif, dont on peut considérer deux parties: • l’interface utilisateur : englobe tous les éléments matériels et logiciels dédiés à la

capture des entrées de l’utilisateurs (clics sur souris, geste, voie, …) et à la restitution des sorties du systèmes (affichage, mouvements….);

• le noyau fonctionnel : contient les composants permettant d’effectuer les différents opérations de traitements ainsi que la gestion des informations, leur stockage et leur communication avec d’autres systèmes.

 les systèmes interactifs englobent des : • Applications n-tiers (client-serveur); • Applications mobiles;

• Sites web;

• Robotique et machines Learning;

(29)

²

Les éléments de l’IHM : Interaction

29

 Les types d’interaction (styles d’interaction) :

caractérisent les

différentes manières de dialoguer/communiquer entre l’homme et la

machine.

 Les styles d’interaction classiques :

• Conversationnel (langage de commandes/Shell-Scripts);

• Interaction par formulaires (formfill-in) ou tableurs;

• Navigation hypertextuelle (point-and-click);

• WIMP (ensemble de styles d'interaction: Windows, icônes, menus et

pointer);

• Manipulation directe (édition WYSIWYG, interaction iconique);

• Langage naturel écrit ou parlé (query language, commande vocale);

• Interaction gestuelle (Kinect, Leap-Motion, …);

• Interaction de la réalité virtuelle ou augmentée;

(30)

²

Les éléments de l’IHM : Interaction

30

 Exemples de styles d’interaction : Formulaires et requêtes • Formulaires : répondre à des questions

- Pour saisir de nombreuse informations; - mécanisme simple mais fonctionnalités

limitées: questions fermées (oui/non, choix multiples, listes) ou questions ouvertes (champs à remplir).

 Requêtes : poser des questions par des requêtes

- plus complexe;

(31)

²

Les éléments de l’IHM : Interaction

31

 Exemples de styles d’interaction : Manipulation directe

• Représentation permanente à l’écran des objets par des métaphores. • Actions physiques sur les objets :

- pointer et cliquer;

- illusion de travailler directement sur les objets (≠ transmettre une commande); • Opérations : rapides et réversibles, avec effet visible immédiatement;

• Principe objet/action: l'utilisateur désigne le ou les objets qu’il veut manipuler,

puis leurs actions les unes à la suite des autres

- exemple : sélection de texte, puis centrer italique.

Métaphores du bureau

[+] impression d’agir sur l’environnement [-] Encombrement de l’écran ;

[-] Ambiguïté du sens des icônes

(32)

²

Les éléments de l’IHM : Interaction

32

 Exemples de styles d’interaction : WIMP : Window-Icon-Menu-Pointer

• W : Window => Systèmes de fenêtrage.

• Multifenêtrage :

- sans superposition : mosaïque;

-avec superposition => Problèmes : informations masquées + Perte de temps d’accès à la fenêtre masquée.

• Hiérarchique :

(33)

²

Les éléments de l’IHM : Interaction

33

• Fenêtre d’application :

- Fenêtre principale : espace principale de travail;

-Fenêtre filles : pour contenir les différentes opérations abstraites de l’application (exple: contenir un document dans Microsoft).

• Fenêtres utilitaires: -Palette d’option;

(34)

²

Les éléments de l’IHM : Interaction

34

• Fenêtres de dialogue:

- Fenêtre permettant l’interaction entre le système et l’utilisateur - Fenêtres modales :

 prend le contrôle total de l’écran et le clavier jusqu’à ce la question posée soit répondue par l’utilisateur;

 on doit fermer le dialogue pour retourner à la fenêtre principale;  fenêtre déplaçable pour laisser l’utilisateur voir la tâche amont. - Fenêtres non modales :

 on peut passer de la fenêtre de dialogue à la fenêtre principale;  l’utilisateur peut abandonner temporairement la tâche en cours

(35)

²

Les éléments de l’IHM : Interaction

35

 Exemples de styles d’interaction : WIMP : Window-Icon-Menu-Pointer • Fenêtres de dialogue:

- Règles :

 Regroupements -> succession de dialogues;

 Nommer les groupes;

 Fenêtres modales(sauf pour les dialogues de recherche);

 Pas plus de 5 boutons;

 Contient toujours au moins les boutons OK, Annuler (+ Aide);

 Boutons concernant l'ensemble des onglets : à l'extérieur des onglets

- Contrôles et erreurs:

 si une erreur est détectée : affichage d’un

message d'erreur et positionnement du curseur sur la saisie mise en cause;

 Annuler : aucune entrée faite sur le dialogue

(36)

²

Les éléments de l’IHM : Interaction

36

(37)

²

Les éléments de l’IHM : Interaction

37

(38)

²

Les éléments de l’IHM : Interaction

38

(39)

²

Les éléments de l’IHM : Interaction

39

(40)

²

Les éléments de l’IHM : Interaction

40

(41)

²

3. Domain de l’IHM

41

L'interaction homme-machine : un domaine fortement pluri-et interdisciplinaire.

(42)

²

Approches de l'IHM

42 07:45 Cours IHM par : A. ABBAS

Approche technocentrée:

•Développement centré sur la machine et ses possibilités techniques

•L'utilisateur doit s'adapter à la machine

•Une grande tentation pour les développeurs

Imposer des technologies qui leur plaisent

(43)

²

Approches de l'IHM

Approche anthropocentrée

:

Développement du logiciel centré sur l'utilisateur et ses besoins

La machine doit s'adapter à l'utilisateur

Nécessite que les développeurs

connaissent les besoins des utilisateurs, le

contexte d'utilisation, etc.

 Approche à privilégier, connue sous le

nom User Centered Design

(44)

²