Web Guidelines de l’administration fédérale
Web Guidelines de l’administration fédérale
Antistatique – Comptes rendus d’analyse
Simon Perdisat, développeur chez Antistatique
Convaincu de l'importance du digital pour les gouvernements.simon@antistatique.net
Yann Gouffon, développeur front end chez Antistatique
Adepte de la modularité et de l'optimisation des processus.yann@antistatique.net
Stratégie – Expérience utilisateur – Graphisme – DéveloppementCréée en 2004 – 13 collaborateurs
Avant tout
Notre compte rendu est non exaustif. Les points relevés sont d'importances diverses.
Notre approche
KISS
Keep it simple, stupid
Centré utilisateur
Permettre à l’utilisateur de faire des actions et trouver l’information de façon simple et efficace.
Priorité au contenu
L’objectif principal du design d’interface est d'estomper le logiciel.
Le contenu est l'expérience – pas de séparation.
Le contenu doit découler d’une stratégie
Modularité
Penser chaque élément de façon autonome.
Implique de développer chaque élément hors contexte pour être en mesure de le faire fonctionner partout.
Remarques générales
L’anglais s’impose dans les métiers du web et tout particulièrement pour de la documentation technique.
Frameworks existants ?
Utiliser le grid system, les libraries JS, les boutons, ... ?
2 approches : se baser sur sa structure ou utiliser ses composants
Mobiliser la communauté
- Ouvrez le projet
- Choisir l’Open Source (MIT + GPL3)
- Utilisez Github ou équivalent
- Participez à des événements (Webmardi, UX Romandie,…)
Présentation du Guideline
Utiliser le navigateur plutôt que des “iframes”
Du code lisible, pas de Frutiger.
UX
User Experience
Navigation & Structure
- Adaptation mobile compliquée
- Privilégier une structure cohérente
- Guider l'utilisateur
Menus riches
Les navigations riches et polyvalentes sont dangereuses. > Article sur le sujet
- Perte d’identification de la nature de l’élément
- Accès compliqué si mauvais clic
- De bien meilleures solutions existent
Breadcrump
Ne pas masquer sur mobile!
Trop d’éléments ? Certainement un problème de structure.
Formulaire
Le rouge comme couleur “active” donne l’impression d’une erreur sur les champs du formulaire.
Couleurs
Donner de “vrais” noms aux couleurs. “Rot” et “Rot 2” ne sont pas faciles identifier par leur nom. Monza, Red, Mine Shaft, Boulder, … you name it :)
Header mobile
A quoi sert le X à côté de la recherche?
Cacher (scrool up) le changement de langue et le titre complet risque de perdre des utilisateurs
Technique
Less is more - Facilité d'implémentation
Grilles
Pourquoi utiliser deux systèmes de grille (Bootstrap et yaml_grid) ? Un suffit.
Styleguides dynamiques
Générer la documentation à partir du code.
Ajouter des éléments HTML directement dans les styles et ainsi générer un styleguide souple, évolutif et totalement modulaire.
Conventions de développement
- L’arborescence des dossiers
- La nomenclature
- L’indentation du code
- La construction des commentaires
- README.txt !
Librairies "vendors"
Mélangées parmi le code…
Nécessité de séparer dépendances et code produit pour éviter l’amalgame. ⇒ Utiliser un gestionnaire de dépendances (Bower)
Utilisation du précompilateur LESS
- Limiter les niveaux d'imbrication (éléments, classes,...)
- Ne jamais utiliser d’IDs dans les styles
- Intégrer les Media Queries directement dans le selecteur
Performances
- Réduire les dépendances (JS, CSS) et les tenir à jour
- Optimiser les fonts (actuellement 2Mo! devrait être max 250ko)
- Éviter les éléments complexes comme des galeries JavaScript, sliders, timelines dynamiques et autres carousels.
- Tester les performances
Versionning et releases
- Utiliser une numérotaion de versions sémentiques (Semver)
- En faire un "package"
- Faire des releases fréquentes
Conclusion
Il ne suffit pas de régler les problèmes énoncés et isolés, mais revoir l'approche en cherchant à répondre aux bonnes questions : stratégie de contenu, modularité, structure, besoins utilisateur,...