Chargement...

LS

En cours — Série d'illustrations inspirée de l'univers californien du jeu GTAV.

Lex.io

2017 — Conception d’un outil pour accompagner l'apprentissage autonome une nouvelle langue. Case study, méthodologie UX/UI.

Introduction

Mon niveau d'anglais est très faible. Pourtant, j'aimerais parler la langue couramment pour me sentir autonome en situation d'immersion. Je n’ai ni les moyens ni le temps de prendre des cours. J'apprends seul, notamment en regardant des séries. J'essaie aussi de lire des articles en anglais, mais la décortication des phrases rend la lecture d’un paragraphe interminable. Je ne pratique pas fréquemment et d'une fois à l'autre, il m'arrive d'oublier le peu de choses que j'avais réussi à comprendre. — Ce n’est pas une façon optimale d’apprendre l'anglais. Autour de moi, j’observe de nombreuses personnes présentant les mêmes difficultés d’apprentissage d’une langue étrangère. Il me semble donc intéressant de s’intéresser à cette problématique et de proposer une solution.
Pour m’aider, je me constitue, au fur et à mesure, une liste des mots et d'expressions que je comprends. Cela m'oblige à les mémoriser. Comme le sens des mots s'inscrit dans un contexte, je fais l’effort de rédiger des phrases courtes et simples qui mettent en évidence un ou deux termes maximum. Cet exercice m’aide à assimiler le vocabulaire et les expressions nouvelles. Je note la phrase en anglais et sa traduction en français.

Problèmes et objectifs

Je saisis cette liste dans un tableur basique. Mais plus la liste s'allonge, plus il devient compliqué de retrouver un mot, ou de réorganiser et de classer le contenu. Je me suis demandé comment optimiser le tableur pour l'usage que j'en ai, et de le rendre interactif.
Pour commencer, quatre points me paraissent prioritaires à tester :

• Premièrement, la mise à disposition d'un formulaire de saisie avec seulement deux champs. Un pour noter la phrase dans la langue que j'apprends et l'autre pour enregistrer sa traduction dans ma langue maternelle. J'appuie sur Enter et la nouvelle traduction s'ajoute à la liste.
• Dans mon tableur, j'ai plusieurs traductions pour un même mot, qui a différentes significations. Ces traductions sont réparties dans ma liste, en fonction de leur ordre de saisie. Un champ de recherche qui permet d'afficher uniquement les traductions contenant la saisie est donc nécessaire. Ça peut être un seul mot ou un morceau de phrase.
• Troisème point, ma liste ne cesse de s'allonger. Un système de classification simple va me permettre un autre niveau de tri. Il faudrait pouvoir mettre des étiquettes aux traductions.
• Enfin, je veux pouvoir valider ma progression régulièrement en réalisant des tests. Si le tableur me propose de traduire des phrases enregistrées, de façon aléatoire, c’est un vrai plus pour accélérer mon apprentissage.

Design process

Les besoins prioritaires sont donc la saisie de nouvelles traductions, et la recherche rapide des traductions déjà enregistrées. C'est la base de l'outil. Ces deux fonctionnalités permettent de définir une structure. D'autres fonctionnalités viendront ensuite s’articuler autour.

La structure est fonctionnelle. Il faut maintenant s'intéresser à l'occupation dans l'espace, en essayant d'anticiper la compatibilité aux mobiles. Selon le sens de lecture, le champ de recherche se trouve naturellement au dessus des résultats. Sachant que la liste peut être longue, il semble judicieux de positionner le formulaire au-dessus du champ de recherche. En arrivant sur l'interface, deux options se présentent : enregistrer une nouvelle traduction ou faire une recherche dans la base de données. Sur cette deuxième proposition, si aucun résultat n'est disponible dans la base, je dois l'ajouter en copiant collant d'un champ à l'autre ma recherche initiale. Dans ce cas, peut-être que le champ de recherche et un des champs du formulaire peuvent fusionner en un seul.

À ce stade, il manque une fonctionnalité essentielle pour que l'utilisateur soit autonome avec l'outil : la suppression d'une traduction. Implémenter cette fonctionnalité amène une autre réflexion sur l'action de modifier une traduction. C'est plus simple d'avoir la possibilité d'éditer une traduction que de passer par le chemin supprimer > nouvelle traduction.

Mon expérience se déroule sur ordinateur. J'ai pour habitude de consulter diverses ressources en anglais et j'en profite pour enregistrer au fur et à mesure le vocabulaire que je découvre. Aussi, l'outil est d'abord pensé en version desktop — Cela dit, lire ou écouter des émissions et enregistrer une liste de vocabulaire directement sur son smartphone est un contexte tout aussi pertinent. — Sur l'ordinateur, l'utilisateur utilise avant tout son clavier. Le clavier pourrait donc remplacer les actions effectuées à la souris, en utilisant le système des raccourcis clavier. C'est un moyen de gagner du temps, en évitant à l'utilisateur de trop souvent alterner entre souris et clavier. L'usage de la souris reste toujours possible, c'est une possibilité pour optimiser son utilisation.

Tout à fait logiquement, la liste de vocabulaire et d’expressions ne cesse de s’allonger. Un niveau de sélection supplémentaire devient nécessaire. En introduisant un filtre par catégorie, la recherche est plus efficace. Pour répondre à ce besoin, l’outil Trello est inspirant. La création de labels et les possibilités d’organisation qui me sont offertes me correspondent bien. Il paraît opportun de capitaliser sur ce modèle et de l’adapter à l’interface de mon outil d’apprentissage d’une langue étrangère. Cela permet de tester une solution à faible investissement. À voir ensuite si cette fonctionnalité est vraiment intéressante ou comment la faire évoluer en fonction de l'interface et plus tard des usages.

Dernier point, j’ai besoin d’évaluer mes connaissances. Pour une première version, un mécanisme de tests relativement simple à mettre en place peut y répondre. Un système me proposant un exercice de traduction d’une phrase issue de la base de données me permet d’estimer mon niveau de progression. Je peux déterminer la langue dans laquelle je serai interrogé et définir un groupe de traductions bien précis en fonction des catégories que j’ai créées.

Avant de commencer la maquette, je garde en tête de faire quelque chose de très épuré à la fois pour la simplicité d'usage et pour ne pas distraire l'utilisateur avec des éléments inutiles. Il faut laisser l'avantage visuel au contenu, et mettre en avant ce que l'utilisateur a écrit, c'est ce qui l'intéresse. Ensuite, afin de hiérarchiser l'information, j'utilise une couleur spécifique pour exprimer et attirer l'attention sur des éléments secondaires ou des évènements interactifs. Par exemple le survol de certains boutons ou cellules, des messages d'aide lors des premiers usages, ou d'avertissement par la suite.
En résumé, la réalisation de l’interface repose sur les éléments fondamentaux que sont le champ de recherche, l’ajout, la suppression et la modification d’une traduction. Les autres fonctionnalités comme les labels, les tests et les raccourcis clavier, viennent se rattacher à la structure de base et peuvent être retirées à tout moment, selon le niveau de satisfaction à l’usage.

Maquette

Dans un premier temps, je renseigne un champ de recherche avec la langue dans laquelle j'effectue la recherche. — Ce détail pourrait s'avérer inutile dans la mesure où la recherche s'effectue pour toutes les langues dans lesquelles les termes saisis sont connus, qui sont écrit de la même façon dans les deux langues. — En dessous, la légende sert à la fois de boutons cliquables et d'indications pour raccourcis clavier.
Un deuxième champ apparaît lorsque j’entre dans le processus d'enregistrement d'une nouvelle traduction. Ici, le choix des langues est indispensable.
La gestion de l'espace est importante, entre les phrases et les labels. La séparation entre les traductions doit être claire, sachant que certaines peuvent occuper plusieurs lignes. Les labels ne doivent pas perturber la lecture ni prendre trop d'espace. Les couleurs permettent de les identifier rapidement sans me gêner.
Quand le curseur est placé sur une traduction, plusieurs options sont proposées. Je peux voir les labels et leur légende. Je peux les modifier ou en ajouter en cliquant dessus. La modification des traductions se fait directement sur la cellule. Deux champs apparaissent et les éléments s'adaptent avec très peu de différence. Pour une meilleur compréhension et plus d'efficacité, je ne change pas d'environnement.
Le filtre par catégorie est un drop menu classique. Dès qu'une catégorie est sélectionnée, la liste se met à jour. Les choix peuvent être cumulés. Les catégories sont éditables — couleurs et légende — et les répercutions s'appliquent automatiquement après modification, sur l'intégralité de la liste.
Lorsque le mode "test" est enclenché la liste de traduction est remplacée par l'interface du test. Des phrases sont tirées au sort dans la bibliothèque et j'utilise le champ de saisie pour renseigner la traduction. Si je ne sais pas répondre, je passe la traduction et poursuis le test, ou le quitte. Une barre indique la progression dans le test. Dans un premier temps ce fonctionnement est très basique mais il est possible de configurer le nombre de phrases à traduire, leurs catégories, celles pour lesquelles la traduction n'a pas été juste précédemment, celles qui ne concernent qu'un seul terme, etc. Et en cumulant plusieurs de ces critères, je crée une sorte de playlist pour personnaliser mes propres tests.

Operator

2017 — Opertator est un jeu de gestion et d'organisation pour mobile.
Webapp développée en javascript.

Concept

Le but du jeu est de gérer le trafic d'un mini réseau de métro. Des voyageurs apparaissent dans chaque station de plus en plus fréquemment. Pour ne pas être débordé, le joueur doit sélectionner les voyageurs en attente et leur indiquer le trajet à suivre pour qu'ils arrivent à destination. Au fil du temps et des missions accomplies, le joueur gagne de l'argent. Plus il en gagne plus il pourra acheter de nouveaux trains et améliorer ceux qui sont déjà en circulation. Si une station est pleine de voyageurs en attente pendant trop longtemps, le joueur a perdu la partie.

Onboarding

Avant de jouer, le joueur est guidé pas à pas, le plus clairement possible sur une action type du jeu. Il doit effectuer des tâches simples pour découvrir les codes graphiques du jeu, et y être familiarisé une fois le jeu lancé. Ça lui permettra d'appréhender plus facilement l'interface qui est moins digeste si on arrive brusquement dessus. Les jeux sont généralement des concepts et des environnements abstraits. Les éléments et les interactions qui les composent le sont aussi. Ce qui demande aux joueurs un minimum d'effort pour maitriser le but du jeu, les mécaniques et l'interface du jeu. Les tutoriels permettent une entrée en matière plus simple.

L'interface est divisée en deux, la plus grande partie à gauche, correspond à la carte du réseaux de métro. C'est là que le joueur sélectionne les stations pour gérer les voyageurs en attente. Il peut aussi sélectionner une ligne en particulier, pour gérer les trains en circulation ou en ajouter de nouveaux. L'autre partie de l'interface, le dashboard, s'adapte aux actions effectuées sur le carte et affiche les informations correspondantes. Le premier mode "station" permet de voir les voyageurs en attente dans une station, de les sélectionner et d'effectuer leur trajet sur la carte. Le second mode "voyages en cours" permet de voir tous les trains en circulation ou seulement ceux d'une ligne en particulier. Le joueur peut arrêter un train dans une station pour réguler le trafic ou attendre une correspondance pour un groupe de voyageurs.

Flashgap

2015 - 2017 — Designer produit chez Flashgap.

Concept

Flashgap est une application photo sociale qui permet de créer des albums photos collaboratifs avec ses amis. L’utilisateur peut créer un album sur l'application, et inviter ses amis à le rejoindre et y participer. Tous les membres d’un album peuvent prendre des photos ou des vidéos depuis l’application. Lorsqu’une photo ou une vidéo est prise elle disparait instantanément pour être enregistrée dans l’album. Le contenu de chaque membre est réuni dans leur album en commun, mais il faut attendre le lendemain de sa création, à midi, pour découvrir l’ensemble de son contenu.

Début 2016 — Une des premières grosses refontes. Il fallait rassembler toutes les fonctionnalités sur un écran. L'interface devait être originale et percutante. En théorie ça semblait plus intéressant à l'usage mais plus tard on a comprit que c'était une erreur pour plusieurs raisons. Techniquement c'était très compliqué à développer, et compte tenu de nos ressources, c'était quasiment impossible d'avoir un résultat identique au design et à ce qui avait été décidé. L'interface devenait une timeline sous forme de calendrier interactif. L'essentiel des manipulations devait pouvoir se faire depuis ce calendrier. En pratique, avec toutes les fonctionnalités indispensables qu'on avait, c'était très compliqué à réaliser sans que ça devienne incompréhensible ou contre intuitif pour l'utilisateur.

2016 — Suite à plusieurs tentatives d'interfaces atypiques, on s'est rendu compte qu'on stoppait la croissance et qu'on pouvait perdre nos utilisateurs. Avec Flashgap il y avait beaucoup de contraintes et de problématiques techniques, puisque tout se fait en groupe. En plus des problèmes classiques — profil, paramètres, gestions des données personnelles, des droits, qui contrôle l'album, qui peut inviter des amis à le rejoindre, qui peut exclure des utilisateurs de l'album, qui gère les droits, etc. — il fallait penser à tout ça pour des interactions en groupe. Donc le réflexion a basculé sur la réalisation d'une interface ou on multiplie les écrans et les explications, quitte à alourdir le workflow et la navigation. C'est plus compliqué à réaliser puisque il faut anticiper beaucoup plus de parcours utilisateur, mais à l'usage, individuellement, c'est sensé être plus simple. L'interface devait reprendre des codes graphiques évidents et surtout, ne plus faire d'extravagance.

2017 — Utlime pivot pour l'application. Le concept change et met en avant les stories de groupe. C'est assez radical, et cette fois il n'y avait pas que l'interface de l'application qui changeait, mais aussi son fonctionnement. Très perturbant pour les utilisateurs. On se doutait qu'on pouvait en faire les frais et c'était notre dernière chance. Cette fois on assumait pleinement le côté "soirées" du concept, et le fait que nos utilisateurs ne l'utilisaient que pour des évènements nocturnes ou festifs. Donc l'interface est visuellement sombre, pour coller avec l'environnement de soirée et pour éviter d'aveugler les utilisateurs avec une interface en grande partie blanche. Ce revirement de situation était aussi l'occasion de revoir complètement le branding. L'avantage de la pastèque ce sont ses couleurs flashy et son côté cocktails d'été fruité qui correspondait bien à la nouvelle image qu'on voulait donner au produit.

Brainguard

Réunir le médical et la technologie pour lutter contre les commotions cérébrales.

Brainguard veut préserver la santé des joueurs professionnels de Rugby en les protégeant des commotions cérébrales. Le design et la technologie peuvent aider les médecins à détecter les traumatismes crâniens et éviter de graves séquelles sur l'organisme.

www.brainguard.fr

Grâce à la technologie il est possible de capter des facteurs déterminants pour suspecter une commotion chez un joueur. Brainguard permet aux médecins de visualiser continuellement ces données et ces facteurs. Il s'agit de mesures des différents types de chocs subis au niveau du crâne. Dans chaque équipe, si les médecins sont inquiets sur l'état d'un ou plusieurs joueurs, ils peuvent communiquer instantanément avec l’arbitre. Celui-ci est responsable de la santé des joueurs, il a l'appui des médecins pour faire sortir du terrain, ceux qui semblent en danger. La technologie doit constituer un argument indiscutable qui permettra d'accorder tout le monde sur les décisions à prendre. Toutes les données reçues sont stockées dans un dossier médical individuel et virtuel pour améliorer la prise en charge des joueurs.

Cibler précisément le problème sur lequel la technologie doit intervenir.

Seulement une commotion sur dix donne lieu à une perte de connaissance, point d’alerte visible qui permet de décider de la sortie du joueur du terrain pour le soigner. Dans les 9 autres cas, l’état de commotion n’est pas perceptible et les joueurs continuent de jouer. De fait, un joueur peut subir plusieurs traumatismes dans un même match. La répétition de commotions rapprochées peut entraîner de lourdes séquelles et le développement prématuré de maladies neurodégénératives, comme Parkinson ou Alzheimer. En revanche, les commotions isolées et correctement soignées ne présentent pas de risque pour la santé. La technologie n'ne peut empêcher les commotions. Mais elle surveille les chocs et permet aux médecins d’intervenir immédiatement pour préserver la santé du joueur.

Enregistrer et analyser les chocs continuellement.

Tout joueur en situation de développer une commotion doit arrêter de jouer immédiatement et être examiné par un spécialiste. Pour cela les joueurs sont équipés de capteurs fixés sur le crâne. Une commotion survient lorsque le cerveau s'écrase contre les parois du crâne lors d'un choc à la tête. En mesurant les chocs au niveau du crâne on peut interpréter les dégâts subis par le cerveau. Pour que cette interprétation soit pertinente, il s'agit de confronter les données reçues par les capteurs à la physiologie du joueur et à ses antécédents. Les capteurs doivent être légers, adhérents, souples, résistants aux chocs et aux frottements. Ils ne doivent occasionner aucune forme de gêne pour les joueurs. Avec suffisamment d'autonomie pour tenir au moins 40 minutes (une mi-temps de match), ils envoient continuellement les mesures sur la position, la rotation, la vitesse de déplacement et les vibrations du crâne. Avec suffisamment d'autonomie pour tenir au moins une mi-temps.

Mémoire

2015 — Mémoire de fin d'études sur les wearable technologies et les commotions cérébrales au rugby. « Comment utiliser la technologie pour lutter contre les commotions cérébrales occasionnées par la pratique du rugby ? »

Mémoire (PDF 1,6 Mo)
Version light (PDF 35,4 Mo)

Dispositifs de conditionnement

2014 — Projet étudiant, série de photos argentiques. « Une multitude de dispositifs conçus pour assister les citoyens créent un environnement pollué, sale, parfois dangereux, avec des installations incohérentes, violentes, qui finalement semblent rejeter la société. »

1000

2013 — Vidéo teaser
Diffusée au Festival Elektra à Montréal.
Musique: Mr OIZO & Tahiti Boy - « Ronnie » Wrong (OST).

NYC

2012 — Série de photos sur le thème « mobilité urbaine ». 1er prix jeunesse du concours Urban Photo.