Le zoning… une perte de temps ?
Concevoir, c'est "avoir une idée, une représentation de", d'après Le Robert. Aussi, c'est "Créer par la réflexion, la mise en œuvre d'idées". C'est l'action de "concevoir, acte de l’intelligence, de la pensée, s’appliquant à un objet existant."
Je ne vais pas vous mentir, je vois les évolutions de l'IA de ces dernières années… Dans un sens, je me dis que, en tant que designer professionnelle, c'est une chance d'avoir un outil de plus en plus performant, de moins en moins chronophage et peut-être prochainement apte à entrer en production, ou pas ? Cependant, en tant que formatrice, je vois les raccourcis qui permettent de survoler les bases et les dérives du métier à venir. Continuons-nous vers un design normé et aseptisé ? Cet article n'est pas un débat sur l'IA mais bien un article pédagogique, prolongement de mes cours, sur la conception en UX et UI design avec une pointe d'UX research.
Le processus en UX/UI design actuel
=> Faire un schéma
Il faut comprendre que chaque étape sert de filet de sécurité pour la suivante. Pourtant, il n'est pas rigide. En zonant, on réalise souvent qu'une page est trop chargée et qu'il faut revoir l'arborescence. C'est normal. C'est un aller-retour, pas une cascade.
Pourquoi on saute ces étapes de conception pour avoir un design finalisé directement ?
Il est facile de croire quand on voit Claude, ChatGPT ou Midjourney générer des interfaces en quelques secondes. Mais ce que ces outils produisent, ce n'est pas de la conception. C'est de la production. Et confondre les deux, c'est la première erreur du designer junior. La conception, c'est la réflexion qui précède la production. C'est se poser les bonnes questions avant de dessiner quoi que ce soit. C'est comprendre pourquoi une page existe, pour qui elle existe, et quel problème elle résout. Sans ça, on ne fait que décorer. Et décorer, ce n'est pas designer.
Elle ne remplace pas le processus. Elle ne sait pas pourquoi votre client a besoin d'une page FAQ plutôt qu'un chatbot. Elle ne sait pas que votre cible de 55 ans ne scrolle pas. Elle ne sait pas que le concurrent principal a déjà saturé le positionnement « premium minimaliste ». Tout ça, c'est notre travail de conception : la réflexion que nous avons menée dans le benchmark, les personas, le customer journey map. L'IA est un outil d'exécution remarquable, mais elle a besoin de nos décisions pour produire quelque chose de pertinent.
L'arborescence : la structure invisible qui fait tout tenir !
L'arborescence, c'est la structure hiérarchique complète de toutes les pages d'un site. Pas juste le menu. Pas juste les pages visibles. Toutes les pages : celles du menu principal, celles du footer, la page 404, les pages légales, les pages « Mon compte », les variantes de contenu selon que l'utilisateur est connecté ou non.
- L'arborescence, c'est l'ensemble complet comme le plan d'un immeuble avec tous les étages, y compris le sous-sol et le local technique.
- Le menu (navigation), c'est le panneau d'affichage dans le hall : il montre les étages principaux, pas tous les recoins.
- Le sitemap, c'est soit la version visuelle de l'arborescence (pour les humains), soit le fichier XML (pour Google). => Image Arbo vs menu vs sitemap
L'arborescence répond à une question simple : de quoi est composé ce site ? Et cette question en appelle trois autres, dans cet ordre :
- Quels sont les types de contenus et de pages nécessaires ?
- De quoi est composé chaque contenu ou page ?
- Quelles sont les interactions et variantes (utilisateur connecté ou non, panier vide ou plein, formulaire envoyé ou non) ?
Sans réponse à ces questions, dessiner un wireframe revient à meubler une maison dont on n'a pas encore décidé du nombre de pièces. On va mettre un canapé dans ce qui aurait dû être la salle de bain.
Quelques principes d'une bonne arborescence
La règle des 3 clics d'abord : toute page importante doit être accessible en maximum 3 clics depuis l'accueil. Au-delà, l'utilisateur abandonne, et Google arrête de crawler. Un site e-commerce avec un chemin Accueil > Produits > Homme > Chaussures > Sport > Running > Longue distance > Trail > Gore-Tex, soit 9 clics, est un cauchemar. Restructuré en Accueil > Chaussures Trail Homme > Modèle Gore-Tex, c'est 3 clics : optimal. Et non, c'est un mythe !
La logique utilisateur ensuite, pas la logique entreprise. Un site dont le menu affiche « Notre histoire, Nos valeurs, Notre équipe, Nos bureaux » avant « Produits » se contemple le nombril. L'utilisateur cherche une solution, pas une biographie. En 3 secondes, il scanne le menu, cherche le mot-clé qui correspond à son besoin, et s'il ne le trouve pas, il retourne sur Google. La logique de priorisation est sans appel : les produits ou services concentrent environ 80 % des clics, les guides d'aide à la décision 12 %, les promotions 5 %, et le « À propos » 3 %.
Les noms explicites enfin. « Solutions », « Offres », « Expertise » — personne ne tape ça sur Google. Ce sont des mots vides, orientés entreprise, sans valeur SEO. Vos catégories doivent parler la langue de l'utilisateur, pas celle du comité de direction.
La profondeur de l'arborescence doit être limitée.
Silos, cocon et maillage : cocktail spécial SEO
L'arborescence n'est pas qu'une affaire de navigation. C'est aussi la colonne vertébrale de votre référencement.
Le principe des silos thématiques est le suivant : chaque branche de l'arborescence doit former un silo cohérent autour d'une thématique. Un silo « Soin du visage» contient les sous-catégories Nettoyants et démaquillants, Sérums, Crèmes, etc. et un guide « Routine quotidienne de soins visage ». Les liens internes restent à l'intérieur du silo. Google comprend ainsi que vous êtes expert sur ce sujet et nous récompense en positionnement. C'est un peu comme ranger une bibliothèque.
L'approche en cocon sémantique, plus orientée intention utilisateur, ne classe pas par produit mais par besoin client. Nous relions les pages entre elles (maillage interne) selon une logique de glissement sémantique. Un cocon "Acné, Peaux grasses" avec des liens contextuels dans le texte vers des pages filles (sous-pages) comme Acné inflammatoire jusqu'au produit final.
Le maillage interne découle de l'arborescence. Trois types de liens coexistent : les liens descendants (Soins du visage → Nettoyant → Gel), les liens transversaux entre pages de même niveau (un article de blog « Débuter le trail » qui renvoie vers la catégorie « Chaussures trail débutant » jusqu'au produit), et les liens remontants (une fiche produit qui propose « Voir toutes nos chaussures route »). Nous utilisons bien entendu les trois types.
Comment lire une arborescence ?
La méthode pour construire une arborescence
Nous l'avons bien compris, on part de l'utilisateur, pas de l'organigramme de l'entreprise.
Il faut d'abord lister les contenus. Un contenu n'est pas une page, par exemple, nous avons un contenu formulaire de contact, une adresse, une FAQ, ce n'est pas pour autant qu'il y aura une page Contact, une page Adresse et une page FAQ. En fonction du contenu, il se peut que je les réunisse sur une seule page.
Le card sorting est la technique de référence en UX research. On écrit les contenus du site sur des cartes, on demande aux utilisateurs de les regrouper et, certaines fois, de nommer les groupes. C'est la manière la plus fiable de construire une architecture d'information qui correspond au modèle mental de la cible.
=> Écrire un exemple
Pour les projets où un card sorting n'est pas possible (budget, délai), on peut s'appuyer sur l'analyse des arborescences concurrentes. On crawle les sitemaps des concurrents (via des outils comme Octopus.do ou Screaming Frog ou extension de navigateur), on analyse leur profondeur, leur logique de catégorisation, et on identifie ce qui fonctionne et ce qui ne fonctionne pas.
Et l'IA pour l'arborescence ?
L'IA peut nous aider à générer un premier jet d'arborescence à partir d'un brief client. Demandez à Claude de proposer une arborescence pour un e-commerce de chaussures running avec 500 produits : vous obtiendrez une structure cohérente en 30 secondes.
Mais cette arborescence sera générique. Elle ne tiendra pas compte du positionnement spécifique de votre client, de ce que les concurrents font déjà, des mots-clés à fort volume que vous avez identifiés dans votre benchmark, ni du customer journey map de votre persona. Elle sera probablement correcte techniquement, mais pas stratégiquement.
L'IA est un excellent point de départ. Ce n'est jamais un point d'arrivée. Utilisez-la pour accélérer la première itération, puis enrichissez avec votre travail d'analyse. C'est exactement la différence entre un designer junior qui livre le premier jet de l'IA et un designer professionnel qui l'utilise comme matière première.