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).
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 ?
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 rapidement depuis l'accueil. Un site e-commerce avec un chemin très profond devient difficile à parcourir. La règle stricte des trois clics reste néanmoins un mythe.
La logique utilisateur ensuite, pas la logique entreprise. L'utilisateur cherche une solution, pas une biographie. Les catégories doivent parler sa langue et lui permettre d'identifier rapidement le bon chemin.
Les noms explicites enfin. « Solutions », « Offres », « Expertise » peuvent devenir des mots vides lorsqu'ils ne décrivent pas concrètement le contenu proposé.
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 du référencement.
Le principe des silos thématiques est le suivant : chaque branche de l'arborescence doit former un ensemble cohérent autour d'une thématique. Les liens internes aident alors les moteurs et les lecteurs à comprendre les relations entre les contenus.
L'approche en cocon sémantique, plus orientée intention utilisateur, classe les contenus selon les besoins et relie les pages entre elles par glissement sémantique.
Le maillage interne découle de l'arborescence. Trois types de liens coexistent : les liens descendants, les liens transversaux entre pages de même niveau et les liens remontants vers les catégories parentes.
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 nécessairement une page : plusieurs contenus complémentaires peuvent être réunis au même endroit.
Le card sorting est une 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, parfois, de nommer les groupes. C'est une manière fiable de construire une architecture d'information qui correspond au modèle mental de la cible.
Pour les projets où un card sorting n'est pas possible, on peut s'appuyer sur l'analyse des arborescences concurrentes. On analyse leur profondeur, leur logique de catégorisation et ce qui fonctionne ou non.
Et l'IA pour l'arborescence ?
L'IA peut nous aider à générer un premier jet d'arborescence à partir d'un brief client.
Mais cette arborescence sera générique. Elle ne tiendra pas compte du positionnement spécifique du projet, des concurrents, des mots-clés identifiés ou du parcours réel des utilisateurs. 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-la 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.