Retex EIG - Design System

Transcript

1. Retex Design System par Jean-Baptiste Le Dévéhat Entrepreneur d’Intérêt Général
2. Présentation Programme EIG - EIG Link
3. Entrepreneurs d’Intérêt Général Principe : Ouvrir l’administration à des professionnels du numérique pour résoudre des défis publics en 10 mois 53 défis accompagnés 88 EIG/DIG recrutés 39 administrations participantes 81 agents publics embarqués « mentors »
5. Jean-Baptiste Le Dévéhat — Designer Antoine Augusti — Développeur EIG Link @ Etalab Accompagner la promotion des EIG Valoriser et ouvrir les réalisations des équipes Infuser une dynamique entrepreneuriale au sein de la DINSIC
6. Design System Comprendre et appliquer
7. Objectifs design system EIG • Définir, comprendre et partager le processus de design system • Chercher à construire un design system au sein du programme EIG, le mettre en application afin d'en définir les limites, les conditions et les règles https://github.com/entrepreneur-interet-general/design-system
8. Design System ?
9. - Nathan Curtis « Un système de conception (design system) n’est pas un projet. C’est un produit servant des produits. »
10. Définition design system Un design system (ou système de conception) est un processus de définition de l'architecture, des modules, des interfaces et des données permettant à un système de satisfaire à des exigences spécifiques. La conception de système pourrait être considérée comme l'application de la théorie des systèmes au développement de produits. Dans l'espace numérique, un design system est un processus référentiel UX et UI que les éditeurs et les parties prenantes utilisent pour designer et développer un ou plusieurs produits ou services. Quel que soit l'objet (application, plateforme de service, siteweb…), quel que soit le secteur (BtoC, BtoB, BtoE…) et quel que soit les supports (web, mobile, print…).
11. Visuel, usages et langage Un design system agit sur 3 composantes du design : Visuel: les éléments visuels permettent de faire apparaître les valeurs, le positionnement et la raison d’être et sont la base de la perception des utilisateurs. Usages : les usages doivent être les plus simples et intuitifs possibles pour les utilisateurs et correspondent aux comportements des utilisateurs en ligne. Langage : le langage est la manière dont une organisation s’adresse à ses utilisateurs afin de les accompagner dans leurs prises de décisions et leurs actions.
12. Gov Design Systems • https://designsystem.digital.gov/ du Gouvernement US (#USWDS) • https://design-system.service.gov.uk/ du Gouvernement anglais • https://designers.italia.it/ du Gouvernement italien • https://designsystem.gov.au/ du Gouvernement australien • https://brand.estonia.ee/ du Gouvernement estonien • https://design.gccollab.ca/ du Gouvernement canadien
13. Design System EIG ?
14. template.data.gouv.fr
15. Design System #Acoss-Plateforme
16. Design de service-public.fr #BrigadeNumérique
17. GitHub/EIG/design-system
18. Système étatique, numérique, français ?
19. https://kumu.io/jbledevehat/sites-web-gouvfr
20. Quelques chiffres des sites et services web en *.gouv.fr ~630 sites et services web + 50% sont des sous-domaines ~20% sont des services web dans nos organisations
21. Quelles stratégies ?
22. Enjeux Le design system intervient pour répondre aux nouveaux enjeux du design : 1. Image : garder une cohérence d’image de marque entre l’ensemble de leurs outils numériques mais aussi de leurs autres supports d’expression (print, corporate, retail…). 2. Cohérence : offrir aux utilisateurs une cohérence dans les usages, les éléments graphiques et la manière de communiquer sur leurs différents produits numériques. 3. Optimisation : optimiser le temps de design, de développement et ainsi optimiser leur budget et leur time-to-market. 4. Organisation : permettre à l’ensemble des intervenants d’avoir un point central qui fera référence et apportera la cohérence souhaitée.
23. Cohérence verticale vs horizontale Quel périmètre ? ? ? ? ? ?
24. Cohérence apparente (exemplaire ?) Les sites des Préfectures
25. Cohérence de nom, de marque, d’identité ....gouv.fr vs caf.fr, pole-emploi.fr, ameli.fr...
26. Enjeux Le design system intervient pour répondre aux nouveaux enjeux du design : 1. Image : garder une cohérence d’image de marque entre l’ensemble de leurs outils numériques mais aussi de leurs autres supports d’expression (print, corporate, retail…). 2. Cohérence : offrir aux utilisateurs une cohérence dans les usages, les éléments graphiques et la manière de communiquer sur leurs différents produits numériques. 3. Optimisation : optimiser le temps de design, de développement et ainsi optimiser leur budget et leur time-to-market. 4. Organisation : permettre à l’ensemble des intervenants d’avoir un point central qui fera référence et apportera la cohérence souhaitée.
27. Principes • Vivant : contrairement à une charte graphique, le design system est un produit vivant qui évolue et s’améliore avec le temps en fonction des nouveaux besoins, des nouveaux usages. • Agnostique : c’est le design qui doit diriger le développement et pas l’inverse. Un design system doit donc être pensé indépendamment d’une technologie mais doit pouvoir être compatible avec les technologies des interfaces web. • Atomic : le design system repose sur le principe de l’Atomic Design. Là encore, contrairement aux chartes numériques traditionnelles, un design system n'est pas conçu par pages mais par composants et motifs de l’écosystème numérique de l’entreprise. • Universel : un design system doit pouvoir reprendre un ensemble de standards universels qui permettra aux utilisateurs de ne pas avoir à acquérir de nouvelles habitudes. • Inclusive : le design system doit s'adresser à tous, indépendamment du contexte d’utilisation et du niveau de maturité des utilisateurs avec le numérique. Il doit intégrer les grandes règles d’utilisabilité et d’accessibilité.
28. Pistes de principes supplémentaires • Mobile first • Lien : Services web (DINSIC/DILA) vs Sites web (SIG) • Open design : Partage de la conception • Standardisation (et non normalisation) • Accessibilité en amont • Point d’entrée unique (service-public.fr) ?
29. Merci