feat/integration_mdb (#1)

Reviewed-on: #1
pull/2/head
Nicolas Doby 2022-11-18 16:58:03 +00:00
parent bba37a77fc
commit 4772cd5779
7 changed files with 219 additions and 0 deletions

View File

@ -0,0 +1,212 @@
---
title: "Écoconception d'un site de contenu pour le Musée de Bretagne"
description: "Retour d'expérience sur le site \"Celtique ? L'expo.\""
date: 2022-11-01
tags:
- écoconception
- retour d'expérience
authors:
- Anne Faubry
- Aurélie Baton
- Nicolas Doby
layout: article.njk
---
En 2022, nous avons conçu et développé le site ["Celtique ? L'expo"](https://www.exposition-celtique.bzh) dans une
démarche décoconception, afin d'accompagner l'exposition éponyme du Musée de Bretagne. L'écoconception étant un sujet
récent, nous avons dû expérimenter et faire certains arbitrages pour trouver les meilleures solutions. Nous souhaitons
partager ce retour dexpérience dans cet article et nous espérons que ce retour d'expérience pourra servir à :
* Illustrer ce qu'implique concrètement une démarche d'écoconception ;
* Diffuser des solutions sobres répondant à certaines problématiques client ou utilisateur ;
* Éviter à d'autres concepteurs de commettre les mêmes erreurs et de passer par les mêmes tâtonnements que nous dans leurs projets.
## Contexte du projet
### Objectifs du site
Le [Musée de Bretagne](https://www.musee-bretagne.fr/) a lancé du 18 mars au 4 décembre 2022 l'exposition "Celtique ?", qui interroge l'identité celte de la Bretagne contemporaine. Pour accompagner cette exposition physique, le Musée de Bretagne a souhaité lancer un site internet répondant à deux objectifs principaux :
* Rendre les contenus de l'exposition accessibles au plus grand nombre, notamment pour les personnes éloignées géographiquement ainsi qu'une fois l'exposition finie ;
* Permettre aux visiteurs de poursuivre leur expérience en ligne via des ressources complémentaires.
Le site reprend donc les contenus de l'exposition en les adaptant à un contexte web et en les enrichissant d'autres ressources disponibles en ligne.
### Cahier des charges du site
En cohérence avec ses valeurs de démocratisation de la culture et de rôle civique des institutions publiques, le cahier des charges émis imposait que le site soit :
* accessible (le plus possible)
* éco-conçu (le plus sobre possible)
* open-source (utilisant des solutions libres et partageant son code source)
* cookie-free (ne collectant aucune donnée personnelle des utilisateurs).
### Équipe
L'équipe ayant réalisé ce projet était composée de :
* [Hélène Maître-Marchois](https://www.linkedin.com/in/h%C3%A9l%C3%A8ne-ma%C3%AEtre-marchois-56758259/) de [Fairness](https://fairness.coop/), interlocutrice commerciale
* [Nicolas Doby](https://www.linkedin.com/in/nicolas-doby-a4a96b96/) de [IT's on Us](https://www.itsonus.fr/), développeur
* [Aurélie Baton](https://www.linkedin.com/in/aureliebaton/) et [Anne Faubry](https://www.linkedin.com/in/anne-faubry-3b2b8390/), UX/UI Designers
Côté Musée de Bretagne, les interlocuteurs privilégiés avec lesquels l'équipe de développement a co-créé le site final étaient :
* [Manuel Moreau](https://www.linkedin.com/in/manuel-moreau-44b66214a/), Prospective et Innovation
* [Sarah Lemiale](https://www.linkedin.com/in/sarah-lemiale/), Cheffe de projet d'exposition
### Résultat
La conception et le développement du site se sont déroulés de fin novembre 2021 à mars 2022. Le site a été publié le 13 juin 2022.
**Les 15 pages de contenu du site sont toutes notées A ou B par ecoindex.** Le nombre moyen de requêtes est de 15, **le poids
moyen des pages est de 658 Ko** et la taille moyenne du DOM est de 310. Le site se charge en 2,5 secondes avec une connexion
3G moyenne. Lempreinte environnementale du parcours principal équivaut à 10 g équivalent CO₂ de gaz à effet de serre
et 15 cl deau selon les mesures effectuées avec GreenIT Analysis.
Retrouvez le détail des mesures d'impacts environnementaux effectuées et leurs explications sur la page [Écoconception](https://www.exposition-celtique.bzh/ecoconception/).
L'écoconception de services numériques a permis de minimiser les impacts environnementaux du service web tout en
améliorant la performance d'usage pour le visiteur du site.
## Problématiques rencontrées
Cet article vise avant tout à partager les problématiques de conception rencontrées ainsi que les solutions adoptées.
### Navigation
**En écoconception de services numériques :** L'un des ressorts principaux de l'écoconception consiste à fluidifier au maximum le parcours
utilisateur. Une navigation complexe entraîne des allers-retours et des chargements de pages superflus.
**Problèmes rencontrés :** L'arborescence initialement prévue correspondait à l'architecture de l'exposition et au
parcours physique des visiteurs. Or, elle était beaucoup trop complexe pour une architecture de site web. Les tests menés
nous ont en effet révélé que les utilisateurs ne parvenaient pas à savoir où ils se trouvaient sur le site ou à retrouver
une page sur laquelle ils étaient allés auparavant.
Par ailleurs le cahier des charges indiquait que le site devait répondre à deux usages de navigation distincts :
- Navigation linéaire : lecture des contenus dans l'ordre chronologique, celui des chapitres
- Navigation transverse : lecture des contenus selon les sujets abordés, en sautant des parties, dans le désordre
**Solutions :** Les 4 niveaux de profondeur de l'arborescence ont été réduits à 3. Les longueurs de chaque partie ont été harmonisées afin de se retrouver avec 2 parties de 3 et 5 chapitres au lieu de 4 parties de 1 à 4 chapitres. Cela a nécessité des réécritures et des coupes dans le texte, choisies avec le Musée de Bretagne.
Deux palettes de couleurs distinctes ont également été retenues pour aider les utilisateurs à identifier où ils se trouvaient.
Dans les parties les plus riches, nous avons ajouté un sommaire sous l'introduction et un chemin de fer cliquable en haut de page, permettant des navigations transverses selon les centres d'intérêt de l'internaute. Des boutons "précédent" et "suivant" ont également été travaillés pour les usages de navigation plus linéaires.
![Différentes navigations : chemin de fer cliquable, boutons précédent/suivant](/blog_images/articles/ecoconception_web_exposition_celtique/image_1.jpg "Différentes navigations : chemin de fer cliquable, boutons précédent/suivant")
Ces modes de navigation devaient être également accessibles sur mobile. Le chemin de fer a dû être simplifié.
NB : Certains utilisateurs, notamment les moins à l'aise avec le numérique, ne pensent pas nécessairement à cliquer sur le logo pour revenir à l'accueil. Il est important de prévoir une entrée "Accueil" dans le menu pour ces personnes.
### Photos
**En écoconception de services numériques :** En 2022, les images d'une page web représentent en moyenne plus
de 1 Mo ([HTTP Archive](https://httparchive.org/reports/page-weight)). Or GreenIT.fr recommande de rester sous
la barre de 1 Mo pour le poids d'une page.
**Problèmes rencontrés :** Le site “Celtique ?” est un site de contenu, présentant des photos de collections de
musées. Plusieurs pages intègrent une dizaine d'images de bonne qualité. Certains utilisateurs, comme des enseignants
et des chercheurs, peuvent avoir besoin d'accéder aux images en haute définition. Certaines photos des œuvres transmises
étaient d'excellente qualité à des fins de conservation, et pesaient à l'origine plus de 50 Mo.
**Solutions :** Comme toujours en écoconception, il s'agit tout d'abord d'interroger le besoin. Ici, il est
double : accompagner les textes explicatifs et s'immerger dans les collections. Certaines images superflues ont ainsi
été écartées pour réduire leur nombre à 10 par page de contenu au maximum.
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 (entre 300 et 800 pixels de large) avec une **option "Voir en résolution
maximale"** pour accéder à la haute définition.
![Figure suivi d'un lien pour voir la version haute résolution](/blog_images/articles/ecoconception_web_exposition_celtique/image_2.jpg "Figure suivi d'un lien pour voir la version haute résolution")
Les photos ont été fortement optimisées. Ainsi, même en haute définition, les images ne font pas plus de 1024 pixels
de large et conservent un poids inférieur à 2 Mo. Les images de taille moyenne font quant à elles généralement
entre 50 et 200 Ko.
Pour accéder à notre méthode de compression des
images voir : [https://www.exposition-celtique.bzh/ecoconception/](https://www.exposition-celtique.bzh/ecoconception/).
Pour les images vectorielles, nous avons privilégié le format SVG qui est généralement plus léger que le JPEG,
sauf pour les images vectorielles complexes telles que la "Carte des flux de populations et échanges économiques et
culturels au haut Moyen ge" qui était plus lourde au format SVG.
Lorsque possible, certaines images vectorielles ont été remplacées par des glyphes : par exemple la flèche
précédent / suivant est un caractère.
### Vidéos
**En écoconception de services numériques :** Les vidéos représentent environ 80% des données transférées sur
internet. Gourmand en énergie, le streaming a des impacts environnementaux considérables : obsolescence accélérée du
matériel, renouvellement des infrastructures générant un effet rebond, exigences élevées en stockage, transfert de
données… Il s'agit de les réduire au maximum.
**Problèmes rencontrés :** La vidéo est un média populaire, efficace en communication. Les expositions sont souvent présentées par une vidéo, généralement positionnées haut sur la page d'accueil pour inciter au visionnage. Plusieurs interviews et vidéos explicatives font également partie de l'exposition, pesant 200 Mo à 500 Mo chacune. Par ailleurs, le plugin Youtube, souvent utilisé pour incruster les vidéos dans la page pèse à lui seul 2,5 Mo et nécessite de nombreuses requêtes.
**Solutions :** Certaines vidéos ont été placées plus bas sur les pages, voire en lien externe vers Youtube pour ne pas trop inciter à les visionner lorsquelles nétaient pas essentielles à la compréhension.
Elles ont été **compressées à 720p et fortement optimisées**, permettant souvent de diviser leur poids par 15. Pour accéder à
notre méthode de compression des images voir : [https://www.exposition-celtique.bzh/ecoconception/](https://www.exposition-celtique.bzh/ecoconception/).
Les vidéos ont été incrustées en HTML5. Cela permet de ne pas avoir à télécharger un nouveau lecteur réduisant fortement le nombre de requêtes.
### Police
**En écoconception de services numériques :** Même si les polices ne sont pas l'élément le plus impactant, elles contribuent à accroître
le poids de la page et les transferts nécessaires à leur téléchargement. En utilisant des polices
standards, pré-installées sur lordinateur on économise donc de la bande passante tout en accélérant laffichage de la page.
**Problèmes rencontrés :** Comme de nombreux évènement culturels, lexposition “Celtique ?” a une forte identité
et la typographie choisie pour lexposition physique est très marquée et rappelle le caractère celtique. Cependant, cette
typographie nest pas utile pour le texte de la page et télécharger une police de caractère simplement pour appliquer à un
titre nest pas un choix pertinent.
**Solutions :** Pour répondre à lobjectif d'écoconception tout en gardant lidentité de lexposition, nous avons utilisé la
police **Arial** pour le contenu des pages (titres, sous-titres, texte), mais nous avons choisi une **image SVG** pour conserver
lapparence de la typographie dans le titre de lexposition.
![Titre du site utilisant une typographie celtique](/blog_images/articles/ecoconception_web_exposition_celtique/image_3.jpg "Titre du site utilisant une typographie \"celtique\"")
### Interactions
**En écoconception de services numériques :** Certaines interactions et animations peuvent être coûteuses en termes de ressources car elles
nécessitent dans certains cas limplémentation de JavaScript ou de certaines propriétés CSS à éviter.
**Problèmes rencontrés :**
Pour rendre lexposition interactive et accessible au plus grand nombre, le Musée de Bretagne avait prévu un test (quiz) pour que chacun puisse découvrir son “profil celte”. Lidée était donc de conserver ce questionnaire pour la version en ligne de lexposition. Mais comment rendre un test suffisamment interactif tout en limitant lutilisation de ressources ?
Les questions du questionnaire étaient au départ au nombre de 12. Nous avions envisagé une barre de progression afin que lutilisateur ait une indication visuelle de sa progression dans le questionnaire.
**Solutions :**
Après plusieurs tests utilisateurs sur les maquettes il est finalement devenu apparent quil y avait trop de questions. Nous
avons donc proposé de passer à 9 questions au lieu de 12. Les tests utilisateurs ont été concluants et la barre de
progression était finalement superflue. Nous avons finalement décidé déliminer la barre de progression ce qui
nécessitait également moins de développement.
Cependant, afin que lutilisateur ait un retour clair avant validation, nous avons conservé un **simple décompte
des réponses** en utilisant un simple code Javascript.
![Décompte des réponses restantes](/blog_images/articles/ecoconception_web_exposition_celtique/image_4.jpg "Décompte des réponses restantes")
### Page Écoconception
**En écoconception de services numériques :** Une des bonnes pratiques de lécoconception consiste à documenter la démarche pour faire
avancer le sujet et partager lexpérience, mais aussi afin dexpliquer le contexte et les limites du projet.
**Problèmes rencontrés :** Comme de nombreux projets entamant une démarche décoconception, il y a dun côté,
lobjectif à atteindre, et de lautre, les limites auxquelles nous sommes confrontés. Nous avons pu mettre
en place une grande partie des bonnes pratiques décoconception, mais certaines nont pas pu être mises en place
pour le moment car elles touchent à lécosystème plus global des Champs Libres (par exemple lhébergement des
vidéos sur une plateforme de type PeerTube ou les statistiques de fréquentation du site sur un outil tel que Matomo).
**Solutions :** Plutôt que dafficher un score EcoIndex en bas de page ou bien une estimation de lempreinte
environnementale, nous avons préféré (après discussion avec léquipe du musée) documenter notre **intention
décoconception dans une page** disponible dans le pied de page du site, au même titre que la déclaration daccessibilité.
![Bas de page contenant le lien vers la page écoconception](/blog_images/articles/ecoconception_web_exposition_celtique/image_5.jpg "Bas de page contenant le lien vers la page écoconception")
### Techniques
La particularité de ce projet est quil ne nécessite aucune modification graphique, aucun ajout de page ou de contenu. Seules des corrections textuelles mineures seront réalisées sur ce site. De ce fait, un générateur de site statique répond amplement au besoin. Ceci permettant de générer une seule fois les ressources statiques (HTML, CSS, JS) lors de linstallation contrairement à des sites dynamiques qui génèrent les pages à la volée, à chaque visite du site web. Ce choix soulage la charge serveur, le transformant en simple fournisseur de fichiers et non un calculateur récurrent.
Le générateur de [sites statiques 11ty](https://www.11ty.dev/) a été retenu en utilisant pour la plupart des pages un format Markdown et un template global pour la mise en forme. Le format Markdown, étant lisible sans avoir de connaissance technique, il est aisé dapporter des corrections sur le fond sans “casser” la forme.
Au fur et à mesure des avancées des maquettes, il sest avéré que chacune des pages étaient différentes. Le Markdown perdant son avantage dêtre lisible, il a été décidé de passer sur un format Nunjunk ; permettant davoir plus de souplesse dans le développement.
Ce changement a induit de former les équipes non-techniques sur ces aspects techniques :
* larchitecture technique du projet : savoir à quel endroit se trouve les textes à modifier,
* comment modifier des fichiers sources Nunjunk en respectant un format contraignant.
Une fois les modifications réalisées, les équipes techniques peuvent générer et re-déployer une version de production.

View File

@ -130,6 +130,13 @@ h2 {
margin: 3rem 0 2rem; margin: 3rem 0 2rem;
} }
h3 {
color: var(--text-color-secondary);
font-size: 1.4rem;
font-style: normal;
font-weight: 700;
}
p, li { p, li {
font-size: 1.125rem; font-size: 1.125rem;
line-height: 1.5rem; line-height: 1.5rem;

Binary file not shown.

After

Width:  |  Height:  |  Size: 121 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.5 KiB