Repenser l’arborescence et concevoir des gabarits ergonomiques pour un site institutionnel dense

Assemblée Nationale

Née le 17 juin 1789, L’Assemblée nationale est au cœur de notre démocratie. Elle forme avec le Sénat le pouvoir législatif dont la mission est de faire la loi et de contrôler le Gouvernement. Cette très ancienne institution se réforme : modernisation de la procédure législative, approfondissement des pouvoirs de contrôle, octroiement de droits spécifiques aux groupes d’opposition, renforcement des règles de transparence et de déontologie.

Le site de l’Assemblée Nationale a à cœur de délivrer une information en temps réel sur l’élaboration des lois et une information exhaustive. Ainsi, chaque texte de loi est présent, avec l’ensemble des étapes ayant conduit à ce dernier : questions/réponses/amendements, etc… Les textes sont disponibles dans plusieurs formats (dont le Json, le HTML etc…) avec des captations vidéos des séances parlementaires les concernant. Le site est ainsi une source de données colossale et au combien importante pour comprendre le fonctionnement de nos institutions.

L’Assemblée Nationale, vraiment ?

Lors des premiers échanges par mail nous avions un peu de mal avec l’équipe à réaliser la réalité de la mission. L’agence faisait assez peu de missions d’AMOE et son expertise était plutôt dans la réalisation de sites ou la refonte de ces derniers.

Être contactés par un acteur public de cette dimension et pouvoir travailler sur un site aussi important a été pour nous une grande fierté et surtout un défi important. L’approche souhaitée était une démarche centrée utilisateur (UX design) – c’est-à-dire qu’il fallait faire participer le public cible à la réalisation de l’arborescence, ce qui est, pour nous, l’approche idéale. Cependant, il s’agissait là d’intervenir avec des députés. Le niveau de stress était assez important lors de notre réponse et encore plus une fois que l’on a été sélectionnés.

La mission consistait à accompagner le service communication de l’Assemblée Nationale dans sa réflexion autour de l’arborescence du site mais sans aboutir à la rédaction d’un CCTP. Plusieurs constats avaient été faits par l’équipe concernant cette dernière et la difficulté par les internautes de retrouver du contenu. Difficulté accentuée par des publics cibles dont les objectifs étaient assez différents les uns des autres : grand public s’informant sur l’institution et cible professionnelle cherchant un texte de loi.

Une fois la nouvelle arborescence validée, la poursuite de la mission était la réalisation d’un gabarit puis d’une maquette de la page d’accueil du site. Le service communication disposait en interne des compétences pour décliner la maquette proposée et se l’approprier.

Après plusieurs échanges, notre interlocuteur nous a confirmé la mission que nous commençons donc avec une légère appréhension.

Une arborescence tentaculaire

La dénomination de tentaculaire était (et est toujours) particulièrement bien choisie pour le site de l’Assemblée Nationale. C’est assez rare d’avoir autant de niveaux en profondeur dans l’arborescence d’un site Internet. Le recensement de toutes les entrées nous a pris un certain temps, afin d’être sûrs de ne rien oublier. En effet, au détour d’un clic, nous apercevions de nouvelles entrées à l’arborescence du site. Ce travail minutieux a contribué à mettre en évidence des redondances d’entrées, des termes peu explicites ou portant à confusion et une hiérarchie parfois problématique.

Afin de pouvoir mieux appréhender le public cible et le pourquoi d’une telle arborescence, nous avons beaucoup échangé avec notre interlocuteur principal, qui a été tout au long de la mission pédagogue et bienveillant, ce qui nous as permis de travailler efficacement. L’échange avec l’équipe en charge du site nous a aussi aiguillés sur les choix réalisés et les impératifs techniques. Tous ces éléments ont ainsi été pris en compte pour comprendre pourquoi une telle arborescence existait et comment nous pouvions la réformer.

Les personae pour prioriser les choix

Donner vie aux cibles du site (comprendre la création de personae) est souvent l’étape qui suit la rencontre avec l’équipe projet. Cependant, la mission réalisée pour l’Assemblée Nationale était différente d’une mission d’AMOE classique, dans le sens où la refonte et les actions d’optimisations étaient réalisées en interne. Pas de cahier des charges ou de CCTP à réaliser. Ainsi, les acteurs du projet avaient une très bonne connaissance de leurs cibles et la question de la réalisation ou non de fiches personae s’est posée. Après discussion, nous avons convenu de réaliser ces fiches à partir des informations collectées (en dehors d’un atelier de co-conception – voir notre méthodologie). Le travail sur ces personae a permis de mettre en évidence deux points importants :

• Le site s’adresse en priorité à une cible experte qui cherche des documents et pour qui le changement ne doit pas être trop important.
• Une cible grand public, qui doit pouvoir naviguer de manière plus aisée dans le site et notamment accéder au contenu historique plus rapidement.

Le partage des fiches réalisées avec l’ensemble de l’équipe projet (y compris l’équipe technique) a été essentiel dans l’implication de tous au projet. Les objectifs des améliorations étaient ainsi compris par tous.

Enfin, la réalisation de ces fiches a conduit à prioriser certains développements et à travailler sur l’arborescence en s’accordant sur ce qui était important pour chaque cible.

Des exemples pour réfléchir

Une fois les objectifs des visiteurs du site déterminés, nous avons entrepris de porter notre attention sur l’arborescence du site afin de la mettre en regard d’arborescences similaires.

Nous avons ainsi décidé d’analyser des sites se rapprochant le plus de celui de l’Assemblée Nationale comme celui du Sénat, de l’Assemblée italienne ou encore du Conseil Constitutionnel. Ces sites présentent un contenu documentaire important, une arborescence dense et des publics cibles assez divers. Des problématiques proches de celle du site de l’Assemblée Nationale.

L’audit des concurrents a été plus que déterminant dans le cadre de ce projet, car il a permis de comparer les approches qu’ils avaient face à la présentation de nombreux documents. Comment la recherche est-elle mise en avant ? Existe-t-il une recherche experte ? Des fonctionnalités avancées ? Tous ces exemples ont permis de réfléchir à des solutions et ont donné des pistes de travail intéressantes à l’ensemble de l’équipe.

Ainsi, en présentant cette étude et en discutant avec l’équipe projet, plusieurs options avaient été retenues pour la construction de l’arborescence du site. Cependant, de nombreux débats avaient lieu sur la position, l’intitulé et l’ordonnancement de l’arborescence remaniée au sein de l’équipe. La consultation des utilisateurs du site devenait donc impérative pour que le choix puisse être celui des intéressés.

Le tri de cartes pour organiser l’arborescence

Nous avons effectué un travail préliminaire avec l’équipe projet concernant l’arborescence du site (qui s’étale sur un nombre important de pages) et souhaitions la confronter au public cible.

Une séance de tri de cartes a donc été proposée à notre commanditaire. Le tri de cartes est un exercice ergonomique qui consiste à représenter sur des cartes l’ensemble des rubriques de l’arborescence du site. Sur chaque carte, quelques informations peuvent être données (en plus du nom de la rubrique) ou la carte peut-être accompagnée d’un exemple de contenu. L’objectif est ensuite de demander à un groupe d’utilisateurs de regrouper les cartes entre elles selon ce qui leur paraît le plus intuitif pour eux.

Il est possible aussi pour les utilisateurs de renommer les cartes si cela leur semble pertinent. Le fait de travailler en petit groupe (de 4-5 personnes) permet de laisser le cheminement logique se faire dans l’esprit de chacun et de débattre de certains éléments pour arriver à un consensus. La manipulation des cartes joue un rôle important dans ce travail de conception collectif.

Dans le cadre de ce cas client, nous avons dû travailler avec des assistants parlementaires et un parlementaire au sein de l’Assemblée Nationale. Animer plusieurs groupes de travail au même instant pour les faire travailler sur un objectif commun a été un défi important. Après une première présentation du travail réalisé en amont, les participants se sont prêtés au jeu avec entrain et, au bout de quelques heures, nous avions une nouvelle arborescence.

Ce fut une expérience très enrichissante pour les participants et nous-même. Les discussions ont été vives et les arguments présentés pertinents. Plusieurs rubriques ont été renommées et une arborescence finale a pu voir le jour afin d’être soumise à validation auprès des instances responsables.

Gabarit et graphisme pour une page d’accueil

Après la validation de l’arborescence du site, nous avons été mandatés pour travailler sur la page d’accueil. Nous avons donc élaboré un gabarit de page reprenant les différentes grandes parties du site et surtout mettant en avant les éléments prioritaires pour les cibles du site : la recherche documentaire, l’actualité parlementaire et ensuite la présentation de l’Assemblée (pour le grand public).

Le gabarit a évolué au fil des réunions et présentations et a permis d’impliquer l’ensemble de l’équipe. À l’époque, Adobe XD et Figma n’existaient pas. La création de gabarit était plus laborieuse et demandait plus d’énergie. Il était difficile de simuler des parcours et la représentation des éléments était plus complexe. Cependant, le travail a pu se faire de manière itérative et, au final, la proposition convenait à l’ensemble de l’équipe.

Nous avons ensuite proposé un graphisme pour la mise en page de la page d’accueil. Cela a été assez complexe et plusieurs sessions de travail ont été nécessaires pour arriver à une maquette qui puisse être présentée. Cette maquette a ensuite été retravaillée en interne et a continué d’évoluer. Le design actuel du site est assez éloigné de ce que nous avions proposé.