Charte ergonomique

Intérêt de la charte ergonomique

Qu'est-ce qu'une charte ergonomique ?
Que devez-vous faire figurer dans une charte d'ergonomie ?
A quel moment réaliser une charte ergonomique ?
Quel plan choisir pour écrire votre charte ergonomique ?
Dans cet article, nous allons vous aider à y voir plus clair sur les questions de chartage de l'ergonomie de votre projet. C'est un travail qui relève de l'ergonomie des interfaces, et qui appellent des disciplines connexes telles que l'architecture de l'information, le design de l'information et le design de l'interaction.

La charte ergonomique permet de fixer les règles de fonctionnement de l’interface au sein d’un document. Elle définit clairement les conventions ergonomiques à respecter et les principes fonctionnels déployés à l'intérieur du dispositif digital… Autrement dit, la charte ergonomique est un référentiel complet de toutes les règles d'ergonomie qui ont été mises en place dans le support interactif.

La charte des conventions d'ergonomie est un livrable clé dans la documentation du projet. Elle garantit la cohérence globale de l’interface et le maintien d’une expérience utilisateur homogène.

Quand faut-il réaliser une charte ergonomique ?

La réalisation d’une charte ergonomique s’impose dans le cadre de projet de grande envergure. Particulièrement dans les projets impliquant des équipes de contributions. En effet, les contributeurs peuvent être amenés à publier des contenus, à créer de nouveaux articles, voire des éléments plus sophistiqués sur les plans du design. La charte ergonomique fixe un cadre et clarifie le champ des possibles en matière de conception et de création, en s'appuyant sur des règles ergonomiques. Charter l'ergonomie revient à créer un guide pour les contributeurs et les concepteurs amenés à enrichir le support interactif.
Il s'agit également de garantir une expérience de consultation cohérente, homogène et harmonieuse pour l'utilisateur final. Une démarche qui s'inscrit pleinement dans les méthodes de design d'expérience utilisateur.

Les chartes ergonomiques sont fréquentes dans le déploiement d'écosystèmes digitaux : l'ajout d'un nouveau site s'inscrit alors harmonieusement dans l'ergonomie de l'ensemble. On ne réinvente pas la roue à chaque fois et l'utilisateur navigue dans un environnement stable sur le plan des repères à l'écran.

Dans la méthode projet, on rédige une charte ergonomique après la production du dispositif digital. En effet, on ne peut pas vraiment charter ce qui n'a pas encore été défini ni créé. La phase de conception est le moment clé où les concepteurs d'interface déterminent toutes les facettes du fonctionnement du support digital. Lorsque le produit est suffisamment avancé en phase de production pour refléter l'expérience finale que proposera le support digital, on peut s'attacher à établir les règles ergonomiques qui régissent le fonctionnement.

Pour résumer, la charte ergonomique est réalisée en phase de post-production pour clarifier les règles d'ergonomie qui régentent les dimensions fonctionnelles et ergonomiques de l'interface.
La rédaction d'une charte ergonomique concerne principalement les projets digitaux de taille critique dans lesquels plusieurs administrateurs seront amenés à effectuer des mises à jours...
La charte des règles d'ergonomie sert de guide pour les contributeurs amenés à étoffer le champ éditorial et fonctionnel du projet afin de garantir une ergonomie uniforme dans le temps.

Les environnements multi-sites tels que les galaxies de site et les écosystèmes digitaux sont les plus concernés par le chartage de l'ergonomie. En effet, chaque nouveau site doit s'inscrire dans un cadre ergonomique général pour garantir à l'utilisateur des repères consistants dans sa navigation transversale aux différents sites de l'écosystème digital.

Charte UX design

La popularité de la conception centrée utilisateur et des techniques de design d'expérience utilisateur tendent à étoffer les documents de chartes ergonomiques, si bien que l'on peut être amené à rédiger une charte de l'UX design. La charte UX, sur le principe de la charte ergonomique, retrace les composants d'interfaces, les parcours, et les séquences du design d'interaction susceptibles d'impacter notablement l'expérience d'utilisation de votre site web.
Charte UX et charte ergonomique peuvent se confondre au sein d'un seul et même référentiel. L'essentiel étant de bien regrouper tous les éléments susceptibles d'impacter l'expérience d'utilisation : processus, étapes, feedbacks, appels à l'action, messages, personnalisation...

Le conducteur et la mémoire de l'ergonomie du projet

Vous avez bien compris que la charte de l'ergonomie sert à définir une fois pour toutes les règles ergonomiques à l'oeuvre dans le dispositif digital. Quand vous rédiger une charte ergonomique, garder en tête les objectifs suivants :

• Fixer les principes ergonomiques de l’interface.
• Maintenir la cohérence de l’interface dans une optique évolutive.
• Assurer et garantir la qualité et l’homogénéité de l’expérience utilisateur.
• Faciliter le travail d’implémentation des équipes de contributeurs.
• Clôturer la phase de conception-production par une mémoire projet.

Une charte ergonomique ne relève ni des wireframes ni des spécifications fonctionnelles. C'est un document original qui poursuit d'autres objectifs.
En effet, les wireframes sont des documents de conception qui explicitent le fonctionnement de l'interface (design de l'information et design de l'interaction). Les spécifications détaillent précisément les comportements de l'interface...

La charte ergonomique s'appuie sur ces rapports pour dresser le référentiel des règles d'ergonomie à pérénniser dans la conduite du projet. Ce n'est donc pas un document de conception qui explicite le fonctionnement. C'est un document pédagogique qui a une valeur statutaire et communicationnelle. Il s'agit autant d'un guide que d'un rapport de recommandations sur les conventions ergonomiques à respecter. Dans un sens plus large, la charte ergonomique peut donc aussi avoir des visées de formation des contributeurs...

Pour la rédaction de votre charte ergonomique, nous vous recommandons de vous appuyer sur des maquettes graphiques plutôt que sur des maquettes fonctionnelles. Effectivement, les travaux de conception fonctionnelle (wireframing, storyboard, mockup) ne sont pas assez stabilisés pour être considérés comme des garants de l'ergonomie du dispositif digital. Il faut à cet effet privilégier les maquettes graphiques définitives et validées.

Dans l'idéal, il est même préférable de considérer le support digital en ligne pour rédiger la charte ergonomique sur des bases tangibles. Si cette méthode n'est pas optimale dans la conduite du projet, vous pouvez sans doute écrire la charte d'ergonomie un peu avant : au moment de la recette, en phase de production quasi finalisée. Ce qui vous évitera de repousser l'écriture de la charte ergonomique à la mise en ligne du site.
Dans le cadre d'une galaxie de sites, plusieurs objets digitaux peuvent être produits en parallèle, il est donc utile de disposer d'une charte le plus tôt possible pour guider la production de chacun des supports interactifs qui composent l'écosystème digital.

Formaliser et charter les règles ergonomiques

Pour établir une charte ergonomique, il faut s'armer de patience...
Il s'agit de transposer tous les codes et toutes les règles d’interface au sein d’un document à visée pédagogique qui facilitera le travail d’appropriation des équipes de contribution.
Cela peut donc prendre du temps car c'est une tâche qui doit cadrer les travaux d'autres collaborateurs : dans une certaine mesure, on touche ici à la formation des contributeurs à l'ergonomie des interfaces (au minimum une sensibilisation).

Pour construire le rapport, il faut :

• Maîtriser les règles fondamentales d'ergonomie :).
• Disposer d'une vision d'ensemble du fonctionnement du dispositif.
• Savoir à qui va s'adresser la charte ergonomique.
• Anticiper le nombre de projets digitaux potentiellement impactés par l'écriture de la charte.
• Connaître l'envergure des autres supports digitaux qui s'appuieront sur la charte ergonomique.

Pour créer le rapport de charte ergonomique, le rédacteur doit effectivement avoir une excellente connaissance des conventions d'ergonomie.
Pour cette raison, il est préférable de confier l'écriture de la charte ergonomique à un ergonome... Ou au moins permettre à l'ergonome d'encadrer l'écriture de la charte, même s'il n'a pas envie :).

Voici la liste des grands critères ergonomiques à garder en mémoire au moment du chartage :

• 1. Guidage
• 1.1. Incitation
• 1.2. Groupement / Distinction entre Items
• 1.3. Feedback Immédiat
• 1.4. Lisibilité
• 2. Charge de Travail
• 2.1. Brièveté, concision, actions minimales
• 2.2. Densité informationnelle
• 3. Contrôle Explicite
• 3.1. Actions explicites
• 3.2. Contrôle utilisateur
• 4. Adaptabilité
• 4.1. Flexibilité
• 4.2. Prise en compte de l’expérience de l’utilisateur
• 5. Gestion des Erreurs
• 5.1. Protection contre les erreurs
• 5.2. Qualité des messages d’erreurs
• 5.3. Corrections des erreurs
• 6. Homogénéité / Cohérence
• 7. Signifiance des Codes et Dénominations
• 8. Compatibilité

La liste des critères d'ergonomie ci-dessus représente un classique de la discipline que l'on doit aux ergonomes Bastien et Scapin - ergonomic criteria for the evaluation of human-computer interfaces - institut national de recherche en informatique et en automatique, France, 1998.

Ecrire le rapport de charte ergonomique : la forme

Sur le plan de la forme de la charte éditoriale, vous pouvez opter pour un rapport écrit de type Word ou pour un diaporama Powerpoint.

Un rapport Word est plus confortable pour les descriptions. Le format est généralement vertical.
Un document Powerpoint est plus souple pour les illustrations des écrans. Le format est plutôt horizontal.

A vous de choisir le format avec lequel vous vous sentez le plus à l'aise. Le format horizontal apparaît le plus approprié pour associer une capture d'écran à chaque règle ergonomique... Vous pouvez créer ce type de document avec le logiciel de votre choix.

Ecrire le rapport de charte ergonomique : le fond

Sur le fond, vous avez la possibilité de choisir entre deux méthodes d'écriture pour le chartage ergonomique.

1. ECRAN PAR ECRAN :
Un premier cas de figure consiste à définir les règles ergonomiques de tout le dispositif digital, écran, par écran. C'est une charte ergonomique micro. On détaille les conventions d'ergonomie pour chaque gabarit du dispositif digital. C'est la méthode la plus pragmatique pour communiquer avec les équipes projet.

2. CRITERE PAR CRITERE :
Une autre méthode revient à établir les codes d'ergonomie en rapport à la grille ergonomique : dans ce cas, pour chacune des thématiques ergonomiques, on définit les éléments d'interface impactés et les règles ergonomiques à observer. C'est une méthode plus scolaire et moins efficace pour communiquer.

Dans les faits, pour être transparent, vous allez devoir associer les deux approches. En effet, quelle que soit l'angle de rédaction de votre rapport de charte ergonomique, il y a toujours des éléments transversaux à décrire, comme des choses contextuelles qui concernent un écran en particulier.

Ainsi, dans la revue macro de chacun des écrans, vous ne pouvez pas faire l'impasse sur les règles ergonomiques transversales qui s'appliquent à toute l'interface. Pour les règles ergonomiques générales, il est utile de s'appuyer sur un zoning (grande fonction des zones de l'écran).

Exemple de plan pour une charte ergonomique

Avant de détailler le plan de la charte ergonomique, n'oubliez pas que chaque projet digital est différent. La démarche ne sera pas la même pour la rédaction d'une charte ergonomique dans le cadre d'un dispositif de taille critique (très gros site) ou l'écriture d'une charte ergonomique visant à cadrer la création de site dans un écosystème digital.

Gardez à l'esprit que la charte ergonomique est un guide. C'est un document de communication. Il doit être accessible. La charte ergonomique doit être rédigée dans un style neutre. Concis. Factuel. Plus le document sera bien conçu, plus vous aurez de chance de voir les conventions ergonomiques se déployer harmonieusement.

Voici un cadre général et un exemple de plan de charte ergonomique macro (écran par écran).
Dans un premier temps, vous définissez les règles ergonomiques les plus générales qui s'appliquent à toute l'interface.
Ensuite, vous allez du général vers le particulier pour décrire les standards ergonomiques de chaque écran type.

Nous considérons ici que le produit est fabriqué et que la charte ergonomique sert à garantir l'utilisation des conventions ergo déployées dans l'écosystème de site. Ainsi, pas de nécessité à détailler les spécificités techniques du design adaptatif, on fait l'hypothèse que les adaptations sont automatiques (vision desktop, tablette, mobile).
Vous pouvez charter l'ergonomie d'un projet autour des grandes sections suivantes :

• [0] Contact et liste de diffusion
• [1] Contexte de la charte
• Objectifs visés par la charte
• Publics visés par la charte ergonomique
• Dispositifs digitaux concernés par la charte
• Comment utiliser la charte ergonomique
• Pourquoi il est important d'avoir une charte ergonomique
  [...]
• [2] Codes ergonomiques transversaux
• Définition des règles d'interface transversales
• Zoning macro des règles d'interface (en-tête, corps de page, pied de page, zone de rebond si elle existe...)
• Déclinaison des zoning spécifiques qui s'appliquent à un groupe de page (exemple : cas particulier d'un processus de commande dans un site ecommerce)
• Focus sur l'émetteur, les éléments de repérage, les titres
• Problématique publicitaire et encombrement de l'interface
• Cas particuliers
  [...]
• [3] Architecture de l'information
• Système de navigation général
• Navigation dans l'écosystème digital (si galaxie de sites)
• Choix du design de navigation : explications
• Limites du système de navigation
  [...]
• [4] Design de l'information - Lisibilité générale
• Typographie
• Styles (vous pouvez vous appuyer sur les CSS (feuilles de styles)
• Couleurs des textes - Mise en relief
• Balisage et titraille (H1, H2, H3, H4)
• Principes de hiérarchisation de l'information
• Utilisation de symboles visuels (iconographie, pictogramme)
• Traitement des images (taille, légende, alt...)
• Traitement des vidéos...
• Traitement des médias...
• Formats publicitaires...
• Note : à ce stade, vous pouvez rester factuel ou donner des conseils pour l'écriture, la hiérarchisation des informations... En effet la charte ergonomique est aussi un document de communication, de sensibilisation, voire de formation...
• Considérations responsive si nécessaire : limite de titre, nombre de caractères à optimiser pour affichage sur les terminaux mobiles...
  [...]
• [5] Design de l'interaction - spécificités
• Traitement des liens
• Traitement des appels à l'action (call to action)
• Principes généraux divers (formulaires...)
  
• Règles d'optimisations des liens (SEO)
  [...]
• [6] Règles d'interface détaillées
• Listing de tous les gabarits types
• Cartographie de la structure du fonctionnement
• Capture d'écran et règles d'ergonomies spécifiques à chaque écran type
• Décliner le travail pour chaque écran [...]
• [7] Optimisations SEO
• Bonnes pratiques pour le référencement [...]
• [8] Grille d'évaluation
• Checklist pour le suivi de l'ergonomie (une grille pour faire un point complet des conventions ergonomiques en cours de route [...]
• [9] Toute section que vous jugez utile
• [ANNEXE]

Ce plan de charte ergonomique s'applique pour un site web, un écosystème digital, une application mobile, un logiciel... Il y a des particularités pour chaque terminal, mais le plan de la charte ergonomique reste toujours assez similaire.

Démarche pour charter l'ergonomie du projet

• Feuille de route : problématique, objectifs, contextes du projet,
• Rassembler la documentation du projet : maquettes fonctionnelles, maquettes graphiques, spécifications, arborescences...
• Identifier tous les gabarits types du dispositif.
• Décisions sur le format du rapport ergonomique : fond et forme.
• Lister les règles ergonomiques transversales.
• Reporter les règles ergonomiques spécifiques pour chaque gabarit.
• Consolider les règles de fonctionnement de tout le dispositif.
• Synthétiser les éléments structurants au sein de la charte ergonomique.
• Présentation et diffusion de la charte ergonomique.

Travaux complémentaires au chartage ergonomique

Une vue macro des grandes zone de l'interface est efficace pour introduire la charte ergonomique : conception du zoning... Avant d'écrire la charte ergonomique, vous devez aussi disposer des maquettes fonctionnelles - wireframing de la conception détaillée.
Les spécifications fonctionnelles sont également utiles pour les détails du fonctionnement...
Vous gagnerez du temps si vous disposez du listing de tous les composants fonctionnels du dispositif : inventaire fonctionnel. Une projection de tous les gabarits sous forme de cartographie permet de visualiser le fonctionnement du support interactif et représente une aide précieuse pour la documentation du projet : arborescence fonctionnelle.

Une charte éditoriale permet de compléter la charte ergonomique en précisant les règles à respecter en matière d’écriture, de mise en page, de tonalité... Bien sûr, il y aussi la charte graphique, mais cela dépasse le périmètre du site www.iafactory.fr : chez IAFACTORY on se concentre exclusivement sur les aspects de conception :)...