Fiche de cours

La conception d'une IHM

Lycée   >   Seconde   >   SNT   >   La conception d'une IHM

  • Fiche de cours
  • Quiz et exercices
  • Vidéos et podcasts
Objectifs
  • Réaliser une IHM simple d'un objet connecté.
  • Identifier des algorithmes de contrôle à travers les données des capteurs, l’IHM et les actions des actionneurs.
Points clés
  • Une bonne interface homme-machine (IHM) doit être ergonomique, c’est-à-dire qu’elle doit permettre à l’utilisateur de réaliser ses tâches de façon efficace, en toute sécurité et tout en prenant plaisir à le faire.
  • Le processus de conception d’une IHM est un processus itératif (et souvent long) qui recommence après modifications et qui comprend :
    • une phase de spécification ;
    • une phase de réalisation ;
    • une phase de validation.
Pour bien comprendre

L’interface homme-machine est l’ensemble des dispositifs matériels et logiciels qui permettent à un utilisateur humain d’interagir avec une machine, notamment dans le cas des objets connectés.

1. Généralités

Une bonne interface homme-machine (IHM) doit permettre à l’utilisateur de réaliser ses tâches de façon efficace, en toute sécurité et en prenant plaisir à le faire.

Remarque
Le crash du mont Sainte-Odile en 1992 serait en partie dû à une mauvaise présentation de l’IHM dans le cockpit de l’airbus A320 (confusion entre la vitesse verticale et l’angle de descente sur le cadran partagé).

On peut résumer ces contraintes (efficacité, sécurité, simplicité d’utilisation) par le terme ergonomie, qui représente l’étude des conditions de travail et des relations entre l’être humain et la machine. L’ergonomie a pour but de faciliter la traduction entre ce que l’utilisateur veut obtenir et ce que la machine va exécuter.

Le processus de conception d’une IHM est un processus itératif (qui va être exécuté plusieurs fois), qui comprend trois phases.

  • Une phase de spécification, durant laquelle on définit les besoins de l’interface, on produit un scénario et on élabore le plan de test.
  • Une phase de réalisation, qui correspond au développement et à la programmation.
  • Une phase de validation, qui comprend les tests unitaires (sur des parties précises), les tests d’intégration (fonctionnement global), les tests fonctionnels (respect des spécifications). À l’issue de cette phase, on apporte les modifications nécessaires, on affine la conception et ainsi de suite.

On peut représenter la conception d’une IHM par le schéma suivant.


Processus de conception d’une IHM
2. Concevoir une IHM sous la forme d'une application pour smartphone
a. Que souhaite-t-on obtenir ?

Le but est ici de concevoir une IHM permettant de visualiser l’information de température et permettant de déclencher le clignotement d’une alerte visuelle par l’intermédiaire d’une application fonctionnant sur smartphone.

b. Comment obtenir cette IHM ?

On va modifier un système informatique embarqué (SIE) fonctionnel, à savoir un système qui émet une alarme visuelle (lumière) en fonction de la température.

  • Une lumière bleue pour une alerte au gel
    (en dessous de 3 °C).
  • Une lumière rouge pour une alerte canicule
    au-dessus de 30 °C).
  • Une lumière verte dans tous les autres cas.
Montage et programme de l’IHM à modifier

Le montage de départ est le suivant.


Montage de notre SIE à à partir d’une carte Arduino
Remarque
Notre système possède un microprocesseur, un capteur (de température) et un actionneur (LED RGB).
Le matériel et le programme Arduino qui sont nécessaires à la réalisation de ce montage sont consultables dans la partie « Aller plus loin », à la fin de cette fiche.
Questions à se poser

Pour obtenir l’IHM souhaitée, il faut se poser quelques questions, comme notamment :

  • que doit-on modifier ou ajouter à notre montage ?
  • quel design doit-on réaliser ?
  • comment programmer l’IHM ?

Il n’y a pas de réponse unique à ces questions. On va essayer de proposer des éléments simples.

Les modifications du montage existant

On a besoin d’un moyen de communication entre le smartphone et l’objet. On va prendre la technologie Bluetooth car elle est déjà prise en charge par le smartphone. Il faut donc ajouter au montage un module Bluetooth.


Montage avec gestion du Bluetooth
Remarque
Il faudra adapter le programme, notamment pour la gestion du Bluetooth. Il faudra réfléchir à cela lorsque le design sera décidé.
Le design proposé et la programmation de l’IHM

Voici ci-dessous une proposition d’interface découpée en 3 parties :

  • la connection/déconnection au Bluetooth (boutons) ;
  • l’affichage de la température (label) ;
  • la commande de clignotement ou non de la LED (boutons).

Interface de notre IHM
On peut pour cela utiliser le service AppInventor depuis l’adresse suivante : http://ai2.appinventor.mit.edu

Pour un projet donné, cet environnement se présente sous la forme de deux onglets.

  • « Designer » : il permet de réaliser l’aspect graphique.
  • « Blocs » : il permet la programmation de l’interface par blocs.

Environnement d’AppInventor onglet « designer »

Environnement d’AppInventor onglet « blocs »
L’adaptation du programme côté objet

Suite à l’ajout du module Bluetooth et de la fonctionnalité de clignotement de la LED RGB, il faut apporter des modifications au programme de l’objet.

Il faut notamment être vigilant sur les messages échangés de part et d’autre pour que l’interface comprenne les messages venus de l’objet et vice versa.

Le programme Arduino modifié est consultable dans la partie « Aller plus loin », à la fin de cette fiche.

Il reste maintenant à réaliser les tests et vérifier que tout fonctionne correctement.

3. Le futur des IHM

Les interfaces homme-machine sont le cœur de l’internet des objets. Avec la multiplication des objets connectés, il est en effet important pour les utilisateurs de disposer d’interfaces fiables et faciles à utiliser.

L’interface cerveau-machine, appelée également interface neuronale, désigne un système de liaison directe entre un cerveau et un ordinateur.

Le principe est le suivant.

  1. On enregistre les niveaux électriques du cerveau, soit par une implantation directe d'électrodes, soit par un casque équipé d'électrodes.
  2. Une fois captés, ces signaux sont interprétés par un logiciel et envoyés à l’ordinateur.

Des expérimentations sont notamment réalisées pour pallier aux handicaps caractérisés par une déficience des muscles, dans les cas de paraplégie ou de maladie de Charcot.

Pour aller plus loin - Réalisation
Le matériel nécessaire

Voici le matériel nécessaire pour la réalisation du projet complet :

  • une carte programmable arduino Uno ;
  • un capteur de température LM35 ;
  • une LED RGB ;
  • un module Bluetooth ;
  • une platine d’essai et des fils de connection.
Programmes Arduino

Les tableaux ci-dessous donnent le programme Arduino présent initialement dans le microprocesseur, puis le programme modifié.

Programme Arduino de départ

int capteur = 0;
int patteR = 6;
int patteV = 3;
int patteB = 4;

void setup()
{
Serial.begin(9600);
pinMode(patteR,OUTPUT);
pinMode(patteV,OUTPUT);
pinMode(patteB,OUTPUT);
}

void loop()
{
int valcapt = analogRead(capteur);
float temperature = valcapt*(5.0/1024.0 * 100.0);
Serial.print( "temperature : ");
Serial.print(temperature);
Serial.println(" C ");
delay(2000);

if(temperature > 30)
{
digitalWrite(patteV,LOW); 
   
 digitalWrite(patteB,LOW);
 digitalWrite(patteR,HIGH); }
else
{
 if (temperature < 5)

  {

  digitalWrite(patteV,LOW);

  digitalWrite(patteB,HIGH);

  digitalWrite(patteR,LOW);

 }
else
{
digitalWrite(patteV,HIGH);
digitalWrite(patteB,LOW);
digitalWrite(patteR,LOW);
}
}
}

Programme Arduino modifié (en bleu)

#include <softwareserial.h>

SoftwareSerial hc06(10,11);

int capteur = 0;
int patteR = 6;
int patteV = 3;
int patteB = 4;
bool clignotmentActif = false;
int delai = 100;


void setup()
{
Serial.begin(9600);
hc06.begin(9600);
pinMode(patteR,OUTPUT);
pinMode(patteV,OUTPUT);
pinMode(patteB,OUTPUT);
}

void loop()
{
while (hc06.available() > 0)
{
char car_lu = hc06.read();
if (car_lu == 'C')
{
clignotmentActif = true;
}
else
{
clignotmentActif = false;
}
}


int valcapt = analogRead(capteur);
float temperature = valcapt*(5.0/1024.0 * 100.0);
Serial.print( "temperature : ");
Serial.print(temperature);
Serial.println(" C ");
//on envoie la temperature via bluetooth
hc06.print(temperature);
if (clignotmentActif)
{
delay(delai);
}
else
{
delay(delai*2);
}


if( temperature > 30)
{
digitalWrite(patteV,LOW);
digitalWrite(patteB,LOW);
digitalWrite(patteR,HIGH);
if (clignotmentActif)
{
delay(delai);
digitalWrite(patteR,LOW);
}

}
}

Évalue ce cours !

 

Découvrez le soutien scolaire en ligne avec myMaxicours

Le service propose une plateforme de contenus interactifs, ludiques et variés pour les élèves du CP à la Terminale. Nous proposons des univers adaptés aux tranches d'âge afin de favoriser la concentration, encourager et motiver quel que soit le niveau. Nous souhaitons que chacun se sente bien pour apprendre et progresser en toute sérénité ! 

Fiches de cours les plus recherchées

SNT

Les paramètres d'une image numérique

SNT

Les métadonnées d'une image numérique

SNT

Le traitement d'une image numérique

SNT

Le rôle des algorithmes dans les appareils photo numériques

SNT

Le capteur, les photosites et le passage aux pixels

SNT

Les protocoles de transfert du web

SNT

Les impacts énergétique et environnemental du numérique

SNT

Les objets connectés

SNT

Le développement des réseaux sociaux

SNT

Au programme !