Hannah Mathot TFE — Rapport 5
HEAJ DWT 2022–2023 B3G1– Semaine 16
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
Révision du code
Durée : ~3h20
J’ai revu tout mon code pour qu’il soit plus propre et mieux organisé.
Passer de groupe en groupe, écran d’input correct et réflexion
Durée : ~3h40
J’ai regardé comment passer du groupe « Apprendre mes premiers mots » à « Approfondir mon apprentissage » à « Réviser ». Après réflexion, je me suis dit que verrouiller l’apprentissage serait plus frustrant pour l’utilisateur s’il souhaite apprendre l’unité qu’il souhaite, j’ai donc repris une de mes idées initiales qui est de laisser l’utilisateur libre, sans verrouillage d’unité comme pour le groupe « Approfondir mon apprentissage ». J’ai ajouté un écran lors d’un input utilisateur incorrect pour que celui-ci puisse voir la réponse correcte lors de son apprentissage et ses révisions et j’ai corrigé 2–3 bugs.
Unités « Interpeller » et « Communiquer »
Durée : ~2h30
J’ai codé les écrans de ces dernières.
Une fois ces deux unités réalisées, j’ai eu fini de coder les algorithmes du site web. Ne voyant pas de bug apparaître, j’étais très satisfaite d’avoir commencé par cela. Les stages m’ont permis de situer le temps qu’il me faut : pour un site web codé dans l’entreprise, cela me prenait entre deux à trois semaines. Ici, les algorithmes sont plus complexes donc je les ai réalisés en deux semaines sans avoir encore intégré le style. Je sais donc désormais que j’ai les capacités pour coder un petit projet en React.js et cela dans un délai convenable. Maintenant que tous les algorithmes sont réalisés, la suite se portera sur la recherche graphique, la création des vidéos puis de l’intégration et enfin de la landing page.
Recherches de DA et tests d’écrans
Durée : ~6h30
J’ai synthétisé mes recherches et fais des tests d’écrans.
Correction de bugs en ligne
Durée : ~2h40
J’ai mis le code en ligne et j’ai remarqué deux bugs. J’ai donc cherché à les corriger. J’ai ensuite vérifié en ligne que tout fonctionne bien.
Comment avoir un fond blanc
Durée : ~5h20
Pour les futures vidéos du projet, j’ai recherché comment avoir une vidéo avec un fond blanc. J’ai testé sur un premier programme totalement inperformant, puis j’ai fait de nombreux essais et recherches et je suis tombée sur l’application Capcut sur mobile. Elle parvient à détecter le fond blanc-gris de la vidéo et de le changer pour un fond au choix. Pour la meilleure vidéo possible, il faudra un bon éclairage, un mur blanc et une balance des blancs et des couleurs sur Da Vindi Resolve. Ayant une centaine de vidéos à réaliser, si ce système fonctionne, je pourrai donc créer et retoucher les vidéos sans devoir emprunter un studio photo pendant des jours et des jours.
Recherche de mascotte
Durée : ~2h20
J’ai fait des recherches de mascotte pour qu’elle soit simple et pertinente avec le thème et la direction graphique.
Mascotte sur les écrans Communiquer et Interpeller
Durée : ~1h30
J’ai regardé à ce que donnaient les écrans des unités Communiquer puis Interpeller lorsqu’on y ajoute la mascotte. J’ai trouvé cette dernière mignonne et agréable à regarder. Je trouve qu’elle ajoute du dynamisme et de la personnalité à l’interface.
Mascotte sur les autres écrans
Durée : ~4h20
J’ai regardé sur quels écrans placer la mascotte afin de bien l’intégrer au projet. J’ai revu tous les écrans selon la DA. J’ai également fait plus de recherches concernant le cinquième conseil de l’unité Communiquer. Celle-ci liste certains aprioris sur les personnes sourdes quant à la communication entre sourd et entendant. Les informations proviennent de sources diverses afin d’être respectueuse envers la communauté sourde. Cependant, la question de l’alphabétisation est plus floue à traiter car les sources recueillies traitent des niveaux totalement différents. J’ai alors voulu me pencher plus sur cette question afin que le conseil soit correct.
Suivi de Monsieur Di Stefano
Durée : ~3h20
Les retours de Monsieur Di Stefano m’ont beaucoup aiguillé sur la suite. Améliorer l’appellation d’étiquettes, UX des éléments du header, design plus complexe, utilisation de gif, amélioration lors de la connexion et de la création de compte, réviser des unités, étiquettes des cards, page de vocabulaire appris à simplifier et filtrer, etc.
Corrections des retours de Monsieur Di Stefano
Durée : ~4h
J’ai remplacé le terme « LSFB » par « langue des signes francophone de Belgique » afin que l’utilisateur comprenne le terme. J’ai enlevé la box arrondie dans le header et l’ai laissé scroller plutôt que fixed.
Après réflexion, la page « Créer un compte » serait trop chargée si je demande le prénom à cette étape. Je le demanderai donc lors de l’unité « Me présenter ». J’ai ajouté un champ pour confirmer le mot de passe.
J’ai remplacé les parenthèses (1) et (2) par des exposants et supprimé la croix lorsqu’une unité est finie. Celles situées à gauche sont désormais à droite pour plus de cohérence. Lors de l’apprentissage, les étiquettes se situent au-dessus des vidéos. Plutôt que de garder le titre « nouveau mot », j’ai ajouté 2 écrans indiquant à l’utilisateur qu’il découvre d’abord le vocabulaire puis qu’il s’entraîne. J’ai enlevé les points d’interrogations aux titres au-dessus du dictionnaire.
J’ai regardé aux « x » et « v » lors de l’entraînement : j’ai regardé sur Coblis le résultat des couleurs jaune, vert et rouge de l’app. J’ai réalisé une simulation sur Figma en utilisant les couleurs obtenues par Coblis. Pour la partie « signe (in)correct », la barre de progression sert d’indicateur et les couleurs de « correct » et « incorrect » sont radicalement différentes donc il est facile de savoir quand on a cliqué sur l’un et l’autre. Cela est pareil pour la fonctionnalité d’input. En plus, celle-ci indique le terme correct à entrer si on a fait une erreur donc cela montre explicitement que l’utilisateur n’a pas réussi. Enfin, pour le cas des boutons « correct »/« incorrect », l’utilisateur sait la plupart du temps sur lequel il a cliqué donc il sait s’il a bon ou mauvais. Donc, malgré le fait que les couleurs soient similaires pour les personnes daltoniennes, les « v » et « x » peuvent être omis grâce à toutes ces indications. J’ai cependant regardé à des palettes de couleurs plus adaptées aux personnes daltoniennes. J’en ai trouvée une plus adaptée mais elle était trop sombre par rapport à la direction artistique. J’ai donc décidé de garder les couleurs de base.
J’ai simplifié le tshirt de la mascotte pour qu’il soit plus lisible. Dans la page de voc appris, j’ai ajouté un filtrage par questions, phrases et unité. J’ai masqué les vidéos de la page et ai indiqué l’unité sous le mot listé. J’ai ajouté un clavier lors de la recherche. Pour l’unité Communiquer, j’ai ajouté un écran de réussite et d’échec par conseil. Cela permet d’inclure la mascotte. J’ai regardé à ne pas être rabaissant lorsque l’utilisateur se trompe mais plutôt à jouer sur l’humour/le rire.
Algorithme de révisions et recherche d’UI
Durée : ~19h20
Afin d’avoir une meilleure interface de révisions, j’ai changé la révision infinie pour une par unité vue. A la fin, un écran annonce le score de l’utilisateur, les termes/fonctionnalités d’apprentissage incorrects qu’il doit revoir et lui permet d’étudier d’autres unités. J’ai ensuite regardé pour améliorer le design. J’ai fait des recherches de bonnes pratiques d’UI : avoir plus de hiérarchies, des boutons plus conventionnels, une mascotte avec des détails plus arrondis, une meilleure disposition des éléments, etc.
Confirmation de mot de passe et écrans d’apprentissage
Durée : ~2h40
En code, j’ai enlevé le prénom et ajouté la confirmation de mot de passe lors de la création de compte. J’ai mis les étiquettes en haut des vidéos et enlevé le titre « nouveau mot ». J’ai enlevé le point d’interrogation au-dessus du dictionnaire et changé le terme LSFB pour sa forme non-contractée. J’ai ajouté lors de l’apprentissage les écrans expliquant à l’utilisateur qu’il va d’abord apprendre les mots puis s’entraîner. J’ai remplacé les (1) et (2) par des exposants dans l’API. La barre de progression s’est mise à bugguer depuis lors. Je l’ai réglée. J’ai également corrigé d’autres bugs. J’ai poursuivi en ajoutant un écran « bravo » et un écran « et non » pour l’unité Communiquer.
Filtrage des mots vus
Durée : ~7h30
J’ai trié les mots appris par phrases, questions ou unité.
Prénom, videos dans le voc appris, algorithme de révisions et pseudo-responsive
Durée : ~6h10
Après avoir fait plusieurs essais de code, je ne parviens pas à demander le prénom de l’utilisateur en dehors de la page de création de compte. J’ai donc décidé de re-demander le prénom de l’utilisateur à cet endroit comme prévu initialement. J’ai enlevé les croix sur les écrans finaux lors de la réussite des unités. J’ai masqué les vidéos dans la liste de vocabulaire appris et celles-ci sont visibles une fois leur étiquette cliquée.
J’ai remanié l’algorithme de révisions.
J’ai également bloqué la largeur maximale du site à 500px car il s’agit d’une application. Celle-ci est utilisable sur desktop mais elle garde ses dimensions de mobile car il n’y a pas de responsive créé actuellement. Je souhaitais cependant que le projet puisse être consultable sur desktop même si cette plateforme n’est pas adaptée aux tailles d’interfaces.
Vidéos filmées, balance des blancs & couleurs, fond blanc et landing
Durée : ~16h40
J’ai filmé la centaine de vidéos présente sur le site et regardé au contenu de la landing page. J’ai retouché la colorimétrie des vidéos et la balance des blancs avec Da Vinci Resolve et ai intégré le fond blanc avec Cap Cut.
La suite ?
- Continuer de regarder à la DA
- Avoir des retours pour améliorer la DA
- Intégrer la DA
- Ajouter des animations sur l’app (réussite, échec, etc)
- Coder la landing page
- Compresser les vidéos et voir si elles fonctionnent bien sur l’app
- Mettre les vidéos dans l’api et vérifier qu’il n’y ait pas de bug
- Vérifier que les vidéos fonctionnent pour l’unité « Me présenter à l’autre »
- Vérifier les textes de l’API
- Enlever les placeholders des fonctionnalités input
- Indiquer dans la nav la page actuelle en mettant en évidence l’icône
- Ajouter une barre de progression lors de la révision
- Ajouter un écran en desktop pour indiquer que l’app est faite pour mobile
