presentation inf03 : expérience utilisateur

MASTER ARCHITECTURE DE L’INFORMATIONINF03 “Approche utilisateurs et design web”

AGROUPE

Mercredi 23 avril 2014

Loup Cellard . Joachim Chevry . Camille Leblond . Laetitia Pot

1

LE CONTEXTERappel de la commande . L’équipe Archinfo . Le Commanditaire

2

LA COMMANDE INF03 Une solution pour améliorer l’architecture de l’information au sein de l’Unité d’Enseignement : “INF03 Approche utilisateurs et design web”, en agrégeant les contenus et les fonctionnalités existantes et, si besoin, en proposant de nouvelles fonctionnalités

Loup CellardCamille LeblondJoachim ChevryLaetitia Pot

L’ÉQUIPEJean-Michel SalaünDirecteur pédagogique du Master Architecture de l’information

LE CLIENT A

3

LA COMMANDE INF03 l’architecture de l’information

au sein de l’Unité d’Enseignement : “INF03 Approche utilisateurs et design web”,

et les fonctionnalités existantes et, si besoin, en proposant de nouvelles fonctionnalités.

Jean-Michel SalaünDirecteur pédagogique du Master Architecture de l’information.

LE CLIENTResponsables pédagogiques Professeurs de l’UE INF03Étudiants dans l’UEPartenaires de l’UE

UTILISATEURS

L’interface proposée devra tenir compte des outils existants et des réalisations déjà effectuées par l’équipe support du master : intégration d’Aloes, présence sur Hypothèses

CONTRAINTES

4

MÉTHODE DE TRAVAILLes entretiens . Les ateliers de travail . Le productions et les tests

5

6

Équipe pédagogique

ENTRETIENS ET TESTS

Candidats

Étudiants

7

Équipe pédagogique

ENTRETIENS ET TESTS ATELIERS DE TRAVAIL

Candidats

Étudiants

Card sorting

Rédaction des personas

Brainstorming des Scenarii

Atelier de codage

8

Équipe pédagogique

ENTRETIENS ET TESTS ATELIERS DE TRAVAIL PRODUCTIONS

Candidats

Étudiants

Card sorting

Rédaction des personas

Brainstorming des Scenarii

Atelier de codage

Mapping des outils

Personas

3x Wireframes

3x Scenario d’usage

Prototype

Équipe pédagogique

ENTRETIENS ET TESTS ATELIERS DE TRAVAIL PRODUCTIONS

Candidats

Étudiants

Card sorting

Rédaction des personas

Brainstorming des Scenarii

Atelier de codage

Mapping des outils

Personas

3x Wireframes

3x Scenario d’usage

Prototype

9

LES OUTILS ET LES TRACESPHASE D’ENTRETIENS ET TESTS

LE PAD

LES OUTILS ET LES TRACESATELIERS DE TRAVAIL

LES OUTILS ET LES TRACESPRODUCTIONS

Accéder et editer le planning

Informer sur le master

Publier les travaux

Archiver les travaux

Communiquer sur le master

partager de la veille

Communiquer à distance, Réunions

Construire le plan de cours

Lier les cours au referentiel de compétences

Homogeniser les UE

Communiquer à distance (Webinaire)

Annoter des documents

Communiquer de manière asynchrome

Informer sur les déroulements du cours

Diffuser des documents

Evaluer les travaux des étudiants

Dépots et telechargements des ressources

lier les cours au réferentiel de compétences

Partager de la veille

Communiquer de manière asynchrome

Archivages des documents de groupe

Produire de manière synchrome et asynchrome sur des docs

Prendre des notes sur les cours

Verifier la compréhension des cours

Coordination

Publication Communication

Production

LES OBJECTIFS3 enjeux clés : la coordination, la communication, la production des contenus

13

•Faciliter l’accès et la compréhension des ressources du module

•Réaliser une interface permettant de distribuer les outils déjà existants (au lieu de les réinventer)

•Prendre en compte les profils et besoins très divers des utilisateurs des ressources

1

2

3

14

•Gagner en visibilité et en notoriété afin de valoriser le master à l’extérieur et de recru-ter des étudiants (en formation initiale et en formation continue)

•Mettre en avant l’enseignement d’UX, très peu présent en France

•Apporter une solution déclinable aux autres Unités d’Enseignement du master

4

5

6

15

Jean, enseignant dans le Master AI

Age : 43 ans

Sexe : Homme

Etat civil : Marié

Statut professionnel : Enseignant

Ville : Meyzieu

Jean est intéressé par utiliser les technologies web pour enrichir ses méthodes

pédagogiques et pour en expérimenter de nouvelles. Il est très occupé par ses

multiples responsabilités, il anime plusieurs cours, encadre certains étudiants et

dirige des recherches.

Son caractère

Pratiques

Équipement

Recherche sur le web

Réseaux sociaux

Programmation Informatique

Travaux collaboratifs

Ses activités sur la plateforme

Usage intense

Usage fréquent

Usage rare

Ses attentes

Ses motivations Ses freins

� �� -HPYL� LU� ZVY[L� X\L� SLZ� t[\KPHU[Z�deviennent autonomes.

���3H�T\S[PWSPJP[t�KLZ�V\[PSZ�n�WYLUKYL�en main.

���0UMVItZP[t�SPt�n�S�HJJ\T\SH[PVU�KLZ�sources d’informations.

���7V\]VPY�JYVPZPLY�L[�[LZ[LY�KLZ�Tt[OVKLZ�WtKHNVNPX\LZ�KPMMtYLU[LZ�

���7V\]VPY�JV�t]HS\LY�ZLZ�t[\KPHU[Z

���(]VPY�WS\Z�KL�SPILY[tZ�H\�UP]LH\�KLZ�TV`LUZ�K»HYJOP]HNL�KLZ�JV\YZ�!��HJJuZ��WtYLUUP[t��WYP]HJ �̀

Dro

pbox

���8\L�SLZ�V\[PSZ�U\TtYPX\LZ�T»HPKLU[n�JVUZ[Y\PYL�TVU�JV\YZ�

���-H]VYPZLY�SH�JYtH[P]P[t�KLZ�t[\KPHU[ZX\P�LU�YL[V\Y�TL�WV\ZZL�n�PUUV]LY�

ALIVR BLES

Accéder et editer le planning

Informer sur le master

Publier les travaux

Archiver les travaux

Communiquer sur le master

partager de la veille

Communiquer à distance, Réunions

Construire le plan de cours

Lier les cours au referentiel de compétences

Homogeniser les UE

Communiquer à distance (Webinaire)

Annoter des documents

Communiquer de manière asynchrome

Informer sur les déroulements du cours

Diffuser des documents

Evaluer les travaux des étudiants

Dépots et telechargements des ressources

lier les cours au réferentiel de compétences

Partager de la veille

Communiquer de manière asynchrome

Archivages des documents de groupe

Produire de manière synchrome et asynchrome sur des docs

Prendre des notes sur les cours

Verifier la compréhension des cours

Coordination

Publication Communication

Production

MAPPING DES FONCTIONNALITÉS PERSONAS WIREFRAME

SCENARII D’USAGE

PROTOTYPE

CAHIER DES CHARGES

WIREFRAME

WIREFRAME

Objectifs

Mapping

Personas Scenarii d’usage

Wireframes

17

Prototype

MAPPINGMapping des fonctionnalités et des outils identifiés lors des entretiens

18

Accéder et editer le planning

Informer sur le master

Publier les travaux

Archiver les travaux

Communiquer sur le master

partager de la veille

Communiquer à distance, Réunions

Construire le plan de cours

Lier les cours au referentiel de compétences

Homogeniser les UE

Communiquer à distance (Webinaire)

Annoter des documents

Communiquer de manière asynchrome

Informer sur les déroulements du cours

Diffuser des documents

Evaluer les travaux des étudiants

Dépots et telechargements des ressources

lier les cours au réferentiel de compétences

Partager de la veille

Communiquer de manière asynchrome

Archivages des documents de groupe

Produire de manière synchrome et asynchrome sur des docs

Prendre des notes sur les cours

Verifier la compréhension des cours

Coordination

Publication Communication

Production

20

Google Agenda

hypotheses

Le site ENS

Le site du master

Twitter

hangout

Moodle

Crocodoc

Google Drive

Cahier de cours

Le PAD

Adresse mail ENS

Aloes

Coordination

Publication Communication

Production

19

OBJECTIFS COMMENT ? AVEC QUOI ?

● Quels sont les outils existants à prendre en compte ?

● Quelles sont les fonctionnalités de la plateforme ?

● Méthode : Ateliers brainstorming

● Déroulé du test (1h30) :○ Présentation de nos hypothèses○ Brainstorming ○ Debrief et synthèse des idées○ Définition des pro-chains enjeux et rendez-vous

RÉSULTATS

21

● Prise de notes ● Définition des objec-tifs de la plateforme

● Évolutions : ○ Remplacer Moodle par Own Cloud○ Remplacer les pads par le cahier de cours

MÉTHODOLOGIE DE TEST

PERSONASL’enseignant, l’étudiant archinfo, et l’étudiant candidat

22

Jean, enseignant dans le Master AI

Age : 43 ansSexe : HommeEtat civil : MariéStatut professionnel : EnseignantVille : Meyzieu

Jean est intéressé par les technologies web et les nouvelles méthodes pédago-giques. Il est très occupé par ses multiples responsabilités, il anime plusieurs cours, encadre certains étudiants et dirige des recherches.

Son caractère

Pratiques

Équipement

Recherche sur le web

Réseaux sociaux

Informatique

Travaux collaboratifs

Ses activités sur la plateforme

Usage intense

Usage fréquent

Usage rare

Ses attentes

Ses motivations Ses freins

• Faire en sorte que ses étudiants aient bien assimilé son cours

• Participer à un master en création laissant de la place à la créativité pédagogique

• La multiplicité des supports à prendre en main

• L’accumulation des mails

• Optimiser son temps

• Pouvoir évaluer ses étudiants

• Avoir des libertés dans ses méthodes pédagogiques

Sophie, étudiante en Master Architecture de l’information

Age : 23 ansSexe : FémininEtat civil : CélibataireStatut professionnel : EtudianteVille : Lyon

Sophie est quelqu’un de curieux, passionnée par les nouvelles technologies. Intéressée par les problématiques du web, elle n’a pourtant aucune connais-sance technique. Sérieuse et attentive aux autres, elle aime travailler en groupe et acquiert, grâce au master Architecture de l’Information, des méthodes et outils collaboratifs (pad collaboratif, Google Drive, Crocodoc, etc.). Elle regarde 60 000 fois par jour sa boite e-mail.

Son caractère

Pratiques

Équipement

Recherche sur le web

Réseaux sociaux

Informatique

Travaux collaboratifs

Ses activités sur la plateforme

Usage intense

Usage fréquent

Usage rare

Ses attentes

Ses motivations Ses freins • Développer ses compétences et apprendre les méthodes UX afin de devenir UX designer.

• Travailler de manière collaborative et pouvoir compter sur les autres étudiants pour la prise de notes

• Accroitre son identité numérique, sa visibilité sur le web via les articles publiés dans hypothèse.org.

• Devoir répéter des informations à différents interlocuteurs

• L’accumulation des mails (générés par le Forum Moodle)

• Elle se perd dans la démultiplica-tion des outils, les mots de passe, les differents accès...

• Que le travail soit davantage mutualisé. • Qu’elle puisse travailler aussi bien sur son Macbook Pro, son portable ou sa tablette. • Qu’il y ait plus de transparence dans l’évaluation et le contenu du cours.• Se faire un réseau de professionnel

Louis, candidat potentiel du Master AI

Age : 24 ansSexe : HommeEtat civil : CélibataireStatut professionnel : Etudiant en L3 Sciences de l'InformationVille : Marseille

Louis est quelqu’un de sociable, intéressé par les problématiques du web et plus particulièrement par les démarches UX. S’il n’a pas énormément d’expérience dans le domaine, sa curiosité l’a poussé à se renseigner et à se former par lui-même. Il souhaiterait acquérir des notions plus théoriques et travailler en équipe sur des projets concrets.

Son caractère

Pratiques

Équipement

Recherche sur le web

Réseaux sociaux

Informatique

Travaux collaboratifs

Ses activités sur la plateforme

Usage intense

Usage fréquent

Usage rare

Ses attentes

Ses motivations Ses freins

• La crédibilité que lui évoque une ENS

• Le fait qu’il s’agit d’une discipline nouvelle

• Le choix varié des UE qui lui est proposé et la possibilité d’avoir un parcours personnalisé

• Le fait de devoir chercher long-temps des informations précises sur les cours

• La difficulté à prendre contact avec un ancien étudiant

• Avoir une meilleure vision des modalités d’accès au master

• Faciliter le contact avec les étudiants du master

• Avoir une meilleure compréhension de la construction du master

• Appréhender de nouvelles notions en UX (liens vers des ressources

exterieures : blogs, sites, livres)

• Obtenir des pistes pour construire son potentiel dossier de candida-ture

Étudiant AI CandidatEnseignant

23

24

COMMENT ? AVEC QUOI ?

● Est-ce que nos per-sonas sont pertinents ?

● Est-ce que les us-ages sur la plateforme sont conformes à la réalité ?

● Méthode : Entretiens semi-directifs

● Déroulé du test (20min) : ○ Présentation du test○ Questions/réponses○ Avis global○ Débrief

● Enregistrement audio

● Prise de notes

● Modifications des ac-tivités sur la plateforme

● Modifications des freins et des attentes

MÉTHODOLOGIE DE TESTOBJECTIFS RÉSULTATS

Jean, enseignant dans le Master AI

Age : 43 ans

Sexe : Homme

Etat civil : Marié

Statut professionnel : Enseignant

Ville : Meyzieu

Jean est intéressé par utiliser les technologies web pour enrichir ses méthodes

pédagogiques et pour en expérimenter de nouvelles. Il est très occupé par ses

multiples responsabilités, il anime plusieurs cours, encadre certains étudiants et

dirige des recherches.

Son caractère

Pratiques

Équipement

Recherche sur le web

Réseaux sociaux

Programmation Informatique

Travaux collaboratifs

Ses activités sur la plateforme

Usage intense

Usage fréquent

Usage rare

Ses attentes

Ses motivations Ses freins

� �� -HPYL� LU� ZVY[L� X\L� SLZ� t[\KPHU[Z�deviennent autonomes.

���3H�T\S[PWSPJP[t�KLZ�V\[PSZ�n�WYLUKYL�en main.

���0UMVItZP[t�SPt�n�S�HJJ\T\SH[PVU�KLZ�sources d’informations.

���7V\]VPY�JYVPZPLY�L[�[LZ[LY�KLZ�Tt[OVKLZ�WtKHNVNPX\LZ�KPMMtYLU[LZ�

���7V\]VPY�JV�t]HS\LY�ZLZ�t[\KPHU[Z

���(]VPY�WS\Z�KL�SPILY[tZ�H\�UP]LH\�KLZ�TV`LUZ�K»HYJOP]HNL�KLZ�JV\YZ�!��HJJuZ��WtYLUUP[t��WYP]HJ �̀

Dro

pbox

���8\L�SLZ�V\[PSZ�U\TtYPX\LZ�T»HPKLU[n�JVUZ[Y\PYL�TVU�JV\YZ�

���-H]VYPZLY�SH�JYtH[P]P[t�KLZ�t[\KPHU[ZX\P�LU�YL[V\Y�TL�WV\ZZL�n�PUUV]LY�

WIREFRAMESSilicon Valley . Mashup . Coquillage

26

Wireframe Coquillage Wireframe Silicon Valley Wireframe Mashup

27

28

29

30

31

COMMENT ? AVEC QUOI ?

● Est-ce que l’architec-ture de l’information cor-respond à leurs besoins et attentes ?

● La plateforme est-elle pertinente et cohé-rente en terme d’utilis-abilité ?

● Méthode : Entretiens semi-directifs

● Déroulé du test (30min) : ○ Présentation du test○ Critères Bastien & Scapin○ Avis global○ Débrief

● Enregistrement audio et screen record-ing avec QuickTime

● Prise de notes

● Coquillage : modifica-tions des liens et ajout de l’ours

● Mashup : remplacer “Publications” par “Res-sources” et supprimer Twitter

● Silicon Valley : Rem-placer “Présentation” par “Accueil”

MÉTHODOLOGIE DE TESTOBJECTIFS RÉSULTATS

32

SCENARII D’USAGESilicon Valley . Mashup . Coquillage

33

Louis souhaite prendre contact avec des étudiants du master Archinfo.

Sophie souhaite prendre des notes sur le cours avec les autres étudiants.

Jean souhaite mettre à disposition des élèves le support du prochain du cours

Wireframe Silicon Valley

Wireframe Coquillage

Wireframe Mashup

34

35

36

COMMENT ? AVEC QUOI ?

● L’action demandée est-elle réalisable par l’utilisateur ?

● Les interactions de-mandées sont-elles lo-giques ?

● Méthode : test utili-sateurs

● Déroulé du test (30min) : ○ Présentation du test et instructions○ Réalisation du test par l’utilisateur○ Débrief

● Enregistrement audio et vidéo

● Prise de notes

● Modification principa-lement sur les wireframes

● Amélioration des inter-actions sur Silicon Valley

● Amélioration du mashup (barre de menu, liens)

MÉTHODOLOGIE DE TESTOBJECTIFS RÉSULTATS

37

PROTOTYPERéalisation du prototype Coquillage en HTML5, CSS3 et jQuery

238

39

40

COMMENT ? AVEC QUOI ?

● Évaluer l’affordance des interactions de l’outil

● Méthode : test utili-sateurs● Déroulé du test (20min) :

○ Observation des ac-tions intuitives○ Explicitation de la part du testeur

● Prise de note ● Changement de style du curseur● Modification du hover

MÉTHODOLOGIE DE TESTOBJECTIFS RÉSULTATS

BILANPoints positifs . Points négatifs . Bilan

41

42

Scénario Persona lié Points forts Points faibles Coût de réalisation

MashupJean

(enseignant du master)

Travail collaboratif Accès aux ressources

Valorisation faible du master Faible

Silicon Valley

Louis (candidat pour le master)

AttractifRéalisation et mises à

jour des contenus coûteuses

Fort

CoquillageSophie

(étudiante dans le master)

Re-distribution des ressources

Amélioration de l’accès aux outils

mais pas leurs administrations

Moyen

PROPOSITIONS D’ÉVOLUTION

le développement de l’outil sous forme de plugin navigateur (Firefox/Chrome)

PRINCIPAUX ENSEIGNEMENTS DU “CAS D’ÉCOLE”

Prise en compte des problèmatiques de l’utilisateur dans la démarche de conception

L’intégration d’éléments méthodologiques, centrés utilisateurs dans la conception des productions