Refonte de la plateforme web des Champs Libres

Un fonctionnement en lots

Imaginez un site Internet qui présente à la fois des contenus à lire, à écouter, à regarder, des événements récurrents, des événements uniques, des festivals, des activités qui nécessitent une réservation, des informations pratiques en tout genre… Cela fait beaucoup de sujets à creuser en phase de conception.

Après une tentative d’organisation classique (conception complète, puis design puis développement), nous avons privilégié un fonctionnement en lots fonctionnels. Les enjeux et réflexions étaient si nombreux qu’il était plus adapté de travailler un sujet à la fois, en réunissant les acteurs utiles selon les sujets.

Le projet a été découpé en lots, impliquant conception, cahier des charges, design et développement à chaque fois, pour les grands thèmes suivants :

• lot 1 : les contenus / la stratégie éditoriale et CMS,
• lot 2 : les événements,
• lot 3 : les ressources,
• lot 4 : les pages dédiées aux professionnels.

Le projet a tout de même débuté par une première phase d’immersion et de cadrage fonctionnel, laquelle a notamment permis d’identifier et d’organiser les 4 lots du projet : interview des acteurs internes, atelier persona de site web, benchmark, analyse des statistiques web, conception de personas UX, atelier de simplification fonctionnel, définition de l’arborescence, atelier bonnes pratiques éditoriales web…

Un projet d’ampleur

Immersion

Qui dit nouveau client, dit immersion. En effet, pour s’assurer de comprendre au mieux l’activité du client et ses enjeux, il est impératif de prendre un moment pour découvrir ses métiers et les coulisses. Quand c’est possible et pertinent, cela implique une visite.

C’est comme ça que nous avons passé une journée aux Champs Libres, à quelques arrêts de métro de nos bureaux. Comme beaucoup de Rennais, l’équipe LunaWeb connaissait déjà cet espace culturel. Mais la visite guidée nous a permis d’en savoir beaucoup plus sur la diversité des activités proposées et aussi de découvrir des zones cachées du public. C’était passionnant ! C’est probablement là que la première prise de conscience s’est faite : les informations à transmettre vont être très nombreuses, leur structuration va être complexe.

Web analyse, questionnaire et personas web UX

Pour approfondir l’immersion, nous avons réalisé une analyse des comportements au sein du site web. Nous l’avons complétée par un questionnaire de recrutement (en vue de futurs tests utilisateurs), qui comprenait des questions sur les usages du site des Champs Libres par les répondants.

Tout cela nous a permis de créer 3 personas web UX, réadaptés des personas définis lors de l’AMO : une personne férue des Champs Libres, une autre habituée de la bibliothèque et la dernière, qui répond toujours présente pour les expositions. Comme pour tout projet, ces personas UX ont été utiles en phase de conception pour prioriser au mieux les besoins et parcours des utilisateurs.

Conception

Du fait d’un fonctionnement en lots, la conception s’est divisée en quatre grands sujets. Chacun des lots devait, bien sûr, prendre en compte de manière centrale :

• l’écoconception : rester sobre malgré le nombre de contenus, proposer et utiliser les ressources au bon moment, réemployer un maximum de composants de l’interface,
• et l’accessibilité : assurer de tous les points de vue l’accès à l’information de façon simple et accessible, au regard des critères du RGAA.

Le premier travail a été celui de l’arborescence du futur site et sa stratégie éditoriale. Les contenus et ressources étaient si nombreux qu’une réflexion poussée a été nécessaire : la structure du site, le choix des fonctionnalités à conserver et de celles qui pouvaient être écartées ou simplifiées, de ses contenus et du CMS adapté pour répondre aux enjeux techniques et d’administration de ce projet.

Une fois l’arborescence de ce futur site définie, nous avons alors pu avancer par lot.

Nous avons alors conçu la page d’accueil. Il y avait, certes, beaucoup de choses à montrer, mais la recherche d’écoconception nous a conduit à trouver une juste mesure. Nous avons alors défini une méthode de calcul nous permettant d’estimer le nombre d’images ou le nombre de requêtes maximum par page pour que le poids de celle-ci soit acceptable et en accord avec les objectifs fixés.

Nous nous sommes ensuite attelés aux événements, notamment à la partie “Programme”, qui est devenue le cœur du projet. Il y avait un véritable enjeu de conception puisque les éléments à valoriser étaient nombreux :

• les grands événements : expositions de plusieurs mois,
• les événements avec beaucoup de séances tels que ceux du planétarium,
• les temps forts uniques tels qu’un concert ou une projection,
• les expositions payantes et gratuites,
• etc.

Il était primordial de trouver un système permettant de montrer le maximum de choses sans noyer l’utilisateur sous les informations… Un défi que nous avons mené main dans la main avec l’équipe des Champs Libres.

Les ressources faisaient l’objet de l’étape suivante. Pour rappel, le futur site devait notamment être tourné vers l’éditorial et la mise en avant de la richesse des ressources proposées en consultation par Les Champs Libres

Cela impliquait de sélectionner les ressources qui donnent le plus envie, de créer des listes de ressources par thématiques, de les filtrer. Surtout, cela nécessitait de trouver comment guider l’utilisateur vers celles-ci, le prendre par la main, tout en restant attentif aux enjeux d’écoconception et d’accessibilité. C’est ainsi que le choix de la présentation de sélections de ressources thématiques au travers de séries a vu le jour.

En dernier lieu, nous avons travaillé sur les contenus destinés aux professionnels.

Ce sont les personnes des centres de loisirs, des écoles, des travailleurs sociaux souhaitant venir aux Champs Libres dans le cadre d’une visite scolaire, ou d’une sortie de groupe avec des personnes handicapées, par exemple. Leur proposer une rubrique dédiée était nécessaire pour leur expliquer tout ce qu’il est possible d’organiser ou de venir explorer sur place. Cette rubrique “Espace professionnels” fait ainsi office de médiation entre Les Champs Libres et les professionnels.

Tests utilisateurs sur prototype

Nous vous parlions un peu plus haut d’un questionnaire de recrutement : il avait pour but de recruter des usagers des Champs Libres pour des tests utilisateurs sur le prototype du futur site Internet. Des personnes “de la société civile” ont été recrutées sur la base des personas usagers définis plus tôt.

Ces tests utilisateurs, réalisés en présentiel, avaient pour objectif d’évaluer :

• la perception du site grâce, notamment, au test des 5 secondes : les personnes  voient la page sur cette durée et doivent retranscrire ce qu’elles ont vu et retenu,
• l’arborescence du site avec le tree testing (nous demandons aux testeurs de trouver un contenu à partir du menu de navigation),
• la compréhension du contenu, en faisant surligner les mots incompris par les testeurs.

À l’occasion du test des 5 secondes, les retours ont été très positifs : le nouveau site leur semblait intuitif et simple d’usage rien qu’avec l’esthétisme.

En sont ressorties quelques améliorations possibles, notamment en termes de guidage, d’accès rapide à des informations pratiques ou à l’explicitation de la notion d’écoconception. Ces retours ont permis d’apporter des optimisations au site avant le développement.

Direction artistique et webdesign

Faisons un focus à présent sur la partie graphique de notre travail sur le site des Champs Libres. Sur ce point, l’enjeu était d’affirmer la personnalité du lieu, qui “représente un établissement durable”, tout en prenant en compte le fait que la jeunesse est aussi une cible du lieu. Pour préciser cela, nous avons animé un atelier personnalité de site web. Chaque membre de l’équipe client répond à quelques questions sur le ton, la voix et la personnalité qu’il associe à l’établissement. Après une mise en commun, il en ressort la future “personnalité du site”.

Les caractéristiques qui sont revenues le plus : la convivialité, la modernité, l’accessibilité, la simplicité, le low-tech, l’attractivité. Cela a inévitablement été pris en compte pour la direction artistique.

Les Champs Libres avaient déjà défini des inspirations pendant l’AMO réalisée en amont de notre prestation, mais nous sommes venus les compléter par un benchmark de sites de lieux culturels.

Leur charte graphique étant à la fois limitée et énormément déclinée, nous avons fait un état des lieux de leurs différents supports de communication pour en relever les similitudes. Les arrondis sur les visuels comme sur le bâtiment et les aplats de couleurs étaient largement présents dans leur communication.

Nous avons testé différents types d’images (tramées, avec traitement, etc.) et comparé leur poids selon les formats. Il a été conclu que le WebP était simplement plus intéressant en termes de compression.

Nous avons proposé de réduire le nombre de typographies des Champs Libres, passant de quatre typographies (dans leur charte graphique) à deux, dont une dite “système” afin d’alléger le poids sur le site. Bien sûr, ces typographies ont été choisies de sorte à coller avec l’identité des Champs Libres : avec des arrondis.

Après différentes itérations, nous en sommes arrivés à une proposition finale.

En termes de couleurs, le noir, le gris et le blanc ont été définis comme couleurs de base avec quelques couleurs d’accompagnement.

Pour des questions d’accessibilité, ces couleurs d’accompagnement ne sont pas associées à des typologies d’information.
En effet, une information ne peut pas être transmise uniquement par la couleur : une personne daltonienne ou une personne utilisant un lecteur d’écran n’y aurait pas accès. Elles ont été choisies pour attirer l’œil et permettre aux pages de s’adapter aux identités graphiques des différents événements.
Ainsi, dans le back-office, nous avons intégré la possibilité pour les contributeurs de choisir parmi 5 couleurs pour personnaliser certains éléments de contenus afin que les pages soient accordées avec l’univers de l’événement.

Parmi les éléments graphiques, nous avons également ajouté des tracés qui s’entrelacent, en référence au logo des Champs Libres.

Développement back-end et front-end

Parlons technique. Nous avons, d’un commun accord, décidé de développer le nouveau site des Champs Libres sous Symfony, via le CMF (Content Management Framework) Sylius. Nous avons opté pour ce choix plutôt qu’un WordPress, afin de répondre aux enjeux techniques de la densité et diversité de ressources de ce projet, ainsi qu’à la nécessité de disposer d’une grande flexibilité et d’une conception sur-mesure, en front office comme en back-office.

Travailler sous Symfony a engendré la création d’une stack (c’est-à-dire un environnement technique) adaptée sous Sylius, qui est généralement privilégié pour le e-commerce mais est aussi particulièrement bien pensé pour des gros portails de contenus.

La complexité de la rubrique “Programme” s’est ressentie jusqu’en phase de développement back-end du fait de l’hétérogénéité des typologies d’événements et de leur présentation sur le site. De plus, les Champs Libres utilisant OpenAgenda en tant que plateforme de publication événementielle, nous avons profité de l’API proposée par ce système. Ainsi, tous les jours, une récupération automatique des dernières données modifiées se fait, pour que le site Internet reflète avec justesse l’actualité des Champs Libres(tout en évitant les appels API inutiles).

Sur cette page “Programme”, les spécificités ne manquaient pas à l’appel. En effet, nous avons proposé un moteur de recherche multi-critères qui tenait compte des contraintes en accessibilité. Et, pour que les Champs Libres puissent mettre facilement en valeur des sélections d’événements, nous leur avons mis à disposition des blocs de mise en avant automatiques et d’autres à gestion manuelle.

Pour la page “Espace professionnels”, l’histoire se répète : nous avons intégré un moteur de recherche et proposé différents formats d’activités à gérer manuellement.

Et l’accessibilité + l’écoconception dans tout ça ? Pour rappel, l’enjeu sur ces deux thématiques était très important pour l’équipe des Champs Libres. La Chargée d’accessibilité de l’équipement culturel des Champs Libres, Sylvie Ganche, a activement participé au projet.
Elle est, par ailleurs, non voyante et a été particulièrement vigilante et présente pour nous guider dans nos choix de développement et de conception, étant bien placée pour les tester. Bien sûr, vous le lirez ensuite, elle n’a pas été la seule à tester nos propositions.

Du point de vue de l’écoconception, voici des exemples de ce qui a été fait :

• nous avons gardé comme fil conducteur le fait de proposer peu d’images : recommandation de vignettes sur la page “Programme”, possibilité de ne pas afficher les images des articles dans les mises en avant, etc.,
• lorsque des images sont intégrées, deux formats sont très largement privilégiés : le WebP et le SVG, qui sont très légers,
• au sein du back-office, nous avons affiché des alertes sur les blocs de contenus afin de faire des rappels des bonnes pratiques en écoconception : “attention une image va utiliser beaucoup de ressource, à utiliser avec parcimonie”, “les vidéos consomment beaucoup de ressources, privilégier autant que possible d’autres formats de contenus”,
• toutes les images sont redimensionnées dans différentes tailles afin de s’adapter au contexte d’utilisation. L’image téléchargée sur un smartphone sera ainsi plus légère que celle sur un ordinateur de bureau,
• nous avons automatisé le nettoyage des données concernant les événements terminés. Désormais, la plupart sont automatiquement dépubliés et les informations sont supprimées de la base de données,
• nous avons aussi automatisé le nettoyage des images téléchargées dans l’administration depuis plus de 6 mois et qui ne sont plus utilisées : elles sont supprimées, avec leurs variantes.

Du point de vue de l’accessibilité, voici d’autres exemple de ce qui a été fait :

• la mise à disposition de champs à compléter pour les contenus médias : nous avons prévu de quoi ajouter un attribut ALT aux images ou une transcription écrite aux podcasts et vidéos,
• un suivi rigoureux du RGAA, notamment en phase de développement front-end, assurant une navigation au clavier sur le site, par exemple,
• de nombreux accès rapides ont été prévu, que ce soit en pré-header, header ou footer,
• un contact spécifique a été mis en place pour les personnes en difficulté face aux captchas du site (test pour prouver que l’utilisateur est humain et non un robot, généralement non accessible aux personnes ayant une déficience visuelle) a été mis en place : téléphone et adresse email,
• les informations pratiques des Champs Libres sont multilingues : il est possible de choisir entre le français, le breton, le galo, l’anglais ou l’espagnol,
• tout au long de la conception nous avons privilégié l’utilisation de composants natifs HTML pour les fonctionnalités complexes (comme les champs du moteur de recherche, formulaire de contact, etc.),
• les couleurs principales ont également été sélectionnées de façon à ce qu’on puisse toujours écrire en noir dessus, sans nuire à la lisibilité.

Pour être en accord avec le RGPD, nous avons choisi Matomo plutôt que Google Analytics. Vous ne verrez donc pas de bandeau de cookies sur le site des Champs Libres : un parti-pris fort et tout à fait logique avec leur positionnement (comme nous).

Tests utilisateurs d’accessibilité

Les attentes des Champs Libres en termes d’accessibilité étaient telles qu’il était important de conclure le projet par des tests utilisateurs d’accessibilité. En effet, rien de mieux que la confrontation de son interface à des personnes handicapées pour confirmer sa bonne accessibilité. De plus, s’agissant d’un lieu public, l’équipe des Champs Libres veille à favoriser l’inclusion.

Les résultats étaient très bons, quelques points d’amélioration ont été relevés, rien de bloquant. Nous avons remonté ces améliorations aux clients pour qu’elles soient mises en place.

Audit RGAA externe

Pour attester de l’accessibilité du site Internet, qui, rappelons-le, était une priorité pour l’équipe des Champs Libres, Access42 a réalisé un audit RGAA de l’interface. Le taux de conformité obtenu est de 91,23%, ce qui est particulièrement élevé pour un site si riche. Ce résultat est issu d’un travail collectif mêlant bonnes pratiques et optimisations techniques et éditoriales.

Audit RGESN

La dernière étape du projet pour nous a été l’audit RGESN, une fois le site en ligne. Pour ce faire, nous avons travaillé collégialement avec les différentes parties prenantes du projet : les équipes des Champs Libres, de Rennes Métropole, de DataCampus (hébergeur) et LunaWeb. C’est la complémentarité de nos compétences et ressources qui nous a permis de réaliser un audit RGESN très approfondi.

Découvrez en détails le déroulement de cet audit RGESN pour les Champs Libres dans notre article dédié.

Ce que nous pouvons retenir des résultats de cet audit, c’est que notre travail a payé côté écoconception. Nous avons pu comparer les données de l’ancienne version du site et de la nouvelle, et elles font plaisir.
Vous pourrez lire sur la déclaration d’écoconception des Champs Libres que :

• “l’application (logiciel du site web) est 73% plus légère que la précédente”,
• “le poids global de la page accueil a chuté de plus de 90%”,
• “la base de données est quasiment inexistante puisqu’elle est désormais 99% plus légère que la précédente”,
• ou encore que “le nombre de scripts de la page d’accueil passe de près de 50 à seulement 2”.

Plutôt encourageant, non ?

Un parcours utilisateur plus fluide pour tous

Depuis septembre 2024, le nouveau site des Champs Libres est en ligne. C’est un site éditorial riche, qui fait le relai avec les différentes entités qu’abritent le lieu. Sa direction artistique a été complètement revue, ainsi que ses parcours utilisateurs.

Nous espérons que le public a vu son expérience améliorée depuis la refonte et que la recherche d’informations pratiques est réellement facilitée.

C’est un projet qui se conclut donc sur une note très positive. Nous sommes fiers d’avoir participé à cette refonte de grande ampleur, avec des enjeux d’accessibilité et d’écoconception, pour un lieu dont nous sommes nous-mêmes régulièrement visiteurs.