TFE — STEP 04

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.

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.

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.

Expérience (desktop)
Écran si le temps est dépassé (desktop)
Consultation de la réponse (desktop)
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.

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store