Comment leader un atelier de conception d’arborescence (Sitemap) ?
☝️ Introduction
Chaque projet est différent, je ne vous apprends rien. Les équipes doivent adapter les roadmaps et actions à mettre en place en fonction des besoins exprimés par les clients et des expertises réalisées. Ces expertises ont pour objectif d’identifier si oui ou non il est pertinent de mettre en place certaines phases ou encore ateliers en collaboration avec le client.
Aujourd’hui, nous allons nous intéresser à la phase de conception UX. Si vos objectifs sont de créer une application ou un site web de zéro ou bien de réaliser une refonte, il est nécessaire de travailler son arborescence. Dans ces cas de figure, chez La Chouette Co, nous mettons en place des ateliers de conception collaboratifs.
🌳 L’arborescence
Définition
Rassurez-vous, nous parlons toujours bien de digital, vous ne vous êtes pas égarés dans un manuel de jardinage.
L’arborescence d’un site web ou d’une application correspond à un plan hiérarchique afin de structurer (avec pertinence) votre produit. Pour ces raisons, il est aussi possible de l’appeler “architecture”, “structure” ou encore “sitemap” pour son anglicisme plus connu.
Comme dirait Scott Belsky :
“Règle de base pour l’UX : plus d’options, plus de problèmes.” — Scott Belsky, Chief Product Officer (co-créateur de Behance).
La recherche de la simplicité dans la structure fera passer votre arborescence au niveau supérieur.
Plus-value
Les avantages d’élaborer une arborescence qualitative sont nombreux !
On constate une amélioration de l’expérience utilisateur et de l’architecture des contenus : si vous gagnez en structure, en simplicité et en clarté, vos informations seront facilement accessibles et mieux référencées. Les utilisateurs trouveront les informations dont ils ont besoin et aucune frustration ne sera générée de leur côté.
Si aucune frustration n’est générée, alors le taux de rebond de votre site web s’améliorera considérablement. Il est aussi notable de préciser que si les informations souhaitées sont facilement trouvables, l’utilisateur restera moins longtemps sur un site web, il chargera en général moins de pages web (moins de redirection). Cette utilisation sera alors moins polluante et consommatrice en énergie et pourra s’inscrire dans une conception plus éco-responsable. D’ailleurs, si vous voulez en savoir plus sur l’éco-conception web numérique, je vous conseille de vous rendre sur l’article “L’éco-conception numérique à La Chouette Co #1” de Elise Brohan.
Voici pour résumer une liste des avantages d’élaborer une arborescence qualitative :
- Définition des principes de navigation
- Amélioration de l’expérience utilisateur
- Amélioration de l’architecture des contenus
- Bénéfique pour le SEO
- Amélioration du taux de rebond
- Baisse des possibles frustrations utilisateurs générées
- Peut contribuer à l’éco-conception numérique
🤝 Atelier de conception d’une arborescence
Rentrons maintenant dans le vif du sujet : qu’est-ce qu’un atelier de conception d’une arborescence, à quoi sert-il et comment le mettre en place ?
L’objectif pour les designers est de guider leurs clients dans l’exercice en écoutant leurs besoins et idées, tout en apportant leur expertise afin de cadrer l’atelier et de concevoir de manière collaborative.
Avant tout, il est primordial de se baser sur des personas préalablement définis. Vous pouvez d’ailleurs consulter l’article “7 étapes pour créer facilement votre persona” de Yassine Messaoudi pour vous aider à créer les vôtres.
Il est maintenant temps de préparer l’atelier de conception !
Mise en place et outils
Comme tout bon atelier qui se respecte, il est important de préparer son intervention et donc de prévoir notamment où et comment se déroulera la réunion.
L’atelier peut se dérouler sous différentes formes et s’adapter en fonction du type de client, du contexte (la Covid-19 en est par exemple une illustration parlante) ou encore de votre aisance personnelle. Le travail en présentiel reste à mon sens, par expérience, la manière la plus efficace de communiquer.
Parmi les outils disponibles, vous pouvez opter pour la bonne vieille méthode des post-it ou du tableau blanc. Elles sont très efficaces en phase de brainstorming. Néanmoins, afin de garder une trace propre, il est conseillé de retranscrire votre travail sur un logiciel dans un second temps.
Vous pouvez aussi utiliser ces logiciels dès le départ. Ils sont plus pratiques pour les visio-conférences, mais peuvent être contraignants en phase de recherche en physique.
De nombreux logiciels permettant de faire plus ou moins la même chose existent. Voici deux exemples prêts à l’emploi :
- Whimsical : logiciel de mind mapping facile d’utilisation, guidant et offrant une personnalisation de couleurs, icons …
- Figjam : offre une grande personnalisation et liberté, mais demande un peu plus de maîtrise pour les personnes non habituées aux logiciels de création. Pratique si vous ou votre structure utilise Figma comme logiciel de design à côté.
🖥 Exemple d’application
Prenons désormais un exemple réel d’un projet réalisé par La Chouette Co afin d’apporter du concret à la théorie.
La Métrazif (médecine du travail de plusieurs communes dans l’arrondissement de Grenoble), a fait appel à notre chouette team afin de refondre totalement leur site web informatif. L’objectif majeur était de revoir l’architecture du site web et l’expérience utilisateur dans sa globalité. En vue de ces objectifs, nous avons planifié ce fameux atelier de conception d’arborescence.
Préparation
Pour commencer, nous avons tout d’abord retranscrit l’arborescence actuelle sur Figjam afin de s’imprégner de l’existant, avoir un support schématique visuel et enfin, travailler sur une première proposition en interne.
La seconde étape est de préparer le document de prise de notes. Il a pour objectif de servir de support au designer afin de ne rien omettre et de cadrer l’atelier avec le client en estimant le temps nécessaire pour chaque phase de la réunion. Il sert de guide et de source de vérité !
De notre côté, nous avons contacté nos clients une semaine avant l’atelier afin de leur rappeler la date, l’heure et le lieu de la réunion et de leur demander d’avoir une première réflexion sur l’arborescence en interne dans le but de préparer au mieux l’atelier.
Avec la Métrazif, nous avons choisi de se rencontrer en présentiel et d’utiliser la méthode des post-it. Ils se sentaient plus à l’aise de conserver des méthodes moins digitales.
Nous nous sommes donc armés de nos plus jolis post-it de deux couleurs :
- Les post-it verts pour les pages
- Les post-it orange pour les détails de section
L’idée ici est d’utiliser différentes couleurs pour catégoriser et/ou hiérarchiser les éléments visuellement en instaurant un code dès le départ.
Introduction à l’atelier
Une fois l’atelier prêt, nous nous sommes rendus dans les locaux de la Métrazif à la rencontre de nos clients.
Il est toujours important d’être pédagogue avec ses interlocuteurs, en particulier s’ils n’ont jamais entendu parlé ou pris part à ce type d’exercice.
Nous avons donc commencé par re-contextualiser cet atelier : de quoi s’agit-il ? Pourquoi le faisons-nous ? Quel est notre objectif de fin de réunion ? Comment allons-nous procéder durant cette séance ?
Nous recommandons de ne pas prendre plus d’une vingtaine de minutes pour cette introduction. Il est important de prendre ce temps, mais sans surprise, il faut en conserver suffisamment pour l’atelier en lui-même.
Déroulé de l’atelier
Il est maintenant temps de coller des post-it ! Nous avons commencé par rappeler les personas et les valider ensemble. Une fois ces informations en tête, ils nous ont listé en premier lieu les pages et entrées de menu à conserver absolument en fonction de leurs besoins.
Il était important pour nous durant cette étape de creuser en demandant le plus d’informations possibles sur l’utilité des pages et en expliquant notre compréhension des contenus afin de les confirmer avec eux.
Nous avons pu placer une première fois les post-it en se basant sur leur vision décrite. De là, nous avons convenu ensemble, que comme il y avait deux types d’utilisateurs distincts (les employeurs et les salariés), il était pertinent de créer une entrée destinée à chacun en plus des autres entrées communes aux deux types d’utilisateurs identifiés.
À partir de ce moment, le challenge était de trouver où placer ces entrées “employeurs” et “salariés”, les entrées communes aux deux utilisateurs et celles permettant de se connecter et de se rendre sur une page annexe de e-learning.
Nous avons réalisé plusieurs itérations. En tant que designers, nous avons proposé notre vision d’expert lors de propositions créées en collaboration clients / équipe.
À la fin de l’atelier, nous avions donc une première arborescente pertinente et satisfaisante pour les deux parties. L’objectif rempli, nous avons ensuite apporté de la transparence à la Métrazif pour la suite des étapes.
Et après ?
Pour finir, nous avons transmis, par le biais de l’outil Flightlog, les documents de réunions et travaux réalisés aux équipes en guise de compte-rendu.
De notre côté, nous avons retranscrit sur Figjam l’arborescence réalisée puis pris le temps d’apporter une dernière vérification. Après quelques modifications mineures, nous avons rejoint la Métrazif deux jours plus tard afin de leur présenter l’arborescence finale. Objectif rempli, nous l’avons validé tous ensemble au cours de cette dernière réunion sur le sujet.
🤘 Conclusion
Vous l’aurez compris l’atelier est un bon moyen d’éviter tout quiproquo dans la compréhension d’un projet et de faire entrer votre client dans la phase de conception dès le début. Cette démarche est en plus généralement très appréciée par ces derniers 😉.
Armez-vous de vos plus beaux post-it ou logiciels, vous êtes maintenant prêts à lancer votre propre atelier de conception d’arborescence ! Et si vous le faisiez avec nous ?
Retrouvez d’autres articles en design et tech sur notre chouette blog ! 🦉
