Livrables

#1 État d'avancement de la maquette interactive

Ce premier livrable vous sert pour appliquer les principes itératifs et profiter des avantages d'obtenir des feedbacks tôt dans le processus de conception.

Consignes

Partagez le lien à votre maquette interactive et ajoutez quelques questions ou demandes d'avis pour vos collègues et l'équipe enseignante.

Contraintes

Aucune contrainte en termes d'avancement de votre maquette : vous montrez ce que vous avez à ce moment (voir les conseils plus bas à ce propos).

Conseils

• Revenez sur la documentation du logiciel de prototypage et suivez éventuellement encore des petits tutoriels avant de vous (re)lancer dans la création de vos pages.
• Créez des contenus en amont et en parallèle à la création de votre maquette. Créer une maquette avec des placeholders génériques vous amène à vous concentrer sur les détails de forme et moins sur le rapport entre les contenus, leur structure et leur forme. Pour les contenus multimédia (images, icônes, ...), vous pouvez trouver des ressources dans la page EduTechWiki Médias libres d'utilisation.
• Mettez en place des lignes guide/grilles d'alignement très tôt dans le processus de prototypage : chaque élément doit être aligné avec quelque chose d'autre. Essayez d'appliquer les principes CRAP (Contrast, Répétition, Alignement et Proximité)
• Mettez-vous dans l'esprit qu'il sera possible d'avoir à refaire certaine choses/pages, cela fait partie du processus. De temps en temps regardez l'ensemble de votre avancement et essayez d'organiser le travail de manière plus logique (e.g., créer des composantes pour des éléments similaires, appliquer des styles, augmenter la cohérence interne des éléments, ...).
• Souvenez vous que dans un vrai projet, au final votre maquette deviendra un site en HTML5 et CSS (c.f. STIC I). Donc vous êtes en train de créer des boîtes qui peuvent varier en taille selon la fenêtre du navigateur. Gardez cela à l'esprit : ce n'est pas la même chose par rapport à la création d'un flyer, d'une présentation Power Point, ou un PDF avec des coordonnées fixes.
• Essayez d'avoir toutes vos pages au moins esquissées avant de vous attaquer à des détails esthétiques très précis, qui sont bien entendu très importants, mais qui doivent tenir compte de l'ensemble du projet. Votre structure générale et votre design system fonctionnel et perceptif peuvent évoluer suite à des idées ou contraintes que vous avez dans une page mais pas dans une autre.
• Gardez toujours à côté de vous un fichier ou une whiteboard qui vous permet de noter les éléments/choix de conception qui vous bloquent ou pour lesquels vous avez plusieurs options qui vous semblent valides.
• Lorsque vous partagez votre avancement pour le livrable, utilisez ces éléments bloquant pour essayer de formuler des questions ou demandes d'avis de manière précise, en attirant l'attention des collègues et de l'équipe enseignante sur des éléments/choix de conception et de design concrets.

#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 60 et 90 seconds maximum.
• Accompagnez la manipulation d'un commentaire audio qui aide le spectateur à suivre la manipulation et à comprendre les objectifs et l'utilité.
• Publiez la vidéo sur le serveur tecfaetu.unige.ch en format .webm, .ogv ou .mp4. Le format *.webm est préférable. Si vous n'avez pas accès au serveur, envoyez la vidéo à l'assistant-e du cours qui s'occupera de le publier à votre place.

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 créer votre maquette interactive au degré de fidélité de votre choix (e.g. low-fi ou high-fi).
• Vous pouvez utiliser le logiciel de prototypage de votre choix, pas forcément le même que vous utilisez pour le projet de groupe.

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 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 de prototypage de votre choix un lien public à votre 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

Concevez le protocole de passation d'un test utilisateur comprenant :

• 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 à 6 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 la plus rapide/optimale.
• La passation d'une échelle/questionnaire UX (e.g. UEQ, AttrakDiff, ...)
• Un entretien post-test avec des questions pour mieux aborder certains détails du test.
• Un débriefing final avec remerciements.

Postez la rédaction partielle du rapport final, notamment :

• Toute la partie 2 sur la première version de la maquette
• Toute la partie 3 sur la méthode. Pour la section 3.1 sur le public cible, limitez-vous à une description des caractéristiques envisagées si vous n'avez pas encore repéré les personnes qui participerons à votre test.

Template du rapport final. Rédigez les parties 2 et 3.

Contraintes

Votre maquette interactive doit respecter les contraintes suivantes :

• Les deux personnes du binôme doivent participer à la création des pages et contenus
• Votre maquette doit être accessible en tant que site/application web. Si le contenu de votre site l'exige et le logiciel de prototypage le permet (e.g. Axure), 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 encore 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 groupe.
• Vous devez faire passer le test des 5 seconds à au moins 3 utilisateurs pour chaque personne du groupe. Les utilisateurs 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 final. S'il s'agit des mêmes personnes, faites attention lors du recrutement à ne pas dévoiler des informations qui peuvent influencer la perception des éléments saillants de l'interface lors de l'exposition de la maquette.
• Les membres du groupe peuvent faire la passation de manière collective (être présent-es en même temps) ou individuellement. En cas de passation collective, chaque personne doit joueur le rôle du facilitateur pour ses trois utilisateurs.
• 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

Regardez déjà les consignes pour le rapport final, cela vous aidera à mieux rédiger les parties 2 et 3 (e.g. longueur envisageable, rapport avec la suite du document, ...).

Pour votre maquette interactive :

• Rappelez-vous du processus itératif du design centré utilisateur. Développez des tâches qui peuvent potentiellement vous aider dans l'amélioration de la maquette. Le but n'est pas de confirmer que votre site est bien : le but est de le rendre encore meilleur !
• Utilisez le plus possible des composantes/éléments réutilisables de votre design system (e.g. menu de navigation, header, footer).

Pour votre test utilisateur :

• Créez un document seulement avec le scénario et la description des tâches à fournir aux utilisateurs. Gardez le document avec la description de la procédure avec vous pour garantir que les passations se passent toutes dans des conditions similaires.
• 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 (à moins qu'elles soient représentatives du public cible) 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-es 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.

#4 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 ajouter le lien au prototype dans la page pour que les utilisateurs puissent tester directement.

Critères d'évaluation

Votre rendu sera évalué sur les critères suivants, avec le nombre d’astérisques représentant l'importance relative du critère (*** = très important, ** = important, * = sert principalement à départager une bonne note d'une très bonne note) :

1. Les objectifs du prototype sont clairs ***
   La vidéo permet de comprendre le contexte d'utilisation, le public cible, le fonctionnalités principales, ...
2. Prototype adapté au support mobile ***
   Ceci implique notamment l'utilisation avec les doigts plutôt que la précision du pointeur de la souris (espacement, distance des bords, ...), en situation souvent de mobilité ou avec partage d'attention à l'environnement, etc.
3. Guidage/scénarisation **
   Le spectateur est bien guidé à la découverte du prototype/des fonctionnalités illustrées. Ceci implique par exemple de diriger le regard à des endroits spécifiques, sans passer trop rapidement d'un écran à l'autre, etc.
4. Qualité du design du prototype **
   Facilité à reconnaître les éléments principaux, application des principes de design CRAP, ... Pour des éventuels prototypes papier ce principe est appliqué surtout à la reconnaissance des éléments.
5. Flux d'interaction intéressant/original *
   Les actions illustrées dans le prototypes mettent bien en valeur les objectifs et les fonctionnalités plus caractéristiques du prototype
6. Respect des contraintes/qualité de la vidéo *
   Le rendu correspond aux consignes (format, durée, ...) et/ou la vidéo est de bonne qualité (image, son, ...)

#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 deux versions de la page dont la comparaison systématique peut servir à recueillir des informations afin de prendre une décision/corroborer une hypothèse sur un mécanisme causal. Expliquez si la comparaison est plutôt globale ou locale, exploratoire ou évaluative en fonction de vos besoins/objectifs.
• 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, le nombre de personnes qui ont complété une nouvelle inscription, ...
• Illustrez et justifiez la pertinence de la comparaison et 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 cohérentes avec vos objectifs.

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 2'000 mots).
• 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.

Critères d'évaluation

Votre rendu sera évalué sur les critères suivants, avec le nombre d’astérisques représentant l'importance relative du critère (*** = très important, ** = important, * = sert principalement à départager une bonne note d'une très bonne note) :

1. Les objectifs du test sont clairs ***
   Le test est bien justifié par rapport à une exigence de design du site ou de l'application.
2. Les deux versions de l'interface sont bien illustrés/décrites ***
   Description pertinente des éléments qui changent d'une version à l'autre, avec représentation graphique (image, capture d'écran, wireframe, ...) qui permet de bien comprendre les différences.
3. Choix d'une mesure pertinente **
   La métrique avec laquelle les performances des deux versions est pertinente et bien justifiée.
4. Hypothèse sur un mécanisme causale **
   Le test est plutôt de type évaluatif que exploratoire. Les tests exploratoires sont également importants, mais la formulation d'une hypothèse nécessite une compréhension plus profonde des objectifs du site ou de l'application.
5. Test statistique approprié, mené, interprété et reporté correctement *
   Le choix du test statistique est cohérent avec les données recueillies, les résultats sont illustrés correctement et la bonne inférence statistique est tirée.
6. Respect des contraintes/qualité du rapport *
   Le rapport du test respecte les consignes et le contenu s'adresse bien à des potentielles parties prenantes.
   

#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 :

• Votre rapport ne doit pas dépasser les 10'000 mots
• Votre rapport doit présenter une page de garde qui indique clairement les noms des auteurs, la date de rédaction et l'intitulé du document. Évitez d'intituler votre document Rapport final et trouvez plutôt un titre intéressant pour un commanditaire.
• Au moins deux problèmes détectées dans votre test utilisateur doivent être corroborés par une vidéo dont le lien est explicitée dans le rapport. Pensez à ce que la vidéo ne permette pas de remonter à l'identité de la personne qui a effectué le test.
• Vos titres de sections et vos pages doivent être numérotés. Évitez des entêtes ou pieds de page trop longs.
• 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).

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 :

• Imaginez qu'il s'agit d'un document que vous partagez avec le commanditaire ou d'autres professionnels du UX.
• Vous pouvez modifier au besoin les parties 2 et 3 du rapport que vous avez déjà rédigées pour la présentation de la première maquette et du protocole du test utilisateur.
• Faites attention aux détails de forme dans votre rapport final (erreurs orthographiques, etc.)

Critères d'évaluation

Votre rendu sera évalué sur les critères suivants, avec le nombre d’astérisques représentant l'importance relative du critère (*** = très important, ** = important, * = sert principalement à départager une bonne note d'une très bonne note) :

1. Justification des choix ***
   Les choix de conception et d'évaluation sont bien justifiés par rapport à des élément externes et objectifs, récoltées dans la phase de planification du site (analyse des besoins, analyse de la concurrence, cahier des charges, ...), ou survenus pendant le prototypage.
2. Scénarisation du test utilisateur ***
   Le test utilisateur est bien scénarisé, avec un protocole et des tâches précises. Le test essaie de mettre sous-pression la maquette afin de recueillir des informations utiles à l'amélioration du prototype/site/application.
3. Qualité du design du prototype (version 1) **
   La première version de la maquette traduit bien en interface les principes de conception (sitemap, contenu attendus par les utilisateurs, ...) et de design (e.g. CRAP, affordances, palette de couleurs, éléments perceptifs en lien avec le thème du site, ...)
4. Qualité de l'analyse des tests utilisateur **
   Les éléments d'analyse sont menées selon les consignes et mobilisent des heuristiques identifiables dans la littérature ou sur les résultats de l'échelle d'usabilité. Les analyses sont basées par des éléments issues du test utilisateur et corroborées au besoin par des éléments multimédia pertinents (e.g. vidéos des manipulations utilisateur, fiches du test des 5 seconds, )
5. Pertinence des remédiations envisagées/effectuées dans le design du prototype (version 2) *
   Les informations du test utilisateur sont bien intégrées dans des remédiations proposées et éventuellement effectuées sur la deuxième version de la maquette interactive. La deuxième version s'approche le plus possible à un minimum viable product.
6. Qualité du rapport *
   Le rapport respecte les consignes et s'adresse à des parties prenantes potentielles plutôt que à l'équipe enseignante. Les détails formels sont respectés (structure, citations, ...), l'argumentation est claire et concise.