TFE — STEP 04

Lisa Palmigiano
4 min readApr 27, 2021

--

Thématique de mon TFE : La dyslexie | Nom du projet: Lexie

BIENTÔT LA FIN…

Nous voici arrivés à l’avant dernier rapport de ce TFE. Nous rentrons donc de plus en plus dans la concrétisation de celui-ci. Dans ce rapport, j’exposerai principalement mon design finalisé qui m’a pris pas mal de temps à réaliser. Je ferais également une petite parenthèse concernant l’intégration et la partie technique du code.

LE DESIGN

Pour le design global, j’ai cherché à avoir quelque chose de minimaliste et à mettre l’accent sur la partie textuelle car c’est sur cet aspect que tourne l’expérience interactive (partie sur laquelle repose mon projet). J’ai donc misé sur des illustrations faites au trait afin de garder cette notion de douceur, de légèreté et de minimalisme. Concernant la couleur, j’ai choisi des nuances de teintes mauves pour conserver un aspect doux et épuré.

L’interface d’accueil

Pour les illustrations de la page d’accueil, j’ai voulu apporter des visuels mettant en scène des mains pour mettre l’accent sur la notion d’interaction et pour rappeler le côté humain et l’aspect de sensibilisation du projet.

Quant aux couleurs des textes, je tenais à garder une cohérence avec l’ambiance mauve constante. C’est pourquoi, j’ai opté pour une couleur bleu/violacée foncée plutôt que le noir classique.

Page d’accueil (desktop + mobile)

L’interface informations dyslexie

Sur cette page, les illustrations se définissent principalement par une représentation de cerveaux car c’est l’endroit où la dyslexie est présente. L’ajout des icônes qui complètent les cerveaux permettent de mettre en avant le trouble auquel se rapporte le type de dyslexie (phonétique, lexicale, et mixte) et de garder une certaine cohérence globale.

J’ai également ajouté une partie où je propose des liens vers des sites spécialisés dans la dyslexie. Mon but n’étant pas de parler de celle-ci dans les moindres détails (n’étant pas professionnelle) mais, plutôt de donner une idée à l’utilisateur de ce qu’est la dyslexie et des troubles les plus fréquents.

Page d’informations dyslexie (desktop + mobile)

L’interface formulaire/ l’interface expérience

En ce qui concerne les interfaces: formulaires et expériences, je n’ai pas procédé à de réelles transformations visuelles depuis mes précédents articles c’est pourquoi je vais faire un rapide résumé des fonctionnalités de ces interfaces.

Le formulaire

Le formulaire laisse donc le choix à l’utilisateur de sélectionner le type de trouble auquel il veut être confronté (omission, inversion, espacement, mouvement et miroir ) le thème du texte (roman, fable, poème, mode d’emploi) et le type de réponse qu’il souhaite utiliser (écrite où vocale).

Formulaire (desktop)

L’expérience

L’utilisateur a 3 minutes pour retranscrire le texte sans fautes sinon il sera bloqué et fera face à un message créant d’une part, une frustration et lui rappelant d’autre part, combien il est difficile de lire en étant dyslexique.

Il pourra également consulter sa réponse s’ il fini dans les temps. Il aura la possibilité de consulter ses erreurs et de constater les difficultés du trouble.

Expérience (desktop)
Écran si le temps est dépassé (desktop)
Consultation de la réponse (desktop)

L’expérience n’est disponible qu’en version desktop car la version mobile n’offre pas une lisibilité assez optimale pour pouvoir vivre l’expérience dans son intégralité. C’est pourquoi un visuel d’alerte est prévu à cet effet:

Message d’alerte (mobile)

L’INTÉGRATION

Pour le moment, je me suis occupée de l’intégration de la partie front de mon projet concernant les pages d’accueil, d’informations et du formulaire pour accéder à l’expérience. Les visuels sont représentés ci-dessus dans la partie où j’explique mon design.

POUR LA SUITE

Je commence à attaquer la partie vraiment technique (le code des expériences interactives) qui est la plus complexe du point de vue de l’adaptation de mes simulations textuelles. J’ai commencé pour le moment, à créer une API afin de regrouper mes textes par thématique et de pouvoir les sélectionner et les adapter plus facilement dans mon code.

Time sheet:

À très vite pour la dernière ligne droite!

--

--