Paris Web : une édition 2019 réussie à SUP’Internet !

Paris Web : une édition 2019 réussie à SUP’Internet !

Du 10 au 12 octobre 2019, le campus de SUP’Internet accueillait la nouvelle édition de Paris Web, un événement dédié à tous les acteurs du web, des designers aux développeurs en passant par les responsables marketings. L’occasion pour les professionnels d’échanger sur le futur du net, de prendre part à des ateliers pratiques et surtout d’assister à de nombreuses conférences inspirantes, souvent à la pointe de leur secteur.

Retour sur deux d’entre elles données par Benedetta Pastore, Manager Design d’Expérience au sein de l’agence Web Lemon Interactive et le duo composé de Florent Berthelot et Cécile Freyd-Foucault, respectivement Développeur et Fondateur de WeFacto et Product Designer chez Predictice.

Le Web est-il toujours l’unique solution ?

C’est à cette question un peu saugrenue qu’a souhaité répondre Benedetta Pastore lors de sa conférence à Paris Web. Spécialiste de l’UX Design, cette dernière estime justement que le désir d’une entreprise de s’équiper d’une nouvelle solution/application ne doit pas toujours être aussitôt assouvi. Ainsi, quand une entité vient la voir pour développer une « super idée d’outil Web hyper complet pour l’aider », Benedetta Pastore cherche d’abord à savoir si le besoin exprimé est réel. Pour cela, elle s’appuie sur un « audit de maturité digitale ». Une démarche avant tout centrée sur l’humain comme l’indique les termes sciemment utilisés.

« L’audit, ça vient de l’écoute, explique-t-elle. Il faut être en position de recevoir de l’information, d’être en phase d’écoute active. La maturité, c’est être prêt. Un fruit mature est prêt à être manger, à donner des graines… bref, à démarrer un autre cycle. Ensuite, je préfère le terme de digital à celui de numérique. Le numérique, ce sont des chiffres, pas un système organique. Avec le digital, on a davantage l’image du toucher, le contact humain. Il faut se rappeler que le Web renvoie à la toile d’araignée, une toile ordonnée, structurée, résistante et qui permet de relayer des informations – quand un insecte se prend dedans, il émet des vibrations. »

De ce fait, cette approche « human centric » est le « crédo des UX designers » : « On a beau avoir des milliards d’outils, s’il n’y a pas l’humain au centre pour donner du sens, il y aura de grandes chances d’échecs. Mon métier consiste à essayer de changer de point de vue, de voir le problème sous un autre angle. »

Le travail de Benedetta Pastore implique alors toutes les composantes de l’entreprise, du Design Strategist au « client du client » en passant par les fournisseurs et les collaborateurs. Elle se compose initialement de nombreux entretiens individuels, puis d’une visite sur site avant de se déployer en plusieurs ateliers (un « stratégique », un « technique », un « flux » et un « expérience collaborateur »). Un dispositif qui permet souvent de constater des carences plus humaines que technologiques.

« Il en ressort parfois qu’il n’y a pas besoin d’outils après les entretiens, mais plutôt d’une réorganisation du travail plus fluide, plus agile, intégrant du partage, pour permettre aux collaborateurs et différents acteurs de se rencontrer, de communiquer, d’échanger. On remarque aussi l’importance de donner de la reconnaissance au collaborateur, de mettre en valeur le travail réalisé. L’idée, c’est de relier ces points. » C’est ce que l’UX designer appelle la « symétrie des attentions » : la direction prend soin des collaborateurs et les collaborateurs transmettent ces valeurs au client final.

« Au final, on peut toujours ajouter un énième outil complexe, mais l’on peut aussi penser un réseau plutôt humain où l’on réduit la quantité pour avoir des échanges plus qualitatifs, via par exemple la mise en place d’une méthode agile sur des petites équipes, l’organisation d’un système de partage interne (avec des événements organisés à un rythme régulier) et la valorisation des collaborateurs sur les réseaux sociaux. » Une optimisation qui ramène de la confiance et, surtout, donne des résultats.

Associer développeurs et designers : un but à atteindre

Dans un autre registre, Florent Berthelot et Cécile Freyd-Foucault ont profité de leur conférence commune pour appeler les developpeurs et designers à créer la différence dans la réalisation de sites Web. Pourquoi se différencier ? Pour les utilisateurs, la diversité, le business, l’indépendance et, aussi, pour eux-mêmes ! Pour appuyer leur propos, le développeur et la designer ont ainsi partagé avec l’audience présente les différentes étapes leur permettant de travailler conjointement sur toute la durée d’un projet. L’occasion aussi pour le duo d’aborder deux notions actuelles : l’atomic design et le design system.

« Tous les sites se ressemblent – ils possèdent les mêmes éléments de navigation, systèmes d’onglets, etc. – et nous, les développeurs, sommes un peu en cause car nous commençons souvent la réalisation d’un site en utilisant une bibliothèque préexistante de composants, comme Material de Google. » Comme le laisse entendre Florent Berthelot, le·la developpeur pense trop souvent à l’aspect fonctionnel d’une interface avant de s’attarder sur l’esthétisme. Une erreur selon lui : « Concrètement, si un site est fonctionnel, c’est souvent moche. D’où l’ajout du·de la designer pour rendre le projet joli. Mais difficile de s’entendre chacun de notre côté quand nous n’avons pas les mêmes objectifs ni les mêmes idées ! Du coup, il est préférable de travailler ensemble. »

Cette collaboration commence justement chez le·la designer. « J’effectue d’abord une recherche utilisateur, souligne Cécile Freyd-Foucault. J’identifie alors les différents parcours utilisateurs à tester, puis avec le·la developer et le client, on choisit avec lequel commencer le projet. » En parallèle de cette phase, le développeura pour mission de réfléchir à l’amélioration du code, à la réduction de la taille des composants ou à parfaire leur responsabilité. Puis vient la seconde étape : celle de l’ébauche. « Je vais commencer à faire du wireframe sur du papier, poursuit Cécile. Cela nous permet de se mettre d’accord sur la structure de nos pages et des composants, pour lever des doutes et des freins sur la compatibilité. » Une opération qui permet au duo d’ensuite réaliser une deuxième version du projet, plus claire mais encore rudimentaire.


Vient alors l’intégration d’outils facilitant le travail de création et de partage du binôme, tels que Storybook et Zeroheight. « Cela me permet de partager mes hypothèses, continue Cécile. Ensuite, j’entame les recherches graphiques, notamment sur les choix sémantiques car chaque forme a un sens. Je fais un mindmap, une arborescence de ce à quoi la thématique et le but final du projet me fait penser. Je l’associe ensuite à un moodboard d’inspirations, de textures, de couleurs, de formes, de photos…. Une place de tendance pour savoir quoi partager comme émotion à mes utilisateurs. Car c’est là le but d’un site web, au-delà de sa fonctionnalité : susciter des émotions. »

Une fois les wireframes habillés en mobile et desktop, le designer peut ensuite « extraire un design système » qui le voit « penser composant par composant, chacun étant propre à lui-même ». Une mise en œuvre qui nécessite alors un rapprochement encore plus fort (et organisé) avec la personne en charge du développement. « Nous créons un langage commun entre nous, assure Florent. C’est ce qu’on appelle l’ubiquitous language ou Domain Driven Design (DDD) ». Et cela se traduit par la notion d’atomic design théorisée par Brad Frost. « On part du composant le plus petit, l’atome, représentant par exemple la couleur, décrypte Cécile. Puis, les Fonts (styles de typo), avec toujours l’idée d’avoir les mêmes appellations entre designer et developer. Et l’on gère ensuite l’iconographie avant de rendre l’ensemble vivant, en fabriquant par exemple des animations partout dans l’application, autour des boutons, dans les transitions… Et, surtout, on décide d’une grille permettant de rationnaliser le tout. Après les atomes ou composant purement sémantiques, on part sur les molécules alias les composants fonctionnels, comme les boutons, en pensant au comportement utilisateur ainsi qu’à comment le composant va fonctionner avec les autres composants. Enfin, on s’attaque aux organismes, constitués de plusieurs molécules. Ce sont les composants plus complexes. »

À partir de là, le duo peut alors s’attaquer aux templates, à la structure HTML du site, en créant également des pages types clés servant de références tout en pensant à l’accessibilité de chaque composant. « Cela passe par le fait de vérifier le contraste, de penser au wording et au référencement, ce qui nécessite un vrai savoir. » Cet ensemble donne alors naissance au design system. « Un design system, c’est un produit, note Cécile. Il faut aussi lui donner un nom, une identité. Et documenter ce système. Expliquer comment il fonctionne, pour la passation. Il faut donc aussi le mettre à jour au fur et à mesure, mais cela fonctionne uniquement si toute l’équipe est embarquée dans le projet, avec des retours des membres du marketing jusqu’aux utilisateurs. »

Pour Florent, cette dernière étape est la clef permettant ensuite de vérifier que chaque composant répond au principe FIRST (pour « Keep it focused, Independant, Reusable, Small & Testable »). « Les composants créés doivent être simples, flexibles (on peut surcharger ce qu’ils produisent), personnalisables (plusieurs variantes disponibles), testés (ils doivent marcher partout, dans le maximum de contextes possibles) et documentés car un composant, c’est une responsabilité ! »

Retrouvez les slides de la conférence de Florent Berthelot et Cécile Freyd-Foucault

Fermer le menu