Hannah Mathot TFE — Rapport 7
HEAJ DWT 2022–2023 B3G1– Semaine 21
Nom de projet
Signes Essentiels — Quelques mots de langue des signes LSFB pour un contact chaleureux.
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
Améliorations des retours de Monsieur Thronte et des tests utilisateurs d’étudiants
Liste du voc. d’unité cliquée, espacements, titres et sémantique
Durée : ~3h10
J’ai intégré le design du pop-up listant le vocabulaire d’une unité. J’ai modifié l’espacement des éléments de la navigation en space-around, diminué l’interligne des boutons d’unités de l’accueil et ajouté un espace plus important entre les étiquettes d’unité et de timing. J’ai remplacé l’image du logo par une balise de paragraphe, ce qui uniformise le logo avec les titres de la page. Le terme SignEssentiels est remplacé sur les autres pages par le titre de la page en question. J’ai amélioré la sémantique du footer.
Mots à revoir et pages de connexion et de création de compte
Durée : ~2h40
J’ai intégré le design de la liste des mots à revoir à la fin d’une révision. Après réflexion, je n’y ai pas ajouté de pattern sur le pop-up car la page des scores est déjà très simple et un pattern ici serait trop redondant étant donné qu’il y en a déjà deux mis en place et visible en haut et en bas de l’écran du score. J’ai enlevé le pattern du bas lors de l’apprentissage et des révisions car celui-ci se plaçait devant les boutons. J’ai créé les pages de connexion et de création de compte.
Liste des nouveaux mots appris
Durée : ~1h20
J’ai revu l’affichage des nouveaux mots appris pour qu’il soit plus attrayant et cohérent avec les autres listes du site.
Faire apparaître la navigation au swipe-up
Durée : ~40min
J’ai utilisé l’outil hammer.js appris à l’école pour afficher la navigation lors de l’apprentissage et des révisions au swipe-up de l’utilisateur. Celle-ci disparaît d’elle-même après quelques secondes.
Pop-up responsive
Durée : ~1h
J’ai designé le pop-up apparaissant en version desktop expliquant à l’utilisateur que le projet a été optimisé pour le mobile mais qu’il peut tout de même le parcourir.
V de validation
Durée : ~2h20
J’ai ajouté un v lorsque l’utilisateur inscrit un input correct lors de l’apprentissage et des révisions.
Test utilisateur filmé
Durée : ~3h15
En plus d’avoir reçu plusieurs retours utilisateurs d’étudiants au fur et à mesure que le projet avançait, j’ai réalisé un test utilisateur afin d’avoir un avis supplémentaire d’une personne n‘étudiant pas l’UX/UI.
J’en ai réalisé une analyse.
Le test s’est passé dans la bonne humeur.
La personne testée aura surtout apprécié les vidéos, les personnages, l’unité Communiquer pour mettre à l’aise l’interlocuteur et toute la mise en place de l’apprentissage.
Elle aura juste eu du mal lors de la recherche à savoir si un mot recherché est disponible sur l’application.
Toute l’expérience aura été fluide, joyeuse et pleine d’intérêt. La testeuse a compris l’utilité de chaque page et de chaque fonctionnalité d’apprentissage. Elle a mené à bien les deux unités demandées sans soucis.
Les améliorations que je devrai effectuer suite à ce test utilisateur sont d’enlever un padding-bottom sur les boutons d’unités cadenassées, lister tous les mots recherchables lors de la recherche si celle-ci est infructueuse et indiquer dans les slides qu’il y aura une fonctionnalité dans le futur qui analysera les mouvements de l’utilisateur afin qu’il ne se trompe pas.
J’aurai ainsi pu avoir le point de vue d’une étudiante aux connaissances informatiques moyennes en plus des certains retours d’autres personnes depuis le début du projet.
Padding et compression
Durée : ~8h30
J’ai enlevé le padding-bottom aux unités cadenassées et j’ai regardé à compresser davantage les vidéos pour avoir une meilleure expérience utilisateur.
Liste de tous les mots recherchables
Durée : ~1h
J’ai ajouté la liste de tous les mots appris sur l’application lors de la recherche afin de guider l’utilisateur, comme également proposé par Monsieur Bourgaux lors d’un des suivis. Celle-ci est disponible à tout moment lors de la recherche et se ferme automatiquement dès que l’input du champ change.
Propreté du code
Durée : ~3h
J’ai vérifié la propreté du code (balises, hiérarchies, ul/li pour les listes, alinéas, retours à la ligne, fonctions, etc.)
Landing
Durée : ~11h40
J’ai réfléchi au design de la landing page et je l’ai codé en mobile et responsive.
Suivi de Monsieur Di Stefano
Durée : ~5h50
J’ai participé au suivi de Monsieur Di Stefano.
Ses retours ont été de cropper les vidéos pour qu’elles soient cadrées comme dans le journal TV, démarquer davantage les illustrations de la landing page, remplacer le nom du projet SignEssentiels par une version plus francisée car la LSFB est une langue francophone, remplacer l’icône de liste de voc par la version plus habituelle de liste à 3 bullets/lignes, mettre une icône en remplacement de celle de la liste qui ouvre une pop-up pour expliquer en quoi consiste les unités Communiquer et Interpeller afin que l’utilisateur sache en quoi elles consistent, animer les personnages de ces dernières pour plus d’animation, quand on clique sur une unité cadenassée, créer une pop-up indiquant qu’elle sera déverrouillée une fois le groupe précédent fini, pour l’unité Communiquer, remplacer le « raté » par « et non » et avoir un personnage plus évocateur (ex: petite larme en plus du sourire) et pour apprendre, dans la barre de progression, expliquer quelque part à l’utilisateur que quand on rate que la barre ne progresse pas.
Suivi de Monsieur Tournay
Durée : ~1h
J’ai participé au suivi de Monsieur Tournay.
Il m’a indiqué qu’il trouvait mon projet bien construit, que la DA avait bien évolué et que je travaillais efficacement.
Ses retours auront été d’ajouter un indicateur de difficulté d’unité selon la complexité des signes, plutôt que d’ajouter une icône « ? » pour les unités Communiquer et Interpeller, renommer le titre pour qu’il soit plus évocateur du contenu de son unité et regarder aux boutons verts dans ces dernières car un élément vert comprenant un texte « Faux » n’est pas correct en terme d’UX.
Améliorations des retours de Monsieur Di Stefano et Monsieur Tournay
Durée : ~8h
J’ai francisé le nom du projet, de SignEssentiels pour Signes Essentiels. J’ai changé l’icône de liste pour sa version plus habituelle. En suivant le conseil de Monsieur Tournay, j’ai renommé les titres des unités Communiquer et Interpeller afin qu’ils soient plus évocateurs du contenu de leurs unités respectives. J’ai regardé à ce que la mascotte de l’unité Communiquer soit davantage désolée lorsque l’utilisateur se trompe. J’en ai fait plusieurs tests.
J’ai gardé une expression souriante pour alléger l’ambiance et ai fait adopter à la mascotte la même posture que celle des personnages gênés de cette même unité pour garder une cohérence en plus d’y ajouter une grande larme pour un effet comique. Outre cela, j’ai changé le terme « Raté » par « Et non ».
J’ai ajouté le niveau de difficulté des unités selon la complexité des signes.
J’ai ajouté une pop-up au clic d’unité cadenassée pour indiquer à l’utilisateur que celle-ci sera déverrouillée une fois les précédentes parcourues.
J’ai mené une réflexion quant à la couleur des boutons dans l’unité Communiquer : celle-ci ne peut pas être vert-rouge car je n’ai utilisé du rouge nulle part sur l’application. Le seul jeu de couleur utilisé est celui dans les paramètres où un bouton à un fond vert contrastant avec un autre bouton au fond blanc mais cela ne serait pas pertinent car il s’agirait également d’une utilisation de vert pour un bouton « Faux ».
J’ai recherché en utilisant les couleurs de la DA autres que le vert : blanc, noir et gris (#DADADA).
J’ai fait plusieurs tests et recherches mais aucuns n’étaient esthétiques ou cohérents avec la direction artistique donc j’ai décidé de garder la couleur initiale des boutons.
Vidéos recadrées puis compressées
Durée : ~10h20
J’ai recherché pour comment rogner les vidéos pour qu’elles aient une taille correspondant au « cadre du signeur » en plus des mains. Je les ai ensuite compressées. Cela m’a pris énormément de temps vu la quantité de vidéos.
Compteur dans la barre de progression
Durée : ~5h10
Il y a longtemps, j’avais déjà fait des recherches pour ajouter un compteur de mots lors de l’apprentissage mais cela ne fonctionnait pas donc j’avais mis cela de côté. Cependant, suite au suivi de Monsieur Di Stefano, j’ai voulu tenter de réessayer et cela a été fructueux : j’ai réussi à implémenter un compteur. Cela permettra une meilleure expérience utilisateur.
J’ai fait en sorte que le compteur aide l’utilisateur à savoir où il en étant et à mieux comprendre l’interface en étant précise dans l’appellation de l’étiquette : « x mots restant » lorsqu’on apprend des nouveaux mots et « x réussi sur y » pour indiquer les étapes restantes lors de l’entrainement. Le terme « réussi » indique à l’utilisateur que la barre avancera s’il réussit l’exercice ainsi, si elle reste fixe, ce dernier comprendra que c’est parce qu’il a eu une mauvaise réponse.
J’ai fait plusieurs recherches de bonnes pratiqued d’UI/UX de compteur et des essais pour voir quelle serait la meilleure mise en place.
J’ai opté pour une couleur de barre grise plutôt que verte car c’est cette teinte qu’on retrouve le plus souvent dans les inspirations que j’ai recueilli. Celle-ci se marie notamment bien avec les patterns. J’ai réduit la barre et le compteur afin qu’ils ne soient pas trop imposants sur l’écran. J’ai préféré placer le compteur en haut à droite car il est moins visible s’il se trouve dans la barre et il se mélange trop au contenu s’il est situé en bas.
Finitions de la landing page et passage au gif
Durée : ~14h
J’ai amélioré l’étiquette « +100 » en « 98 » sur la landing et arrondis davantage et mis une plus grande ombre pour que les images de la landing illustrant l’app ressortent bien et ne se confondent pas avec la page. J’ai regardé à finir le responsive de la landing page puis à mettre en place un slider dans cette dernière uniquement en mobile. J’ai fini par ajouter une page de remerciements. J’ai vérifié que l’application et la landing fonctionnaient bien en ligne.
En regardant ce que rendait le site sur mobile, j’ai décidé de changer le format des vidéos pour un format gif. Avant que je croppe les vidéos, celles-ci se lisaient bien mais depuis lors, un effet « d’explosion » apparait dès que l’utilisateur apprend un nouveau mot ou s’entraine à cause de la combinaison de l’autoplay et du resize de la taille et reset du temps de la vidéo. En plus, elles sont extrêmement lentes sur mobile voire ne se jouent souvent pas. Même si j’aurais préféré des vidéos, j’ai finalement tout changé pour des gifs afin d’avoir une meilleure expérience et je les ai compressés. Les gifs se sont avérés une solution miraculeuse et excellente face au problème et améliorent incroyablement les performances du site.
J’ai poursuivi en regardant à améliorer l’agencement des éléments lorsque je teste directement sur mobile pour avoir une meilleure expérience. Une fois plusieurs détails corrigés, j’ai mis tout en ligne pour la présentation.
Présentation BETA
Durée : ~6h
Pendant toute une journée, nous avons assisté à la présentation des travaux de chacun.
J’ai adoré les découvrir et les regarder plus attentivement une fois chez moi.
J’ai pu présenter mon projet. J’ai utilisé des slides comme support visuel.
Tout s’est très bien déroulé, je n’ai eu que des commentaires positifs et encourageants.
Concernant les retours, j’ai su apporté une dimension chaleureuse aux slides mais la landing est trop vide/espacée/froide donc je devrai m’inspirer de ces dernières pour l’améliorer davantage. Monsieur Tournay a également mentionné une fonctionnalité (à ne pas développer, uniquement dans la catégorie « dans le futur »), qui serait de permettre à l’utilisateur d’avoir un retour caméra lorsqu’il filme. Monsieur Thronte m’avait déjà donné l’idée du miroir pour le jour de la présentation mais cette proposition de fonctionnalité ne m’était cependant pas venue à l’esprit et elle me semble indispensable dans un certain futur.
La suite ?
Pour le 10 juin, il me reste donc à animer les personnages, améliorer la landing, indiquer cette 2ème fonctionnalité dans les slides de présentation pour un futur fictif et regarder au stand.
