introduction à l’ihm – m2105 td n° 3

IUT- Département d’Informatique G. Rey

2016

Département Informatique - IUT Nice-Côte d'Azur

Université Nice – Sophia Antipolis

41, Bd Napoléon III, 06206 Nice Cedex 3

Tél : +33 (0) 4 97 25 82 11– Fax : +33 (0) 4 97 25 83 31 1

Introduction à l’IHM – M2105

TD n° 3

1 Objectifs Ce TD/TP illustre la partie du cours sur la programmation des interfaces homme-machine. Les concepts principaux

abordés seront :

Illustration et étude des principes d’ergonomie et de psychologies cognitive

Un compte rendu donnant la réponse à chacune des questions posées devra être rendu à votre responsable de TD/TP par

email à la fin de chacune des séances. L’objet (sujet) de l’email devra être le suivant :

[S2T][IHM][Gx][TDx]Nom-Prénom / Nom-Prénom

Avec Gx le numéro de votre groupe (exemple G1 pour le groupe 1) et TDx le numéro du TD/TP inscrit sur le sujet du

TD/TP (exemple TD1 pour le premier TD).

Vous ne pouvez pas faire 2 séances avec le même binôme. De même, vous ne pouvez pas faire plus de la moitié des séances

seul.

Veuillez, sauf indication contraire de votre responsable de TD, faire l’ensemble des exercices marqués « Obligatoire »

dans l’ordre de la feuille de TD/TP. Les exercices « Conseillés » sont à faire si vous avez terminé les précédents ou lors de

vos révisions. Les exercices « optionnels » sont là pour les plus passionnés d’entre vous.

2 Exercice 1 : Placement et organisation (Obligatoire) Voici 4 dessins qui représentent différentes configurations possibles pour une plaque de cuisson à 4 feux.

Classez ces configurations d'un point de vue ergonomique et justifiez vos choix.

3 Exercice 2 : Principes ergonomiques (Obligatoire) Pour commencer, nous allons étudier des copies d’écrans ou des photos de dispositifs (électroniques ou non). Chacune

des illustrations présente une « erreur ergonomique » ou au contraire la mise en œuvre d’une bonne pratique (ou

propriété) présentée en cous. Attention, sur certaine illustration, on peut avoir plusieurs principes mise en jeu.

Pour chacune des 6 illustrations suivantes : identifiez la propriété mise en jeu, indiquez si elle est respectée ou non et

justifiez votre raisonnement. Dans le cas de « non-respect » de la propriété, imaginer une solution possible.


2016




Tél : +33 (0) 4 97 25 82 11– Fax : +33 (0) 4 97 25 83 31 2


TD n° 3

Maintenant, c’est à vous de jouer. Trouvez un logiciel, une application ou un site web qui respecte particulièrement

bien une propriété et un autre exemple qui ne le respecte pas. Attention, vous ne pouvez pas utiliser les propriétés

déjà identifier dans cet exercice. Si vos 2 exemples portent sur la même propriété, c’est encore mieux.

4 Exercice 3 : Etudes approfondis d’exemples (Obligatoire)

4.1 Menu Voici deux copies d’écran des menus dans Adobe Acrobat XI Pro.

Analysez le menu et identifiez au moins 6 recommandations que l’on pourrait faire pour la conception de menus.

Associez ces recommandations aux différentes propriétés et règles présentées en cours.

4.2 Barre de Défilement Voici une petite image (visible sur la page suivante) représentant l’évolution des barres de défilement (Scrollbar) c’est 30

dernières années. Cette image étant massivement reprise sur le net, je n’ai malheureusement pas réussi à trouver l’auteur

de celle-ci.

En vous aidant de l’image présentée à la page suivantes, identifiez le rôle principale d’une barre de défilement.

Identifiez également l’ensemble des rôles secondaires et des informations que peuvent fournir les barres de

défilement.

Les interfaces n’étant pas uniquement des éléments d’affichage (sortie) mais aussi des éléments interactions en

entrée, identifiez les actions possibles sur les barres de défilement.

Comparez, évaluez et jugez chacune des représentations en fonction des éléments identifiés précédemment.

Attention, on n’est pas là pour critiquer les aspects graphiques mais les principes ergonomiques. Par contre, essayez

de garder à l’esprit le contexte d’utilisation (OS, dispositifs d’interaction, …) lors de vos évaluations.


2016




Tél : +33 (0) 4 97 25 82 11– Fax : +33 (0) 4 97 25 83 31 3


TD n° 3

4.3 Ruban Microsoft a introduit depuis quelques années un nouveau composant « les rubans ». Très décrié à leur arrivé, les rubans

présentent toute fois de nombreux avantages. Voici quelques captures effectuées sur Microsoft Word 2016 et qui

illustrent les capacités des rubans.

Identifiez l’ensemble des capacités des rubans.

Juger le ruban en fonction du respect ou non des propriétés ergonomiques vues en cours.

Comparez le ruban et le menu usuel.

4.4 Gestionnaire d’impression (Conseillé) Lorsque vous souhaitez réaliser des impressions, et donc activez l’interface d’impression, celle-ci varie grandement d’un

système à l’autre mais également au sein d’un même système d’exploitation.

En vous appuyant sur vos connaissances, comparez les points forts et les points faibles de ces différentes solutions.

Chacun des points identifiés doit être argumenté et mis en relation avec les propriétés vues en cours.


2016




Tél : +33 (0) 4 97 25 82 11– Fax : +33 (0) 4 97 25 83 31 4


TD n° 3

Figure 1 : impression depuis Word 2016 sous Windows 10

Figure 2: impression depuis Acrobat XI Pro sous Windows 10


2016




Tél : +33 (0) 4 97 25 82 11– Fax : +33 (0) 4 97 25 83 31 5


TD n° 3

Figure 3: impression depuis Opera 36 sous Windows 10

Figure 4: impression depuis LibreOffice 3.5.7.2 sous Ubuntu 12.04 LTS

5 Exercice 4 : Ergonomie en dehors de l’informatique (Optionnel) Voici quelques photos de plaques de cuisson trouvées chez différents constructeurs.

Identifiez les possibles problèmes et les solutions mise en œuvre pour les éviter.

introduction à l’ihm – m2105 td n° 3

Documents