Hannah Mathot TFE — Rapport 6
HEAJ DWT 2022–2023 B3G1– Semaine 18
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
API, vidéos compressées et utilisées
Durée : ~5h
J’ai révisé l’API et y ai ajouté les liens des vidéos. J’ai regardé à ce que ces dernières n’apportent pas de bug lors de leur implantation. Je les ai compressées pour qu’elles se chargent mieux : le poids total est passé de 1.24 Go à 26.2 Mo et la différence de chargement est flagrante. J’ai vérifié à ce qu’il n’y ait pas d’erreurs console et corrigé un problème de mise en page en responsive.
Amélioration de la page de révisions
Durée : ~1h30
J’ai codé la même disposition pour l’interface de révisions que d’apprentissage : la navigation et le header sont cachés et il y a une croix pour fermer l’interface. Ainsi, il y a une cohérence dans la mise en place. J’y ai installé une barre de progression pour que l’utilisateur voit son avancée. Contrairement à lors de l’apprentissage, la barre continue même si l’utilisateur a faux car la révision permet de voir les fautes et les mots à revoir sur le dernier écran.
DA, autoplay, masquage des vidéos et BEM
Durée : ~10h10
J’ai continué à retravailler la DA du projet. J’ai recherché des inspirations et fait des tests d’écrans. Parallèlement à ça, j’ai regardé à mettre un autoplay sur les vidéos au fur et à mesure qu’elles apparaissent. J’ai enlevé les vidéos lors de la recherche. Comme pour la page avec le vocabulaire appris, elles apparaissent au clic de l’étiquette. J’ai regardé à ce que la méthode BEM soit appliquée le plus possible et que mon code soit plus propre.
La liste de voc. à apprendre devient facultative
Durée : ~3h50
Afin que l’utilisateur ne clique pas sur trop d’écrans lors de son apprentissage, j’ai rendu le pop-up de liste de voc appris dans l’unité facultatif. Cette liste sera disponible au clic d’icône disponible à proximité de son étiquette. Ainsi, uniquement les personnes intéressées par la liste l’ouvriront, elle ne sera pas obligatoire à regarder. J’ai effectué ces modifications en code.
Suite de la recherche de DA
Durée : ~7h
J’ai continué à rechercher la DA. Maintenant qu’il y a une icône de liste sur l’accueil, ce dernier est déjà mieux habillé. Un des retours de Monsieur Di Stefano lors des suivis était de mettre plus de contraste à travers les sections et d’avoir un design moins aseptisé. J’ai essayé de regrouper toutes mes recherches de bonnes pratiques UX/UI et les inspirations de listes de boutons contrastées.
La version grise est la couleur habituelle des sections de boutons dans les inspirations trouvées. Mais elle est plus froide/fade que les autres.
La bleue est plus colorée mais n’apparaît nulle part autre dans la direction graphique.
La jaune est lumineuse et cohérente avec le reste du site.
J’ai refait tous les écrans suivant la direction actuelle. Idéalement, j’aimerais diviser le groupe « Approfondir mon apprentissage » en deux et créer un groupe « Vocabulaire utile » afin d’alléger la page et prendre en compte les retours du premier suivi avec Monsieur Thronte et Monsieur Di Stefano de ne pas avoir une liste immense sur l’accueil.
Input rempli, bouton « je ne sais pas » et groupe « Vocabulaire utile »
Durée : ~2h
J’ai empêché l’utilisateur de cliquer sur le bouton «Suite » lors de l’entraînement avec input si ce dernier n’est pas rempli. J’ai ajouté un bouton « Je ne sais pas » sur cette même fonctionnalité pour lorsque l’utilisateur donne sa langue au chat, fonctionnalité utilisée notamment sur Quizlet que j’ai trouvé intéressante quand j’utilisais l’application personnellement. J’ai ajouté le groupe « Vocabulaire utile » pour alléger l’accueil.
Suivi de Monsieur Hambersin
Durée : ~2h
J’ai réalisé des slides de présentation. Celles-ci expliquent le concept du projet, en montre quelques écrans pour illustrer chaque propos et liste les différentes assets utilisées ainsi que leurs sources respectives. Monsieur Hambersin n’a rien eu à redire sur le projet concernant les droits d’auteur.
Message responsive et voc. appris dans l’ordre
Durée : ~1h
J’ai ajouté un message d’indication sur desktop pour indiquer à l’utilisateur que l’application est optimisée pour le mobile. J’ai trié les unités dans le voc appris dans l’ordre correct car elles étaient listées auparavant selon leur ordre dans le localStorage.
Entraide (1 sur 2)
Durée : ~6h
Avec Sarah Pestiaux, nous nous sommes vues pour nous entraider : je l’ai aidée à répondre aux questions qu’elle avait vis-à-vis du code et elle m’a donné des conseils pour améliorer mon design.
Nous avons d’abord discuté de la couleur de contraste. Comme soulevé lors du précédent suivi de Monsieur Di Stefano, la couleur jaune est peu contrastée lorsqu’elle est associée avec un fond blanc. Nous avons listé toutes les couleurs plus chaudes et leur ressenti :
Le rouge a une connotation de stress/d’alerte
L’orange me fait personnellement penser à Babbel et elle est trop puissante selon moi donc je ne voulais pas me tourner vers cette couleur.
Le jaune est trop peu contrasté même si je trouvais cette couleur géniale pour donner un sentiment de lumière/de positif
Le vert, quant à lui, est une couleur à la fois calme et vibrante, selon plusieurs sources traitant sur la symbolique des couleurs, le vert est favorable à l’apprentissage et au sentiment de sécurité.
J’ai donc décidé de partir vers cette couleur, plus contrastée, réfléchie et en accord avec les valeurs du projet.
Nous avons réfléchi à si la mise en place d’une deuxième couleur était nécessaire mais les essais d’écrans n’étaient pas esthétiques donc j’ai décidé de rester avec une seule couleur de contraste. Nous avons regardé à des inspirations de mock-up sur Pinterest en accord avec les valeurs du projet et sa finalité.
Lorsque Sarah a regardé l’accueil de mon prototype, elle m’a donné comme retour utilisateur que tous les groupes (Apprendre mes premiers signes, approfondir et vocabulaire utile) doivent être visibles plutôt que un visible-2 masqués et que si je souhaite que l’utilisateur puisse y accéder petit à petit, je devrai alors les décadenasser étape par étape. J’ai acquiescé en indiquant que les groupes peuvent se masquer à l’aide d’une flèche drop-down afin de laisser l’utilisateur la possibilité d’alléger sa page s’il le souhaite. Lorsqu’une unité serait finie, plutôt que de disparaître, elle deviendrait non-cliquable, son fond serait en surbrillance et il y aurait une icône de V. Cela serait effectivement plus pertinent et similaire aux applications d’apprentissage habituelles du point de vue de l’UX. Cependant, lorsque tout le vocabulaire aura été appris, la liste des unités ne sera plus utile donc je laisserai en place le bouton « Réviser ».
Exploration des nouvelles pistes de DA
Durée : ~8h20
J’ai continué à réfléchir à la direction artistique en suivant les retours de Sarah. Plutôt qu’un vert désaturé, j’ai aussi regardé si un vert plus peps fonctionnait. J’ai fait en sorte qu’il ne soit pas trop clair non plus pour que le contraste soit correct. J’ai ajouté des images décoratives de background pour voir si cela habille davantage l’écran.
Suite de l’entraide (2 sur 2)
Durée : ~5h10
J’ai revu Sarah pour qu’on continue à améliorer le design général et que je l’aide en lui expliquant comment coder ce pourquoi elle bloque. Après avoir apprécié le design que j’ai réalisé, nous avons poursuivi avec le reste du site. Nous avons revu le header et le footer en suivant la direction de la page de connexion. Nous avons regardé à une hiérarchie de typographie. J’ai opté pour la 1.125 qui permet d’avoir une base de 16px et des small de 14px.
Grâce aux inspirations que j’ai trouvé durant toutes mes précédentes recherches et celles recherchées la dernière fois, nous avons revu le reste des écrans. Je devrai y ajouter le pattern de vibrations présent sur la page de connexion et regarder à la hiérarchie de texte.
Prototype cliquable et présentable
Durée : ~2h50
J’ai regardé à avoir des écrans présentables pour le suivi de Monsieur Bourgaux. J’ai mis en place la hiérarchie, choisi 3 couleurs tests, inséré les patterns et fait en sorte que le prototype soit bien cliquable.
Metas partage, favicone et title
Durée : ~1h
J’ai ajouté les metas de partage, la favicone ainsi que le title qui s’adapte malgré le router.
Suivi de Monsieur Bourgaux
Durée : ~3h
J’ai participé au suivi de Monsieur Bourgaux. Cela m’a permis de connaître son point de vue vis-à-vis du projet et de sa DA. Ses retours ont été de tester si le pattern peut prendre la taille de l’écran, revoir l’icône de liste de voc. sur les unités de l’accueil, faire des tests de couleur verte pour que celle-ci soit plus douce, moins peps, ajouter des mains aux personnages pour une meilleure pertinente concernant le projet, mettre en place la connexion après avoir visité le site et non pas directement, regarder à utiliser du rouge lorsque l’utilisateur se trompe durant son apprentissage, lorsqu’il a réussi une unité, sur la page de réussite, lister le vocabulaire appris, si possible, lors de la recherche, lister le vocabulaire recherchable, dans l’unité Interpeller, mettre les titres à gauche. Selon lui, le projet est cohérent et la DA fonctionne bien et est satisfaisante. Ces retours m’ont beaucoup rassurée.
Correction des retours de Monsieur Bourgaux
Icône de liste et paramètres
Durée : ~1h30
J’ai réalisé plusieurs tests d’icônes de liste de vocabulaire en regardant à des inspirations sur internet. J’ai choisi celle qui était la plus compréhensive et cohérente avec le reste du site. J’ai ensuite aligné les textes de l’unité Interpeller à gauche pour avoir le même alignement que l’unité Communiquer. Un des retours de Monsieur Bourgaux les plus intéressants est celui sur la connexion. En effet, un utilisateur devant se connecter directement est souvent frustré. Je n’avais pas pensé à cette situation car je ne suis personnellement jamais frustrée de devoir me connecter tant qu’il ne s’agit pas de site utilisant de l’argent donc ce retour m’aura permis d’ouvrir mes horizons et de mieux comprendre une partie des utilisateurs qui eux n’apprécient pas une connexion directe. J’ai alors regardé sur Internet les pratiques les plus courantes de connexion simple et rapide post-visite.
Mains des personnages et mots appris
Durée : ~2h10
J’ai réalisé plusieurs jets de mains en suivant des inspirations de chibi. J’ai finalement opté pour une version assez versatile permettant notamment de pointer du doigt ou de faire de grands signes. J’ai modifié chaque main de chaque personnage dans le prototype Figma. J’ai ajouté le vocabulaire appris à la réussite de l’unité.
Connexion optionnelle, unité indiquée, mots appris et tri par mots
Durée : ~3h30
J’ai enlevé la connexion obligatoire en code et l’ai installée comme étant optionnelle dans les paramètres. Ainsi, l’utilisateur pourra tester le site et se connecter uniquement s’il souhaite sauver sa progression. J’ai ajouté l’unité correspondant au mot cherché lors de la recherche, les mots appris lorsqu’une unité est finie et le tri par mots sur la page de voc. appris.
Unités de l’accueil, recherche, pop-up d’accueil et drop-down
Durée : ~4h50
J’ai démasqué toutes les unités de l’accueil et regardé à ce que cela ne crée pas de bug lors de l’apprentissage. J’ai mis en place le cadenassage des groupes selon l’avancée et la surbrillance de leurs unités finies. J’ai regardé en ligne pour voir si tout fonctionnait bien, ce qui m’a permis de régler un bug. J’ai modifié les étapes de clic pour accéder à la recherche en suivant le prototype Figma. J’ai ajouté un écran d’accueil pour ne pas que l’utilisateur arrive brusquement sur l’accueil. Cet écran apparaît une fois par jour afin de ne pas être trop redondant. Enfin, j’ai finalisé le drop-down de chaque unité selon l’avancée de l’utilisateur. Cela aura été le dernier retour actuel concernant les algorithmes du projet.
Choix du vert
Durée : ~40min
J’ai fait des tests de plusieurs verts selon le retour de Monsieur Bourgaux pour avoir un vert doux et agréable.
Ce vert est doux et a une légère pointe de jaune clair ce qui permet d’illuminer très légèrement l’interface. J’ai essayé à ce que la clarté soit la moins dosée possible
Intégration du design en code
Header, nav et accueil
Durée : ~7h20
J’ai commencé à intégrer le header et la nav en indiquant la page actuelle dans la nav. J’ai poursuivi avec la page d’accueil
Réviser et Voc Appris
Durée : ~3h20
J’ai continué avec la page de révisions et la totalité de la page de voc. appris.
Paramètres
Durée : ~1h
J’ai intégré la page des paramètres.
Fonctionnalités d’apprentissage
Durée : ~6h40
J’ai regardé en ligne que tout fonctionnait bien. J’ai poursuivi avec la partie la plus importante : le design des fonctionnalités d’apprentissage des pages d’accueil et de révisions.
Écrans de réussite
Durée : ~2h
J’ai continué l’intégration avec la page de score des révisions et l’écran de réussite d’une unité.
Retours d’élèves
Durée : ~1h20
Lors du suivi de Monsieur Therasse, j’ai montré mon avancée d’intégration à deux élèves. Leurs retours auront été que lors de l’apprentissage, la navigation devrait être accessible en swipant vers le haut, les mots appris listés sur l’écran de réussite devraient être agencés comme une liste plutôt qu’un texte sinon on ne prend pas la peine de les lire car le tout est trop compacté.
Unités Communiquer et Interpeller
Durée : ~4h10
J’ai intégré les unités Communiquer et Interpeller. A l’instar des unités de vocabulaire, j’ai ajouté une liste des éléments appris dans l’unité une fois celle-ci finie.
Pop-up d’accueil et recherche
Durée : ~1h40
J’ai réalisé le petit pop up qui accueille l’utilisateur une fois par jour. J’ai continué avec la recherche.
2 pop-up de réinitialisation
Durée : ~2h
J’ai réalisé les 2 pop-up pour effacer ses données dans les paramètres. Ainsi, l’utilisateur sera prévenu et pourra annuler s’il a effectué un ‘miss-click’.
Suivi de Monsieur Thronte et entraide entre élèves
Durée : ~5h30 minimum
J’ai participé au suivi de Monsieur Thronte. Il a exprimé que j’avançais bien et qu’il était satisfait. Ses retours auront été d’utiliser un ‘space-around’ plutôt que ‘space-between’ pour un meilleur espacement des éléments de la nav, remplacer l’image du logo par un une balise de texte car il s’agit d’un mot et non d’une image, sur les pages autres que l’accueil, remplacer le logo par le titre de la page, réduire l’interligne des boutons d’unités de l’accueil et augmenter le padding entre l’étiquette et le temps et mettre les éléments de liste dans des <li> (ex: la navigation). Il a ajouté que les animations que je souhaite réaliser en gif peuvent attendre après la Beta si je n’ai pas le temps.
Après le suivi, nous sommes restés entre élèves pour nous entraider.
La suite ?
Primordial (pour la Beta)
- Intégrer la connexion, création de compte, le pop-up listant le voc. de l’unité cliquée, la liste de mots à revoir lorsqu’une révision est finie.
- Ecran de responsive
- En plus des précédents retours d’élèves, réaliser au moins un test utilisateur
- Vérifier le contenu de l’API (le timing des unités notamment)
- Remplacer le logo de partage et la favicone par leur version updatée
- Landing page
- Slides de présentation pour la Beta (avec la DA finalisée)
- Retours d’élèves : afficher la nav au swipe vers le haut lors de l’apprentissage/des révisions et revoir l’agencement des mots appris lorsque l’unité est réussite.
- Retours de Monsieur Thronte : espaces de la nav, logo à remplacer, interlignes/padding des boutons d’unités, nav dans <li>
Si j’ai le temps
- Animer les personnages en gif
- Animations CSS
