Bonjour à toutes et à tous,
Ce matin
1. Calibrez chaque visuel avec la règle des 3-30-300 ⏱️
Chaque visuel doit correspondre au temps que votre utilisateur va lui consacrer :
- 3 secondes : un message clé. Un titre, un chiffre, une couleur. L’utilisateur décide si la donnée le concerne.
- 30 secondes : un graphique avec ses axes, sa légende et 2 ou 3 filtres. L’utilisateur comprend une tendance ou une répartition.
- 300 secondes : plusieurs visuels reliés entre eux, avec du contexte. L’utilisateur comprend l’histoire complète et peut prendre une décision.
Un test rapide : montrez votre visuel 3 secondes à un collègue qui ne connaît pas le sujet. Qu’est-ce qu’il en retient ?
2. Commencez par les vues personnalisées natives
Les vues personnalisées vous permettent de créer jusqu’à sept vues par jeu de données, en quelques clics :
- Indicateur clé : pour le niveau 3 secondes. Exemple : le taux de chômage sur le portail de l’OSBM de Caroline du Nord. Vous pouvez l’exporter en PNG.
- Carte : pour toute donnée géographique. Exemple : les structures de la DGFiP sur le portail du ministère de l’Économie. Les filtres réduisent les résultats à une ville et un service en quelques clics.
- Graphique : pour les évolutions et les répartitions. Un seul graphique avec des filtres remplace un graphique par territoire.
- Tableau : pour une lecture détaillée. Exemple : le journal des modifications de l’open data de Vancouver, avec une recherche et un panneau de détail.
3. Assemblez des blocs dans une page Studio
Studio vous permet de combiner texte, chiffres clés, graphiques, cartes et tableaux sur une seule page, sans code. Les visualisations proposent désormais l’export PNG, un lien vers le jeu de données source et des filtres. Exemple : la page de l’opération « Cactus » du ministère de l’Éducation nationale.
4. Utilisez un assistant IA avec l’éditeur de code pour une mise en page sur mesure
L’éditeur de code vous donne la main sur le HTML et le CSS, avec des données dynamiques issues de votre portail. Vous n’avez pas besoin de savoir coder : décrivez ce que vous voulez à un assistant IA comme Claude, puis collez le code généré dans l’éditeur.
La demande que nous avons utilisée comportait cinq parties :
- La source : le catalogue et la thématique à utiliser.
- Le besoin : ce qu’il faut construire, par exemple trois chiffres clés dynamiques avec une mise en page personnalisée.
- L’analyse des données : demandez à l’IA de choisir le jeu de données, de proposer des indicateurs et d’analyser les tendances.
- La charte graphique : les couleurs et la typographie du portail, et une mise en page adaptée à tous les écrans.
- La validation : demandez à l’IA de présenter ses choix avant d’écrire le code.
Pour démarrer, parcourez la Code Library. Pour un exemple plus avancé, consultez la page sur les émissions de gaz à effet de serre créée par Steve pour West of England. Il a expliqué ici sur Community comment il l’a construite.
5. Faites appel à l’équipe Solutions pour les besoins complexes
Pour une application interactive complète, une logique métier spécifique ou des animations avancées, l’équipe Solutions conçoit des pages sur-mesure, y compris en React. Exemples :
- Observatoire du climat de Toulouse Métropole : navigation par thématique, mosaïque de chiffres clés, carte des îlots de chaleur, kiosque de rapports.
- Data Risques Professionnels de l’Assurance Maladie : filtres qui pilotent toute la page, chiffres clés avec mini-graphiques, représentation par partie du corps pour les troubles musculosquelettiques.
Quelle option choisir
| Niveau | Ce que c’est | Qui le fait | Pour quel besoin |
|---|---|---|---|
| 1 · Natif | Vues personnalisées, page Studio standard | Vous, en quelques clics | Commencez toujours ici |
| 2 · Assisté par IA | Page Code Editor générée avec un assistant IA | Vous, sans compétence en développement | Une mise en forme ou un comportement que les blocs standards ne couvrent pas |
| 3 · Sur-mesure | Page développée par l’équipe Solutions | L’équipe Solutions, sur cadrage projet | Une application interactive complète ou une logique métier avancée |
Choisissez le niveau le plus simple qui répond à la question de vos utilisateurs dans le temps qu’ils vont lui accorder.
Quelle visualisation de votre portail attire le plus l’attention de vos utilisateurs ? Partagez un lien en commentaire 👇