Questioning Myself

Case study

Introduction

L'avez-vous déjà connu ? Cette situation désagréable où quelqu'un s'est trompé mais vous rejette la faute dessus. Mais qu'est-ce qui lui prend ? C'est lui qui s'est trompé et ça serait ma faute ? Ou bien ce moment où vous explosez votre ami au bowling ou kicker et celui-ci vous sort « Nan mais j'ai eu une crampe au poignet » . Mais pourquoi rejettent-ils tous la faute sur autre chose au lieu de se remettre en question ?

Et bien, je suis ici pour vous aider à comprendre cela ! Avec mon ami le petit projet utile (ou PPU pour les intimes). PPU est un projet réalisé dans le cadre de mon travail de fin d'année dans l'option Design Web et Mobile à la Haute École Albert Jacquard.

Réflexions et recherches

Choix du thème

Le choix du thème n’a pas été simple, nous avons proposé 10 thèmes à nos professeurs, cependant aucun de mes 10 thèmes n’a été accepté. Donc j’ai reproposé 5 thèmes, 3 que j’avais déjà proposé mais que j’ai reformulé, et 2 nouveaux. Au final, ces 3 thèmes ont été acceptés :

J’ai choisis celui sur la remise en question, car je trouve qu’il s’agit de quelque chose dont on ne parle que trop peu souvent contrairement aux 2 autres thèmes, et qu’il me parle car la remise en question est quelque chose qui m’a permis d’avancer dans biens des situations.

Les 5W

Afin de réaliser ce projet, je me suis posé 5 questions afin de mieux le définir :

Chacun d’entre nous (who) souhaitant s’améliorer, devenir meilleur (why) dans un domaine auquel il accorde de l’importance (when) en étant plus critique envers soi-même (what) et cela où qu’il soit (where).

Recherches utilisateurs

Afin de réaliser celui-ci en plus d’avoir questionné plusieurs personnes de mon entourage, j’ai également réalisé un sondage. Après consultation auprès de mes professeurs, j’ai changé quelques questions de celui-ci et l’ai partagé.

Mon sondage → Google form

Les réponses à celui-ci → Google sheet

Ma première réaction a été de voir l’engouement autour de mon sujet, beaucoup de personnes ont adoré le thème et m’ont encouragé pour celui-ci. J’avoue que cela m’a fait plaisir.

Présuppositions et top tasks :

Suite aux conseils d’un de mes professeurs, j’ai mis dans mon sondage mes présuppositions pour savoir quoi faire pour mon sujet, les 2 plus appréciées furent :

Prototype papier

J’ai donc choisi de baser mes modules sur le quiz et le contenu sur une explication du sujet. D’habitude les quiz ce n’est pas vraiment une idée qui me plaît, c’est assez simpliste, mais mon rôle va être de rendre celui-ci le plus intéressant possible. Vu qu’il ne s’agit pas d’un simple quiz avec des points pas très intéressant mais plutôt une démonstration de comment voir les choses autrement en se remettant en question au lieu de toujours accuser un facteur externe à nous-même lors d’un échec. Le but n’est pas de dire à l'utilisateur qui a tort, mais que même dans un échec où nous ne sommes pas forcément fautifs l’on peut chercher à améliorer la situation en se remettant en question.

User journey et voice and tone

J’ai créé un scénario d’utilisateur à l’aide du site uxpressia.com, afin de m’aider pour réfléchir à un voice and tone adapté. Pour le voice j’ai choisis la curiosité, et la simplicité tandis que pour le ton, j’ai choisis de m’adresser en tant que groupe, communauté que nous formons tous en tant qu’humain, en plus simple je vais m’adresser aux utilisateurs en employant la forme  « Nous » .

User journey

Mise en place du contenu

Rédaction du contenu

Afin de réaliser mon contenu, je me suis basé sur plusieurs articles de psychologie qui traitent du biais d’auto-complaisance. Je me suis aussi basé sur les résultats de mes recherches utilisateurs afin d’y ajouter des choses. La rédaction n’a pas été simple entre les termes scientifiques, les idées qui se mélangent et les articles en anglais.

Prototypes papiers

J’ai réalisé mes premiers prototypes sur papiers et les ai fait tester à ma mère, je n’ai pas eu beaucoup d’autre choix avec le confinement mais l’avantage est que ma mère n’utilise jamais d’ordinateur ou internet donc n’ayant pas l’habitude de ceci elle fait un super testeur!

Prototype papier Prototype papier

Après mes premiers tests papier, j’ai changé quelques détails comme le bouton pour valider où au lieu d’avoir une simple icône de validation j’ai mis le message  « Valider votre réponse »  pour mieux comprendre. J’ai également changé les réponses pour les remplacer par des images mais indiquant toujours la réponse en dessous. J’ai également ajouté des liens pour recommencer le quiz ou retourner aux réponses.

Prototype papier Prototype papier

Choix typographiques

Pour mes choix typographiques, j’ai choisi une font display pour mes titres “Yeseva One” et pour mon texte une font sans serif “Noto Sans”. La taille de corps du texte fera 16px pour la version mobile, 18px pour la version tablette et 20px pour la version desktop.

J’ai choisi un interlignage de 1.5, et j’étais parti à la base également pour un rapport hiérarchique de 1.5 comme ça pour mon rythme vertical je trouvais ça super d’avoir quelque chose de super régulier vu que l’interlignage des titres collait toujours à un multiple de la taille du corps de texte. Cependant cela m’a bloqué car je souhaitais un rapport hiérarchique de plus entre ma taille de corps de texte et celle du niveau de titre juste au-dessus. Donc j’ai finalement changé et opté pour un rapport hiérarchique de 1.333.

Choix couleurs

Je suis parti sur une palette monochrome autour du vert. Pourquoi le vert ? Et bien le vert est une couleur symbolisant la réussite, la victoire, le fait d’être dans le bon. Et avec mon travail le but est d’indiquer qu’il s’agit d’une bonne chose pour soi de se remettre en question donc j’ai opté pour cette couleur. Quant à la couleur de contraste, j’ai choisi l'orange car elle ressortait très bien sur le vert foncé et suffisamment sur le vert claire où elle gardait quand même un contraste AA.

Prototype

Ah les prototypes sur figma, j’y ai passé beaucoup de temps ! Déjà pourquoi avoir choisi figma et pas un autre logiciel ? Déjà je n’ai pas choisi sketch pour une raison toute simple, je n’ai pas de mac ! :'( Ensuite, j’ai préféré figma à inVision pour plusieurs raisons, mais les principales sont l’optimisation et le fait que sur figma l’on peut travailler à plusieurs simultanément ce que je trouve super si dans le futur je souhaite travailler à plusieurs sur un projet donc j’ai préféré me familiariser avec celui-ci.

Mes prototypes sur figma ont énormément évolué au fur et à mesure que je travaillais dessus. La plus grande difficulté pour moi a été de trouver un style graphique cohérent. Pour mes illustrations, j’ai eu du mal car n’étant pas très bon sur illustrator les illustrations que j’ai réalisé moi-même étaient horrible. Je suis donc partit sur une des illustrations que j’avais trouvé (celle du couple qui se dispute) et j’ai décidé de rester sur ce type de style graphique et de trouver des illustrations gardant le même style. J’aimais bien le fait que ça soit monochrome ça collait bien au fait d’être parti sur une palette de couleur monochrome.

Evolution des prototypes sur figma

J’ai prêté attention aussi à la Gestalt, spécialement à la continuité avec les images dirigée vers le texte. Un de mes professeurs m’a rendu fan d’UX alors que de base c’est surtout le code qui m’intéresse. J’ai conscience que l’aspect graphique est mon point faible mais je trouve ça génial l’impacte de l’UX sur notre façon d’agir sur un site donc j’essaye d’au moins avoir un aspect UX parfait, même si j’ai encore beaucoup à apprendre dans ce domaine je pense.

J’ai également fait attention à mes marges et mon rythme vertical en me basant sur la taille de mon corps de texte. C’est très long à réaliser pour chaque prototype, mais en vrai ça m’amuse un peu car j’aime bien tout ce qui est droit et bien agencé.

Evolution des prototypes sur figma

Codons tout ça!

Modules

Ah on s’attaque à la partie la plus fun du travail ! Bon je n’ai pas grand chose à dire sur la partie javascript, je n’ai pas vraiment eu de mal avec celle-ci même si je m’y suis un peu cassé la tête par moment. Après mes modules et mon code sont encore améliorables et je compte finir de les mettre au point. Je suis impatient de m’attaquer à du code plus hardcore et donc plus fun en 3ème ! :D

Mes 3 modules sont :

Evolution des prototypes des modules sur figma

Attaquons de front le front-end !

J’ai profité du tfa pour m’améliorer sur l’utilisation du Sass, je l’utilisais déjà auparavant mais pas de façon optimale et donc je me suis forcé à faire les chose bien sur ce projet. Et qu’est-ce que c’est génial en fait le Sass ! Je suis devenu fan, c’est tellement mieux pour s’y retrouver et avoir un code plus propre. Et avec l’utilisation de la méthode Bem ce n’en est que plus clair et simple !

Conclusion, une remise en question

Le projet était bien plus conséquent que ce que je m'imaginais. Je n’ai pas trouvé celui-ci spécialement difficile, car ce que l’on a vu au cours durant l’année nous donnait suffisamment de compétences pour la bonne réalisation de celui-ci. Excepté peut-être pour certains aspects du code (en même temps impossible de tout apprendre en cours), mais l’avantage du code c’est que l’on peut trouver toutes les informations que l’on souhaite sur celui-ci sur internet très facilement ! Mais je ne m'imaginais pas que ce travail demanderait autant de temps, j’ai clairement sous-estimé le temps nécessaire à sa réalisation et cela a été ma plus grosse erreur.

Au final, ce travail m’aura permis de m’améliorer sur l’application des choses que l’on a appris durant l’année. Et il m’a fait réaliser que j’ai encore beaucoup à apprendre et m’a rendu encore plus impatient d’apprendre encore plus de choses.

Crédits

Voici les sources des images et de la musique que j'ai utilisé.