Livrables

#1 Première version de la maquette interactive et protocole du test utilisateur

Ce livrable vous permet de jeter les bases pour vos tests utilisateurs avec la préparation de la maquette interactive et du scénario/protocole de passation.

Consignes

Créez et publiez à travers le logiciel Axure une maquette interactive présentant les caractéristiques suivantes :

• Créez entre 20 et 30 pages de votre site selon l'architecture de l'information du projet ERGO I
• Créez les contenus textuels et graphiques des pages
• Reliez les pages avec un menu de navigation et/ou des liens hypertextuels dans les contenus des pages

Pour le scénario du test utilisateur, rédigez un protocole de passation que vous garderez avec vous pendant les tests. Ce protocole doit contenir les éléments suivants :

• Un message d'accueil et les informations nécessaires pour les utilisateurs (e.g. durée du test, ...) Soyez clair-es et précis-es.
• Une mise en situation basée sur l'activité persona de ERGO I
• Un test de 5 seconds
• La description de 4 ou 5 tâches cohérentes avec les finalités de votre projet et la mise en situation à partager avec les participants.
• Les actions nécessaires pour résoudre les tâches. En cas de plusieurs possibilités, décrivez la solution plus rapide/optimale.
• La passation d'une échelle/questionnaire UX (e.g. UEQ, AttrakDiff, SUS, ...)
• Un entretien post-test avec des questions pour mieux aborder certains détails du test.
• Un débriefing final avec rémerciements.

Contraintes

Votre maquette interactive doit respecter les contraintes suivantes :

• Les deux personnes du binôme doivent participer à la création des pages et contenus
• Vous devez publier la maquette à travers le système de publication de Axure. Si le contenu de votre site l'exige, vous pouvez protéger la maquette avec un mot de passe.
• Vos pages doivent présenter des contenus suffisamment aboutis pour que votre test utilisateur soit informatif. N'utilisez pas de placeholders trop évidents et qui ne servent à rien.
• Si votre site propose des fonctionnalités dynamiques (e.g. blog), créez les pages seulement si elles sont nécessaires au test utilisateur. Autrement, placez un message qui informe l'utilisateur que la fonctionnalité n'est pas implémentée.

Votre scénario du test utilisateur doit respecter les contraintes suivantes :

• Planifier une durée du test entre 15 et 20 minutes maximum
• Vos passations doivent être enregistrées audio/vidéo. Pensez à informer les utilisateurs lorsque vous prenez RDV avec eux pour éviter des désistements à la dernière minute par des personnes qui ne sont pas à l'aise avec l'enregistrement.
• Vous devez faire passer le test complet (à l'exception du test des 5 seconds, voir point suivant) à 3 utilisateurs du public cible pour chaque personne du binôme (donc 6 au total).
• Vous devez faire passer le test des 5 seconds à au moins 3 utilisateurs pour chaque personne du binôme (donc au moins 6 au total). Ces personnes peuvent être les mêmes des tâches ou d'autres personnes. S'il ne s'agit pas des mêmes personnes, pensez à bien le noter en prévision du rapport individuel/final.
• Les passations sont individuelles pour chaque personne du binôme et les résultats du test seront d'abord traités de manière indépendante dans le rapport individuel. Votre collègue peut assister, mais sans intervenir activement.
• Vos tâches doivent prévoir une solution atteignables à travers les manipulations et informations disponibles dans votre maquette. Évitez les instructions directes et donnez à l'utilisateur le contrôle de la situation.
• Chaque tâche doit commencer depuis la page d'accueil de votre site. Si l'utilisateur a déjà trouvé l'informations dans une tâche précédente, demandez-lui de répéter quand même les manipulations.

Avant d'entamer le test, vous devez avoir reçu le feu vert de l'équipe enseignante.

Conseils

Pour votre maquette interactive :

• Rappelez-vous du processus itératif du design centré utilisateur. Développez seulement les éléments fondamentaux à votre projet et ne passez pas trop de temps sur les détails graphiques.
• Esquissez d'abord sur papier et une fois convaincus, créez la maquette avec Axure.
• Utilisez le plus possible des composantes/éléments réutilisables pour les parties communes des pages (e.g. menu de navigation, header, footer).

Pour votre test utilisateur :

• Créez deux documents de passation. Un complet de tous les détails (i.e. celui que vous rendez pour le feu vert) et l'autre avec seulement les informations nécessaires aux participants (mise en situation et descriptif des tâches).
• Vos participants doivent être représentatifs du public cible. Si votre public cible est large, identifiez un sous-groupe plutôt homogène. Pour que vos tests soient informatifs, il faut que vos utilisateurs partagent des caractéristiques communes.
• Évitez des professionnels du design ou du développement web, leur perspective est souvent focalisée sur les détails de conception plutôt que sur les contenus.
• Évitez des personnes avec peu d'expérience avec le web ou vous risquez que les résultats du test reflètent les difficultés générales plutôt que les particularités de votre site.
• Essayez de faire les passations le plus tôt possible, la rédaction du rapport prend du temps.
• Si vous êtes indécis sur deux variantes d'une même page, vous pouvez éventuellement montrer la variante que vous n'avez pas incorporée dans le test aux utilisateurs pour avoir un avis dans la phase post-test.
• Pendent le test, assumez une attitude bienveillante et accompagnez les utilisateurs en fonction des caractéristiques d'un bon facilitateur discutées pendant le cours intensif.

#2 Première version du prototype mobile

Ce livrable vous permet de vous familiariser avec la conception mobile-first.

Consignes

Créez une version mobile d'un site ou application web et enregistrez en vidéo une séquence d'interactions qui montrent l'intérêt de votre dispositif.

Choisissez entre deux options pour la création d'une version mobile d'un site ou application web :

1. Un prototype papier à dessiner à la main et à animer avec des techniques bricolage
2. Une maquette interactive à développer avec l'outil de votre choix

Au niveau du contenu :

• Vous pouvez faire la version mobile sur le même site du projet ou sur un autre sujet de votre choix.
• Vous pouvez faire un site informatif ou simuler une petite application dont vous choisissez les finalités.

Contraintes

Dans les deux cas :

• Créez entre 5 et 10 écrans maximum. Il ne s'agit pas d'une maquette aussi aboutie que pour le site web !
• Envisagez la possibilité d'effectuer une action ou obtenir une information saillante, pas simplement action de login ou enregistrement sur une plateforme.
• La vidéo de votre manipulation doit durer entre 30 et 60 seconds maximum.
• Vous pouvez expliquer ce que vous faites ou laisser les images sans commentaire.
• Publiez la vidéo sur une plateforme de streaming de votre choix, sur le serveur tecfaetu.unige.ch, ou à travers un gestionnaire de fichiers dans le cloud (e.g. OneDrive Unige, Switchdrive, ...).

Pour le prototype papier :

• Aucune contrainte particulière, du moment qu'on reconnaît qu'il s'agit d'un prototype pour mobile, vous pouvez bricoler comme vous voulez

Pour la maquette interactive :

• Vous pouvez utiliser encore Axure ou adopter un autre outil que vous connaissez déjà ou que vous voulez explorer davantage.
• Vous pouvez créer votre maquette interactive au degré de fidélité de votre choix (e.g. low-fi ou high-fi).

Conseils

• Mettez-vous dans l'esprit mobile-first et concentrez-vous sur les aspects fonctionnels les plus importants.
• Si vous gardez le même sujet du projet, vous pouvez par exemple développer les actions nécessaires pour effectuer une ou deux tâches de votre scénario test utilisateur et montrer les manipulations nécessaires dans la version mobile.

#3 Version finale prototype mobile

Suite aux feedbacks de l'équipe enseignante et de vos collègues, modifiez la première version du prototype mobile et publier une nouvelle vidéo avec la manipulation.

Consignes

Même consignes de la première version. Souvenez-vous de maintenir la vidéo à la première version pour qu'on puisse comparer.

Contraintes

Mêmes contraintes de la première version.

Conseils

Optionnel :

• Si vous pensez montrer la vidéo dans votre portfolio personnel, vous pouvez éventuellement produire une page HTML5 avec la vidéo et quelques informations complémentaires.
• Si vous avez créé une maquette interactive et le logiciel de prototypage le permet, vous pouvez l'ajouter dans la page pour que les utilisateurs puissent tester directement.

#4 Rapport du test utilisateur sur la première version de la maquette

Le rapport individuel présente les résultats des passations que chaque personne a effectuées de manière indépendante. Même si des parties du rapport sont communes, à ce stade vous devez rédiger chacun pour son compte.

Consignes

Rédigez un rapport qui illustre les tests utilisateurs que vous avez effectués individuellement. Le rapport doit suivre les indications et la structure du template fourni.

Template du rapport individuel

Contraintes

Votre rapport doit respecter ces contraintes :

• Dans la section Analyse détaillée des problèmes majeurs, limitez votre analyse à 2 ou 3 problèmes maximum que vous jugez les plus critiques. Vous n'êtes pas forcé-es à choisir les mêmes problèmes de votre collègue. Au contraire, il serait mieux que vous vous ne consultez pas sur cet aspect de manière à effectuer deux analyses séparées et pouvoir par la suite les mettre en commun pour le rapport final.
• Au moins l'un problème analysés doit être accompagné par un extrait vidéo de la passation d'un utilisateur d'une durée maximum de 60 seconds. Mettez le lien vers la vidéo dans le texte.
• Votre rapport ne doit pas dépasser les 6'000 mots. Ne comptez pas dans le calcul la page de garde, la bibliographie, les annexes et la partie autoscopique.
• Votre rapport doit présenter une page de garde qui indique clairement votre nom, la date de rédaction et l'intitulé du document. Évitez d'intituler votre document Rapport individuel et trouvez plutôt un titre intéressant pour un commanditaire.
• Vos titres de sections et vos pages doivent être numérotés. Évitez les entêtes ou pieds de page sur toutes les pages.
• Vos figures et tableaux doivent être numérotés et avec une légende. Cette contrainte ne s'applique pas aux annexes.
• Vous pouvez créer directement des liens dans le texte, mais ajoutez également une note en bas de page à la fin du lien dans laquelle vous mettez l'URL in extensio.
• Citez correctement dans le texte et dans la section références/bibliographie les ressources. Utilisez les normes adoptées dans votre domaine académique ou professionnel (e.g. APA pour étudiant-es MALTT).

Conseils

Quelques conseils pour rendre un bon travail :

• Imaginez qu'il s'agit d'un document que vous partagez avec des clients ou d'autres professionnels du UX.
• Insérez dans le texte des éléments graphiques (e.g. captures d'écran) seulement s'ils apportent vraiment de la valeur, si non placez-les en annexe.
• Vous aurez le droit de maintenir des parties de vos rapports individuels respectifs dans le rapport final commun. Vous avez donc un double intérêt à produire un bon rapport.

#5 Proposition d'un test A/B fictif pour obtenir un jeu de données

Ce livrable vous permet d'obtenir des données fictives en relation avec les objectifs de votre test A/B afin de produire par la suite un rapport sur la base de l'exemple vu pendant le cours.

Consignes

Construisez une proposition de test sur la base des éléments suivants :

• Identifiez une page de votre projet ou d'un site existant sur laquelle vous voulez effectuer votre test.
• À l'intérieur de cette page, identifier un élément spécifique dont vous voulez tester deux variantes. Il peut s'agit d'un bouton, d'une image, de la position d'un élément, son style, ... À vous de voir.
• Identifiez une mesure cohérente avec l'utilisation d'un site web qui permet de déterminer l'impact de votre variation, comme par exemple le temps de permanence sur une page, le temps de fixation d'un élément, le nombre d'utilisateur qui ont effectué (ou pas) une certaine action, ...
• Illustrez et justifiez vos attentes par rapport au test

Sur la base de votre proposition, vous recevrez un jeu de données fictif qui vous permettra de mener un test statistique pour déterminer si une variante génère des mesures plus intéressantes par rapport à l'autre.

Contraintes

Aucune spécifique, du moment que vos versions et votre mesures sont réalistes.

Conseils

Inspirez-vous des exemples vus pendant les cours et choisissez une mesure que vous comprenez bien.

#6 Rapport test A/B fictif

Ce livrable vous permet de formaliser les résultats du test A/B effectué avec les données fictives dans un rapport, dans lequel vous formulez un avis d'intervention sur la base de ce même résultat.

Consignes

Rédigez un rapport similaire aux deux exemples vus pendant le cours et que vous retrouvez également ici.

• Rapport test A/B sur le temps de fixation
• Rapport test A/B sur la fréquence de clics sur un bouton

Contraintes

Le rapport doit respecter les contraintes suivantes :

• Longueur de 2 à 4 pages maximum.
• Les deux versions doivent figurer clairement, mais vous ne devez pas forcément afficher toute la page du site ou l'interface de l'application.
• Le test statistique effectué ainsi que les résultats obtenus doivent figurer de manière claire et avec les indices adéquats.

Conseils

Quelques conseils pour rendre un bon rapport :

• Ne vous focalisez pas exclusivement sur la p-valeur. Regardez la différence entre les deux versions et évaluez si cette différence peut vraiment avoir des conséquences pratiques importantes.
• Le rapport est moins formalisé des rapports individuels et final, mais essayez néanmoins de rédiger un document qu'on puisse imaginer de partager avec des clients.

#7 Deuxième version de la maquette et rapport final

Le rapport final vous permet d'illustrer l'ensemble de votre projet en combinant les informations issues des tests utilisateurs effectués par chaque membre du groupe. Ces informations sont utilisées pour apporter des remédiations à votre première version de la maquette et en proposer une deuxième.

Consignes

Pour le rapport final : rédigez un rapport de groupe selon les indications et la structure du template fourni.

Template du rapport final

Pour la deuxième version de la maquette : apportez des modifications à votre première version de la maquette selon les éléments issus des tests utilisateurs.

Publiez une nouvelle maquette, en gardant la première version intacte afin qu'on puisse comparer les deux versions.

Contraintes

Pour le rapport final, mêmes contraintes du rapport individuel avec ces exceptions :

• Votre rapport ne doit pas dépasser les 9'000 mots
• Aucune limite sur le nombre de problèmes majeurs à analyser dans la section résultats
• Ajoutez et justifiez les remédiations à la première version de la maquette

Pour la deuxième version de la maquette interactive, mêmes contraintes de la première version avec ces exceptions :

• Tous les contenus de votre site doivent être aboutis, à l'exception des fonctionnalités dynamiques qui ne peuvent pas être implémentées dans une maquette interactive (e.g. moteur de recherche, ...)
• Vous avez le droit d'enlever des pages si elles ne sont pas suffisamment développées ou pertinentes, mais vous devez en tout cas proposer au moins 15 pages dans une perspective minimum viable product

Conseils

Pour le rapport final :

• Vous avez le droit de reprendre verbatim des passages de vos rapports individuels, surtout dans la section sur la méthodologie
• Discutez avec vos collègues les différents problèmes rencontrés dans les tests utilisateurs et essayez de faire une synthèse des éléments plutôt qu'un collage entre éléments séparés
• Faites attention aux détails de forme dans votre rapport final (erreurs orthographiques, etc.)