Download - 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
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