Eco-concevoir le site d’une exposition : nous avons relevé le défi !
Entreprendre une démarche d’écoconception d’un site “classique” peut être un défi. Mais mettre en place une telle démarche sur un site d’exposition est loin d’être une mince affaire. En effet, il s’agit de mettre en valeur des œuvres, des médias, en somme, du contenu de natures très variées.
C’est dans le cadre de l’exposition Celtique ? du Musée de Bretagne que nous avons eu l’opportunité de travailler sur ce sujet à la fois enthousiasmant et complexe.
Une stratégie “numérique soutenable”
A l’initiative du projet, le Musée de Bretagne et les Champs Libres à Rennes, qui d’une part sentaient le besoin de garder le lien avec le public suite à la crise sanitaire, et d’autre part avaient l’ambition forte de mettre en place une “stratégie de numérique soutenable”.
Dans ce contexte, le site web pour l’exposition “Celtique ?” allait servir de test et d’un premier retour d’expérience afin d’en tirer des apprentissages en matière d’écoresponsabilité, réplicables au reste de l’écosystème des Champs Libres.
Un cahier des charges en cohérence avec ses valeurs
Le Musée de Bretagne, dans son cahier des charges, avait clairement mis en avant ses valeurs de démocratisation de la culture et de rôle civique des institutions publiques. Le site devait être réalisé dans une démarche d’écoconception et d’accessibilité, collecter le moins de données personnelles possible, et être le plus ouvert possible.
Première étape, questionner le besoin
Lors de l’étape de cadrage, l’un des premiers objectifs a été de comprendre et de questionner le besoin : Pourquoi fournir une version en ligne de l’exposition ? A qui va-t-elle bénéficier ? Que doit-on inclure ou non sur le site ?
Grâce à ces questionnements, trois unités fonctionnelles ont été identifiées avec le Musée de Bretagne et priorisées de la façon suivante :
- Approfondir un point précis sur le celtisme en Bretagne
- Flâner parmi les contenus et découvrir de nouvelles choses
- Se renseigner sur le sujet du celtisme en Bretagne
Le site Internet n’avait pas pour objectif de remplacer l’exposition In Situ mais bien de mettre la connaissance à disposition du plus grand nombre.
Simplifier l’arborescence et fluidifier le parcours
La première proposition d’arborescence du site reprenait la structure de l’exposition In Situ. En testant cette arborescence sur des premières maquettes, nous nous sommes aperçus que les utilisateurs étaient rapidement perdus car cette arborescence rendait le parcours complexe.
Nous avons donc fluidifié le parcours notamment en :
- retravaillant l’arborescence et en réduisant les niveaux de profondeur
- balisant le parcours avec de gros boutons en bas de page (précédent et suivant)
- introduisant des chemins de fer en haut de page pour faciliter le repérage
Choisir la bonne architecture technique
Le choix s’est porté sur un site statique généré à l’aide de 11ty, car une fois en ligne, le site nécessiterait peu de changements. Ce générateur permet de générer une seule fois les ressources statiques (HTML, CSS, JS) lors de l’installation contrairement à des sites dynamiques qui génèrent les pages à la volée, à chaque visite du site web.
Au départ, la modification des fichiers était prévue en markdown, mais au vu des spécificités des pages, cela a dû évoluer vers format Nunjunk permettant d’avoir plus de souplesse dans le développement.
Sélectionner et optimiser tous les médias
Par définition, un site d’exposition met en avant des peintures, photos, vidéos, sons… alors comment faire pour rester “écoconçu” ?
Les images
Tout d’abord, il s’agissait encore une fois de questionner le besoin : certaines images superflues ont été écartées pour réduire leur nombre à 10 maximum par page de contenu.
Deuxièmement, nous nous sommes interrogés sur la définition nécessaire pour les images. Nous avons choisi de les afficher en taille moyenne pour la plupart avec une option “Voir en résolution maximale” pour accéder à la haute définition (nécessaire pour certains utilisateurs).
D’autre part, les images ont toutes été fortement compressées et optimisées (jusqu’à un gain de plus de 80% sur le poids des images). La plupart des images ont ainsi un poids final avoisinant 40 à 100 Ko en résolution par défaut, et 1 Mo en haute définition.
Les vidéos et sons
Les vidéos et les pistes audio ont subi le même sort : redimensionnement et compression drastiques. Le poids des vidéos a ainsi, en moyenne, été divisé par 13.
D’autre part, pour éviter de charger des ressources inutiles (et par la même occasion éviter les trackers), nous avons choisi d’intégrer les vidéos et sons avec des lecteurs HTML5.
Utiliser une police standard
Pour limiter le poids de la page et les requêtes nous avons choisi une police système : Arial. Cependant nous avons pu conserver l’identité graphique du titre de l’exposition « Celtique ? » en utilisant une image SVG dans l’entête.
Travailler en équipe pour trouver les meilleurs compromis
Ce travail repose sur une collaboration étroite entre les membres de l’équipe (designers et développeur) et le client (Musée de Bretagne). Tout au long du projet nous avons travaillé de manière itérative en cherchant tous ensemble les meilleurs compromis possibles (images, vidéos, parcours, implémentation technique, etc.). Nous avons également, comme dans tout projet de conception, testé les interfaces à différents niveaux de fidélité auprès d’utilisateurs proches des cibles pré-identifiées.
Documenter la démarche
Les bonnes pratiques évoquées ci-dessus ne sont qu’une partie du travail effectué, vous pourrez trouver les détails de la démarche dans la page écoconception du site ainsi que dans le retour d’expérience détaillé dans l’article Écoconception d’un site de contenu pour le Musée de Bretagne.
Le site : Celtique ? L’expo
L’équipe projet
Développement : Nicolas Doby (IT’s on Us)
Design : Anne Faubry et Aurélie Baton
Relation commerciale : Hélène Maître-Marchois (Fairness)
L’équipe Musée
Prospective et Innovation : Manuel Moreau Cheffe de projet d’exposition : Sarah Lemiale
Aurélie Baton
UX Designer (Designer d'expérience utilisateur) Ma spécialité est l’expérience utilisateur, le design d’interfaces, et le numérique responsable. J’allie la conception responsable et inclusive au design thinking, pour remettre les utilisateur.rice.s et les préoccupations actuelles au coeur de la démarche de conception.