1

UE 2 : CCU-Web

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

1-Conception Centrée Utilisateur

2-Présentation de l’UE

Cours 0 : Présentation de l’UE

2

Qui suis-je ?Projet CCUMaî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 MichelCours webChef 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

Bertrand Marne

Projet WebAttaché temporaire d’enseignement et de

recherche au LIP6Enseignant • SVT (jusqu’en 2014)Chercheur • Équipe Mocah du LIP6 • Thèse en juillet 2014

• Outils auteurs et jeux sérieux

5

Julien Chenat

Cours CCU-UX8 d’expérience : User Experience Designer• Architecte de l’information (Viadeo)• Consultant en ergonomie (Altima, Enjoy

Affinity, Tagora)• Chef de projet Web, Concepteur et

développeur Web

6

Conception Centrée Utilisateurs ?

D. Norman en 1986 , Norme ISO 13407 (1999) 5 principes

1. analyse des besoins des utilisateurs, de leurs tâches et

de leur contexte de travail

2. participation active de ces utilisateurs à la conception

3. répartition appropriée des fonctions entre les utilisateurs et

la technologie

4. démarche itérative de conception

5. intervention d'une équipe de conception multi-disciplinaire

7

Cycles de conception itérative

(cours de James Landay)

8

Ce module

Techniques pour Aborder l’interaction H/M du point de vue de

l’utilisateur Maintenir ce point de vue tout au long de la

conception

9

Interaction « Homme »/Machine

[8]

(Guide to usability, Open University, 1993)

10

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

11

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)

12

Point de vue des usagers

Pour l’utilisateur produit = interface

13

Pourquoi étudier la CCU ?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

14

Qui sont les concepteurs ?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

15

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

16

Conception techno-centrique

16

Deux écueils en images

Conception ego-centrique

(cours Landay)

17

Objectifs de l‘UE 1. Sensibiliser

aux démarches ergonomiques et centrée-utilisateur

2. Faire connaître et pratiquer 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 et B. Marne)

Html, php, javascript

18

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, maquette à main levée, prototypage, inspection heuristique, revue de conception

un plan d'évaluation dans un projet une base de données en PHP/MySQL un site Web en utilisant Javascript et un framework

HTML/CSS

19

Compétences (2/2) 3. rédiger

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

une fiche de lecture une bibliographie en utilisant un logiciel de gestion

de références 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

20

Organisation de l’UE4 enseignants :

J. Chenat, É. Delozanne : Conception centrée utilisateur Johan Michel, Bertrand Marne : Technologies Web

Apprentissage par confrontation de pratiques :

un 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

21

Plan du cours

Web• 5 cours Web (Html, Base de données, php)• 9 TP (Zotero, Javascript, Frameworks

HTML/CSS, encadrement du projet)CCU• 5 cours CCU• 8 TP encadrement du projet (analyse

concurrentielle, entretiens, personas, scénarios, revue de conception, évaluation)

Bibliothèque universitaire• 1 séance de présentation de la BUPMC

22

ProjetConception d’une application Web (mobile)

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

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

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

Pour progresser (pas sanctionner, seconde chance)Mettre en œuvre les différentes techniques étudiées en

coursProduire un prototype évalué par vos pairs fin janvier

23

Sujet

Pas trop ambitieuxDes utilisateurs

Accessibles (entretiens) Différents de vous

Exemples de sujets

http://lutes.upmc.fr/delozanne/2014-2015/IHMweb/projetIHM.htm

24

Déroulement

4 phases• 0 : dépôt de sujet (10/9), constitution des

équipes (17/9)• 1 : définition du problème (12/11)• 2 : conception (17/12)• 3 : développement (27/1)• 4 : évaluation (28/1)

25

Projet encadré

Présentation des Techniques• Cours, exercices• Fiches de synthèse• BibliographieMise en œuvre séances de projet

Rendre un document (en ligne) Présenter l’avancement du projet

(phase 0-2) Développer (phase 3) Évaluer (phase 4)

26

Fiche de lecture

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

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

A rendre le 1 ier octobre sur MoodleConsignes et conseils :http://lutes.upmc.fr/delozanne/2014-2015/IHMweb/LectureCCU.htm

27

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 A. Boucher, Ergonomie Web, Eyrolles 2009 S. Daumal,. Design d'expérience utilisateur: Principes et méthodes UX.

Éditions Eyrolles, 2012 S. Krug, Don't make me think, Pearson France, 2012 L. Wroblewski, Mobile first, Éditions Eyrolles 2011 A. Walter, Design Emotionnel, Éditions Eyrolles 2011

Des fiches de synthèse à chaque étape du projetAutres références

http://lutes.upmc.fr/delozanne/2014-2015/IHMweb/LectureCCU.htm

28

Contrôle de connaissances

Première session : Contrôle continu (CC) P : Note de projet (sur 20) L: Fiche de lecture IHM (sur 20) TP : Travaux pratiques en php, mysql, html (sur 20)CC = (2P+ L +TP)/4

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

29

Devoir pour le 10/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 (1/10)

30

En tant que concepteur…

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

géniales

Mais1. C’est à vous d’adapter l’application à 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.

31

Dicton du jour

Pour l’utilisateur produit = interface