Ministère de l’Enseignement Supérieur et de la Recherche Scientifique

Université Hassiba Benbouali – Chlef

Faculté des Sciences Exactes et Informatique
Département d’Informatique

Corrigé TD 1 – IHM – L3/SIQ

Exercice 1

La solution n'est possible que si les segments débordent la configuration de points. Or

en général, on commence à chercher à l‘intérieur du carré (effet de fixation dû à l'effet
de champ). Il faut déborder les points au lieu de fixer à l'intérieur du carré.

Exercice 2

1) CDCDCDCDCDCD
2)AAABBBCCCDDDEEE
3)ATBATAATBATAATB
4)ABMCDMEFMGHM IGMK
5) DEFGEFGHFGHIGHIJ ….
Les règles ne sont pas données. Elles sont en fait inspirées de la culture commune des personnes par
exemple l'ordre alphabétique, Les quatre premiers exemples sont simples mais dans la dernière
ligne il faut faire des regroupements par 4 lettres consécutives pour voir apparaître un ordre naturel
alors que les lignes 2, 3 et 4 ont plutôt suggéré de faire des regroupements de 3 lettres consécutives
(on va ainsi à l'encontre de la règle de consistance de Nielsen). Souvent le fait d'avoir à expliciter le
raisonnement conduit à changer la réponse.

Exercice 3

1) La comptabilité S-R: l'information est traitée plus rapidement si le stimulus est compatible avec
la réponse nécessaire:

La configuration A présente une faible compatibilité car les brûleurs et les commandes sont dans
deux
dispositions spatiales différentes, alors que pour B et C, les configurations spatiales sont proches.
Pour A, s'il est aisé de considérer que les brûleurs de droite sont commandés par les boutons de
droite, déterminer quel bouton actionne le brûleur de fond est impossible sans une indication
complémentaire sur les boutons (labels).
Pour B, le décalage des brûleurs assure une comptabilité, car on retrouve une position de gauche à
droite pour les brûleurs comme pour les boutons.
Pour C, la comptabilité est évidente.
Actionner un brûleur sera donc plus rapide en B et C (pas de taches supplémentaires comme lire un
label, l‘analyser et agir...).
2) Etude de la CONFIG C:

1) tp perception de la plaque (transfert de l'info visuelle en mémoire de travail et verbalisation soit

brûleur haut gauche)
2) tc décision d'exécuter un mouvement des yeux vers les boutons
3) tm exécution du mouvement
4) tp perception des boutons (transfert et verbalisation du code verbal du bouton)
5) tc pour comparaison des deux codes bouton et brûleur
6) tc pour décider de la réponse: oui allumer non: retour en 5
7)tc mouvement pour allumer
Soit :

Les étapes 4 à 6 sont répétées en moyenne (4+1)/2 fois, d'où l'estimation des temps en
configuration C: T= 100 +70 +5/2(100+70 +70) +(70+70)= 910ms.
CONFIG B on a le même calcul, mais la verbalisation est du type 1er brûleur, 2ème, 3ème, 4ème.
CONFIG A il y a de légères différences et une méthode plausible:
-localiser le coté droit ou gauche de la plaque puis l'avant ou l'arrière On arrive ainsi, en
décomposant à 1240ms.
En conclusion : La configuration C est la meilleure, car la plus intuitive, la configuration A est la
plus mauvaise.

Exercice 4
1. Selon le modèle du processeur humain de Card, Moran et Newell, on pour la lecture :
- Réception de l’image de chaque mot par le processeur sensoriel PS (ou perceptif), cette
image doit être stockée dans la mémoire visuelle (iconique).
- Reconnaissance du mot par le processeur cognitive PC en exploitant la mémoire à long
terme.
- Réalisation de la prononciation par le processeur moteur PM.
Pour écouter la phrase, les mêmes action mais en utilisant la mémoire auditive (acoustique).
2. Temps pour lire la phrase mot par mot (ici on a 6 mots) :
TLire = 6*(TPS + TPC + TPM) = 6*(100 + 70 + 70) = 1440 ms
Temps pour écouter la phrase d’un seul coup et la prononcer mot par mot :
TLire = 1*(TPS + TPC) + 6 * TPM = 1*(100 + 70) +6* 70) = 590 ms
3. Cette déférence revient à la nature de l’information physiqe (image pour lire et son pour
écouter la phrase), ici on a considéré que la phrase ne peut pas être stockée entièrement dans la
mémoire visuelle mais elle le peut en cas dans la mémoire acoustique.
 Corrigé TD 2 – IHM – L3/SIQ
Exercice 1

Diagramme CTT simple pour l’édition et l’envoi d’un message SMS.

Editer et envoyer SMS

Editer SMS
; Envoyer SMS
; Valider

; * Ou *
Ouvrir éditeur Saisir texte Sélectionner destinataire Saisir n° tél

Ouvrir répertoire

;
Sélectionner une entrée

Exercice 2

1. Taches de l’utilisateur pour les deux opérations consultation et retrait.

Insérer_Carte, Entrer_Code, Retirer_Carte
Demander_Cash, Select_Montant, Retirer_Cash
Request_Cash before Select_Amount
Select_Amount
and before Withdraw_Cash
Insert_Card
2. Retrait d’argent, citer le but, les prérequis
Insert_Card before
et les résultats des taches correspondantes
Withdraw_Card
 But : obtenir de l’argent
Enter_Code just after Insert_Card
 Pré-requis :
 Avoir une carte
 Connaître le montant que l’on veut retirer
 Connaître le code secret
 Résultats
 Prendre l’argent
 Prendre la carte

3. Modéliser le retrait d’argent par un diagramme CTT.

Supplément :
Modèle CTT la gestion d’un panier dans une application de e-commerce.

Exercice 3

1. Schématisation du fonctionnement :

2. Découpage du code la page en M, V, C :

Contrôleur
La méthodologie MVC est de séparer les couches logiques d'une application, pour mieux structuré
le code. Pour appliquer un test MVC à l’exemple précédent.
Premièrement, on va séparer le code HTML:
<?php
// index.php

$cnx = mysql_connect('localhost', 'NomUtilisateur', 'MotDePasse');

mysql_select_db('MaBase', $cnx);
$result = mysql_query('SELECT * FROM article', $cnx);

$articles = array();
while($row = mysql_fetch_assoc($result)){
$articles[] = $row;
}
mysql_close($cnx);
 require 'view/list.php';
?>
Le code HTML est maintenant dans un fichier séparé (view/list.php), qui est essentiellement un
fichier HTML qui utilise une syntaxe PHP de template :

<!doctype html>
<html>
<head>
<title>PHP MVC</title>
</head>
<body>

<h2>Liste des articles</h2>

<ul>
<?php foreach($articles as $article){ ?>
<li>
<a href="/show.php?id=<?php echo $article['id']; ?>">
<?php echo $article['titre']; ?>
</a>
</li>
<?php } ?>
</ul>

</body>
</html>

Le fichier qui contient la logique applicative "index.php" est appelé «contrôleur. Il fait
simplement référence à votre code qui traite les entrées de l'utilisateur et prépare une réponse.
Le contrôleur dans notre cas prépare les données récupérer de la base de données et inclut ensuite
un template pour présenter ces données.

Modèle
Pour l'instant, l'application ne contient qu'une seule page. Mais que faire si une deuxième page a
besoin d'utiliser la même connexion, ou le même tableau de la base de données?
Les fonctions d'accès aux données de l'application soient isolés dans un nouveau fichier appelé
model.php:

<?php
// model/model.php

function ouvrir_database()
{
$cnx = mysql_connect('localhost', 'NomUtilisateur', 'MotDePasse');
mysql_select_db('MaBase', $cnx);
return $cnx;
}

function fermer_database($cnx)
{
mysql_close($cnx);
}

function all_articles()
{
$cnx = ouvrir_database();
$result = mysql_query('SELECT * from article', $cnx);
$articles = array();
while($row = mysql_fetch_assoc($result)){
$articles[] = $row;
}
fermer_database($cnx);
return $articles;
 }

?>

Le contrôleur "index.php" est maintenant très simple :

<?php
// index.php

require_once 'model/model.php';
$articles = all_articles();
require 'view/list.php';
?>

Maintenant, la responsabilité du contrôleur "index.php" est de récupérer les données de la couche

modèle de l'application et d'appeler le template à afficher ces données.

Vue
Pour ne pas dupliquer le code de template, on va créer un nouveau fichier "layout.php":
<!-- view/layout.php -->
<!doctype html>
<html>
<head>
<title><?php echo $titre; ?></title>
</head>
<body>

<?php echo $content; ?>

</body>
</html>

Le template "view/list.php" peut maintenant simplement hériter du "layout.php" :

<!-- view/list.php -->

<?php $titre = 'PHP MVC'; ?>

<?php ob_start() ?>

<h2>Liste des articles</h2>
<ul>
<?php foreach($articles as $article){ ?>
<li>
<a href="/show.php?id=<?php echo $article['id']; ?>">
<?php echo $article['titre']; ?>
</a>
</li>
<?php } ?>
</ul>
<?php $content = ob_get_clean(); ?>
<?php include 'layout.php'; ?>