Web Guidelines de l’administration fédérale

Antistatique – Comptes rendus d’analyse

Agence web suisse

Stratégie – Expérience utilisateur – Graphisme – Développement
Créé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,...

Merci !

Sources externes