Refonte de la plateforme web des Champs Libres

Un fonctionnement en lots

Le site des Champs Libres comprenait 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…

Après une tentative d’organisation classique (conception complète, design puis développement), nous avons privilégié un fonctionnement en lots fonctionnels.

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 débuté par une première phase d’immersion et de cadrage fonctionnel qui a permis d’identifier et d’organiser les 4 lots du projet.

Un projet d'ampleur

Immersion

Pour s’assurer de comprendre au mieux l’activité de notre client et ses enjeux, il est primordial de prendre un moment pour découvrir ses métiers et les coulisses.

C’est comme ça que nous avons passé une journée aux Champs Libres, à quelques arrêts de métro de nos bureaux. Cette visite guidée nous a permis d'en savoir plus sur la diversité des activités proposées et de découvrir des zones cachées du public.

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, pour prioriser au mieux les besoins et parcours des utilisateurs :

• une personne habituée des Champs Libres
• une personne qui se rend régulièrement à la bibliothèque
• une personne férue des expositions

Conception

Du fait d’un fonctionnement en lots, la conception s’est divisée en quatre grands sujets. Chacun des lots a pris 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.
• 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 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

Il était primordial de trouver un système permettant de montrer le maximum de choses sans noyer l’utilisateur sous les informations…

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. C’est ainsi que le choix 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 (centres de loisirs, écoles, travailleurs sociaux...) en proposant une rubrique dédiée.

Tests utilisateurs sur prototype

Ces tests utilisateurs, réalisés en présentiel ont évalué :

• La perception du site grâce 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 : nous faisons surligner les mots incompris.

À 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.

Direction artistique et webdesign

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 déterminer 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.

Les caractéristiques qui sont revenues le plus : la convivialité, la modernité, l’accessibilité, la simplicité, le low-tech, l’attractivité.

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 limitée et déjà énormément déclinée, nous avons fait un état des lieux de leurs différents supports de communication pour en relever les similitudes.

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 réduit le nombre de typographies des Champs Libres, passant de quatre typographies (dans leur charte graphique) à deux, dont une “système” afin d’alléger le poids sur le site.

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

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.

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

Nous avons 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 a été l’audit RGESN, une fois le site en ligne. Pour cela, nous avons travaillé 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 retenons des résultats de cet audit, c’est que notre travail a payé côté écoconception. La déclaration d’écoconception des Champs Libres mentionne 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”
• “le nombre de scripts de la page d’accueil passe de près de 50 à seulement 2”

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. L'expérience est plus fluide et la recherche d’informations pratiques plus facile.

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.