JS

À la rencontre de Rudy, UX designer chez NeoLynk

  • 21 mai 2019

Graphisme, créativité, inspiration, web accessibility… Autant de termes qui définissent le travail front-end mené au quotidien par Rudy. Dans son interview réalisée au cours d’un déjeuner, notre UX designer autodidacte nous fait part des bonnes pratiques qu’il a accumulées au long de ses années d’expérience. Il nous explique l’importance de toujours mettre au centre l’utilisateur, ainsi que de savoir s’adapter à chaque situation. Il évoque ses échanges constructifs avec les autres NeoLynkers, en faisant part de son avis sur la Tribu JavaScript de NeoLynk.

Découvrez les premiers pas de Rudy dans l’univers web, ses missions marquantes, ainsi que ses tips aux futurs UX designer !

NeoLynk. Qu’est ce qui t’a donné envie de travailler dans le web ?

Rudy. À l’époque où j’ai commencé à m’y mettre, le web était la nouveauté que personne ne connaissait et ça m’a donné envie de l’explorer. J’ai eu envie d’explorer le monde de l’informatique en général, avec d’abord le côté hardware. Je me suis intéressé au web dans les années 2000. Mon idée était de savoir comment fonctionne un site web, surtout au niveau du graphisme.

NeoLynk. Tu as d’ailleurs vite monnayé ces nouvelles connaissances !

Rudy. En effet ! Au départ je faisais des créations graphiques gratuites. Au fur et à mesure, je me suis intéressé à la structure d’un site Internet. J’ai appris comment cela fonctionne et j’ai découvert que des gens achetaient des templates. J’y ai vu l’opportunité de gagner de l’argent, c’est pourquoi j’ai rendu mes créations payantes. J’aidais les gens à créer les bannières sur leur site, je faisais des kits graphiques. Je me suis fait pas mal d’argent de poche grâce à ça.

Le principe d’un kit graphique est de créer une base de site neutre où tu construis le graphisme et fais l’intégration. Il n’y a pas de PHP, pas de développement du back office, c’est que du front. Ensuite, les clients téléchargent ce kit et le personnalisent à leur guise. Ils mettent leur propre contenu dessus. Je créais le gabarit de leur site, le template. J’ai vraiment commencé par l’intégration, le graphisme dans le web, avec à l’époque la création de kits graphiques.

J’ai été autodidacte, je n’ai pas vraiment suivi de cours. J’allais dans beaucoup de forums pour exposer mes problèmes et les gens me répondaient. Il y avait par exemple le site du Zéro qui était célèbre, ou encore le forum de Hardware.fr.

interview-ux-designer

NeoLynk. Comment se sont passées tes études ?

Rudy. Dès le début je voulais faire de l’informatique, c’était sûr et certain. Depuis le collège j’avais envie de travailler sur la création de sites Internet. Je me suis un peu planté dans mes études dans le sens où j’ai commencé par des études de développement, en école d’ingénieurs. C’était vraiment une école de développement de logiciels, pur back-end. J’ai vite vu que ce n’était pas fait pour moi et je me suis réorienté vers le côté web-design.

NeoLynk. Qu’est-ce que tu préfères dans le front-end ?

Rudy. Je trouvais qu’il n’y avait pas de côté fun à faire uniquement du code, je préfère largement la partie création. J’apprécie de pouvoir mettre en oeuvre ma créativité, c’est pourquoi dans ma vie personnelle j’écris, je fais du dessin et je joue de la musique. Professionnellement parlant j’ai choisi le côté créatif, en faisant du graphisme.

En avançant dans mes études, j’ai voulu renforcer ma connaissance au niveau technique, tout en gardant ce côté graphisme. L’avantage de cumuler les deux, c’est que tu peux créer des interfaces graphiques tout en les implémentant. Le plaisir dans mon métier se retrouve par le côté artiste que je peux exposer.

Un menu chargé : Le rôle et les bonnes pratiques d’un UX designer

NeoLynk. La différence entre un bon et un mauvais UX designer ?

Rudy. Le bon UX designer va être celui qui va prendre connaissance du projet dans sa globalité. Il ne va pas implémenter une fonctionnalité juste parce qu’il l’a vue sur un site et qu’elle fonctionnait. Il va vraiment prendre en compte les besoins et la problématique des utilisateurs et des différents intervenants qui existent sur le projet.

“Un bon UX designer est quelqu’un qui va vraiment mettre au centre l’utilisateur.”

NeoLynk. Quelles sont les relations de l’UX designer avec les autres parties prenantes du produit ?

Rudy. Il y a beaucoup d’intervenants en amont, notamment les personnes du marketing (sponsors) qui veulent des fonctionnalités. Ils nous présentent ce qu’ils veulent et on récupère tous leurs besoins et problématiques. On est en discussion aussi avec les Product Owner, avec qui on redéfinit correctement le besoin et on adapte le périmètre. Les intervenants marketing nous disent qu’ils veulent la Lune mais on a que la Terre, donc on va leur faire plaisir en leur disant qu’on a un téléscope et qu’ils pourront quand même voir la Lune. Ensuite il y a la phase de recherche, de conception du besoin en relation avec les futurs utilisateurs. C’est ici qu’on commence à présenter notre produit aux utilisateurs pour voir s’il est vraiment utilisable.

NeoLynk. Comment se déroule cette présentation aux utilisateurs ?

Rudy. Cela peut passer par des tests utilisateurs, qui peuvent être des tests internes ou externes. Une fois on a fait tester des prototypes du header France 3 dans la rue. J’ai fais des prototypes qui ne demandent aucun temps de développement, parce que le but c’est de ne pas perdre de temps sur le développement. Tu as donc des prototypes statiques, en image, que tu présentes à des utilisateurs dans la rue en leur demandant de les utiliser. Et tu observes s’ils y arrivent facilement ou non. Toute cette partie en amont est la partie fonctionnelle où tu vas créer des wireframes, etc. Il s’agit d’une très grosse partie qui ne doit pas être négligée.

C’est pour ça que je dis qu’un bon UX designer est quelqu’un qui va vraiment mettre au centre l’utilisateur. C’est très important.

rudy-ux-designer

NeoLynk. Après avoir eu les retours des utilisateurs que se passe-t-il ?

Rudy. Ensuite, il y a la seconde partie qui est l’implémentation technique de ce que tu as fait. Il y a l’intégration avec du langage HTML, CSS et JavaScript pour la partie front. Dans cette partie on est toujours en relation avec le Product Owner et on va également avoir beaucoup d’échanges avec les développeurs back. Tout ce qui est créé par les UX designer va devoir être dynamisé. Les développeurs back vont donc nous envoyer les variables qu’il faut implémenter dans notre système pour qu’il soit dynamique.

“Aujourd’hui chez mon client, on n’est pas à 100% accessibles mais on essaie de faire un maximum.”

NeoLynk. À quel moment prenez-vous en compte la web accessibility ?

Rudy. Dans ma mission actuelle, j’ai la chance de travailler avec une personne qui fait du front et qui a une certification d’accessibilité. Cela fait partie aussi de la partie front. C’est quelque chose qui prend beaucoup de temps. Aujourd’hui chez mon client, on n’est pas à 100% accessibles mais on essaie de faire un maximum. On essaie de tester tout ce qui est contraste, colorimétrie, les différents paramètres à attribuer pour les lecteurs d’écran. Je suis content car c’est quelque chose d’important pour moi.

Pour la petite histoire : j’ai déjà travaillé avec un développeur qui avait la certification d’accessibilité pour le site : www.moncompteactivite.gouv.fr. Il était obligatoire que ce site soit accessible à 100%. Il y avait donc un développeur qui s’occupait uniquement de ça et c’était intéressant de voir qu’il y avait beaucoup de contraintes. Ce qui avait été pensé par le graphiste devait être retravaillé pour que ce soit adapté aux personnes handicapées. Les frameworks JS qu’on utilise habituellement par exemple, il ne fallait pas les utiliser car ils ne respectaient pas les principes de l’accessibilité. Il fallait revoir complètement ce qu’on avait l’habitude de faire.

NeoLynk. Qu’est-ce qui change lorsqu’il faut concevoir un site 100% accessible ?

Rudy. Il faut que le site puisse être lu par le lecteur d’écran, donc il doit être très sémantique, avec des open balises. Les carrousels ne sont pas tous accessibles aussi. Nicolas Hoffmann est connu pour avoir créé des composants accessibles comme des sliders, des carrousels, des modales… Le site https://a11yproject.com/ propose plein de ressources sur l’accessibilité, des frameworks front accessibles aussi.

NeoLynk. Nous avons vu que dans ton métier la veille était très importante. As-tu des sources à conseiller ?

Rudy. Je suis beaucoup de personnes sur Twitter qui partagent des liens et tous les matins je prends le temps d’en lire quelques-uns. Comptes à suivre sur Twitter : @csswizardry (bonnes pratiques CSS), @WalterStephanie (niveau UX), @codrops (templates JS).

NeoLynk. Quelle est la chose la plus difficile dans le métier d’UX designer ?

Rudy. Il y en a deux. La première chose c’est que quand tu rentres dans un projet où tous les sites sont déjà en place, tu dois être autonome, réactif, et très vite comprendre comment l’architecture a été pensée.

Tu dois vite te familiariser avec car il y a des contraintes de temps et tu ne peux pas te permettre de passer 10 ans à demander de l’aide aux développeurs ou à ton collègue. Il faut vraiment être réactif, autonome et force de proposition, c’est à dire proposer des améliorations.

Chez mon client par exemple, il y a déjà une structure qui est en place. Elle demande à être améliorée et l’idée c’est de faire avec ce qui existe déjà en apportant des améliorations. Pouvoir proposer de nouvelles avancées c’est le plus important, sans y aller trop brusquement. Si c’est un gros changement qui demande du temps, on va en parler avec le Product Owner de manière stratégique pour voir comment le mettre en place et comment ça peut aider à gagner du temps.

“La difficulté et d’autant plus grande, dans le sens où tu es garant de la bonne fonctionnalité du projet dans le futur. »

La deuxième chose la plus difficile c’est quand tu arrives sur un nouveau projet et qu’il est libre. C’est à dire qu’il va falloir sortir un nouveau site alors qu’il n’y a aucune structure mise en place. Du coup la difficulté est d’autant plus grande, dans le sens où tu es garant de la bonne fonctionnalité du produit dans le futur. Si dans un an le produit est mal fini, il y aura des problèmes et ce sera de ta faute parce que c’est toi qui aura mis en place la structure, l’architecture. C’est comme pour une maison, si les fondations ne tiennent pas la route la maison finit par s’écrouler.

“Aujourd’hui et dans les années à venir, les développeurs auront plus tendance à travailler en Atomic Design.”

NeoLynk. Peux-tu nous partager des bonnes pratiques issues de tes expériences ?

Rudy. Dans un projet pour France Télévision (FTV), nous avons créé un site et l’idée était de créer le site en mode Atomic Design. Du côté CSS on a travaillé sur des composants isolés, comme le bouton, le champ de recherche… À la fin on se retrouve avec une liste de composants qu’on assemble comme des Lego, ce qui va construire les pages du site. Aujourd’hui et dans les années à venir, les développeurs auront plus tendance à travailler en Atomic Design, c’est à dire à séparer les éléments de leur contexte. Ça leur permettra d’utiliser les éléments comme ils veulent et où ils veulent.

Ainsi on gagne du temps car on n’est pas obligé de travailler chaque page unitairement. Il suffit de prendre chaque composant un par un pour créer une page. Chez FTV, les graphistes ont commencé à mettre en place un design system, c’est à dire une charte graphique avec une page de composants. Ils créent des composants et nous les récupérons. On a mis en place un style guide, outil qui permet de récupérer toute la charte graphique en code. A chaque fois que la charte graphique est mise à jour, cela met aussi à jour le style guide. Donc la charte graphique et le code sont mis à jour en même temps. Ce qu’il faut retenir : proposez la mise en place d’un style guide autonome !

NeoLynk. Que penses-tu des outils de création web “faciles”, du style Wix ?

Rudy. Ce n’est pas forcément quelque chose que je conseille d’utiliser dans les grandes sociétés, où plus personne n’utilise de WordPress. Je trouve qu’utiliser WordPress ou Wix est génial pour les personnes qui débutent dans le web et veulent créer à moindre coût leur portfolio ou leur site Internet. D’autre part, s’ils souhaitent en savoir un peu plus, ils vont devoir aller trifouiller dans le code et c’est comme ça qu’ils vont apprendre. Et ils vont passer à un moment donné sur des technos plus évoluées.

NeoLynk. Quel projet te rend le plus fier ?

Rudy. Je dirais tous les projets que j’ai réalisés chez FTV. J’étais le seul développeur front, j’ai mis en place toute l’architecture, ce qui est une grosse responsabilité. Sur tous les projets FTV que j’ai fais, j’ai à chaque fois repenser différemment à comment mettre en place l’architecture. J’ai commencé chez Francetv Éducation, où on a pensé l’architecture d’une certaine manière. Au bout de 9 mois, quand le projet était fini, on voyait ce qui n’allait pas. J’ai pu capitaliser sur tous les points qui n’allaient pas pour ensuite les corriger et faire une nouvelle architecture. J’ai fais Francetv Éducation, le site institutionnel, le site pro, le site France 3 et le site La 1ère. C’était une architecture différente à chaque fois et on a amélioré le process.

NeoLynk. Que fais-tu pour avoir de l’inspiration ?

Rudy. Je navigue sur Internet, je regarde ce qui se fait, ce qui ne se fait pas, j’essaie de le penser différemment. Je pioche des idées que j’emmagasine inconsciemment dans ma tête et c’est ce qui va me donner de l’inspiration. Ça c’est surtout dans mon quotidien au boulot, après en dehors je fais très peu de recherches. Quand je rentre chez moi j’apprend le russe, je joue de la flûte, et peut-être que toutes ces choses que je fais en dehors du travail me permettent d’être créatif.

Ce n’est pas évident d’être créatif, il faut beaucoup regarder ce qui s’est déjà fait dans notre domaine. Par exemple pour créer un scénario, il faut regarder des films et voir ce qui a déjà été fait, puis comprendre pourquoi l’histoire a marché ou pas. C’est pour ça que je consulte des sites d’inspiration comme dribbble.com, où des personnes montrent leurs créations. Il faut toujours explorer.

Son lien avec NeoLynk au cours de ses missions et le rôle de la Tribu JavaScript

NeoLynk. Au cours de tes missions, quels ont été tes échanges avec les NeoLynkers ?

Rudy. J’ai beaucoup échangé avec Alexandre, le référent technique de la Tribu PHP chez NeoLynk, pour la partie back-end, notamment quand j’avais des soucis sur Drupal. Récemment j’ai commencé un style guide qui peut être réutilisable sur différents projets et j’ai sollicité un autre NeoLynker pour mutualiser les différentes idées. J’ai choisi d’en parler avec Yann car il travaillait chez FTV et faisait partie de NeoLynk, donc j’ai pensé que ça pourrait être intéressant. Il gère pas mal au niveau réalisation, de plus il a beaucoup de connaissances JS.

“J’ai trouvé intéressant lors de ma première Tribu JavaScript que les personnes qui ont assisté à des conférences partagent ce qu’elles avaient entendu.”

NeoLynk. Qu’est ce que tu attends des tribus NeoLynk ?

Rudy. J’attends du partage de connaissances, voir un peu les projets que chacun fait, voir les améliorations. Au niveau des technos, faire découvrir à travers des minis talks de 10 min les nouvelles technos à venir, ce qui se fait et ce qui ne se fait pas. J’ai trouvé intéressant lors de ma première Tribu JavaScript que les personnes qui ont assisté à des conférences partagent ce qu’elles avaient entendu. Cela permet de faire de la veille, ce qui est très bien.

L’avenir de notre UX designer et celui des technologies

NeoLynk. Comment te vois-tu dans 5 ans ?

Rudy. 5 ans c’est beaucoup. En tout cas dans les mois et les années qui viennent, au niveau graphisme on sera de plus en plus minimaliste. Le minimalisme prime, on ne garde que le principal. Il faut enlever toutes les fioritures, tout ce qui ne sert pas, pour ne montrer que l’essentiel au client. Le but de l’UI est d’amener l’utilisateur à des endroits précis du site sans qu’il ne soit perdu par d’autres informations. Au niveau technos, j’attend des technos JS qui soient toujours au top. Je suis intéressé par faire du CSS en JS, on est davantage dans le côté composants avec les réalisations.

ux-dsigner-nrj

NeoLynk. Quelles sont les évolutions technologiques que tu attends le plus ?

Rudy. J’aimerais voir des évolutions au niveau du CSS. Il y a pas mal de choses qui sont en train de se faire au niveau CSS, avec des nouvelles propriétés pour optimiser les sites Internet, pour qu’ils soient toujours plus rapides.

Je pense que dans le futur les sites seront de plus en plus rapides et je pense que chaque techno va évoluer dans ce sens. Par exemple avec Progressive Web App (PWA), Critiquable CSS, tout ce genre de choses qui font que les sites vont être de plus en plus rapides.

Requête Google par la voix : J’ai un Google Home chez moi, c’est utile pour piloter les lumières. On tend vers l’intelligence artificielle de manière générale, vers le deep learning, c’est le futur et il faut s’y intéresser. Il faut faire attention car il peut y avoir des enjeux politiques, sécuritaires. J’ai lu récemment le livre de Stephen Hawking, astrophysicien qui a étudié les trous noirs et parle de l’intelligence artificielle. Il dit que l’IA c’est bien, mais qu’il faut s’en méfier car si elle est utilisée à mauvais escient cela pourrait conduire notre humanité à perte.

NeoLynk. Quelle avancée technologique t’a le plus marqué cette année ?

Rudy. J’ai bien aimé les PWA, ce n’est pas nouveau, mais je pense qu’il faut le mettre en place obligatoirement maintenant. C’est important, car tous les utilisateurs sont sur leur mobile maintenant, donc le fait d’avoir un raccourci directement sur le téléphone est primordial.

Au niveau JavaScript, on peut se passer de frameworks comme jQuery qui est assez lourd, pour faire des animations rapidement avec les nouveautés JS apparues. Utiliser jQuery n’a plus lieu d’être, ce n’est pas nécessaire car ça alourdit le site. On veut vraiment utiliser le JS natif qui évolue comme le CSS.

NeoLynk. Si je te dis que demain tu dois faire du Node JS pour faire du back, tu me dis quoi ?

Rudy. Je te dis que l’ai déjà fait. En réalité je ne l’ai pas vraiment fait mais je suis dans l’optique de découvrir tout ce qui se fait autour. J’ai déjà testé dans mon coin tout ce qui est Node, PWA, Vanilla JS… Quand j’ai un peu de temps je regarde comment ça marche. Comme je suis en relation avec des développeurs, je suis obligé d’avoir une connaissance globale de comment ça marche. C’est pour savoir si j’implémente ça comme ça, est-ce que ça peut être faisable. Cela rejoint ce que je fais en graphisme et en front. Quand je fais mes maquettes graphiques, je sais pertinemment que ça va être faisable. Chez FTV, j’ai eu l’occasion de faire toutes les maquettes graphiques pour la météo, quand je commence l’intégration, la partie technique, je vais être très rapide.

Pour mieux connaître Rudy :

Le meilleur cadeau à faire à un UX designer : un livre sur l’UX design
Le plat préféré d’un UX designer : un américain
Le passe-temps préféré d’un UX designer : le poker
La meilleure blague entendue : quand est-ce que tu passes en PHP 6 ?

Ses articles en ligne sur Medium :

La météo sur France 3 Régions

Profitons du redesign de la page météo sur France 3 Régions pour analyser le processus de réalisation du design et plus précisément : la composition d’une interface utilisateur.

Redesign du header France 3 régions

Zone inhérente d’un site web, il apparaît au point le plus haut du navigateur. C’est ce que voient en premier les utilisateurs. Autrement dit, c’est la zone la plus importante.