Interaction Homme

(1)

Ibrahima Amadou

INFORMATIQUE APPLIQUÉE: CSI 4202

- MACHINE

(2)

Avant-propos

L’Université Virtuelle Africaine (UVA) est fière de participer à accès à l’éducation dans les pays africains en produisant du matériel d’apprentissage de qualité. Nous sommes également fiers de contribuer à la connaissance globale, pour nos ressources éducatives sont principalement accessibles de l’extérieur du continent africain.

Ce module a été développé dans le cadre d’un programme de diplôme et diplôme en

informatique appliquée, en collaboration avec 18 institutions partenaires dans 16 pays africains.

Un total de 156 modules ont été développés ou traduits pour assurer la disponibilité en anglais, français et portugais. Ces modules sont également disponibles en tant que ressources éducatives ouvertes (OER) à oer.avu.org.

Au nom de l’Université Virtuelle Africaine et notre patron, nos institutions partenaires, la Banque africaine de développement, je vous invite à utiliser ce module dans votre

établissement, pour leur propre éducation, partager aussi largement que possible et participer activement aux communautés AVU de pratique d’intérêt. Nous nous engageons à être à l’avant-garde du développement et de partage ouvert de ressources pédagogiques.

L’Université Virtuelle Africaine (UVA) est une organisation intergouvernementale

panafricaine mis en place par lettre recommandée avec un mandat d’augmenter l’accès à l’enseignement supérieur et de formation de qualité grâce à l’utilisation novatrice des technologies de communication de l’information. Une charte instituant la UVA Organisation intergouvernementale, signée à ce jour par dix-neuf (19) Les gouvernements africains - Kenya, Sénégal, Mauritanie, Mali, Côte d’Ivoire, Tanzanie, Mozambique, République démocratique du Congo, Bénin, Ghana, République de Guinée, le Burkina Faso, le Niger, le Soudan du Sud, le Soudan, la Gambie, la Guinée-Bissau, l’Ethiopie et le Cap-Vert.

Les institutions suivantes ont participé au programme informatique appliquée: (1) Université d’Abomey Calavi au Bénin; (2) University of Ougagadougou au Burkina Faso; (3) Université Lumière Bujumbura Burundi; (4) Université de Douala au Cameroun; (5) Université de

Nouakchott en Mauritanie; (6) Université Gaston Berger Sénégal; (7) Université des Sciences, Techniques et Technologies de Bamako au Mali (8) Institut de la gestion et de l’administration

publique du Ghana; (9) Université des sciences et de la technologie Kwame Nkrumah au Ghana; (10) Université Kenyatta au Kenya; (11) Université Egerton au Kenya; (12) Université d’Addis-Abeba en Ethiopie (13) Université du Rwanda; (14) University of Salaam en Tanzanie Dar; (15) Université Abdou Moumouni Niamey Niger; (16) Université Cheikh Anta Diop au

(3)

Crédits de Production

Auteur

Ibrahima Amadou

Pair Réviseur

Dembele Jean

UVA – Coordination Académique

Dr. Marilena Cabral

Coordinateur global Sciences Informatiques Apliquées

Prof Tim Mwololo Waema

Coordinateur du module

Florence Tushabe

Concepteurs pédagogiques

Elizabeth Mbasu Benta Ochola Diana Tuel

Equipe Média

Sidney McGregor Michal Abigael Koyier

Barry Savala Mercy Tabi Ojwang

Edwin Kiprono Josiah Mutsogu

Kelvin Muriithi Kefa Murimi

Victor Oluoch Otieno Gerisson Mulongo

(4)

Droits d’auteur

Ce document est publié dans les conditions de la Creative Commons Http://fr.wikipedia.org/wiki/Creative_Commons

Attribution http://creativecommons.org/licenses/by/2.5/

Le gabarit est copyright African Virtual University sous licence Creative Commons Attribution- ShareAlike 4.0 International License. CC-BY, SA

Supporté par

Projet Multinational II de l’UVA financé par la Banque africaine de développement.

(5)

Table des matières

Avant-propos 2

Crédits de Production 3

Droits d’auteur 4

Supporté par 4

Aperçu du cours 6

Bienvenue à l’Interaction Homme-Machine (IHM) 6

Prérequis 6

Matériaux 6

Sites Web : 6

Objectifs du cours 7

Unités 7

Évaluation 8

Plan 9

Lectures et autres ressources 9

Unité 0: Évaluation Diagnostique 12

Introduction à l’unité 12

Objectifs de l’unité 12

Évaluation de l’unité 13

Termes clés 13

Directives 14

Unité 1: Compréhension et Conceptualisation 15

Termes clés 16

Activités d’apprentissage 16

Introduction 16

Détails de l’activité 16

(6)

Activité 1 - Introduction 18

Conclusion 18

Activité 2 - Comportement et formulaire, facteurs humains et sociaux 18

Conclusion 18

Résumé de l’unité 19

Directives 20

Unité 2: Analyses Cognitives et Cadre de Travail 21

Termes clés 22

Activité 1 - Exercices en classe et cours en présentiel 22 Détails de l’activité 23 Conclusion 23 Activité 2 - Ingénierie de système cognitif 24 Détails de l’activité 24 Activité 3 - Le processus de conception d’interaction cognitive] 24 Détails de l’activité 25 Résumé de l’unité 26

Unité 3: Développement Logiciel et Interface Graphique 27

(7)

Conclusion 30

Activité 3 - Contrôle de la qualité du logiciel et de l’interface graphique 30

Conclusion 31

Directives 31

Unité 4: Compétences Cognitives 33

Termes clés 33

Activité 1 - Modèle du processeur humain 34 Détails de l’activité 34 Conclusion 35 Activité 2 - La Théorie de l’Action de Norman 35 Détails de l’activité 35 Conclusion 36 Activité 3 - Interacting Cognitive Subsystems(ICS) 36 Introduction 36 Détails de l’activité 37 Conclusion 38 Directives 39

(8)

Aperçu du cours

Bienvenue à l’Interaction Homme-Machine (IHM)

L’Interaction Homme machine (IHM) est l’étude des principes et théories avec lesquels on peut concevoir des interfaces utilisateur. Ce cours présentera aux étudiants la théorie et la pratique pour le développement d’interfaces utilisateur. Il sera question de discussions portant sur des théories pertinentes provenant de la littérature Informatique (les graphiques, génie logiciel, le multimédia), de la psychologie cognitive et de la conception industrielle.

Les étudiants participeront à des groupes d’élaboration de projets portant sur la conception, l’implémentation et l’évaluation des interfaces utilisateur.

Prérequis

1. Les préréquis pour ce cours peuvent être : 2. Principe de programmation

3. Toute application graphique pertinente en Informatique

Matériaux

Les matériaux nécessaires pour compléter ce cours comprennent:

1. Ordinateurs / Portables;

2. Connexion internet;

3. Outils logiciels;

4. Réseaux sociaux et plateformes virtuelles

Sites Web :

Ceci sera complété par des conférences en classe. Vous aurez également besoin d’un livre qui aborde les notions de Swing (GUI la boîte à outils de Java ou Visual Studio) pour les conceptions. D’autres livres pertinents à posséder sont énumérés ci-dessous.

(9)

Aperçu du cours

References potentielles

1. B. Shneiderman, C. Plaisant, M. Cohen, and S. Jacobs, Designing the User Interface: Strategies for Effective Human-Computer Interaction, Addison- Wesley, Reading, Mass. 5th Edition 2009

2. Michael Kölling. .Introduction to Programming with Greenfoot: Object- oriented programming in Java with Games and Simulations, Pearson Education.(ISBN 10: 0-13-603753-4). 2010 This book is also available as an eBook through the publisher’s website: http://www.coursesmart.com using ISBN: 0136025307

3. Introduction to Computer Programming , e-Book Wiley Charles Dierbach, ISBN: 978-0-470-55515-6, http://it-ebooks.info/book/2466/ 2013

Objectifs du cours

À la fin de ce cours, l›étudiant devrait être en mesure de :

1. Démontrer les limites des capacités humaines et informatiques

2. Démontrer l’utilisation des théories de base, des outils et des techniques en IHM

3. Améliorer les aspects fondamentaux pour la conception et l’évaluation d’interfaces

4. Utiliser une variété de méthodes simples pour évaluer la qualité des interfaces utilisateur

5. Appliquer les techniques appropriées d’IHM pour concevoir des systèmes utilisables par les humains

6. Utiliser judicieusement les couleurs dans la conception des interfaces utlisateurs

7. É v a l u e r d e s i n t e r f a c e s u t l i s a t e u r à l ’ a i d e d e s p r i n c i p e s d ’ é v a l u a t i o n o u d ’ i m p l é m e n t a t i o n

Unités

Unité 0: Évaluation diagnostique

Principes de programmation (Java, Python, C++,etc) Competences pertinentes en application graphique

(10)

Unité 1 : compréhension et conceptualisation Démontrer les limites des capacités humaines

Démontrer l’utilisation des théories de base, des outils et des techniques de l’IHM

Unité 2: Analyse cognitive et cadre

Etre capable d’améliorer l’aspect fondamental de la conception et l’évaluation des interfaces Utiliser une variété de méthodes simples pour évaluer la qualité d’une interface utilisateur

Unité 3: Développement logiciel et Interface graphique

Appliquer des techniques appropriées de l’IHM pour concevoir des systèmes utilisables Utiliser les couleurs de façon parcimonieuse dans la conception d’interfaces

Unité 4: compétences cognitives

Evaluer les interfaces en utilisant les principes d’évaluation et / ou d’implémentation

Évaluation

Les évaluations formatives (vérification de progrès) sont inclus dans chaque unité.

Les évaluations sommatives (tests et travaux finaux) sont fournies à la fin de chaque module et traitent des connaissances et compétences du module.

Les évaluations sommatives sont gérés à la discrétion de l’établissement qui offre le cours. Le plan d’évaluation proposé est le suivant:

1 Devoirs / Travaux à domicile 35%

2 Test 35%

(11)

Plan

Unité Sujets et Activités Durée

estimée Unité: 0 Démontrer les capacities de la

programmation informatique et les competences de base des applications graphiques

22 Hours

Unité: 1 Démontrer les limites des capacities humaines et de l’ordinateur

Démontrer l’utilisation des théories de base, des outils et des techniques de l’IHM

40 Hours

Unité: 2 Etre capable d’améliorer l’aspect

fondamental de la conception et l’évaluation des interfaces

Utiliser une variété de méthodes simples pour évaluer la qualité d’une interface utilisateur

40 Hours

Unité: 3 Appliquer des techniques appropriées de l’IHM pour concevoir des systèmes utilisables Utiliser les couleurs de façon parcimonieuse dans la conception d’interfaces

40 Hours

Unité : 4 Evaluer les interfaces en utilisant les principes d’évaluation et / ou d’implémentation

40 Hours

Lectures et autres ressources

Les lectures et autres ressources dans ce cours sont indiquées ci-dessous.

Unité 0

Lectures et autres ressources obligatoires:

• Lectures et autres ressources optionnelles:

• https://docs.python.org/2/tutorial/ en addition

• www.tutorialspoint.com/java/ pour des lectures à venir

(12)

Unité 1

• Interaction Design: Beyond Human Computer Interaction, 3rd Edition. by Helen Sharp, Jenny Preece, Yvonne Roger. “Topics: Design, Digital Media, Interaction Design, Web Development” ISBN: 9780470665763. Release Date: June 21, 2011.

• Human Computer Interaction: Concepts, Methodologies, Tools and Applications, Panayiotis Zaphiris and Chee Siang “ City University of London (U.K.)

• Lectures et autres ressources optionnelles:

• Virtual Reality: Human Computer Interaction, Xin-Xing Tang, ISBN:

978-953-51-0721-7

• http://dx.doi.org/10.5772/3333 pour des lectures en background

• www.intechopen.com pour des lectures à venir

Unité 2

Unité 3

(13)

Unité 4

(14)

Unité 0: Évaluation Diagnostique

Introduction à l’unité

Cette unité vous permettra de vérifier les connaissances que vous devez avoir avant de commencer le cours. Vous pouvez faire l’évaluation de l’unité avant de faire des activités d’apprentissage pour aider à rafraîchir vos connaissances.

Le but de cette unité est de déterminer la portée de vos connaissances liées à ce cours. Ce cours enseigne la théorie, la procédure de conception, et les pratiques de programmation en rapport avec l’interaction entre humains et ordinateurs. Cette unité va enseigner l’historique des réussites spécifiques des interfaces et les échecs spectaculaires à connaitre à partir des expériences passées. Les apprenants vont appliquer leurs connaissances acquises dans une série de travaux pratiques en utilisant des pratiques de programmation sonores, des outils efficaces et des techniques pour créer des interfaces utilisateur avec succès.

Objectifs de l’unité

À la fin de cette unité, vous devriez être capable de :

1. D’élaborer des programmes informatiques de base utilisant des langages de programmation courants

2. D’élaborer des programmes informatiques en vue de développer et d’analyser les systèmes informatiques, par exemple des interfaces utilisateur graphiques.

3. D’étendre les connaissances et / ou compétences actuelles à un environnement informatique ou à un problème dont le contexte est nouveau 4. D’ analyser un problème, identifier et définir les calculs pertinents pour sa

résolution.

5. D’évaluer, de vérifier, de dépanner, de tester et d’analyser un système informatisé, un processus, un composant ou un programme existant.

6. D’utiliser les techniques actuelles, les compétences et les outils pour la pratique de l’informatique

(15)

Unité 0: Évaluation Diagnostique

Termes clés

Application : est un ensemble de programmes désignés à produire des operations pour une tâche spécifique Tableau: Un tableau est une collection d’objets qui contient un nombre fixé de valeurs d’un même type Code: Instructions informatiques écrites dans un langage de programmation

Compilateur: Programme qui transforme un code source écrit dans un langage de programmation en un autre langage machine

Programmation: Se réfère souvent à la programmation informatique, c’est un processus qui conduit à des programmes exécutables à partir d’une formulation originale.

Logiciel: Programmes et autres opérations informatiques utilisés par un ordinateur

Syntaxe: Structure des déclarations dans un langage informatique.

Évaluation de l’unité

Vérifiez votre compréhension!

Quiz

1. Qui est ‘’ l’humain’’ dans l’IHM ?

2. Qu’est ce que ‘’l’ordinateur’’ dans l’IHM ? 3. Qu’est ce que “l’Interaction” dans l’IHM ? 4. Quel est l’objectif général de l’IHM ? 5. Quel est l’avenir de l’IHM?

6. Le Web est – il utilisé ?

7. Les composantes de l’utilisabilité en conception

(16)

Directives

L’évaluation de ce cours est basée sur le rendement de l’élève conformément aux attentes du curriculum et sur les compétences avérées nécessaires pour un apprentissage efficace. La note en pourcentage représente la qualité du rendement global de l’élève conformément aux attentes du cours et reflète le niveau correspondant comme décrit dans le tableau d’évaluation sommative. Un crédit est accordé et enregistré pour ce cours si la note de l’étudiant est de 50% ou plus. La note finale pour ce cours sera déterminée comme suit : 70% de la note est fondée sur des évaluations réalisées pendant le cours. Cette portion de la

note reflète le niveau le plus constant de l’élève tout au long de la réalisation de cours, mais une attention particulière sera accordée aux notions plus récentes.

30% de la note sera basée sur une évaluation finale administrée à la fin du cours. Cette

évaluation finale se fera en tenant compte des quatre catégories de l’évaluation sommative du cours et des attentes de toutes les unités du cours.

Système de notation Devoirs 35%

Tests 35%

Examens 30%

Lectures et autres ressources

Les lectures et ressources de cette unité sont se trouvent au niveau des lectures et autres ressources du cours.

(17)

Unité 1: Compréhension et Conceptualisation

Unité 1: Compréhension et Conceptualisation

Introduction à l’unité

Des principes et procédures de planification, de conception, de réalisation d’évaluation efficaces (formatives, sommatives, utilisabilité) seront étudiées dans divers contextes. La création d’instruments d’évaluation, l’élaboration de méthodes pour évaluer un produit ou un programme, la création de versions d’essai pour l’utilisabilité, l’analyse de données, le compte rendu de résultats, des recommandations sont autant d’activités pour ce cours.

Objectifs de l’unité

À la fin de cette unité, vous devriez être capable de:

1. Evaluer la différence entre une bonne et une mauvaise conception (design) : Distinguer une bonne conception (design) d’une mauvaise

2. Analyser ce qu’est un design interactif et comment il se rapporte à l’interaction homme-machine

3. Évaluer la relation entre l›expérience de l› utilisateur et l›utilisabilité

4. Identifier les éléments essentiels dans un processus de conception interactive

5. Évaluer les différentes formes de guidance utilisées dans la conception interactive

6. Apprécier un produit interactif et identifier le bon du mauvais en termes d’objectifs

(18)

Termes clés

Design: La création d’une interface pour la construction d’un objet

Evaluer: Identification des options appropriées

Interactif: acceptant un fux bidirectionnel entre l’ordinateur et l’utilisateur ; en réponse aux entrées de l’utilisateur

Interface : surface considérée comme étant une frontière à deux phases

navigation: science pour déterminer la position, la localisation, les parcours pour connaître une destination visualisation :Interprétation en termes visuels ou la mise en formes visuelles

Activités d’apprentissage

Pour cette activité, on forme des projets de groupe de trois, quatre ou cinq membres. Pour former des groupes, les élèves revoient les propositions individuelles de projets et de soumettent leurs disponibilité à travailler avec les autres. En fonction de leurs préférences qui ont été soumises, les étudiants seront affectés à des groupes par l’instructeur. Un temps libre sera mis à profit pour assurer la coordination entre les membres du groupe. Lorsque cela est possible, les étudiants sont encouragés à communiquer avec les outils tels que Skype et les programmes de chat. Tous les membres du groupe sont conjointement responsables de l’ensemble de la mission, bien que le groupe peut attribuer des rôles primaires pour chaque membre du groupe. En règle générale, chaque membre du groupe recevra le même score sur chaque projet.

Introduction

L’unité permet aux élèves d’apprécier la nature délicate et divergente des interactions humaines et informatiques. Il plonge dans la dynamique des conceptions de l’interface utilisateur y compris leurs évaluations ainsi que les problèmes d’utilisation à la fois pour les

(19)

5 Heures

Interfaces utilisateur: principes, des normes, événements de l’IU(Interfaces Utilisateur), construction de l’interface utilisateur

Design: approches de conception, look-and-feel (mise en page, couleurs, polices, menus, étiquetage), défaillance de la manutention humain / système, erreurs de conception, tâches modélisation des processus, visualisation, représentations, interaction multimédia (graphiques, son, audio, etc.) , appareil spécifiques (par exemple, les téléphones cellulaires, tablettes).

6 heures

Évaluation: paradigmes d’évaluation, cadres, heuristiques, tests d’utilisabilité (efficacité, la facilité d’apprentissage, la satisfaction des utilisateurs). 12 Heures

Comportement et la formulaire : Postures pour logiciels, flux, navigation, Interaction (ligne de commande, menu, voix, gestuelle, WIMP, récupération de données et rétroaction), la langue (métaphores, expressions idiomatiques, tonalité) et attributs de logiciel.

7 Heures

Les facteurs humains et sociaux: communication de la culture avec les utilisateurs, diversité humaine, documentation utilisateur, psychologie appliquée, psychologie sociale, réseautage social.

8 Heures

Format: Conférences, discussions, en classe de conception d’exercices

Conclusion

A la fin de cette activité, les étudiants doivent être capables d’évaluer des interfaces utilisateur et de détecter des problèmes d’utilisabilité en se servant des études sur l’utilisabilité

(observations) Évaluation

Présentation de la perception humaine et de l’information

• Perception, perception gestaltique , typographie

• Couleur (Exercices en classe),

• Conception graphique (Exercices en classe, main-outs)

• Affichage, papiers et autres périphériques de sortie

• Exercice: Présentation d’information animés vs statique

(20)

Activité 1 - Introduction

Présentation

Dans cette section, les activités portent sur l’appréciation des techniques et approches de l’IHM, l’acquisition de connaissance sur la conception et la présentation d’interfaces utilisateur, l’explication des techniques d’évaluation et heuristiques. On aura recours aux connaissances préalables sur les couleurs, les conceptions graphiques, les animations et les textures à l’aide de logiciels disponibles.

Détails de l’activité

Web, autres styles d’interaction

Analyse de tâche, choix parmi les styles d’interaction Conception d’interface utilisateur

Conclusion

Au terme de cette activité, l’étudiant doit être capable de visualiser / simuler comment un utilisateur peut évaluer les résultats sur l’utilisabilité aussi bien en écrit qu’à l’oral.

Évaluation

Notion de durée et de mouvement en matière d’Interface graphique Devoir : Analyser un problème d’utilisabilité

Activité 2 - Comportement et formulaire, facteurs humains et sociaux

Détails de l’activité

Les questions d’éthique et les décisions relatives à la technologie, la conception, la recherche en design, l’ IHM, et l’industrie du design.

Choisir parmi les méthodes d’utilisabilité.

Enquête sur les problèmes présentant un intérêt particulier dans l’interaction homme - machine.

Conclusion

A la fin de cette activité, l’étudiant doit être capable d’utiliser rapidement les méthodes

(21)

Évaluation

• Evaluer l’interface graphique une fois de plus

• Proposer une meilleure présentation pour l’interface graphique

• Conception d’Interface

• Architecture pour Interface Graphique

Résumé de l’unité

Après avoir réussi avec succès cette unité, l’étudiant devra être capable de :

1. Décomposer une séquence d’activités complexes en ses sous - composants à l’aide de la décomposition hiérarchique des tâches

2. Désigner les fonctions appropriées de l’homme et de la machine

3. Décomposer une séquence d’activité en Interface graphique suivant ses sous - composantes

4. Identifier les actions de l’utilisabilité et utiliser un outil simple de conception pour élaborer un modèle convenable

Évaluation de l’unité

1. Démontrer comment la conception de l’interface dépend finalement de la perception humaine et de la cognition

2. Analyser le rôle des interfaces bien conçues, utilisables, dans leur succès sur le marché, leur fiabilité et et leur accessibilité

3. Distinguer les différents rôles des professionnels et des praticiens de l’IHM en activité

4. Expliquer le rôle des logiciels, le rôle de la conception de systèmes distribués, le rôle de l’efficacité des programmes d’interfaces graphiques dans l’atteinte d’un temps de réponse acceptable pour un système 5. Spécifier le comportement désiré d’un composant d’interface ou d’une

interface à l’aide d’un diagramme de transition d’état 6. Devoir, présentations et test

(22)

Directives

Il y aura un certain nombre de devoirs pour acquérir de l’expérience sur les activités relatives à l’utilisabilité. La plupart des devoirs se feront en groupe. Les devoirs en début de cours seront ramassés avec un délai de grâce d’une minute ; les devoirs en retard recevront au plus deux tiers de crédit.

Système de notation Pondération approximative:

1. Devoirs, participation de 35%

2. Test, Quiz 35%

3. Examens 30%

Évaluation

Les étudiants recevront leurs cours et feedback d’évaluation à travers le système de gestion des cours de l’UVA et / ou à travers une autre plateforme.

Les lectures et autres ressorces de cette unité se trouvent au niveau des lectures et autres ressources du cours.

(23)

Unité 2: Analyses Cognitives et Cadre de Travail

Unité 2: Analyses Cognitives et Cadre de Travail

Introduction à l’unité

L’objectif de cette unité est de présenter aux concepteurs d’interfaces et aux spécialistes de tests utilisateurs, les principales méthodologies utilisées par les psychologues de la psychologie cognitive pour mesurer la cognition, les structures et les processus, et de montrer comment ces méthodes sont appliquées à la conception et aux tests d’interfaces, pour

acquérir de la pratique et des formations actives dans des méthodes choisies, et de donner aux concepteurs et aux spécialistes de tests un background suffisant et des références sur des matériels pour qu’ils puissent continuer à se servir de ces méthodes de leurs propres chefs

Objectifs de l’unité

1. Définir ce qu’est la cognition et pourquoi il est important pour la conception d’interaction

2. Distinguer ce qu’est l’attention et ses effets sur notre capacité à effectuer plusieurs tâches

3. Définir comment la mémoire peut être renforcée à l’ aide de la technologie 4. Définir les modèles mentaux

5. Donner la différence entre les cadres classiques internes cognitifs(par exemple, les modèles mentaux) et les approches externes cognitives plus récentes (par exemple la cognition distribuée) qui ont été appliquées à IHM 6. Evaluer un modèle mental et comprendre sa signification

(24)

Termes clés

Cognition: L’action ou le processus d’acquisition des connaissances et la compréhension par la pensée, le raisonnement et le jugement mental.

Analyse cognitive des tâches: Le développement de tâches qui nécessitent l’activité cognitive de l’utilisateur, telles que la prise de décision, la résolution de problèmes, la mémoire, l’attention et le jugement.

Design: Développement d’interfaces qui créent des visualisations efficaces fondées sur des principes de conception cognitives.

IHM: Interaction homme-machine (IHM) comprend l’étude, la planification, la conception et l’utilisation des interfaces entre les personnes (utilisateurs) et les ordinateurs.

Modèle: est une simplification de certains aspects de l’interaction homme-ordinateur destiné à la rendre plus facile pour les concepteurs afin de prédire et d’évaluer des conceptions alternatives

Cadre: est un ensemble de concepts interdépendants et / ou une série de questions spécifiques

Activités d’apprentissage

Activité 1 - Exercices en classe et cours en présentiel

Introduction

Le cours couvre des domaines de l’IHM tels que l’analyse des tâches, la conception participative, la théorie de l’activité, la cognition distribuée, l’analyse du travail cognitif, les algorithmes évolutionnaires, la logique de conception. L’apprenant va chercher à comprendre les capacités perceptives et cognitives des humains, comment ceux – ci peuvent être pris en charge quand ils interagissent avec les ordinateurs et les artefacts assistés par ordinateur, et

(25)

Détails de l’activité

Applications de conception visuelle

Concevoir des stratégies: diagrammes d’état de transition, la mise en scène, la modélisation événement, le prototypage, la mise en page de formes, y compris les détails de conception et les propriétés des objets

Conception d’interfaces : utilisation de stratégies de conception Forme et environnement de développement visuel

Identification des caractéristiques: enquête d’outils de pointe actuelles et les méthodes de développement

Emploi des caractéristiques: utilisation de fonctionnalités avancées pour satisfaire les exigences d’une application. Caractéristiques disponibles varient considérablement entre les différents environnements de développement, mais des exemples typiques pourraient être l’utilisation de glisser-déposer, et les techniques d’animation simples.

Aproches de conception: par exemple, Conception centrée sur l’utilisateur (UCD) vs Genius (aka Rapid Expert ) Design: comparer et contraste, avantages et inconvénients

Format:

Analyse des bons / mauvais exemples de conception? Pourquoi efficace (ou non) Des études de cas

Discussions en ligne

Conclusion

A l’issue de ce cours, vous aurez une bonne compréhension de ce qui signifie être un utilisateur et comment implémenter une conception centrée utilisateur pour les meilleurs résultats

possibles. Vous serez équipé d’un background et de connaissances théoriques sur l’Interaction Homme – Machine pour l’appliquer dans un cadre pratique, vous saurez comment avoir une bonne compréhension de l’humain à travers le terme ‘’utilisateur’’ et ce dont il a besoin dans la conception.

Évaluation

1. Désignation de groupes 2. Présentation

(26)

Activité 2 - Ingénierie de système cognitif

Présentation

L’ingénierie des systèmes cognitifs est une discipline de conception qui traite nos interactions avec la technologie et la façon dont nous utilisons ces technologies pour interagir les unes avec les autres. Les techniques cognitives cherchent à concevoir des systèmes qui sont plus efficaces et plus robustes. L’accent est mis sur l’amplification de la capacité humaine à effectuer des travaux cognitifs en intégrant des fonctions techniques dans les processus cognitifs

humains dont ils ont besoin pour soutenir en rendant ce travail cognitif plus fiable.

Après avoir terminé cette activité, l’étudiant comprendra la nature de la prise de décision naturaliste et la macro-cognition; il aura développé une certaine habileté avec les techniques de base, en particulier la méthode de décision critique et la conception centrée décision.

Détails de l’activité

Analyse des tâches cognitives Partie 1 Prises de décisions naturalistes Macro-Cognition

Analyse des tâches cognitives Partie 2

• Décision conception centrée

• Évaluation sommaire de l›analyse des tâches cognitives

Qu’est ce que l’ingénierie des systèmes cognitifs ? Découvrir la connaissance

film; Houston,

Revue sommaire de l’activité

Activité 3 - Le processus de conception d’interaction cognitive]

Introduction

L’objectif de cette activité est de donner une introduction aux domaines clés, sur les

(27)

Détails de l’activité

Les quatre approches pratiques de la conception cognitive:

Conception centrée utilisateur

• Se focaliser très tôt sur les utilisateurs et les tâches: étudier directement les caractéristiques cognitives, comportementales, anthropomorphes et attitudes.

• Mesure empirique: les réactions et les performances à des scénarios, des manuels, des simulations et prototypes des utilisateurs sont observées, enregistrées et analysées

• Conception itérative: lorsque des problèmes se trouvent dans des tests utilisateurs, les fixer et réaliser d’autres tests

Conception centrée Activité

• Etablir les exigences de l’activité

• Concevoir des solutions de rechange pour la conception de l’activité

• Prototypage

• Évaluation

Evaluer la conception des systèmes : Questions pratiques Qui sont les utilisateurs?

Qu’entendons-nous par «besoins»?

Comment générer des alternatives Comment choisir parmi les alternatives

Comment intégrer les activités de conception d’interaction avec d’autres modèles?

Évaluation

La preuve peut être obtenue en menant des enquêtes sur une large gamme d’applications IHM. Les apprenants doivent montrer qu’ils sont capables d’identifier les principales caractéristiques d’une IHM donnée, afin qu’ils puissent diagnostiquer les défaillances de l’interface et proposer des améliorations à la lumière des besoins des utilisateurs. Un prototype d’IHM peut être choisi pour n’ importe quelle application appropriée. La preuve peut être générée en parallèle avec d’autres unités concernées par le développement de logiciels.

Exercice

1. Temps - échelles et l’illusion de multi-tâches 2. GOMS Keystroke - Level Modeling

3. Test d’hypothèse et la signification statistique

(28)

Résumé de l’unité

Après la réussite de cette unité, l’apprenant a appris sur ce qui est de la perception humaine et de la cognition.

Ce qui a été appris :

1. Comment attribuer des fonctions de manière appropriée à l’homme et à la machine

2. Comment décomposer une séquence d ‘activités GUI en actions qui la composent,

3. Comment identifier ces actions, et utiliser le modèle GOMS Keystroke pour évaluer le temps nécessaire.

Évaluation de l’unité

On demande à une société de concevoir un système informatique qui encouragera les enfants autistes à communiquer et à mieux s’ exprimer.

Quel type d’interaction serait - il approprié d’utiliser pour l’interface concernant ce groupe particulier d’utilisateurs?

1. Rocket surgery made easy: the do-it-yourself guide to finding and fixing usability problems” (2010) by Steve Krug. New Riders, ISBN: 9780321702821 (also available online through SFU library here)

2. 100 Things every designer needs to know about people (2011) by Susan Weinschenk Understanding Psychology (2013 (2007 or later edition is also fine to use)) ( by Charles G. Morris & Albert A. Maisto. ISBN 0205845967 3. The Design of Everyday Things” (2002) by D. Norman; Harper Collins; ISBN

(29)

Unité 3: Développement Logiciel et Interface Graphique

Unité 3: Développement Logiciel et Interface Graphique

Introduction à l’unité

Dans ce module, les étudiants verront les techniques de développement des logiciels pour interfaces graphiques. Il sera question également des meilleures pratiques pour la maintenance des systèmes afin d’organiser et de protéger les données.

Une meilleure présentation des interfaces aux utilisateurs sera étudiée.

Dans cette section, on abordera les différents processus de developpement du logiciel, sa facilité d’utilisation pour des environnements variés et en fonction du public cible, independemmant de l’âge des utilisateurs et de l’enseignement universitaire.

Objectifs de l’unité

A la fin de ce module, vous devriez être capable de : 1. Évaluer une interface graphique GUI

2. Identifier les exigences de logiciels nécessaires à la conception de l’interface graphique et de sa qualité

3. Implémenter une interface graphique qui obéit à tous les principes du génie logiciel orientée GUI.

4. Corriger la conception des systèmes mal conçus en suivant les techniques utilisées dans l’analyse des processus et du cycle de vie des systèmes modernes;

5. Créer des interfaces systèmes, à la fois simples, efficaces et qui offrent une meilleure interaction avec l’utilisateur.

(30)

Termes clés

GUI: interface graphique pour utilisateur;

Interaction: permet un flux bidirectionnel d’informations entre l’ordinateur et un utilisateur; la réponse à une entrée de l’utilisateur.

Interface: La surface considérée comme une frontière commune à deux couches ou niveaux;

Taux: Ce est la détermination systématique pour identifier les options préférées

regenereration : processus de mise à jour permettant une meilleure stratégie d’optimisation et le développement d’un système obsolète.

Réingénierie: toute activité permettant à quelqu’un de mieux comprendre le logiciel, de le préparer ou de l’améliorer, afin de faciliter sa maintenance (son entretien) , sa réutilisation ou ses développements pour son étendre son enseignement à la vie en se servant des transformations sur les systèmes existants et aussi pour une meilleure qualité technique et fonctionnelle.

Activités d’apprentissage

Activité 1 - Révision du cycle de vie des logiciels et exercices pratiques

Introduction

Les activités de cette section comprennent l’examen théorique du cycle de vie du logiciel, architecture et qualité des interfaces graphiques.

(31)

Détails de l’activité

Exposé avec étude de cas :

1. Techniques de présentation du logiciel et des interfaces graphiques 2. Cycle de vie du logiciel et réingénierie

3. Étude de cas pour analyses en classes, exercices,

4. Mini-projets présentés en classe par les étudiant en comparant performance et utlisabilité des systèmes existants

5. Conception et exercices en classe

Conclusion

À la fin de cette activité, les étudiants seront en mesure d›évaluer et d›identifier un système convivial / GUI, interactif, efficace et permettant une réingénierie / ingénierie inverse.

Évaluation

1. Perception / ergonométrie des systèmes à GUI

2. Emploi et utilisabilité des cycle de vie pour les processus de qualité de logiciels

3. Conception graphique (notes d’exercice et de conférences)

4. Comparaison des systèmes existants sur le plan portativité et effectivité, avec vos besoins en tenant compte du facteur temps et de l’efficacité 5. Conception et architecture de GUI modernes (exercices en classe)

Activité 2 - Implémentation et prototypage de GUI

Présentation

Dans cette section les activités seront à caractère pratiques et les étudiants implémenteront des interfaces variées de systèmes utilisateurs en prenant en compte plusieurs situations qui peuvent intervenir.

Plusieurs méthodes de représentation et de conception des interfaces, seront créées et discutées en considérant une variété de média / dispositifs, les contenus à présenter et leur représentation

(32)

Détails de l’activité

Exercices pratiques en classe et devoirs sur les implémentations de GUI en utilisant un langage de programmation et d’autres outils graphiques qui donneront des cadres de travail permettant de dessiner différentes interfaces

Prototypage et test de développement d’interfaces avec présentation, discussion en classe en utilisant des projecteurs et des ordinateurs.

Comparaison des interfaces existant sur le marché en considérant les équipements électroniques variés, incluant les pages web

Conclusion

A la fin de cette activité, l’étudiant sera en mesure d’implémenter dans la pratique plusieurs interfaces graphiques pour divers équipements (dispositifs) et qui peuvent être facilement et convivialement utilisées par n’importe qui.

Évaluation

1. Ergonométrie / interaction dynamique avec GUI

2. Tâche : analyse individuelle de cas pour des gens avec besoins spéciaux, mais aussi avec des gens n’ayant pas de besoins spécifiques

3. Tâche : analyser un problème d’utilisabilité et désigner des solutions spécifiques pour chaque cas

Activité 3 - Contrôle de la qualité du logiciel et de l’interface graphique

Introduction

Dans cette section, l’interface graphique sera analysée et évaluée dans la Catégorie des logiciels de qualité qui répondent mieux aux besoins des Utilisateurs, ainsi que sa facilité de fournir l’ingénierie inverse.

Détails de l’activité

Les tests d’utilisabilité des systèmes / atelier de GUI créé spécialement à cet effet, tester les interfaces d’affichage d’alerte dans l’ordinateur ou d’autres dispositifs.

(33)

Conclusion

Les étudiants seront en mesure de programmer des interfaces et d’utiliser n’importe quel cadre de création / conception d’interfaces utilisateur.

A la fin de l’activité, l’étudiant doit développer des logiciels dont les interfaces sont conviviales et efficaces

Les étudiants seront capables de concevoir des systèmes qui autorisent l’ingénierie inverse Évaluation

Concevoir une interface graphique pour n’importe quel appareil Adapter les interfaces aux réalités modernes

Evaluer la capacité d’un système à autoriser l’ingénierie inverse

Résumé de l’unité

À l›issue de l›étude de l›unité 3, les étudiants seront en mesure de:

1. Concevoir une interface utilisateur;

2. Reconnaître une interface conviviale et qui est indépendante du dispositif;

3. Adapter une interface graphique pour les systèmes modernes;

4. Concevoir un système, vraiment interactif, autorisant l’ingénierie inverse.

Évaluation de l’unité

Créer des systèmes selon les lignes directrices de génie logiciel, qui peuvent garantir une meilleure qualité et la convivialité pour différents utilisateurs et diverses applications;

Identifier des interfaces conviviales, tests validés par des experts et des non experts ; développer des interfaces pour tout appareil identifier, développer des interfaces graphiques modernes et proposer des améliorations pour celles obsolètes

Directives

Il y aura une série de tâches structurées, conçues pour ajouter une expérience avec diverses activités dans l’ingénierie de l’utilisabilité. Laplupart des travaux se font en équipe.

Il y aura aussi des travaux à domiciles et des devoirs à la maison, ainsi que des projets. Les projets seront défendus dans la salle de classe, et en groupes de discussions. On prendre une demi - heure au début de la leçon pour ramasser les devoirs passés, on allouera au maximum

(34)

Système de notation Pondération approximative:

1. Devoirs, participation, questionnaires: 35%

2. Projet d’essai: 35%

3. Examens 30%

Évaluation

Les étudiants reçoivent les devoirs, cours et feedback à travers le système de gestion des cours d’UVA et une plate-forme ou à partir d’un portail.

Les lectures et autres ressources de cette unité se trouvent au niveau des lectures et autres ressources du cours.

(35)

Unité 4: Compétences Cognitives

Unité 4: Compétences Cognitives

Introduction à l’unité

Dans l’Interaction Homme - Machine (IHM), l’homme est au cœur des activités; c’est lui le point focal. La qualité des produits qui en résulte est en fonction de son jugement. Utilisabilité, utilité sont autant d’éléments dont qui ne sont appréciés que par l’homme. De la conception à l’évaluation des interfaces, ses comportements cognitifs interviennent et ont une grande influence. La vue, l’ouïe, le toucher, le raisonnement, la mémorisation, l’émotion sont des éléments qui méritent une attention sinon une étude pour une réussite dans la conception des interactions. Autant if faut connaître la machine autant il faut connaître l’homme. Il s’agit de faire une représentation de l’utilisateur pendant qu’il est en interaction avec la machine.

Objectifs de l’unité

1. Citer 3 modèles cognitifs et les décrire.

2. Décrire les différents types de mémoire

3. Enumérer les différentes étapes dans la théorie de l’action 4. Décomposer une action donnée en sous-tâches

5. Enumérer les avantages et les inconvénients de 3 modèles au choix

Termes clés

Tâche: Une tâche est une suite d’actions conduisant à un but

Mnème: Unité cognitive pour la mémoire courte Sensoriel: En relation avec les organes de sens Moteur: En relation avec les mouvements

Cognitifs: En relation avec la faculté de connaître, de percevoir.

(36)

Activités d’apprentissage

Activité 1 - Modèle du processeur humain

Introduction

Dans l’interaction homme - machine, il est nécessaire de connaitre l’utilisateur et la machine pour être sûr de concevoir des interfaces qui ne vont pas le frustrer. L’utilisateur reçoit l’information à travers ses organes de sens (vue, ouïe, toucher), l’enregistre dans sa mémoire pour un traitement par la machine. Dans l’interaction, il a un but visé, il obtient un résultat.

C’est dans le domaine de la connaissance de l’utilisateur que des auteurs ont élaboré des modèles, qui décrivent le comportement de l’homme pendant son interaction avec le système.

Parmi ces modèles, nous avons le modèle du processeur humain. Il permet de connaitre les limites de l’utilisateur pour ne pas faire des débordements.

Il préconise que l’humain, en tant que système de traitement de l’information est constitué de 3 sous-systèmes : sensoriel, moteur, cognitif. Chaque sous-système a une mémoire et un processeur.

Pour la mémoire, nous avons :

1. Capacité de mémoire (μ) 2. Persistance de mémoire (δ) 3. Pour le processeur, nous avons :

• Cycle de base du processeur (τ)

Détails de l’activité

Dans cette activité, il s’agit de mettre à la connaissance de l’apprenant les points suivants : sous-système sensoriel : associé aux sens. Il préconisé qu’augmenter l’intensité d’un stimulus permet d’accélérer la perception de ce stimulus. Il a un très court laps de temps (environ : 200ms). Persistance des informations : entre 200 ms (mémoire visuelle) et 1500 ms (mémoire auditive). Temps de cycle 100 ms (dépend de l’intensité des stimuli). Exemple : 2 mouvements séparés de moins de 100ms paraissent simultanés.

sous-système cognitif : Pour ce cas, il y a 2 mémoires :

(37)

mémoire à long terme : Stocakge des connaissances : capacité infinie, temps de stockage infini μ=∞ δ=∞

τ = 70 msec

Il est déconseillé d’uitliser des menus de longueur dépassant la capacité de la mémoire à court terme (7 + ou – 2 mnèmes).

sous-système moteur : responsable des mouvements. Il est préconisé que pour la manipulation directe il faut augmenter la taille de la cible ou réduire la distance main-cible pour plus d’éffficacité pour le déplacement (Loi de Fits)

Loi de Fits : T = a + b log(D / L), (T : temps minimal pour atteindre la cible, D : distance à la cible, L : taille de la cible, a et b : caractéristiques de la technique d’interaction)

Conclusion

Tenir compte des propriétés de ces sous – systèmes dans l’interaction homme – machine.

L’homme peut souvent avoir des illusions optiques, accoustiques et heptatiques. Limiter le nombre d’items d’un menu à 7

pour ne pas obliger à garder en mémoire l’état du système. Il a été remarqué que dans une très longue liste, on ne retient que le premier et le dernier élément. Ici la tâche de l’utilisateur est ignorée.

Évaluation

Décrire les 3 sous-systèmes dans le modèle du processeur humain Donner les capacités de chaque sous-système

Quel est le nombre maximum d’items qui convient pour une liste ? Pour quelle raison une liste ne doit pas être trop longue?

Activité 2 - La Théorie de l’Action de Norman

Présentation

Elaborée par D.A. Norman, elle fournit un cadre théorique pour mésurer la complexité d’utilisation d’une interface homme-machine.

Elle décrit les étapes cognitives pour la réalisation d’une tâche. Il y a un but qu’il faut atteindre : une représentation mentale de l’état du système que l’utilisateur souhaite avoir.

Détails de l’activité

La théorie de l’action est un autre modèle à connaitre. Il décompose les actions de l’utilisateur en 7 étapes regroupées en 2 phases. Dans ce modèle, toute action exécutée avec un but déterminé est un cycle aller-retour constitué de ces 2 phases :

(38)

phase 1 : Execution d’une commande

phase 2 : Évaluation, par rapport au but fixé, de la modification produite par la commande.

Pour la réalisation d’une tâche : distance execution

1. Établissement du but 2. Formation d’une intention

3. Spécification d’une suite d’actions 4. Exécution des actions

distance d’évaluation

1. Perception de l’état du système 2. Interprétation de l’état du système

3. Évaluation de l’état par rapport au but fixé

4. Il ya aller-retour entre ces 2 distances jusqu’à une satisfaction de l’utilisateur

Conclusion

Modélise les processus cognitifs qui régissent le comportement de l’utilisateur.

Évaluation

1. Citer les étapes concernées par une action

2. Enumérer les différentes phases pour chaque étape

3. Dans une saisie de texte, on voudrait mettre tous les mots ‘’consultation’’ en gras, servez – vous de la théorie de l’action pour décrire cette tâche.

Activité 3 - Interacting Cognitive Subsystems(ICS)

Introduction

ICS (Interacting Cognitive Subsystems) est un affinement du modèle du processeur humain.

Il repose sur une architecture parallèle multi – processus. Il ne cherche pas à expliquer la nature de l’information traitée, ni les mécanismes du traitement de l’information. Il tente de

(39)

Détails de l’activité

ICS structure le système de traitement de l’information humain en un ensemble de 9 sous- systèmes (voir fig 1) : morphono – lexical (MPL), propositionnel (PROP), implicationnel (IMPLIC), objet, (OBJ), acoustique (AC), articulatoire (ART), état physique (BS), visuel (VIS) et mouvement (LIMB).

Chaque sous-système est constitué d’ entrée, de sortie, de capacité de traitement de l’information et de mémoire locale.

En détails, nous avons :

les sous systèmes sensoriels (capture des données physiques) composés de :

• AC : ce que l’utilisateur entend

• VIS : ce que l’utilisateur voit

• BS : ce que l l’utilisateur sent de son propre corps

les sous systèmes perceptuels (structure abstraite des images et du son), qui comprennent :

• MPL : ce que l’utilisateur “entend dans la tête”

• OBJ : ce que l’utilisateur “voit dans la tête”

les sous systèmes centraux :

• PROP : ce que l’utilisateur sait a priori sur le monde (identité des objets, leurs relations)

• IMPLIC : ce que l’utilisateur sait a posteriori sur le monde (“feeling”, impressions)

les sous systèmes effecteurs :

• ART : ce que l l’utilisateur a l’intention de dire

• LIMB : ce que l’utilisateur a l’intention de faire

(40)

Conclusion

ICS fournit un modèle de perception, de cognition et d’action, il ne produit pas une

(41)

Évaluation

1. Citer les sous-systèmes du modèle ICS.

2. Décrire chaque sous -système

3. Etablir les liaisons entre les sous-systèmes 4. Citer les inconvénients du modèle ICS

Résumé de l’unité

Comprendre et modéliser les mécanismes cognitifs mis en jeu dans les activités humaines pendant l’interaction homme-machine. La planification et l’exécution d’un plan, la

mémorisation, l’apprentissage, la perception de notre environnement sont des éléments indispensables pour la réalisation d’une interface efficace. Une meilleure connaissance des activités cognitives de l’utilisateur est un garanti pour une réussite dans la conception des interfaces. L’information est reçues à travers la vue, l’ouïe, le toucher et elle est stockée dans la mémoire, soit de façon temporaire (dans la mémoire à court terme) ou de façon définitive dans la mémoire à long terme, ensuite elle est utilisée pour le raisonnement et la résolution de problèmes. Cependant les capacités humaines sont limitées, et tenir compte de cela en prenant l’homme comme étant un processeur, permet de bien concevoir des interfaces avec efficacité. Ces théories énoncées constituent de bons outils pour les concepteurs d’interfaces.

C’est pour cela que ces modèles (processeur humain, théorie de l’action et ICS) ont été les objets d’étude dans cette unité.

Évaluation de l’unité

Directives

A l’aide d’ordinateurs, test de rétention en mémoire pour un menu ayant plus de 7 items Décrire tous les processus de la théorie de l’action avec une tâche déterminée sur ordinateur (exemples : traitement de texte, calculs, tris)

Appliquer la loi de Fits à des cas concrets

En groupe et pas nécessairement en classe, faire une application de tous les modèles en pratique

Système de notation

1. Tâches, participation, questionnaires: 35%

2. Projet d’essai: 35%

(42)

Évaluation

Les étudiants recevront leurs les cours et feed-back dans le système de gestion de cours de l’UVA ou sur une plate-forme portail.

1. COUTAZ, Joëlle, Interfaces homme – ordinateur : conception et réalisation, 2. DUNOD – Informatique, Paris, 1990

3. Calvary G., Coutaz J., Thevenin D., Limbourg Q., Bouillon L.,Vanderdonckt J., A unifying reference framework for multi-target user interfaces, Interacting With Computers, Vol. 15/3, pp 289-308, 2003.

4. S. Card, T. Moran, A. Newell : The psychologie of Human-Computer Interaction, Lauwrence Erlbaum Assoc., 1983 D. Norman, S. Draper : User- centered System Design, Lauwrence Erlbaum Assoc., 1986.

5. T. Moran, J. Carroll : Design Rationale, Lauwrence Erlbaum Assoc., 1996.

(43)

(44)

Headquarters Cape Office Park Ring Road Kilimani PO Box 25405-00603 Nairobi, Kenya

Tel: +254 20 25283333 contact@avu.org oer@avu.org

Bureau Régional de l’Université Virtuelle Africaine à Dakar Université Virtuelle Africaine

Bureau Régional de l’Afrique de l’Ouest Sicap Liberté VI Extension

Villa No.8 VDN

B.P. 50609 Dakar, Sénégal Tel: +221 338670324 bureauregional@avu.org