Hannah Mathot TFE — Rapport 3
HEAJ DWT 2022–2023 B3G1– Semaine 12
Nom de projet
« SignEssentiels »
Concept
Une application destinée aux personnes entendantes pour apprendre quelques mots de base de débutants de LSFB (Langue des Signes Franco-Belge) ainsi que certaines différences culturelles/habitudes importantes à connaitre, afin de savoir rebondir lors de rencontre avec une personne sourde.
Professeur référent
M. Thronte
Précédents rapports
Avancée avant le suivi du 13 mars
Optimisation des GIF
Durée : ~50 min
Afin d’améliorer les performances du futur MVP, j’ai fait plusieurs tests pour alléger les GIF. Ces derniers se chargeaient initialement après 1min4. J’ai donc utilisé des programmes en ligne afin que cette attente soit nulle. J’ai fini par remplacer tous les GIF du prototype par leur version compressée.
Nettoyage de l’espace de travail
Durée : ~40 min
J’ai réarrangé tous les éléments du Figma afin d’y voir plus clair.
Synthèse des conseils de filmage
Durée : ~30 min
Lors des formations que j’ai personnellement suivies sur la LSFB, une journée était consacrée aux vidéos d’interprètes et aux appels vidéos entre personnes signant. De nombreux conseils nous ont été donnés pour que ces derniers soient réussis et visibles. Nous avons également appris quelques règles que les interprètes doivent suivre lorsqu’ils doivent passer à l’écran. J’ai alors fait une synthèse de tout cela :
- Ne pas porter de vernis rouge, cela perturbe l’utilisateur (pour interprètes)
- Rester dans le cadre / ne pas bouger dans tous les sens
- Ne pas être trop près de la caméra
- Fond blanc (pour interprètes)
- Pas à contre jour
- Vêtements noirs (pour interprètes)
- Ne pas avoir l’image en miroir afin que les signes soient signés de la main droite en étant droitier
- Ne pas trop parler français en signant
- Trouver un support pour poser le téléphone
- Savoir signer d’une main
- Ne pas se trouver dans un endroit déplaisant à voir
- Prendre son temps (ne pas signer trop vite)
- Attendre un peu au démarrage et à la fin
- Ne pas trop se répéter, penser qu’on comprend certaines choses implicitement grâce au contexte
- Être expressif et fluide
- Avoir le visage visible
- Regarder dans les yeux/la caméra/ avoir un contact visuel
- Ne pas perdre son attention à cause des bruits/personnes environnants
- Avoir une bonne connexion/qualité d’image
- Ecran immobile
- Filmer à part, avec le moins de déconcentration possible
- Couper le son
- Etc.
Recherche de présentation des unités
Durée : ~3h10
J’ai réalisé 2 écrans en plus concernant le choix de présentation des unités. J’ai repris tous les écrans-tests déjà créés pour voir ceux qui étaient les plus user-friendly.
Voc appris et favoris
Durée : ~20 min
J’ai réalisé les écrans des mots appris et des favoris en plus des filtres.
Mise en place des anecdotes
Durée : ~5h50
J’ai recherché comment mettre en place les anecdotes importantes (ex: cadre, expression du visage, etc) et ai rédigé les textes de ces dernières. J’ai aussi réalisé l’unité « Interpeller une personne sourde » et « Communiquer » et simplifié la liste.
Veille de logo
Durée : ~40 min
J’ai fait de la veille pour voir les types de logo utilisés.
React en ligne
Durée : ~1h
Afin d’être sûre que je pourrai utiliser React.js comme langage de base pour le projet, j’ai vérifié qu’il se compile bien et que le code codé fonctionne sur mon nom de domaine.
En plus de React.js, j’ai vérifié que Tailwind.css fonctionne également pour utiliser ce framework appris en stage.
Vérifier que tout aille bien m’a permis d’être rassurée et de pouvoir utiliser les nouvelles connaissances de stage en plus de tout ce qui a été appris à l’école.
Clarification de l’ambiance/ton
Durée : ~10min
J’ai clarifié l’ambiance voulue pour le projet : un site minimaliste pour se concentrer sur l’essentiel et ne pas perdre l’utilisateur avec trop d’informations. Le style est épuré comme dans les sites analysés, avec un fond blanc, du texte noir et une couleur de contraste. Les signes sont présentés sous forme de vidéo (gif pour le mvp) avec un humain qui signe plutôt qu’une animation afin de renforcer le côté « humain » et de faciliter l’apprentissage (voir un signe réalisé par un humain est plus compréhensible en langue des signes qu’une animation 2D). Le reste des illustrations est des icônes épurées.
Réalisation des vidéos/gifs
Durée : ~4h30
J’ai réalisé les vidéos pour l’unité 1 qui seront transformées en gif pour le mvp. J’ai d’abord installé le set-up et me suis habillée avec la tenue adéquate en prenant en compte les conseils vestimentaires cités plus haut. Si je pensais au tout début prendre le temps de filmer tous les mots, il me paraît finalement plus pertinent d’avoir d’abord des retours sur mon mvp pour ne pas tout recommencer au cas où je dois changer quelque chose. J’ai donc décidé de ne filmer que l’unité 1 qui sera montrée lors du mvp. Une fois filmées, avec DaVinciResolve, j’ai coupé les parties inutiles, enlevé le son, corrigé les couleurs et fait une balance des blancs.
Je les ai transformés en gif allégés et les ai intégrées au MVP. Pour la version finale, les vidéos seront de meilleur qualité.
Suivi de Monsieur Bourgaux
Durée : ~2h20
Je lui ai montré toute mon avancée et expliqué que j’allais regarder à la DA, aux couleurs, au logo, à la typo et au scénario.
Ses retours ont été les suivants :
- Mettre le lien du dictionnaire autre que dans les paramètres.
- Lors d’une recherche, mettre le mot en évidence et au dessus de la card.
- Ajouter dans le futur une caméra pour s’entrainer aux signes.
- Mettre un bouton entrainement mais qui ne mène à rien car je n’ai pas les ressources.
- Indiquer le temps d’apprentissage par unité.
- Ajouter le thème dans les cards de voc appris.
- Dans les fonctionnalités d’apprentissage, inverser les boutons « signe incorrect » et « signe bon » et changer le terme « bon » en « correct ».
- Il a ajouté pour d’autres que le mvp ne doit pas forcément être codé ni avec une DA.
- Pour ma part, je me suis posée la question de permettre à l’utilisateur de réétudier sa leçon.
Suivi de Monsieur Tournay
Durée : ~10min
Ses retours ont été positifs. Il m’a indiqué que je n’avais pas à hésiter à louer le studio de l’école.
Ses retours ont été de :
- Mettre le dictionnaire en évidence sur l’accueil et dans la nav.
- Pour les cards de voc, mettre une progression. Ex: un bouton « suite » qui se remplit petit-à-petit.
Correction des retours de Monsieur Bourgaux et Monsieur Tournay
Durée : ~8h
J’ai ajouté le dictionnaire à la nav en précisant bien qu’il s’agit d’un lien externe en ajoutant l’icône adéquate.
Je l’ai enlevé de la page des paramètres. Pour la recherche, la page de vocabulaire appris et de favoris, j’ai ajusté le label en haut à gauche afin qu’on lise cela en premier lors du scroll. J’ai également indiqué la thématique de chaque mot pour ces trois pages.
Dans les fonctionnalités d’apprentissage, j’ai revu le contenu des étiquettes demandées.
J’ai ajouté un écran pour indiquer à l’utilisateur qu’il peut s’entraîner sur une unité déjà vue.
J’ai expliqué que j’aimerais dans le futur que l’utilisateur puisse vérifier ses signes grâce à une caméra (lors de l’apprentissage et de l’entraînement). N’ayant pas les compétences actuelles pour le faire, cela ne saura pas être réalisé mais prévenir l’utilisateur permet dans comprendre les fonctionnalités à développer dans le futur du projet. J’ai ajouté un endroit où indiqué le temps que prendrait une leçon (valeur à encore déterminer). J’ai mis en évidence les deux unités de conseils et ai ajouté un lien vers le dictionnaire pour séparer un peu les sections entre-elles.
J’ai ajouté un compteur de mots vus lors de l’apprentissage pour savoir où se situe l’utilisateur dans son apprentissage de mots.
Entrainement en React.js
Durée : ~5h30
Parallèlement aux améliorations, je me suis entrainée en React.js. J’ai juste codé le slider et la barre de progression pour voir si j’en étais capable. J’ai suivi la procédure que j’ai mise en place durant les stages et apprise à l’école : écrire/décomposer les étapes de réalisation pour coder plus facilement.
Avancée après le suivi du 13 mars
Suivi de Monsieur Thronte et Monsieur Di Stefano
Durée : ~1h
Ce suivi m’aura permis de totalement revoir mon prototype d’un point de vue UX. Ensemble, nous avons discuté et débattu afin d’améliorer grandement l’expérience utilisateur.
Leurs retours ont été les suivants :
- Lors de la présentation, insister sur le public cible qui sont les personnes entendantes débutantes.
- Unité « interpeller » : supprimer le côté jeu vidéo qui n’apporte pas grand chose, garder les animations, remplacer le jeu par un simple slider avec des explications.
- Unité « communiquer » : avoir un titre/une étiquette plus explicite, expliquer si c’est pour l’utilisateur communiquer plus facilement, ou la personne sourde, ou les deux. Mettre les questions les unes à la suite des autres avec des animations et explications.
- Paramètres : demander la date de naissance au lieu de l’âge pour pouvoir l’actualiser chaque année automatiquement.
- Enlever dictionnaire de la nav car c’est un lien externe. Il est bien placé sur la page d’accueil et dans la recherche
- Recherche : permettre de rechercher tous les mots et pas que ceux appris.
- Onglet de favoris/favoris en général : ne sert à rien, les enlever.
- Revoir les pictos, la catégorisation, les étiquettes des cards de l’accueil. Ce n’est pas clair, on ne comprend pas les étiquettes et pictos, l’ordre des unités n’est pas logique.
- Accueil : enlever les cards. Au lieu de toutes les cards, instaurer d’abord écran de débutant. Ex: « Premiers signes ». Celui s’enlève une fois les unités finies et on peut choisir l’unité suivante.
- Remplacer l’input de la fonctionnalité 1 par un QCM si l’input est trop dur à coder.
- L’utilisation de la caméra pour détecter le mouvement de l’utilisateur n’entre pas dans le cadre du projet car le processus est complexe.
- Faire un onglet réviser où l’on peut réviser les mots appris de manière simple.
- Revoir le slider de nouveaux mots.
Exemple :
Correction des retours de Monsieur Thronte et Monsieur Di Stefano
Durée : ~11h10
J’ai repensé le jeu d’interpellation en 5 écrans en suivant les conseils des retours. J’ai repris la même disposition pour l’unité « communiquer ».
Dans les paramètres, j’ai enlevé les favoris et j’ai modifié le changement d’âge en changement de date de naissance. J’ai enlevé le dictionnaire de la nav car ses deux emplacements lors de la recherche et sur l’accueil suffisaient. J’ai enlevé les favoris de la nav, supprimer la page correspondant et les icônes d’étoiles. J’ai ajouté une indication « appris » aux cards lors de recherche. J’ai indiqué dans le placeholder de la barre de recherche qu’on peut rechercher tous les mots et pas uniquement ceux vus. On peut différencier ceux étudiés de ceux non-vus par l’appelation « appris ». J’ai remanié la liste et les titres de celle-ci. J’ai ajouté un onglet de révision et regardé aux différents écrans du prototype.
Couleur de contraste
Durée : ~1h30
Une fois les corrections réalisées, j’ai fait des recherches pour améliorer le design du prototype en commençant par rechercher la couleur de contraste la plus pertinente. Après plusieurs recherches, je suis partie sur cette piste de réflexion : le thème du site est la langue des signes, une langue visuelle. En plus du vert et rouge déjà présents sur le site, la couleur bleue était la dernière manquante pour compléter l’ensemble RGB qui sont les couleurs de la vision. J’ai donc opté pour le bleu qui triangulait avec le vert et rouge du prototype.
Recherche de design
Durée : ~4h30
Une fois la couleur choisie, j’ai poursuivi avec le design du site général. J’ai revu plusieurs fois les couleurs de l’écran d’accueil quand les premiers mots sont appris afin que celles-ci ne soient pas trop criardes.
Deux vidéos manquantes
Durée : ~2h
J’ai filmé les vidéos manquantes pour le mvp (la variante du « ça va ? » et le gif pour illustrer l’importance de l’expression du visage).
Enchainement des écrans
Durée : ~2h50
J’ai également regardé aux enchaînements des écrans d’apprentissage pour voir à quoi cela ressemblerait de manière fluide en suivant un scénario.
Suivi de Monsieur Di Stefano et des élèves écoutant
Durée : ~1h
Ses retours se sont centrés sur la DA :
- Créer une mascotte
- Trouver une DA, un nom et logo
- Utiliser des bords arrondis plutôt que droits (retour d’élève)
- Simplifier les titres des unités de l’accueil
- Trouver des inspis pour la DA (notamment Duolingo)
- Avoir une DA moins stricte
- Utiliser un vrai fond blanc
Les élèves qui écoutaient ont indiqué qu’ils trouvaient le projet très intéressant !
Test utilisateur puis suivi de Monsieur Thronte
Durée : ~1h40
Une élève a testé mon prototype corrigé de la semaine précédente.
Ses retours ont été :
- Déintensifier le vert de la couleur « success » qui est trop intense
- Pour le cadre, mettre une image en plan moyen
- Dans « réviser », permettre de réviser une unité en particulier
Elle a ajouté que les conseils sont très utiles et sont un excellent ajout au site.
Les retours de Monsieur Thronte ont été :
- Comme pour Monsieur Di Stefano, les titres sont trop longs
- Dans l’unité de révision, pouvoir réviser l’unité « Communiquer »
- Avoir un nom pour mercredi
- Couper un peu plus d’apprentissage : nouveau mot — réviser — nouveau — réviser — etc
- Faire des recherches d’inspirations sur Behance/Dribble, trouver un style que j’apprécie pour le projet, faire un moodboard pour mercredi avec les inspis.
J’ai ensuite réalisé le scénario du MVP : « Tu souhaiterais apprendre quelques mots de base de langue des signes pour être plus accueillant(e) envers les personnes sourdes. Tu décides alors de visiter ce site. Tu décides d’apprendre les deux premières des leçons proposées pour voir le potentiel de l’app. Le lendemain, tu as un peu de temps et te dis ce serait bien de réviser les mots que tu as appris pour voir si tu ne les as pas oubliés (2 mots pour ne pas que ce soit trop long pour toi). Une fois révisés, tu as une petite faim et pense à des frites. Tu décides alors de rechercher le mot « frites » pour savoir comment il se signe. »
Deux améliorations
Durée : ~10min
J’ai rendu le vert moins intense et revu les titres des unités.
Inspirations, nom et site web
Durée : ~ 12h
Une fois les suivis terminés, j’ai regardé au nom et aux inspirations.
J’ai fait des recherches de style sur Behance et Dribbble pour voir les styles qui me plaisaient le plus puis ceux qui étaient les plus adéquats.
J’ai réfléchi au nom car le précédent ne me convaincait pas. Après plusieurs recherches, je me suis arrêtée sur « SignEssentiels, Apprendre les mots de LSFB pour un premier contact chaleureux ». Par rapport au nom précédent, celui-ci est plus explicite concernant son but d’apprendre uniquement des mots de base.
J’ai finalement créé la page html qui sera mise en ligne sur mon nom de domaine. J’ai finalisé le mvp, le scénario et j’ai mis tout en ligne. La page explique le concept du projet, le recherche de DA, propose un scénario et renvoie vers le MVP.
La suite ?
- Corriger selon les retours
- Tests utilisateurs
- DA/couleurs/typographie
- Logo
- Mascotte
- Changer l’image du cadre pour un plan moyen
- Dans réviser, mettre un filtre pour réviser une leçon en particulier et permettre de réviser l’unité « Communiquer »
- Couper un peu plus l’apprentissage
- Créer toutes les vidéos (avec un fond blanc)
- Design responsive
- Landing
- Interactions/anims
- Tester React Router en ligne
