Ecran de fin v3 + graphique de simulation

[laem]

🎮 Démo https://fin-3--nosgestesclimat.netlify.app?PR=1417

Objectif

La fin v2 a trainé trop longtemps (#109), je la reprends ici. Cette PR a donc pour but de répondre au problème identifié il y a bientôt 2 ans :

Suite à notre séminaire de cet été, où on s'est dit qu'il fallait mettre en avant l'objectif à atteindre

On s'est rendu compte que beaucoup de gens ne comprennent pas ce que veut dire "8 tonnes". Certains croyant même que c'est une note sur 10, probablement pas aidés par la moyenne FR à 10 tonnes. Cette moyenne donne l'opportunité de penser que si le résultat est < 10 tonnes, on est bien. D'où l'idée de mettre en priorité l'objectif à atteindre, et de reléguer la moyenne ailleurs (peut-être une idée de nouvelle slide, CF maquettes de Jérémie d'un double bar chart catégories toi/FR ?).

À noter, la page de fin actuelle a déjà eu un sacré succès avec un gros nombre de partage de captures d'écran sur les réseaux sociaux. Elle a un style caractéristique (dégradé de couleur / infographie reconnaissable) qui me semble important de garder.

L'autre objectif est de montrer la décomposition "transversale" de l'empreinte, non plus selon les catégories (alimentation), mais les sous-cat (midi et soir) et sous-sous-cat (repas viande).

Un troisième objectif était d'améliorer le partage de ces nouveaux écrans via un partage texte d'emojis qui se veut viral.

Vu qu'il s'agissait de toucher au graphique des sous-catégories, partagé par l'écran de fin et la simulation elle-même, j'ai voulu expérimenter un autre style plus concis pour ce graphe pendant la simulation, mais j'aurais pas du, ça allonge une PR déjà très grosse.

Minimum

Nouvelle diapo

• reprendre le code de Nouvel écran de fin #109 pour faire la slide 1
• reprendre la mise en 1er plan du chiffre de résultat
• optimiser l'espace vertical sur mobile, dans la diapo et hors diapo
• faut-il afficher un objectif de 2 tonnes, ou de neutralité hors SP ? On peut partir sur 2 tonnes et réfléchir ensuite.
• trouver une idée de partage en emojis
• "votre simulation n'est pas terminée" avec emoji
• bien vérifier l'expérience sur quelques mobiles, notamment la perf

D'après mes tests c'est mieux que l'actuel sur mon téléphone et sur bureau. Une grosse lourdeur en moins. Le swipe n'est pas parfait, loin de là, mais c'est compliqué à améliorer.

Testé dans un 1er temps sur iPhone SE2020/8/11/X/13, et Galaxy S10.

Graphique pendant la simulation

• clic sur service public -> message pas de question, à venir. Dépend de Question services publics nosgestesclimat#1400
• améliorer les transitions pour les sous-cat sur mobile
• suite réflexion avec @Clemog : peut-être ne pas afficher par défaut les sous-catégories. Peut-être les faire apparaitre seulement au bout de quelques questions (comme le tuto, variable de sauvegarde du choix), ou à l'apparition de la catégorie ? -> [Clément] Bonne idée le fait de faire apparaitre la décomposition au bout de quelques questions. Pourquoi ne pas reprendre les respirations pour en faire des résumé de la partie précédente plutôt qu'un CTA pour la partie suivante ? [Mael] Oui volontiers, mais je pense qu'il faut garder le CTA de la section suivante, surtout dans ce nouveau design où il est lié au graphique de catégories.
• mettre la couleur de la catégorie en cours en border-left de la section question bleu clair <- testé, c'est trop redondant
• affichage de l'impact chiffré des réponses sur la catégorie
• harmoniser mobile / bureau (je dev d'abord mobile)
• tester une première visualisation pédagogique sur le cas du logement / nb personnes, l'exception du graphe de sous-cat ?

Partage

• faire le texte de partage en emojis pour buzzer un peu
• quand on clique sur le résultat de quelqu'un et que c'est pas notre test, un gros bouton Faire mon test à la place de Passer à l'action
• 🐛 problème avec le persona Ximun
• hashtag nosgestesclimat à tracker :) ou #empreintecarbone
• Faut-il cumuler emoji + preview d'URL ? Je reviens sur ma position, je pense que oui il faut.
• Y a-t-il une API qui nous permet de twitter / envoyer sur whatsapp les 3 écrans de fin en une seule galerie ? <-- Non.
• Faire le partage d'emojis (voir la discussions plus bas)

Il ne semble pas y avoir de consensus sur le partage. Pour moi, ce partage doit être un minimum mystérieux, inciter à cliquer, à vouloir voir son propre score. Je vous propose de tester celui qui est codé (grille de catégories qui vire à l'indicateur vert plus on est bas).

• expliquer à l'utilisateur qu'il partagera des emojis, lui donner envie de cliquer <-- à investiguer, je ne sais pas trop si c'est nécessaire a priori

• afficher le score emoji du persona sélectionné sur la page persona

Diapo sous-catégories

Adapter la slide 2 pour le rendre monochrome-emojis ? Ou concentré sous-catégories ? Plutôt reproduire le célèbre graphe de Ravijen, et les emojis en partage.

• [en lien] pendant la simulation, intégrer le graphe de sous-cat dans le graphe, pas dans les questions
• le graphe est trop compliqué sur mobile, simplifier
• double graphe, c'est trop sur mobile ?
• En tout cas, il faut faire la liaison visuelle. Sur bureau aussi ?
• Faire une 1ère version graphe de sous-cat pour l'écran de fin

Il ne serait pas en %, mais en absolu. Le graphe de ravijen se fait sur la moyenne, qui est à 10 tonnes.
On peut mettre la barre la plus grande à 100%, et le reste en fonction. Les petits postes seraient alors peu visibles, mais c'est le but finalement, de relativiser. À voir si un zoom est possible.

MAJ : on adopte un graphique plus simple, car le ravijen est jusqu'à nouvel ordre impossible à caser sur mobile. Je le trouve aussi trop complexe, parlant à un public avec une culture scientifique importante. Voir plus bas pour les captures.

Le graphie est en % de l'empreinte, car en absolu, vu la diversité des empreintes (1 à 10), c'est plus compliqué de gérer l'affichage sur mobile.

On introduit donc la barre des 2 tonnes pour palier le choix du relatif et pour garder un lien avec la première diapo.

• Facile d'utilisation sur mobile (défi !)
• Tester la compréhension sur mobile où la barre des 2 t est plus basse. Faut vraiment orienter la gravité vers la barre et peut-être mettre une largeur de grille dynamique dans le code width=10.
• Indiquer qu'il y a plusieurs diapos et donner un moyen de sauter de diapo en diapo en en-tête ou bas de diapo, ou de 1 à 2 via un clic sur la barre de x tonnes. CF commentaire plus bas, seuls 10% des "finishers" voient la diapo pétrole

Autres

• Réparer l'image d'aperçu
• Important de mettre en valeur le message "votre score est bas; aidez les autres" ! Une récompense, médaille ?

Vous êtes nettement en-dessous de la moyenne : notez bien qu'il y a de grandes chances que votre temps passé à convaincre et aider les autres soit plus efficace que de chercher à récupérer les 2 tonnes en trop (même s'il faudra le faire un jour)

Pas sur qu'il faille le mettre sur l'écran de fin en fait. Peut-être plutôt améliorer le message sur l'écran action, car il s'agit d'action ! Un bel encart illustré.

• L'iframe personnalisé est remis en question par ce nouveau design. Décider ce qu'on fait : on arrête ? Cf discussion Fin de l'iframe personnalisé ?  #545

Ensuite

Des choses utiles, mais pas strictement nécessaires pour une v1 en ligne qui améliore déjà fortement l'existant

• Lancer le mouvement sur Twitter

Tester le succès du partage par emoji sur quelques semaines via plusieurs tweets au même moment. Le faire évoluer si échec.

• donner envie de partager les écrans de fin avec une petite animation du bouton partage. Exemple

• Inciter au swipe sur le slider de fin, en utilisation la classe existante .attention multicolore ?

• animer les graphiques

• pour l'instant on se limite aux sous-catégories de niveau 1. On doit aller plus loin, et afficher les plats ("viande", "végé") etc, mais ce n'est pas trivial.

Il faut définir des règles de transition de valeurs ! Ça demande plusieurs essais, par exemple regrouper viande / poisson / végé ? Ou séparer les viandes ?

• ajouter les indicateurs de complétion sur le graphe de sous-cat sur mobile ?
• intégrer dans la réflexion les effets de du parcours action. Mettre un bouton valider à la fin de l'écran action qui te montre l'écran de fin comme si tu avais appliqué tes actions. Ou légèrement différent.
• idée : faire 2 versions de cette slide, la deuxième une fois que le parcours action a commencé, qui parle de % d'effort, donc rentre un peu plus sérieusement dans l'objectif, fonction décroissante + 1er jalon

[Clem-mrtn]

C'est top !

• Je me dis que c'est dommage pour les deux catégories du dessous qu'on ait pas les emojis, on ne sait pas forcément ce à quoi ça correspond
• Est-ce qu'on ne met plus les résultats / catégories ? Je trouvais ça pas mal d'avoir le découpage des tonnes de CO2e par thématique
  **=> Je corrige cette remarque, je n'avais pas vu en fait qu'il y avait 3 écrans pour afficher les résultats. C'est pas mal mais du coup je n'ai pas fais gaffe qu'il fallait faire défiler. Peut-être le rendre + évident ?
• Je rajouterais les unités "CO2e"
• Question : est-ce qu'on pourrait pas avoir une animation pour comprendre "l'objectif" : genre par exemple apparaît le graphique avec nos X tonnes découpées puis on fait apparaître la même colonne qui diminue et arrive sur l'objectif 2 tonnes de CO2e ? Ou trop gadget ? Ca rejoindrait le côté un peu expérience app plutôt que test site web

[laem]

Oui je valide toutes les remarques ! Et la dernière est très pertinente, je cherchais justement une idée d'animation, on va tester ça !

[laem]

On voit ici que le partage semble cassé. Corriger, et introduire les emojis :)

[laem]

Propositions pour le partage emoji. À noter, ça ne rend pas pareil en fonction des plateformes sur lesquelles on colle le texte (les emojis de twitter sont cool, ils sont bien cadrés, idem pour telegram).

---

Dans cette proposition, on se concentre sur le budget. Mais les catégories deviennent alors dures à lire, la clef de correspondance allong trop le tweet. Mais sans elle, difficilement compréhensible.

J'ai calculé #monEmpreinteClimat !

Moi : 
⬛️🟪🟧🟧🟦🟦🟥🟥🟥  9️⃣

L'objectif : 
🟩🟩 2️⃣

nosgestesclimat.fr

💻️ : 🟪
🏛️ : ⬛️
🏠 : 🟦
🚦 : 🟥
🍽️ : 🟧

#nosgestesclimat

En vertical. Pas certain qu'on comprenne le fait que c'est un graphe, et potentiellement trop haut pour une timeline. Difficile de labelliser (moi/objectif) les barres.

J'ai calculé #monEmpreinteClimat !


9️⃣
⬛️
🟪
🟧
🟧
🟦
🟦
🟥      2️⃣
🟥      🟩
🟥      🟩

Simplicité ! Mais peu d'informations finalement, et visuellement triste. Les cemantix et wordle apportent justement des couleurs pour ça.

J'ai calculé #monEmpreinteClimat !

Moi : 
⬛⬛⬛⬛⬛⬛⬛⬛⬛  9️⃣

L'objectif : 
🟩🟩 2️⃣

Mon préféré : tout y est, un peu de couleur, clef de lecture bien alignée, notion de budget (plus c'est vert, plus t'es proche de la neutralité) mais sans tomber dans le piège des 2 tonnes.

Rebus d'intro remplaçable par "J'ai calculé mon #empreinteClimat ⤵️".

👤 = 🔥🌍 ❓️       ⤵️

🏡 ⬛️⬛️⬛️⬛️⬛️⬛️⬛️
🚦 ⬛️⬛️⬛️⬛️⬛️🟩🟩
🍽 ⬛️⬛️⬛️⬛️🟩🟩🟩
📺 ⬛️⬛️⬛️🟩🟩🟩🟩
📦 ⬛️⬛️🟩🟩🟩🟩🟩
🏛️ ⬛️🟩🟩🟩🟩🟩🟩

➡️ nosgestesclimat.fr

Ajouter un chiffre quand même.

Une autre proposition (@laem, @florianpanchout, @martinregner, @Clem-mrtn ):

J'ai calculé #monEmpreinteClimat !

Moi : 
🍽️ : 🟧🟧🟧🟧🟧🟧
🚦 : 🟥🟥🟥🟥
🏠 : 🟦🟦🟦
💻️ : 🟪🟪
🏛️ : ⬛️

VS L'objectif : 
⬛⬛⬛⬛⬛⬛⬛⬛⬛ 9️⃣ x 🟩🟩 2️⃣

nosgestesclimat.fr

#nosgestesclimat

Je pense qu'on peut tester avec ce partage sur les slides 1 et 2 :)

[Benjamin-Boisserie-ABC]

Super PR favorisant de nombreuses expérimentations !

• Pour compléter le 1er point de "Bonus" Ecran de fin v3 + graphique de simulation #511 (comment), je pense que c'est essentiel qu'un message de ce genre soit affiché. Genre "tu as moins de 5 tonnes. Bravo tu as fait une grande partie du chemin. Continue de réduire ton empreinte devient de plus en plus dure, essaies donc plutôt de sensibiliser et de faire changer les autres autour de toi. Mieux vaut faire passer quelqu'un de 12t à 7t que toi même passer de 5 à 4t" (c'est peut être un peu long comme message ^^)
• Pour compléter les 2ème et 3ème point de "Bonus" Ecran de fin v3 + graphique de simulation #511 (comment), on pourrait, via l'usage d'un profil type correspondant à l'utilisateur avoir une comparaison entre la réduction GES induites par les actions choisies par l’utilisateur et ce qui devrait être fait par le dit profil type correspondant (i.e. quelles actions devraient être menées par ce profil type pour atteindre 2t). L'utilisateur verrait ainsi si les actions qu'il a choisi sont "suffisantes". Cela nécessiterait cependant d'avoir une plus grande diversité de profil à disposition afin de coller au plus près à celui de l'utilisateur.

Mettre en avant la médiane ?

Je vois que dans la version démo on ne propose plus la moyenne française. Ce qui me va car il me parait plus intéressant de mettre en avant la médiane, située autour de 7 tonnes je crois. Qu'en pensez-vous ? Je vais essayer de sourcer la donnée.

Propositions d'autres écrans de restitution pouvant faire partie du "carrousel"

• Un écran mettant en avant les différents responsabilités dans la contribution au CC.
  - un moi consommateur qui cherche à réduire l'empreinte de sa consommation/mode de vie (c'est le but des actions proposées par NGC)
  - un moi producteur (au sens producteur de biens et services plus ou moins carbonés). Il s'agit de mener une réflexion sur la contribution de son métier/entreprise au changement climatique. Attention à la formulation des propos, il ne faudrait accabler une personne ayant un métier/entreprise "incompatible" mais lui faire réaliser les enjeux et transformations à venir. On pourrait envisager de mettre en avant les actions à mener en entreprises --> la première étant de réaliser un Bilan Carbone(r) ^^. Ou encore de lui proposer de se renseigner sur l'action de son entreprise afin de savoir si elle fait bien le nécessaire pour lutter contre le CC (BEGES/Bilan Carbone, objectif de réduction des émissions fixé, plan d'action pour réduire les émissions, stratégie climat, etc.)
  - un moi investisseur. Ou est-ce que je décide de placer mon épargne ? Dans des banques finançant encore les énergies fossiles ou dans des banques plus responsables (si ça existe ^^) finançant des projets écolos.
  - un moi sensibilisateur Est-ce que je passe le message autour de moi sur le CC, sur les moyens de réduire son empreinte carbone et sur la nécessité de faire pression sur le système pour qu'il change.
  Cet écran permettrait ainsi d'aborder la responsabilité climatique dans sa globalité et les différentes échelles d’actions pour réduire sa contribution au changement climatique.

[laem]

Le célèbre graphe de Ravijen.fr

La mise à jour par carbone 4

Le souci pour nous, c'est que ces graphes ne marchent qu'avec une moyenne, où les différentes barres sont du même ordre de grandeur. Mais avec les données d'un utilisateur, tout est possible !

Ainsi, je pense qu'il faut tenter un graphe un peu différent : on prend toutes les sous-catégories; on les classe par catégorie pour l'affichage, la couleur donne la catégorie (mais on l'affiche pas); on identifie les sous-catégories par un texte + icône ou juste icône si moins important.

[laem]

@Benjamin-Boisserie-ABC oui pour la médiane, mais j'étais resté sur l'idée qu'on n'en disposait pas, et que ce serait justement à nous de la calculer : médiane NGC non représentative, ou médiane NGC représentative (après notre sondage représentatif prévu pour cette année).

Propositions d'autres écrans de restitution pouvant faire partie du "carrousel"

Oui bonnes réflexions. Ça rejoint ce qu'on s'était dit avec @Clemog sur la dualité salarié (/étudiant) - individu. Tu peux en faire une nouvelle issue ? Je pense que c'est bien trop lointain pour cette PR en particulier.

[Clem-mrtn]

Un écran mettant en avant les différents responsabilités dans la contribution au CC.

Je trouve ça super intéressant, d'autant que ça aiderait effectivement à mieux comprendre les actions à faire dans son quotidien/ au travail etc.
Mais attention toutefois, le test porte sur des question personnelles sur notre mode de consommation dans le perso. Ca peut être un peu confusant de retrouver à la fin une slide sur son rôle à jouer dans l'entreprise en sachant qu'il a dû exclure ses trajets professionnels par exemple. (Est-ce que c'est le "moi privé" ou le "moi perso/ pro" ou encore que le "moi pro" ?)

Pareil, sur le profil Investisseur ou Sensibilisateur c'est très intéressant mais ça ressemble + pour moi à des Actions. En sachant qu'on ne pose pas de questions sur la finance par ex

Mettre la médiane

Carrément ! Beaucoup + intéressant que la moyenne et représentatif
On attend effectivement de pouvoir la calculer avec le sondage NGC @laem

on prend toutes les sous-catégories; on les classe par catégorie pour l'affichage, la couleur donne la catégorie (mais on l'affiche pas); on identifie les sous-catégories par un texte + icône ou juste icône si moins important.

Mais du coup exactement comme le graph de Carbone 4 ?

[laem]

Mais du coup exactement comme le graph de Carbone 4 ?

Non, ça ne marche pas hors moyenne, trop compliqué à afficher de façon dynamique. Eux l'ont sûrement fait via un éditeur SVG libre, pas codé.
Je vais tenter un exemple rapidement qu'on puisse en discuter.

Edit : voilà l'idée

[laem]

Itération sur le graphe des sous-catégories. Reste à aligner les blocs en gravité vers la barre de séparation (ou adopter un autre style d'alignement).

[Clem-mrtn]

Pourquoi est-ce que dans cette représentation, pour la partie 2 tonnes on a que des cases Services Publics & Vêtements ?

[laem]

C'est un tri des catégories par leur poids 🙂

[laem]

Mmmh, le graphe de sous-catégories dans sa version actuelle est buggué, il faut tester plusieurs personas pour s'en paercevoir.

[laem]

J'ai mis en place la visualisation des graphes de fin sur la page /personas :)
Ça va permettre de s'assurer de l'affichage correct pour une gamme de résultats différents.

[laem]

Pour les sous-cat. https://mobile.twitter.com/mclucal/status/1531260934022365185

En gros, c'est ça qu'on fait mais lisible sur mobile. À noter, en mode bureau leur infographie s'adapte. Mais on perd alors les ordres de grandeur en un clin d'œil.

[Clem-mrtn]

Proposition Florian : https://www.figma.com/proto/2mcTEKkL99rN74kUtRFerQ/Nos-Gestes-Climat?page-id=0%3A1&node-id=2%3A2&viewport=693%2C511%2C0.77&scaling=scale-down&starting-point-node-id=2%3A2

[florianpanchout]

Pour info, 10% des gens qui finissent la simulation voient la slide Pétrole pour l'instant (via Matomo, ration entre visiteurs ayant déclenché À terminé la simulation et utilisateur ayant visité une page contenant diapo=pétrogaz)