1

IHM-Web

M2-IFL/DU-TICE, UPMCElisabeth.Delozanne@upmc.fr

1-Interaction Humains-Machines 2-Présentation de

l’UE

Cours 0

2

Qui suis-je ?Maître de Conférences Informatique Paris 6 (sept. 2007->…)Enseignante

IHM, Algorithmique, Programmation, TICE, Math U. Paris-Descartes, IUFM de Créteil, IUP U.. du Mans,

Secondaire

Chercheure Équipe Mocah du LIP6 Thèse en 1992 (Université du Maine) Centres d’intérêts

EIAH (Projets Élise, Repères, Pépite, Lingot) IHM, Conception participative et le prototypage

Congé pour recherches : U. Sydney, Télé-U. du Québec

3

Johan MichelChef de projet Pédagogique Speexx (Avr. 2007)

Création, mise en place et gestion de dispositifs d’apprentissage des langues

Maître d’apprentissage, Paris 3Enseignant

Programmation web, Algorithmique, POO, TICE, introduction aux métiers de la FOAD Langue

UPMC, U. du MaineChercheur

Thèse 2006 (U. du Maine) Centres d’intérêts

EIAH langues, FOAD langues

4

Interaction « Homme »/Machine

[8]

(Guide to usability, Open University, 1993)

5

Interaction Humains MachinesInteraction : Boucle

Les gens expriment leur intention Le logiciel interprète, exécute et

communique des résultats Les gens interprètent les modifications

Humains Les utilisateurs finaux, leurs collègues Leur activité, le contexte, leurs besoins,

leurs difficultés, leurs échanges via les réseaux

Machines Des (matériels et) logiciels Avec des contraintes techniques et

matérielles

6

Interface Homme-Machine

Partie d’une application qui permet Aux gens

d’interagir avec la machine À la machine

de communiquer des résultatsLogiciel/matériel

(I/O Brush)

7

Point de vue des usagers

Pour l’utilisateur produit = interface

8

Sigle IHM ?1970 Interface Homme/Machine

Apparition des interfaces graphiques Informatique personnelle

1980 Interaction Homme/Machine Informatique outil

1990 Interactions Humains-Machines TIC : informatique de communication

2000 Interactions des Humains avec des Mondes Informatique mobile, disséminée, vestimentaire,

invisible Réalité virtuelle, réalité augmentée, réalité mixte Interfaces tangibles Web dynamique, communautaire, temps réel

9

Prise en compte de l’utilisateur

Approche technocentrique centrée sur la machine et ses possibilités l’utilisateur doit s’adapter à la machine

Approche anthropocentrique centrée sur l’homme et ses besoins la machine doit s’adapter à l’utilisateur

Approche instrumentale co-adaptation des machines et des humains

10

IHM

Domaine qui s’intéresse à La conception Le prototypage L’évaluation

Des Interfaces et des Interactions Humains Machines

(Cours de James Landay)

11

Pourquoi étudier l’IHM ?1. Économiques

50 à 90 % des coûts de développement2. Sociales

des interactions mal conçues coûtent cher Argent :+ 5 % de satisfaction => + 85 % de hausse

(Landay) Vie : accident du Mont Saint-Odile

3. Scientifiques et techniques Défis

Personnes : imprévisibles Activités : complexes

Techniques, méthodes et démarches rigoureuses4. Professionnelles

Vous aurez à travailler pour des entreprises/services qui font des applications pour

des utilisateurs, pas seulement pour des machines

12

Qui conçoit des interactions ?Une équipe Idéalement

Spécialistes de l’interaction/l’expérience utilisateur (UX)

Ergonomes Marketing Rédacteurs techniques Ingénieurs spécialisés dans les tests Développeurs Informatiques Graphistes Utilisateurs

13

ReprochesLes concepteurs

ne sont pas formés à l’analyse de besoins, à travailler avec des

utilisateurs se centrent uniquement sur les fonctionnalités et

sur le fonctionnement du système traitent l’interaction en dernier pensent que tous les utilisateurs

leur ressemblent sont idiots

ne comprennent pas que les besoins évoluent au cours de conception

14

Conception techno-centrique

14

Deux écueils en images

Conception ego-centrique

(cours Landay)

15

Orientation du cours IHM

Humain•Plutôt que Machine

Interaction•Plutôt que Fonctionnalités

16

Objectifs de l‘UE

1. Sensibiliser aux démarches ergonomiques et centrée-

utilisateur

2. Faire connaître et pratiquer les techniques simples mais efficaces

d’évaluation et de conception centrée utilisateur de logiciels interactifs

3. Techniques de réalisation d’une interface Web (cours de M. Michel)

17

Compétences (1/2)Savoir 1. organiser

une démarche rigoureuse de conception centrée utilisateur

2. mettre en œuvre des techniques simples de recueil d’informations,

d’analyse et de conception : entretiens, remue-méninges, scénarios et

personas, prototypage, inspection heuristique, revue de conception

un plan d'évaluation dans un projet3. rédiger

une analyse de problème , un dossier de conception, un rapport d'évaluation d'un logiciel interactif

une fiche de lecture

18

Compétences(2/2) 4. trouver

les recommandations, guides de style, standards, design patterns, les expertises

5. organiser un travail en équipe

6. communiquer vos idées, les argumenter, les développer et les faire

évoluer

19

Organisation de l’UE2 enseignants :

E. Delozanne (UPMC) : Conception centrée utilisateur Johan Michel (Digital Publishing ) : Technologies Web

Apprentissage par confrontation de pratiques :

un mini-projet • mise en œuvre des techniques visées

vos expériences d’utilisation de logiciel retours sur votre travail

• du groupe• des enseignants

d’ interrogations théoriques : cours lectures personnelles :

• Avant le cours, Synthèse, Pour approfondir, Pour mettre en œuvre

20

Plan du cours

Cf le sitehttp://lutes.upmc.fr/delozanne/2013-2014/IHM-IFL-TICE/siteIHM/CoursIHM.htm

21

ProjetConception d’une application Web

Utilisateurs potentiels réels et accessibles (entretiens) Qui ne vous ressemblent pas trop

Une base de donnéesPar groupe de 2 ou 3Livrables réguliers

Déposer des documents sur un site web à date fixes Obtenir des retours rapides sur votre travail

Mettre en œuvre les différentes techniques étudiées en cours

Produire un prototype évalué par vos pairs fin janvier

22

Sujet

Pas trop ambitieuxDes utilisateurs

Accessibles (entretiens) Différents de vous

Exemples de sujets Sur la partie projet du site de l’UE-IHM

23

Déroulement

4 phases• Phase 0 : dépôt de sujet (11/9),

constitution des équipes (18/9)• Phase 1 : définition du problème (11/12)• Phase 2 : conception (20/12)• Phase 3 : développement (23/1)• Phase 4 : évaluation (29/1) à chaque cours

Devoir à rendre : en ligne Présentation de l’avancement du projet

24

Fiche de lecture

Choisir un texte et préparer une ficheThèmes: conception, évaluation,

prototypage, histoire de l’IHM, IHM &EIAHFiche

Identification de l’auteur de la fiche, du texte, des auteurs, de

l’ouvrage dont est issu le texte Résumé (ce que disent les auteurs) Analyse et commentaires (ce que vous en pensez) Les erreurs de vos prédécesseurs (Cf. méthodologie de

la recherche)

A rendre le 18 septembre sur Moodle

25

LecturesUne excellente introduction à l’ergonomie du logiciel

E. Brangier, J. Barcenilla, Concevoir un produit facile à utiliser : Adapter les technologies à l’homme, Editions d’organisation, 2003

Des méthodes, des conseils et des exemples D. Van Duyne, J. Landay, J. Hong, The Design of Sites: Patterns for creating

winning web sites, Prentice Hall, 2007 A. Boucher, Ergonomie Web, Eyrolles 2009

Manuel de référence B. Shneiderman, C. Plaisant, M. Cohen, and S. Jacobs, Designing

the User Interface: Strategies for Effective Human-Computer Interaction (5th Edition), Pearson, 672 Pages

Des textes à télécharger pour préparer chaque cours Poly sur les techniques de conception + textes de bases

Autres références : sur le site

26

Évaluation de l’UE ?

Première session : Contrôle continu (CC) P : Note de projet (sur 10)

PP : Note personnelle (sur 5) PE : Note équipe (sur 5)

Note personnelle L: Fiche de lecture IHM (sur 5) TP : Travaux pratiques en php, mysql, html (sur 5)

CC = PP + PE + L +TP

Deuxième session (NF) Examen : E2 NF = sup (E2, (E2 + CC)/2)

27

Devoir pour le 18/9

Projet : Réfléchir à un idée de projet Déposer une fiche descriptive sur Moodle Faire campagne pour trouver des équipiers

Lecture Choisir un texte Commencer la lecture Rédiger une fiche de lecture

28

En tant que concepteur…

RetenezCe n’est pas à l’utilisateur de s’adapter à vos idées, certes

géniales

Mais1. C’est au concepteur de s’adapter à l’activité de

l’utilisateur2. Les utilisateurs savent rarement spécifier leurs besoins 3. Les besoins évoluent avec le temps

Pour celaDes sciences (humaines) : ergonomie (des logiciels),

psychologie, sociologie Des méthodes : conception centrée utilisateurDes techniques : entretiens, incidents critiques etc.

29

Dicton du jour

Pour l’utilisateur produit = interface