Capsule Design #06 : Co-concevoir grâce à l’UX orientée objet

Bonjour à tous et à toutes et bienvenue dans cette nouvelle Capsule Design de Salut les Designers, le podcast de l’Agence LunaWeb !

Aujourd’hui, découvrez l’importance de l’architecture des données dans la conception UX d’un site web ! Sandrine et Arnaud reviennent sur le rôle des développeur·euse·s back-end dans la conception d’un site web et en quoi consiste l’architecture des données.

L’occasion de parler d’un exemple concret avec le site APPUI de l’Université de Rennes 2, pour laquelle la méthode OOUX – pour Object Oriented UX – a été au cœur de la conception d’une expérience utilisateur fluide et cohérente, souhaitée pour les étudiant·e·s.

Bonne écoute à tous et à toutes,

Les Designers de l’Agence LunaWeb.

La transcription

Arnaud : Bonjour à toutes et à tous, bienvenue dans ce nouvel épisode de Salut les Designers, le podcast de l’Agence LunaWeb ! Aujourd’hui, dans ce format court intitulé “La Capsule”, nous irons à la découverte de différentes thématiques du design UX en compagnie d’un membre de l’équipe de l’Agence.

Pour le sixième épisode de notre série, je suis ravi de recevoir Sandrine Pawlicki, développeuse Back-End à l’agence avec qui nous allons parler d’architecture de données en phase de conception.

Salut Sandrine !

Sandrine : Coucou Arnaud !

Arnaud : Pour commencer, est-ce que tu peux-tu te présenter et nous expliquer ce que tu fais à l’agence en quelques mots ?

Sandrine : J’ai rejoint LunaWeb en tant que développeuse back-end il y a 7 ans. C’est un métier qui parle sans doute moins que designer, donc voici une rapide explication du rôle des développeurs backend dans la réalisation d’un site web.

Pour faire simple, nous réalisons toute la partie fonctionnelle d’une application web. Cela va de l’espace d’administration, dans lequel nos clients gèrent leurs contenus, jusqu’à l’affichage de ces contenus aux internautes. En passant par des fonctionnalités plus ou moins complexes, comme une inscription à une newsletter, un formulaire de contact ou de candidature à une offre d’emploi, du e-commerce, etc.

En tant que développeureuses back-end, nous apportons notre expertise technique lors de la conception, en complément de la recherche UX et graphique

Nous intervenons aussi en amont des projets pour apporter notre expertise technique lors de la conception, en complément de la recherche UX et graphique. C’est d’ailleurs de cette partie conception que nous allons discuter aujourd’hui.

Pour en savoir plus ce métier de développeur back-end et son importance pour la bonne expérience utilisateur d’un site, vous pouvez trouver sur le blog de l’Agence LunaWeb la série “Les dev back vous parlent d’UX”.

Arnaud : Aujourd’hui, tu avais envie de nous parler d’architecture des données et de son importance dès la conception UX. Est-ce que tu peux nous en dire un peu plus ?

Sandrine : Tout à fait. Commençons par une définition. Une architecture de données décrit comment les données sont gérées au sein d’un système. Cela concerne la façon dont les données sont collectées, transformées, stockées, distribuées, consommées.

Concrètement, si l’on prend l’exemple d’un site web sur lequel sont affichées des offres d’emploi qui sont créées dans un logiciel externe :

• La collecte des données, c’est le site web qui se connecte au logiciel d’offres d’emploi et qui récupère ces offres d’emploi ;
• Le stockage des données, c’est le site web qui enregistre les offres d’emploi dans la base de données qui contient tous les contenus du site ;
• La distribution et la consommation des données, ce sont les offres d’emploi qui sont affichées sur le site et consultées par les utilisatrices et les utilisateurs ;

En quelque sorte, une architecture de données décrit le cycle de vie des données.

D’une manière peut être plus parlante pour des non développeurs, une architecture de données décrit par exemple, pour un site web, l’arborescence des contenus, la structure des menus ou des pages, les fonctionnalités, et toutes les relations entre ces éléments.

Arnaud : Merci beaucoup pour ces explications. 

Toujours concernant l’architecture des données et pour nous éclairer un peu plus, est-ce que tu as un exemple d’étude de cas ?

Sandrine : Nous avons travaillé l’année dernière sur le site APPUI (Accompagnement Pédagogique à la Professionnalisation, de l’Université à l’Insertion) de l’Université de Rennes 2. Il s’agit d’un site à destination des étudiants, qui a pour mission de les guider dans leur parcours de professionnalisation.

L’une des problématiques en matière d’architecture de données a été l’énorme quantité de données textuelles à transformer pour offrir aux étudiants un parcours d’accompagnement facile à suivre.

L’une des problématiques dans la conception de site APPUI pour l’Université Rennes 2 a été l’énorme quantité de données à transformer pour offrir aux étudiants un parcours facile à suivre.

Pour élaborer une architecture de données adaptée, nous avons :

• D’abord identifié les besoins des étudiants ;
• Puis cartographié et organisé les données, selon leurs objectifs, leurs thématiques, leurs formats (atelier, guide pratique, …) ;
• Et enfin créé une structure et des mécanismes permettant de lier les groupes de données de manière flexible et ainsi former des parcours personnalisés pour les étudiants, par exemple selon leur niveau universitaire, l’avancement de leur projet ou d’autres critères ;

Nous avons également réalisé d’autres projets avec des architectures de données basées sur des critères beaucoup plus techniques. Ce sont souvent des projets pour lesquels nos clients gèrent leurs propres données via des logiciels dédiés (CRM, ERP, etc). Les sites doivent alors interagir avec ces logiciels pour :

• Récupérer des informations, comme des catalogues produits, des listes de points de vente, etc ;
• Faire remonter dans ces logiciels des informations indispensables aux process de l’entreprise (commandes de produits, informations client, etc.) ;

Arnaud : Récemment, nous avons pu collaborer lors d’un atelier pour commencer à réfléchir à l’architecture des données d’une application.

Peux-tu nous expliquer en quoi cette phase d’architecture fait partie de la conception UX ?

Sandrine : Une architecture de données bien pensée est indispensable pour une expérience utilisateur fluide et cohérente, et elle sert de guide et de fil conducteur pour tous les acteurs du projet. Elle est donc à mettre en place très tôt dans un projet, lorsque les résultats de la recherche UX et les spécificités techniques sont connues. Elle est ensuite affinée tout au long de la phase de conception.

Une architecture de données bien pensée, c’est indispensable pour une expérience utilisateur fluide et cohérente.

Notamment, elle fournit aux designers une cartographie de données et d’interactions qui leur sert de canevas pour la conception graphique. Elle assure une cohérence entre cette étape de design et les développements qui vont suivre.

Lors de ces développements, les développeurs back-end et front-end traduisent, en quelque sorte, l’architecture de données et les maquettes graphiques en code.

Arnaud : Effectivement, je confirme que c’est hyper structurant pour la conception d’avoir une architecture claire pour comprendre le lien entre les pages et l’organisation des contenus !

Sandrine : Au final, pour servir au mieux l’utilisateur, il est donc important que la conception de cette architecture de données fasse partie de la phase de conception UX. C’est à ce moment-là que sont posées les briques fondamentales pour la bonne utilisabilité du futur site, et l’architecture des données fait partie de ces briques.

En tant que développeuse, c’est l’aspect orienté objet qui a attiré mon attention dans la méthode de conception OOUX

Il y a des méthodes UX dédiées à la construction d’architecture de données, notamment le fameux tri de carte. Mais j’aimerais vous parler d’une autre méthode, le OOUX, pour Object Oriented UX.

C’est bien entendu l’aspect object oriented, ou orientée objet, qui a attiré mon attention, en tant que développeuse backend, puisque cela fait écho à la programmation orientée objet.

Arnaud : Qu’est-ce que la programmation orientée objet ? Tu peux nous en parler ? 

Sandrine : C’est une manière de structurer le code d’un programme informatique. Au cœur de cette méthodologie, on trouve l’utilisation de classes et d’objets.

Une classe est comme un moule ou un plan pour créer des objets. Elle définit les propriétés et les comportements des objets créés à partir de cette classe. Par exemple, une classe « Voiture » pourrait avoir des propriétés comme la couleur, la marque et le modèle, et des comportements comme rouler et freiner.

Un objet est créé à partir d’une classe, et a les propriétés et les comportements définis par cette classe.

Par exemple, un objet créé à partir de la classe « Voiture » pourrait avoir la couleur rouge, la marque Renault et le modèle Clio, et il serait capable de rouler et de freiner.

Arnaud : Quel est le lien avec le OOUX ?

Sandrine : Le OOUX est une méthodologie développée par Sophia Voychehovsky. Nous l’utilisons en atelier avec nos clients afin de les aider à structurer, optimiser et prioriser le contenu de leurs pages stratégiques.

Plutôt que vous décrire cet atelier de manière abstraite, prenons l’exemple d’une plateforme de streaming musical.

Nous utilisons la méthode OOUX en atelier avec nos clients afin de les aider à structurer, optimiser et prioriser le contenu de leurs pages stratégiques. 

Une page stratégique d’une telle plateforme serait la page d’un album, qui constitue notre premier objet. Sur cette page, nous allons trouver différents contenus, comme le titre de l’album, sa date de sortie, la possibilité de l’écouter, etc.

Pour le OOUX, il nous faut classer tous les contenus de la page en 4 types :

• Caractéristique : un élément de contenu d’un objet, par exemple titre de l’album, image de couverture…
• Métadonnée : c’est une caractéristique qui pourrait être filtrable, par exemple date de sortie, genre musical ;
• Interaction : ce sont en général un des CTAs importants d’une page, par exemple écouter, acheter, partager ;
• Objet : dans notre page album, nous allons trouver 2 autres objets, artiste et chansons ;

Pour ces 2 nouveaux objets, nous allons effectuer le même travail, c’est-à-dire identifier leurs contenus et les classer dans chacune des 4 catégories.

Une fois que nous avons décrit chacun de nos 3 objets, nous pouvons définir les relations entre eux :

• Un album est réalisé par un ou plusieurs artistes ;
• Un artiste réalise un ou plusieurs albums et une ou plusieurs chansons ;
• Un album contient une ou plusieurs chansons ;
• Une chanson appartient à un album et à un ou plusieurs artistes ;

Nous obtenons ainsi une architecture de données, ou en tout cas ses premières briques. Nous pourrons l’enrichir avec d’autres ateliers de conception ainsi qu’avec des informations plus techniques qui serviront lors du développement.

Arnaud : L’idée, c’est aussi de créer un langage commun entre designer et développeur ?

Sandrine : Tout à fait, puisque les concepts utilisés dans le cadre du OOUX parlent bien évidemment aux développeurs et développeuses, et sont facilement compréhensibles et manipulables par les designers via cet atelier.

C’est important parce que ce n’est pas toujours facile, pour tous les métiers impliqués dans la conception, de bien se comprendre. Chercheurs et chercheuses UX, designers, développeuses et développeurs ont des vocabulaires et des logiques qui peuvent être très différentes.

Tout l’intérêt des concepts utilisés dans le cadre de la méthode OOUX c’est qu’ils parlent aux développeureuses et aux designers, via cet atelier.

Des ateliers comme le OOUX permettent ainsi de rapprocher tous ces métiers et de faciliter le dialogue et la coopération lors de la phase de conception d’un projet. De co-conception, même, devrais-je dire, pour mieux souligner l’importance d’y impliquer tous les métiers.

Arnaud : Si tu avais quelques mots pour conclure ce sujet, tu dirais quoi ?

Sandrine : Je dirais qu’une architecture de données, finalement, c’est la formalisation de toute la phase de co-conception. Elle témoigne d’une parfaite compréhension de l’ensemble des éléments du projet et de comment chacun d’entre eux interagit avec les autres. En cela, elle est primordiale d’une part pour le bon déroulement de la suite du projet après la conception, et d’autre part pour une expérience utilisateur cohérente et fluide.

Une architecture de données, finalement, c’est la formalisation de toute la phase de co-conception.

En quelque sorte, si tout est clair pour tous les acteurs de la conception, du pôle UX au pôle dev en passant par les clients, ce sera clair aussi pour les utilisateurs.

Arnaud : Encore merci Sandrine. 

Sandrine : Merci à toi !

Arnaud : C’était top de parler d’UX avec toi, et je pense que les développeuses et les développeurs ont beaucoup à apporter sur ce sujet. De notre côté, nous aimerions faire intervenir plus souvent les autres métiers impliqués de près ou de loin lors de la conception UX. 

Sur ce, on se retrouve le mois prochain pour un nouvel épisode du podcast Salut les designer. Vous pouvez d’ores et déjà retrouver ce format de La Capsule tous les deux mois en compagnie d’une personne de l’Agence.

N’hésitez pas également à vous abonner à la newsletter du podcast pour retrouver l’ensemble des ressources de nos épisodes, les tips et conseils de nos invités ! C’est sur le site salutlesdesigners.lunaweb.fr que ça se passe. 

À très bientôt !

Découvrez tous les mois un nouvel épisode de Salut les Designers consacré au design et à ses méthodes. UI, UX, motion, accessibilité, éco-conception, recherche, nous échangeons avec des professionnel·le·s passionné·e·s au grès de nos rencontres pour mieux comprendre leurs méthodes de conception centrée utilisateur.

Un retour, une question ? Contactez-nous sur salutlesdesigners@lunaweb.fr ou sur Linkedin.