Nouvelles de l'utilisabilité sur Internet par Lettre Recommandée

Utilisabilité des sites sur mobile

Voici une présentation intéressante de l'agence Backélite. Elle présente les bonnes pratiques en matière d'ergonomie pour les sites consutés sur téléphone mobile. Il est vrai que l'écran est bien plus petit que celui de nos ordinateurs et que l'information doit y être agencée de façon optimale et intuitive...

À feuilleter de toute urgence pour tous ceux qui veulent un site utilisable sur Iphone

Utilisabilité des interfaces d'administration

Voici le résumé de la conférence de Fred Cavazza sur l'utilisabilité des interfaces d'administration. Il est vrai qu'il est important d'optimiser ces écrans devant lesquels les administrateurs de site Web restent des journées entières... A l'inverse d'un site web : peu de gens utilisent ces interfaces mais longtemps !

Journée Mondiale de l'Utilisabilité 2020

C'est aujourd'hui le 12 novembre 2020 qu'a eu lieu la Journée Mondiale de l'Utilisabilité. A Paris, nous avons pu assister à 6 conférences très intéressantes, organisées par Fred Cavazza sur l'utilisabilité et le e-commerce.

Vision d'un projet...

Ouh là, là ! Ca fait longtemps que je n'ai rien mis sur mon site ;-) Pour me rattraper, voici un petit dessin qui illustre la vision d'un projet par différentes personnes. On ne peut jamais être tous d'accord !

Trucs et astuces...

Voici la présentation "Trucs et astuces pour un site beau, pratique et efficace" de l'Echangeur Bordeaux Aquitaine, le lieu d'échange sur les nouvelles technologies de la CCI de Bordeaux (demande de renseignements : prix lettre recommandée avec accusé de réception).

Un document bien fait qui permet encore une fois de rappeler les bases !
26/05/2009
1
Trucs et astuces
pour un site beau pratique et pour un site beau, pratique et
efficace
Î Un observatoire sur l’économie numérique en Aquitaine
L’Échangeur Bordeaux Aquitaine
Accélérer l’intégration des TIC dans la PME
Î Un service de démonstrations et de diffusion des
usages TIC dans l’entreprise
Î Le référent régional « Passeport Numérique »
Î Le distributeur local des certificats de signature
électronique Chambersign
Î Un service de visio-conférence
26/05/2009
2
Présentation de l'atelier 51 ses services
Atelier 51
www.atelier51.com
Présentation de l atelier 51, ses services
Partenaire Echangeur / CCI
Partenaire ChamberSign
Contexte

Les grands préceptes

Sommaire

Les aspects techniques et fonctionnels
La navigation
Le graphisme
Le contenu

26/05/2009
3
Contexte
L’internaute aujourd’hui
34 millions d’internautes, soit 63,5% des français (2009)
65% d’internautes achètent en ligne
Internet en 2008
186,7 millions de sites Web dans le monde
97% des cyber-acheteurs sont satisfaits de leur achat
56% ont consulté un site avant d’acheter en magasin
33% se sont rendu en magasin avant d’acheter sur Internet
Sofres avril 2007
Médiamétrie 2009/ Fevad 2008
26/05/2009
4
Internet : ce qui a changé…

Il y a encore 10 ans, l’Internet était élitiste.
Aujourd'hui, Internet fait partie de la vie de tous les jours. C'est devenu un

outil fonctionnel.

Pratique, il sera utilisé ;
Mal aisé, il n'aura aucun succès.
Avec la multiplication des sites, les utilisateurs sont de moins en moins

tolérants envers ceux difficiles à utiliser.

Chaque erreur de conception peut se traduire par une perte d'activité.
L'utilisabilité est donc plus importante que jamais.

« Les fondamentaux de l’ergonomie sont encore trop souvent négligés »

75% des internautes rencontrent des difficultés pour trouver ce qu’ils

cherchent sur les sites qu’ils consultent
Ce qu’en pensent les internautes

58% sont confrontés à des problèmes de navigation
66% trouvent les contenus des sites souvent mal présentés
47% jugent l’allure de la page d’accueil peu engageante

Un site peut perdre en moins d’une minute près de la moitié de ses
nouveaux visiteurs ! Et pas de seconde chance : plus de 7
internautes sur 10 ne reviennent pas sur un site où ils ont rencontré
des problèmes de navigation ou d des problèmes de navigation ou d orientation ’orientation.
Benchmark group , janvier 2009
26/05/2009
5

Un surfeur averti

… exigeant

Un zappeur fou

… pressé
L’internaute aujourd’hui
… pressé
… intransigeant

Il vient chercher de l‘info.

… précise
…opérationnelle
…exhaustive (tarif, horaires, accès...)
…fiable (à jour)

L j ité éfè l ti à l’ théti La majorité préfère le pratique à l’esthétique

10 secondes,
c’est le temps moyen dont un site
Sites Web : les enjeux
dispose pour convaincre les visiteurs de rester.
Dans ce laps de temps, l'internaute doit comprendre :

À qui il a à faire
De quoi ça parle
Comment naviguer

26/05/2009
6
www.HotkeyServices.fr 11

Qu'avez-vous à vendre, à proposer ?

Avant de se lancer
Définissez bien vos objectifs, vos cibles

Quel est votre public ?
Qu'attendez-vous de votre site ?

Les réponses supposent : une étude de marché, de faisabilité, la mise
en place d’un cahier des charges, d’avoir rassemblé toutes les sources
de contenu …
NB L i it d it t é i t d d NB : Les visiteurs du site ne sont pas nécessairement des as de
l'informatique. Le site doit être pensé pour l'utilisateur le moins expérimenté
26/05/2009
7
1
Grands préceptes
Ton objectif, tu définiras
La première question à se poser est :
A quoi va servir mon site ?
L t d it é d à b i d l'i t t Le contenu doit répondre à un besoin de l'internaute

utilité globale
micro-utilités

Rassemblez toutes les sources de contenu

le site existant
les acteurs du projet
les concurrents
les besoins (supposés ou exprimés) de vos clients/internautes

26/05/2009
8
Ta cible, tu convoiteras
Le site doit être construit en fonction de sa cible :

Sur internet c Sur internet, c est ' l utilisateur 'utilisateur qui contrôle l qui contrôle l usage ' du logiciel du logiciel
Il n'existe pas de solution "prêt à porter", chaque solution doit être construite

"sur mesure"

Il faut déterminer le couple utilisateur-utilisation
Le site doit être structuré selon le point de vue des utilisateurs visés

(tri de cartes)

La réalisation de mesures ou de tests utilisateurs fournira des appréciations

obj p gq ectives pour évaluer les choix ergonomiques
La main, tu tendras

Il est important de guider l’internaute
Explicitement (légendes, textes explicatifs…)
Implicitement (organisation visuelle, format…)
Repérage

9 à tout moment le visiteur doit pouvoir de se repérer
9 logo présent sur toutes les pages, au même emplacement
9 charte graphique uniforme sur l'ensemble des pages
9 plan du site présent
9 mentions lég p alesrésentes
9moteur de recherche
26/05/2009
9
Ton “persona”, tu créeras

Un persona est un faux utilisateur créé de toutes pièces pour des besoins

méthodologiques : il a toutes les caractéristiques de votre cible

Intérêt des personas

o vous force à vous pencher réellement sur votre cible
o humanise votre cible
o donne des objectifs à votre cible

Persona primaire (cœur de cible), secondaire (utilisateurs

moins fréquents) et tertiaire (complémentaires, prescripteurs...)

Décrivez vos personas comme des personnes réelles (nom, travail, vie Décrivez vos personas comme des personnes réelles (nom, travail, vie

familiale, habitudes, envies, etc.) et faites-les vivre tout au long du projet
Tes concurrents, tu utiliseras
L'analyse concurrentielle consiste à aller voir chez les autres ce qu'il y a de bien
pour soi...

Sél ti d' l d t é t tif d d i Sélection d'un panel de concurrents représentatif du domaine :

o on prend les bonnes idées
o on évite les erreurs

Pensez à réutiliser des idées :

o fonctionnelles,
o mais aussi terminologiques !
>> Utilisez les conventions et trouvez les moyens de faire la différence !
26/05/2009
10
Organisé, tu seras

Le site doit être bien rangé, on doit s’y repérer aisément
Il faut limiter la surcharge visuelle : tout ne sera pas perçu
Tous les endroits de la page n’ont pas la même valeur

La masse de contenus recueillie doit être organisée pour construire l'architecture
de l'information du site. Deux étapes :
Catégorisation
Organisé, tu seras
Structuration
26/05/2009
11
Des standards, tu respecteras

Vous n’êtes pas le premier sur Internet
L ergonomie ’ergonomie ne sert pas à être original ne sert pas à être original
Il existe des standards et les internautes ont des habitudes

Tes outils, tu adapteras
L'ergonomie ne s'apprécie pas en fonction du nombre de fonctionnalités :

Le site doit répondre aux attentes de ses utilisateurs.

Exemple : Google.
Site ultra-simplistissime (si, si) qui fait ce qu'on attend de lui très
efficacement. Ce qui lui a valu une grande part de son succès.

Les outils présentés dans cet atelier seront choisis en fonction de leur

pertinence dans le projet
26/05/2009
12
Une maquette, tu prépareras
Préparer une maquette du site aide à construire un habillage graphique adapté au
contenu.
La démarche créative est souvent inverse : on essay p e delacer des contenus a
posteriori dans un habillage finalement trop restrictif.
Cheminement idéal :

Construction du zoning
Réalisation d'une maquette conceptuelle
Création graphique

Un TRUC, tu construiras
Pour Jakob Nielsen, grand gourou de la conception web, les bons sites ont tous
un TRUC :
Téléchargement rapide
Régularité et fréquence des mises à jour
Utilisation facile du site
Contenu de qualité (et utile aux visiteurs)
26/05/2009
13
2
Aspects techniques et
fonctionnels
Les pages épousent-elles bien les
écrans ?
L’affichage
A tous, tu seras accessible
L affichage
La conception de page sur une
largeur de 760 pixels est préférable
(760x400).
On peut conseiller aussi de prévoir
une interface extensible. Si ce
n’est pas le cas, il faut réfléchir sur
la gestion de l’espace lors de
résolutions supérieures à 800x600.
26/05/2009
14
Frames en
800/600
En 1280/1024, le
contenu occupe 30
% de l’espace !
26/05/2009
15
Et côté navigateur ?
Un site web pourra se comporter différemment sur IE ou Firefox, sur PC ou sur
Mac. Cela va de petites variations visuelles à de réels dysfonctionnements.
A tous, tu seras accessible
Il faut donc tester et corriger toutes les pages sur différentes combinaisons de
navigateurs et de plate-formes.
Utiliser les systèmes de
A connaître tes visiteurs, tu t’appliqueras
mesures des visiteurs d'un site
fournit une multitude
d'informations précieuses pour
améliorer l'ergonomie d'un site.
Exemple Google Analytics :
26/05/2009
16
A demain, tu penseras…
D’animations folles, tu n’abuseras pas
Les introductions FLASH provoquent l’irritation des utilisateurs dans leur
grosse majorité (à utiliser avec parcimonie !).

Le recours au multimédia est loin d’être nécessaire dans tous les cas et peut

conduire à une impression d'agitation qui donne envie d'aller se reposer
ailleurs.

Cela pose une série de problèmes (la compatibilité, l’ergonomie, le temps de

chargement, les coûts de production et le référencement).

Il est également déconseillé de proposer une animation importante à côté

d'un contenu textuel développé.
26/05/2009
17
Une horloge, tu avaleras
Proposez un accès rapide à l’information
9 L’internaute ne doit pas perdre son temps
9 Appliquez la règle des 3 clics
9 P è id ( i ) Pensez aux accès rapides (raccourcis)
Veillez au temps de chargement
9 Une page chargée en plus de 10 secondes conduit à un abandon fréquent
9 Mieux vaut proposer un chargement progressif ou afficher le temps de
chargement…
9 Il faut savoir que cela dépend de la connexion du visiteur, de la taille de
la page et de ses images, des capacités du serveur web…
26/05/2009
18
Des normes d’accessibilité, tu respecteras
Le respect de standards (W3C) permet de garantir la consultation du site par
différents navigateurs.
•Transparence des formats
9 Les formats utilisés doivent plutôt être en mode texte.
Ainsi le HTML sera préférable au Flash.
9 Les images ou animation ne doivent pas se soustraire aux
informations textuelles (complément visuel).

Légende

9 Une légende ou un texte de remplacement doivent être prévus en lieu et
place des images (attribut (attribut alt), pour permettre permettre aux déficients déficients visuels visuels de
comprendre le sens de l'image.
Usage sain des feuilles de style
L'information doit être accessible sans feuille de style
Des normes d’accessibilité, tu respecteras
Construction des pages
On n'utilise pas de frame pour construire le site (problème de lecture
sans feuille de style)
Choix des couleurs
Les couleurs doivent laisser l'information lisible aux personnes ne les
identifiant pas correctement (les personnes âgées par exemple,
distinguent mal les nuances de bleu) distinguent mal les nuances de bleu)
26/05/2009
19
Des normes d’accessibilité, tu respecteras
Contraste adapté
- Contraste entre
couleur de fond et texte
- Outils de vérification sur Outils de vérification sur
Internet
Taille des polices modifiable
Taille des polices adaptable par l’utilisateur
Les hyperliens sont différenciés du reste du texte du site
Le soulignement est réservé aux hyperliens
Le site s'affiche dans la langue du navigateur
Choix d'une autre langue dans le site
Ignorer les lois, nul n'est sensé
Lois de la Gestalt

Loi de proximité
Loi de similarité

Loi de Fitts

Une cible est d'autant plus rapide à atteindre qu'elle est proche et

grande...
Le nombre magique de Miller et la loi de Hick

Miller : au delà de 7 objets dans notre tête, tout s'embrouille !
Hi k i d' ti l l h i t f il Hick : moins on a d'options, plus le choix est facile

26/05/2009
20
L'affordance, tu maîtriseras
Définition (Wikipedia)
L'affordance est la capacité d’un objet à suggérer sa propre utilisation.
Concept majeur en ergonomie web

C est ' par l affordance 'affordance des éléments des des éléments des pages web que les internautes pages web que les internautes

savent s'ils peuvent cliquer ou non !

Optimisation des affordances = augmentation de l'utilisabilité (quel jargon !)
L'internaute doit savoir très vite si l'objet est cliquable ou non par son

apparence

Des comportements renforcent l'affordance des éléments d'une page :

changement d'état au survol de la souris
Attention aux fausses affordances
Texte souligné sans lien...
26/05/2009
21
3
La navigation
La navigation, tu faciliteras
D'où-je viens ? Qu'est-ce que je peux faire ici ? Où est-ce que je
peux aller ? Comment est-ce que je peux faire marche arrière ?
L’arborescence doit être simple, avec des liens transversaux inter-rubriques
et, si nécessaire, un plan du site.
Certains utiliseront un lien rapide pour suivre une idée alors que d'autres
préfèreront une logique plus lente et plus structurante d'un menu permanent.
Prop ( g) osez un fil d’Ariane (ou chemin de navigation).
Les éléments de navigation doivent être situés au même endroit sur toutes
les pages.
26/05/2009
22
Ta page d'accueil, tu ne louperas pas
Une bonne page d’accueil se doit de
révéler d’un coup d’œil toute la
richesse du site.
Elle répond aux questions :

Où je suis ?
Qu’est-ce que ce site peut m’offrir ?
Quels chemins puis-je emprunter ?
Qu’y a-t-il de neuf ?

On n’a qu’une occasion de séduire.
26/05/2009
23
Si néanmoins rater ta page d’accueil, tu voulais
Appliquez le top des erreurs :
– Absence du nom de l’entreprise
– P t l dàh t l Page trop lourde à charger ou trop longue /large ( lli ) (scrolling)
– Frames (cadres)
– Trop de publicités (confusion avec le contenu)
– Page tunnel (sauf obligation légale) : flash sans valeur, mot de
bienvenue, etc.
– Page graphique « sapin de Noël »
– Informations parasites (browser, stats, etc.)
– Textes trop longs Textes trop longs, liens ambigus ou mal rédigés etc liens ambigus ou mal rédigés, etc.
– Pages accrocheuses vers des pages en travaux
La meilleure place
est réservée à Ce qui est
une information
sans véritable
intérêt
important est
presque caché!
Ont-ils vraiment envie que
l’on cherche !
26/05/2009
24
La même ligne de conduite, tu garderas
Toutes les pages respectent la même logique.
navigation contextuelle à deux niveaux
équilibre visuels/texte
bouton action animé mis en évidence
vidéo
Information répartie en petits blocs avec
lien en savoir +
navigation avec liens texte
liens "fonctionnels"
26/05/2009
25
4
Le graphisme
Adaptez le ton et l’interface en fonction de votre cible.
Prenez en considération: le sexe l’âge le niveau d’instruction l’origine
L’esthétique, tu soigneras
Prenez en considération: le sexe, l âge, le niveau d instruction, l origine
géographique et culturelle, l’expérience du média, le degré de fidélisation,
l'équipement informatique, etc.
Testez le site auprès des véritables utilisateurs types.
Restez cohérent avec votre plan marketing général (logo, charte graphique,
code couleurs) code couleurs).
26/05/2009
26
L’esthétique, tu soigneras
Les images sur un site jouent 4 rôles Elément décoratif : à
utiliser avec précaution.
Elément de
mise en p ga e :
séparateurs
graphiques,
icônes,
arrondis,
etc.
Elément d’information : photos
de produit, infographie, etc.
Elément de navigation : cartes
géographiques, organigrammes
interactifs, etc.
Aux standards typographiques, tu te plieras
Optimisez la lisibilité de vos pages :
Limiter les polices de caractères
Choisir des polices « rondes »: Verdana , Arial, Arial Black, Courrier New,…
Corps de polices minimum de 11px
Limiter les majuscules
Aérer le texte et rester concis
Il est plus facile de lire un texte écrit en minuscules
IL EST PLUS DIFFICILE DE LIRE UN TEXTE ECRIT EN MAJUSCULES
Aérer le texte et rester concis
26/05/2009
27
A l’œil humain, tu t’adapteras
On distingue deux stratégies d'exploration visuelle :
Un nouvel utilisateur explore l'écran et adopte
une stratégie en Z.
Un utilisateur fidèle connaît l'image et effectue une recherche sélective. Il
cherche une information qu'il pense être à une certaine place : il adopte
une stratégie de fixation sélective sur les points qui lui semblent pertinents.
Le positionnement des éléments est un des moyens les plus efficaces pour des éléments est un des moyens les plus efficaces pour
mettre en évidence une information.
Certains outils
mesurent le
A l’œil humain, tu t’adapteras
mesurent le
mouvement de l’œil
et interprètent le
degré d’attention
porté aux éléments
d’une page :
Le eye-tracking
26/05/2009
28
Wouaaa ... Pas mal !
... Et pourtant !
Aucun lien, alors
qu’on s’y attend
Lien très peu
intuitif
Pub Carrefour ;-)
C’est quoi ?
Q i l i i ? qu on s y attend
Aucun lien alors
Hiérarchisation
du texte
On s’en fout !
Qui a vu le ministre ?
Aucun lien, alors
qu’on s’y attend
26/05/2009
29
86 % des visiteurs ont ignoré le nombre en rouge placé en évidence
….
Un élément trop voyant devient invisible
57
5
Le contenu
Imaginez ce que VOUS rechercheriez à sa place
26/05/2009
30
Les visiteurs cherchent avant tout de l'information :

correspondant à leur profil -› identifier les attentes !

di t t l it bl i li ité !
Un site vide, tu éviteras

directement exploitable -› simplicité !
à forte valeur -› efficacité !
d'accès facile -› ergonomie !
mise à jour -› réactivité !
fiable -› rassurer !
complète -› exhaustivité !

Alors seulement, ils passeront à l'action
Ta plume numérique, tu aiguiseras
La lecture à l’écran est plus difficile : 25 à 30% plus lente
-› soyez concis.
Pressés, les internautes balayent majoritairement les
pages avant de les lire mot à mot
-› accrochez l’œil.
Les internautes fuient ce qui s’apparente trop à de la publicité et s’orientent
vers les informations q i le r sont tiles ers les informations qui leur sont utiles
-› évitez un ton trop promotionnel.
26/05/2009
31
Cohérent, tu resteras

Ne changez pas les choses d’endroit…………sans raison
Ne supprimez pas les choses utiles……………sans explication
Il s'agit de respecter un ensemble de conventions qui définissent la

personnalité du site, et qui signent les repères essentiels donnés aux
internautes.

Cette régularité est d'autant plus importante que les conventions choisies

(pour la navigation, la mise en page ...) sont éloignées des standards
courants.
Respecter des normes n’interdit pas l’originalité…
Te démarquer, tu essaieras
Des nouveaux médias à disposition pour aider à trouver « sa patte »
Le son,
Le 360,
La vidéo,
La 3D
26/05/2009
32
Le e-marketing et l’impact
du « Buzz »
A la recherche de la valeur
ajoutée
Les « plus » qui font la
différence dans un milieu
très concurrentiel : jeux,
clins d’œil…
Le service personnalisé
Utilisation des mannequins
virtuels pour l’habillement, le
coiffeur, …
Le marketing viral :
le « bouche à oreille du Net »
L’utilisation de la vidéo via les sites
Dailymotion ou Youtube (humour,
pétition, services…)
26/05/2009
33
Attention !
Si vous ne devez retenir
qu’une chose de cette
présentation …
Halte à l’amateurisme !
Sources et bibliographie
contenu et iconographie
Présentations sur l’ergonomie Web :
- Le site www.ergolab.net
- Le livre : www.ergonomie-sites-web.com
- DDB Travel et Tourisme via www.slideshare.net
- Ergonomie du site Web par l Ergonomie du site Web par l AEC ’ www.aecom.org www.aecom.org
Captures d’écran et iconographie
- Ergonomie des sites Web, www.awt.be

Pourquoi faire simple ?

...quand on peut faire compliqué !!!

5 à 7 UX - Avril 2020
Le prochain 5 à 7 organisé par l'association Utilisabilité Québec aura lieu le jeudi 30 avril 2009 au Belmont (4483, rue St-Laurent à Montréal).

Cette fois, la rencontre portera sur la thématique « Le Web Analytics : Un complément à l'ergonomie ? ». Philippe Alengry apportera son point de vue et proposera des utilisations dans le cadre d’une démarche ergonomique. Place ensuite à la discussion et au partage d’expériences.

Comme la 1ère édition, l'activité est gratuite et accessible à tous mais les places sont limitées !

Lire l'invitation sur le site d'Utilisabilité Québec.

Charte ergononomique des sites Internet publics

Le Conseil de Modernisation des Politiques Publiques l'avait promis, voici la Charte ergononomique des sites Internet publics.

Cette charte a pour objet de définir un ensemble de règles ergonomiques communes aux interfaces des sites Internet publics en France. Elle s’inscrit dans le respect des standards du Word Wide Web Consortium (W3C) et des principes des référentiels généraux d’interopérabilité (RGI), d’accessibilité (RGAA) et de sécurité (RGS).

Le respect des principes édictés par la charte ergonomique permettra ainsi de garantir :

un niveau minimum de confort d'utilisation et d'accessibilité, quel que soit l’émetteur du site ;
l’homogénéité des codes visuels courants et des principes de navigation sur les sites publics ;
l’amélioration des processus de conception et d’alimentation en contenu de ces sites par l’administration.

Il est fort à parier, qu'elle sera aussi une source d'inspiration pour tous les concepteurs de site Web

DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 1/115
Ministère du Budget, des Comptes publics
et de la Fonction publique

Date : 19 décembre 2008 Nombre de pages : 115
Rédacteur : DGME – Projets d’administration électronique Version : 2.0
Charte ergonomique
des sites Internet publics
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 2/115
FICHE DE CONTROLE DU DOCUMENT
Version Date Rédacteur Modification
1.0 30 juin 2008 DGME Initialisation du document
2.0 19 décembre 2008 DGME Prise en compte remarques du groupe pilote et du club des webmestres

DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 3/115
TABLE DES MATIERES

REGLES D’ORDRE GENERAL...................................................................................................................... 9

1.1. ARCHITECTURE DE L’INFORMATION .............................................................................................................. 9
1.1.1. Définition de l’architecture de l’information........................................................................................ 9
1.1.2. Largeur et profondeur d’un site.......................................................................................................... 10
1.2. SYSTEMES DE NAVIGATION.......................................................................................................................... 11
1.2.1. Système de navigation principal et secondaire................................................................................... 12
1.2.1.1. Système de navigation horizontal .................................................................................................................... 13
1.2.1.2. Système de navigation vertical ........................................................................................................................ 14
1.2.1.3. Système de navigation par onglets................................................................................................................... 15
1.2.1.4. Combinaison des différents systèmes de navigation........................................................................................ 16
1.2.2. Autres éléments d’orientation et de navigation................................................................................... 17
1.2.2.1. Fil d’Ariane (chemin de navigation)................................................................................................................ 17
1.2.2.2. Adresse du site (URL) ..................................................................................................................................... 18
1.2.2.3. Zone de fonctions transverses (liens utilitaires)............................................................................................... 19
1.2.2.4. Pied de page..................................................................................................................................................... 20
1.2.3. Positionnement des systèmes de navigation (zoning) ......................................................................... 20
1.2.3.1. Exemple 1 de zoning........................................................................................................................................ 21
1.2.3.2. Exemple 2 de zoning........................................................................................................................................ 22
1.2.4. Cas particulier de la navigation guidée.............................................................................................. 23
1.3. LISIBILITE.................................................................................................................................................... 25
1.3.1. Polices de caractères .......................................................................................................................... 25
1.3.2. Utilisation des styles ........................................................................................................................... 26
1.3.3. Couleurs.............................................................................................................................................. 27
1.3.4. Pictogrammes et icônes ...................................................................................................................... 28
1.3.5. Lisibilité cognitive............................................................................................................................... 31
1.3.5.1. Titres et hiérarchisation de l’information......................................................................................................... 31
1.3.5.2. Regroupement de l’information ....................................................................................................................... 32
1.3.5.3. Faciliter la compréhension de l’information présentée .................................................................................... 32
1.3.6. Aspects linguistiques........................................................................................................................... 33
1.4. CONSIDERATIONS TECHNIQUES ................................................................................................................... 34
1.4.1. Navigateurs......................................................................................................................................... 34
1.4.1.1. Compatibilité des navigateurs.......................................................................................................................... 34
1.4.1.2. Fonctions navigateur........................................................................................................................................ 35
1.4.2. Résolutions d’écran ............................................................................................................................ 37
1.4.2.1. Résolution pour écrans standards..................................................................................................................... 37
1.4.2.2. Résolution pour écrans spécifiques.................................................................................................................. 38
1.4.2.3. Résolutions pour appareils mobiles ................................................................................................................. 38
1.4.3. Langages et normes de développement............................................................................................... 39
1.4.3.1. Langages.......................................................................................................................................................... 39
1.4.3.2. Normes de développement............................................................................................................................... 40
1.4.3.3. Cadres (frames)................................................................................................................................................ 41
1.4.4. Technologies ....................................................................................................................................... 41
1.4.5. Recours aux plug-ins, scripts et applets.............................................................................................. 42
1.5. SITES ACCESSIBLES APRES AUTHENTIFICATION ........................................................................................... 43
1.5.1. Principe de continuité du mode visiteur au mode authentifié............................................................. 43
1.5.2. Authentification................................................................................................................................... 44
1.5.3. Déconnexion ....................................................................................................................................... 45
1.5.4. Gestion des informations personnelles ............................................................................................... 46
1.6. REFERENCEMENT MUTUEL DES SITES PUBLICS............................................................................................. 47
1.6.1. Cas de service-public.fr ..................................................................................................................... 47
1.6.2. Cas de mon-service-public.fr .............................................................................................................. 47
1.7. STAT@GOUV .............................................................................................................................................. 48
1.8. ARCHIVAGE................................................................................................................................................. 49

REGLES SUR LES OBJETS .......................................................................................................................... 51

2.1. LIENS HYPERTEXTES.................................................................................................................................... 51
2.1.1. Utilisation des liens ............................................................................................................................ 51
2.1.2. Présentation des liens ......................................................................................................................... 52
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 4/115
2.1.3. Signification des liens ......................................................................................................................... 53
2.1.4. Liens de type « ancre » ....................................................................................................................... 53
2.2. FICHIERS EN TELECHARGEMENT.................................................................................................................. 54
2.2.1. Téléchargement descendant (download)............................................................................................. 54
2.2.2. Téléchargement montant (upload)...................................................................................................... 55
2.3. FORMULAIRES ............................................................................................................................................. 56
2.3.1. Présentation et structuration des formulaires..................................................................................... 56
2.3.2. Minimisation de la charge de travail.................................................................................................. 58
2.3.3. Gestion des erreurs de saisie .............................................................................................................. 59
2.3.4. Types de champs de saisie et sélection ............................................................................................... 60
2.3.4.1. Champs libres .................................................................................................................................................. 60
2.3.4.2. Boîte de listes................................................................................................................................................... 61
2.3.4.3. Listes déroulantes ............................................................................................................................................ 62
2.3.4.4. Boutons radio................................................................................................................................................... 62
2.3.4.5. Cases à cocher.................................................................................................................................................. 63
2.3.5. Cas particulier des formulaires CERFA............................................................................................. 64
2.4. BOUTONS D’ACTION .................................................................................................................................... 64
2.4.1. Libellés des boutons d’action.............................................................................................................. 64
2.4.2. Présentation des boutons d’action...................................................................................................... 65
2.4.3. Les boutons d’action dans un formulaire en ligne.............................................................................. 66
2.5. ARBRES ....................................................................................................................................................... 67
2.6. TABLEAUX................................................................................................................................................... 67
2.6.1. Lisibilité des tableaux ......................................................................................................................... 67
2.6.2. Pagination des tableaux...................................................................................................................... 69
2.6.3. Manipulation des tableaux.................................................................................................................. 70
2.7. IMAGES........................................................................................................................................................ 71
2.7.1. Format, taille et poids des images ...................................................................................................... 71
2.7.2. Présentation des images ..................................................................................................................... 71
2.7.3. Signification des images ..................................................................................................................... 72
2.8. OBJETS MULTIMEDIAS ................................................................................................................................. 73
2.8.1. Objets audio (baladodiffusion ou podcast)......................................................................................... 74
2.8.2. Objets vidéo ........................................................................................................................................ 76
2.8.3. Animations .......................................................................................................................................... 77
2.9. BANNIERES PROMOTIONNELLES E-REGIE .................................................................................................... 78

REGLES SUR LES CONTENUS.................................................................................................................... 81

3.1. PAGE D’ACCUEIL ......................................................................................................................................... 81
3.1.1. Facilités d’accès à la page d’accueil.................................................................................................. 81
3.1.2. Valorisation des contenus de la page d’accueil.................................................................................. 82
3.1.3. Identité commune de la page d’accueil des sites publics.................................................................... 83
3.1.3.1. Le système de navigation principal.................................................................................................................. 83
3.1.3.2. Les liens externes vers des sites publics........................................................................................................... 83
3.1.3.3. Le bloc Marianne............................................................................................................................................. 84
3.1.3.4. Les bannières E-régie....................................................................................................................................... 86
3.1.3.5. La signature du site.......................................................................................................................................... 86
3.1.3.6. Les fonctions transverses ................................................................................................................................. 86
3.1.3.7. Le pied de page................................................................................................................................................ 86
3.1.3.8. Exemple de zoning........................................................................................................................................... 90
3.1.4. Page d’accueil des démarches en ligne .............................................................................................. 91
3.2. AUTRES PAGES SPECIFIQUES........................................................................................................................ 92
3.2.1. Pages de contenu type « article » ....................................................................................................... 92
3.2.1.1. Présentation d’un contenu de type article ........................................................................................................ 92
3.2.1.2. Longueur du texte ............................................................................................................................................ 93
3.2.1.3. Fonctions associées à l’article.......................................................................................................................... 94
3.2.2. Plan du site ......................................................................................................................................... 95
3.2.3. Page « Contact »................................................................................................................................. 96
3.2.4. Moteur de recherche........................................................................................................................... 97
3.2.4.1. Généralités ....................................................................................................................................................... 97
3.2.4.2. Recherche avancée........................................................................................................................................... 98
3.2.4.3. Résultat de la recherche ................................................................................................................................... 99
3.2.5. Répertoire des informations publiques ............................................................................................... 99
3.3. CAS DES DEMARCHES EN LIGNE................................................................................................................. 100
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 5/115
3.3.1. Présentation des démarches en ligne................................................................................................ 100
3.3.2. Navigation dans la démarche ........................................................................................................... 101
3.3.3. Assistance à l’utilisateur dans la démarche...................................................................................... 102
3.3.3.1. Aide générale de la démarche et aides contextuelles ..................................................................................... 102
3.3.3.2. Questions fréquentes relatives à la démarche ................................................................................................ 103
3.3.3.3. Visite guidée .................................................................................................................................................. 103
3.3.4. Confirmation de la démarche et accusé de réception....................................................................... 104
3.4. ASSISTANCE A L’UTILISATEUR................................................................................................................... 105
3.4.1. Aide générale .................................................................................................................................... 105
3.4.2. Aides contextuelles............................................................................................................................ 105
3.4.3. Foire aux questions (FAQ) ............................................................................................................... 106
3.4.4. Assistance téléphonique.................................................................................................................... 107
3.5. TERMINOLOGIE.......................................................................................................................................... 108
3.6. CONTENUS 2.0........................................................................................................................................... 108
3.6.1. Flux RSS............................................................................................................................................ 109
3.6.1.1. Syndication de flux RSS................................................................................................................................ 109
3.6.1.2. Production de flux RSS.................................................................................................................................. 110
3.6.2. Widgets ............................................................................................................................................. 111
3.6.3. Mashups............................................................................................................................................ 112
3.6.4. Partage communautaire de contenus................................................................................................ 112
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 6/115
INTRODUCTION
Qu’est-ce que l’ergonomie informatique ?
L'ergonomie (du grec « ergon » - travail, et « nomos » - loi) est la discipline recherchant
l’adéquation entre les caractéristiques humaines et les caractéristiques d’un outil. Apparue
dans le domaine de l’optimisation du poste de travail, elle consiste à adapter l’environnement de
travail et le comportement de la machine en fonction des caractéristiques du travailleur (et non
l'inverse). L'ergonomie informatique a pour objectif l'amélioration du dialogue homme –
ordinateur dans deux domaines principaux : l’ergonomie du logiciel et l’ergonomie du Web.
La distinction entre ces deux domaines tend d’ailleurs à s’estomper compte tenu des récentes
évolutions technologiques.
A l’heure où les contenus sur Internet se multiplient, le temps d’accès à l’information
recherchée et la facilité d’utilisation d’un site deviennent déterminants. La réflexion sur
l’ergonomie des sites Web revêt donc un caractère de plus en plus stratégique à mesure que les
usages se généralisent et que la production de sites s’industrialise. La démarche ergonomique
consiste à améliorer l’utilisabilité des sites, c'est-à-dire le degré selon lequel un site peut être
utilisé, par des utilisateurs identifiés, pour atteindre des buts définis avec efficacité, efficience et
satisfaction. Les études en utilisabilité menées auprès des internautes ont ainsi permis
d’identifier quelques facteurs de réussite pour un site :
un contenu de qualité ;
des mises à jour fréquentes ;
des temps de téléchargement minimaux ;
un usage facile.
Pour qu’un site réponde à ces critères, on considère en ergonomie qu’il doit être à la fois utile,
c’est-à-dire adapté aux besoins et attentes des utilisateurs, et utilisable, c’est-à-dire facile à
appréhender et à utiliser. L’intégration de la dimension ergonomique dans le cycle de
développement d’un site Internet est donc indispensable à l’amélioration significative de son
degré d’utilité et d’utilisabilité.
Pourquoi une charte ergonomique unique des sites publics ?
On constate une forte progression du canal Web dans la relation entre les usagers et
l’administration, tant en termes de volumes d’échanges que d’augmentation de l’offre de sites
et services en ligne. Dans un tel contexte, il est indispensable de maintenir la cohérence du
paysage des sites Internet publics. Cette cohérence exige, entre autres, l’adoption de principes
communs dans la conception des sites. Il y va de la continuité de la navigation sur les sites
publics et de la confiance que les utilisateurs accordent à ceux-ci.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 7/115
C’est pourquoi le Conseil de Modernisation des Politiques Publiques du 12 décembre 2007 a
prévu l’adoption d’une charte ergonomique unique pour tous les services en ligne » dans le
cadre de l’amélioration de l’accueil des usagers dans les services publics. En offrant une vision
cohérente et unifiée des services publics en ligne pour les usagers, cette charte ergonomique
commune aux sites Internet publics participe à la démarche d’amélioration de l’accueil via le
canal Web. Le respect des principes édictés par cette charte permettra ainsi de garantir pour les
sites publics un niveau minimum de confort d'utilisation et d'accessibilité, l'homogénéité des
codes visuels courants et des principes de navigation et l'amélioration des processus de
conception et d’alimentation en contenu.
La charte a donc pour objet de définir un ensemble de règles ergonomiques communes aux
interfaces des sites Internet publics. Elle s’inscrit par ailleurs dans le respect des standards du
Word Wide Web Consortium (W3C) et des principes d’interopérabilité, d’accessibilité et de
sécurité des référentiels généraux (RGI, RGAA, RGS).
Quel est le champ d’application de cette charte ?
Cette charte fait suite à la charte des téléprocédures publiques (DGME – 2006) qu’elle annule et
remplace. Son champ d’application dépasse désormais les sites de démarches en ligne : la charte
s’applique en effet à tout site Internet émanant d’un organisme assurant un service public,
que celui-ci soit une autorité administrative ou qu’il agisse par délégation d’une telle autorité.
Le contenu de la charte vise particulièrement les sites institutionnels ainsi que les sites de
services en ligne (notamment les sites de démarches en ligne) de ces organisations. Elle peut
éventuellement servir de référence pour les sites événementiels, les sites Intranet ou les
applications métier Web, bien que ces cas particuliers nécessitent l’adoption de règles
ergonomiques spécifiques.
La charte s’applique nécessairement aux sites Internet institutionnels et aux sites de démarches
en ligne de l’Etat. Elle peut aussi s’appliquer utilement à tous les autres sites de la sphère
publique (juridictions judiciaires et administratives, collectivités territoriales, établissements
hospitaliers, établissements publics divers, organismes gérant des régimes de protection sociale,
organismes chargés de la gestion d’un service public administratif, établissements de
l’Education Nationale, etc.).
Que contient cette charte ?
Les articles de la charte respectent la structure suivante :
une description de la notion abordée dans le chapitre (facultatif) ;
les règles d’ergonomie associées à cette notion, classées en deux catégories :

recommandé : ce niveau de préconisation indique que la règle édictée

représente une exigence forte de la charte ergonomique ;

utile : ce niveau de préconisation indique que la règle édictée constitue

seulement une bonne pratique ergonomique ;
Les règles spécifiques à la sphère gouvernementale sont signalées par un
pictogramme Marianne.
les chapitres issus des référentiels généraux en relation avec la notion d’ergonomie.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 8/115
Il est important de noter que cette charte ergonomique n’est pas une charte graphique : les
éléments constituant l’identité graphique des sites restent à l’initiative des administrations
émettrices. Cette charte constitue donc le cadre de référence sur lequel pourront s’appuyer les
administrations pour réaliser la déclinaison graphique de leurs sites Internet.
Par ailleurs, il importe de rappeler que l’ergonomie des sites Internet doit s'accommoder des
principes d'accessibilité. Ceux-ci garantissent que l'accès aux services en ligne est donné au
plus grand nombre d’utilisateurs, y compris aux personnes atteintes d'un handicap. C’est
pourquoi la charte ergonomique est complémentaire du référentiel général d’accessibilité pour
les administrations (RGAA), auquel elle fait référence quand les notions d’ergonomie ont
impact en matière d’accessibilité.
Comment utiliser cette charte ?
La charte a vocation à guider les concepteurs et les développeurs de sites Internet publics
dans leur démarche de réalisation et d’harmonisation des sites. A ce titre, elle peut être annexée
aux cahiers des charges des marchés publics afin de fixer le cadre ergonomique de référence.
Ce cadre est à dessein large et exhaustif ; en fonction des objectifs spécifiques des
administrations, du public visé, de la nature du message à véhiculer, les administrations
pourront bâtir à partir de ce cadre des règles ergonomiques spécifiques. En tant que recueil des
bonnes pratiques ergonomiques, la charte peut également être utilisée en tant que support de
référence par les chefs de projet, les concepteurs et développeurs, les services de
communication.
La charte ergonomique fera l’objet d’un processus de révision régulier permettant de l’adapter
à l’évolution des usages d’Internet et aux spécificités des administrations. Les évolutions de la
charte ayant un impact potentiel sur les sites publics font l’objet d’une concertation au sein du
club des webmestres gouvernementaux réunis par le Service d’Information du Gouvernement
(SIG).
Comment se mettre en conformité
La conformité d’un site Internet avec la charte ergonomique repose sur une démarche d’autodéclaration. Cette déclaration de mise en conformité se fait à partir d’un guide d’auto-évaluation
à remplir directement par le responsable du site. A l’issue de l’évaluation, un système de
notation indiquera le niveau de respect de la charte. La DGME délivrera alors une attestation de
conformité, si le site atteint un seuil minimal de règles respectées. L’émetteur du site peut alors
signaler la conformité du site en question dans les mentions légales.
Ce dispositif repose donc sur la confiance envers les émetteurs de site, la DGME se réservant
toutefois la possibilité de procéder à des sondages pour s’assurer du respect des principes de la
charte ergonomique sur les sites ayant effectué une déclaration.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 9/115

REGLES D’ORDRE GENERAL

Cette première partie s’attache à définir les règles d’ergonomie d’ordre général dans des
domaines clé tels que la navigation à l’intérieur d’un site, la lisibilité et la structuration de
l’information. Les aspects techniques liés aux navigateurs, résolutions, langages seront
également abordés dans cette partie sous l’angle de l’ergonomie. Des questions plus spécifiques
à la sphère publique, tels que le référencement entre sites publics ou les dispositifs d’analyse
statistique seront également traités en fin de partie.
1.1. ARCHITECTURE DE L’INFORMATION
1.1.1. Définition de l’architecture de l’information
L’architecture de l’information est l’art d’organiser le contenu pour aider les utilisateurs à
combler leurs besoins en information. Dans sa définition minimale, l’architecture de
l’information consiste en une approche raisonnée de l’organisation de contenus interactifs.
De l’architecture de l’information vont donc dépendre la structure, la navigation et
l’interactivité de l’application.
La définition de l’architecture de l’information est une étape clé dans la conception d’un site.
Elle consiste à modéliser la structure d’un site, notamment :
le système de navigation ;
la structure et l’organisation ;
le système de recherche ;
le plan de site.
Une mauvaise architecture d’information présente donc les risques suivants :
un site mal structuré ne permet pas une utilisation efficace, ce qui se traduit par une
limitation du trafic ;
un site mal structuré est plus long à développer et cela accroît son coût final ;
un site mal structuré est plus difficile et couteux à faire évoluer.
La définition de l’architecture de l’information permettra de circonscrire précisément le
périmètre fonctionnel du site, les contenus traités par le site et l’articulation entre ces contenus.
Recommandé L’architecture de l’information doit être définie dès le début de la conception d’un
site. Cette étape est d’autant plus critique que le contenu du site est complexe.
La définition de l’architecture de l’information d’un site se fait en trois étapes :
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 10/115
1
ère étape : recenser de façon exhaustive les contenus (contenus existants, attentes
supposées ou exprimées des utilisateurs, etc.) ;
2
e
étape : catégoriser les contenus afin de les regrouper par affiliation (cette étape peut
se faire collectivement sous la forme de tri de cartes, chaque carte correspondant à un
contenu) ;
3
e
étape : structurer les contenus (définition des hiérarchies entre les contenus, des
liens transversaux entre les contenus, etc.).
Ces étapes sont réalisées en fonction de considérations ergonomiques de base telles que :
la rapidité d’accès à l’information (les informations les plus recherchées doivent être
accessibles rapidement, la hiérarchie des niveaux d’information doit correspondre à la
vision de l’utilisateur, etc.) ;
la cohérence des regroupements d’information (regroupement des contenus de même
nature, non redondance de l’information, etc.) ;
la clarté de l’organisation du contenu (équilibre entre les rubriques, titres de rubriques
explicites et compréhensibles par les utilisateurs, etc.).
Utile Il est conseillé de définir l’architecture de l’information sur la base d’une hypothèse
de parcours logique et cohérent de consultation des utilisateurs. L’architecture de
l’information ne doit pas être le simple reflet de la structure organisationnelle de
l’administration émettrice.
1.1.2. Largeur et profondeur d’un site
L’étape de structuration des contenus va permettre de définir deux notions essentielles de
l’architecture du site :
La largeur du site : la largeur correspond au nombre d’items (appelés rubriques) par
niveau d’information. Par abus de langage, on entend par largeur du site le nombre de
rubriques de premier niveau, même si cette largeur varie d’un niveau d’information à
l’autre.
La profondeur du site : la profondeur correspond au nombre de niveaux
d’informations contenus dans le site.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 11/115
Exemple d’architecture de l’information (largeur du premier niveau : 4 ; profondeur = 3)
Accueil
1er niveau
2e niveau
3e niveau
L = 4
P = 3
L = 3
L = 2
La définition de l’architecture de l’information aboutit à une cartographie des rubriques du site.
L’équilibre entre largeur et profondeur du site répond à quelques principes de bases.
Utile Il est conseillé de ne pas dépasser 7 rubriques plus ou moins 2 en largeur par niveau
d’information. Au-delà, la mémoire à court terme n’est plus capable d’intégrer
l’organisation du contenu.
Utile Il est conseillé de ne pas dépasser une profondeur de 3 à 4 niveaux d’information.
Au-delà, l’information risque d’être trop enfouie et l’utilisateur sera découragé dans
sa navigation.
Utile Il est conseillé de trouver un bon compromis entre largeur et profondeur du site : les
rubriques et niveaux d’informations doivent être équilibrés et le site ne doit être ni
trop large, ni trop profond.
1.2. SYSTEMES DE NAVIGATION
Une fois l’architecture de l’information arrêtée, il faut concevoir les éléments qui permettront de
garantir une bonne navigation dans le site. Ces éléments, appelés « systèmes de navigation »,
définissent la manière dont les écrans s’enchaînent (on parle alors de cinématique des écrans)
via des outils spécifiques : bandeau de navigation, menus contextuels, fonctions transverses, etc.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 12/115
La navigation dans le site doit être suffisamment cohérente et intuitive pour devenir transparente
aux yeux des utilisateurs. Ceux-ci doivent pouvoir se concentrer sur le contenu présenté dans le
site et non pas sur la recherche et la compréhension des mécanismes de navigation permettant
d’y avoir accès. Par le biais de fils conducteurs (guidage), l’utilisateur doit comprendre
rapidement où aller chercher l’information et comment accéder aux fonctionnalités dont il a
besoin.
La navigation et l’accès aux divers éléments du site se fait au travers des systèmes de navigation
généralement classés en deux catégories :
les menus ou boutons de navigation, regroupés dans un bandeau de navigation,
souvent désignés comme « système de navigation principal » ;
les liens ou icônes qui servent d’éléments d’orientation de navigation
complémentaires. Ils complètent le système de navigation principal et permettent
d’accéder aux différents contenus et fonctionnalités du site.
Recommandé La position de tous les systèmes de navigation doit être constante sur l’ensemble des
pages du site.
Recommandé Chaque page du site doit comporter des éléments de navigation et de repérage
permettant à l’utilisateur de répondre à trois questions :
Où suis-je ?
D’où viens-je ?
Où puis-je aller ?
Autrement dit, l’utilisateur doit pouvoir localiser la page affichée parmi l’ensemble
des pages du site et poursuivre sa navigation en consultant d’autres pages.
Utile Il est conseillé de concevoir les éléments de navigation de telle sorte que l’utilisateur
puisse accéder aux contenus du site via deux parcours distincts (un chemin principal
et un ou plusieurs chemins alternatifs).
Que disent les référentiels généraux ?
RGAA 13.4 : Fournir des mécanismes de navigation cohérents
13.6 : Regrouper les liens par type de fonction
1.2.1. Système de navigation principal et secondaire
Recommandé Les éléments du système de navigation principal doivent impérativement être visibles
et présentés de façon cohérente sur toutes les pages du site (format et localisation)
sous forme d’un bandeau de navigation (horizontal, vertical ou mixte).
Une présentation cohérente diminue grandement la durée d’apprentissage des
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 13/115
mécanismes de navigation et favorise le développement de réflexes de navigation
chez les utilisateurs. À l’opposé, une présentation incohérente a pour conséquence de
favoriser les risques d’erreur dans les choix de navigation.
Recommandé Le système de navigation principal doit indiquer visuellement à l’utilisateur dans quel
menu ou rubrique il se trouve (mise en surbrillance, code couleur, etc.).
Utile L’utilisation d’images cliquables plutôt que de boutons textuels pour la réalisation du
bandeau de navigation permet un gain de place. Dans ce cas, un équivalent textuel de
chacun des boutons doit être ajouté dans un souci d’accessibilité.
En dehors du système de navigation, les boutons d’action doivent être réalisés en
mode texte HTML. Voir à ce sujet le chapitre 2.4 – Boutons d’action.
Que disent les référentiels généraux ?
RGAA 13.5 : Proposer une barre ou un menu de navigation
RGI 5.3 – Volet technique : indépendance par rapport aux appareils et à leur
IHM
1.2.1.1. Système de navigation horizontal
Le système de navigation horizontal est le style le plus courant et il convient à tous les types
d’architecture. Il est suffisant pour les sites dont la profondeur n’excède pas trois niveaux de
profondeur (au-delà, il faut le coupler avec un système de navigation secondaire). Il consiste à
présenter toutes les options de navigation possibles (ou au moins celles de premier niveau) sur
chaque page. L’avantage est qu’il permet d’offrir à l’utilisateur une vue d’ensemble de
l’architecture du site. L’inconvénient est que la liste des options de navigation peut requérir un
espace relativement important dans la page, surtout dans le cas d’un site avec une architecture
complexe, ce qui peut réduire considérablement la place réservée au contenu.
Le système de navigation horizontal est souvent complété par des menus déroulants et/ou des
menus en cascade accessibles à partir du premier niveau d’information. Ces menus
apparaissent lors du survol de la zone à l’aide de la souris (ce survol s’appelle « roll-over »).
L’avantage de cette navigation permet de limiter le nombre de clics pour l’utilisateur et
d’accéder rapidement à l’information recherchée. Quelque soit la solution technique retenue,
une attention particulière doit être apportée à l’accessibilité de ce type de système de navigation.
Utile Les sites ayant un système de navigation principal horizontal n’excèdent pas trois
niveaux de profondeur d’information.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 14/115
Exemple de système de navigation horizontal avec menu déroulant en deuxième niveau et menu en
cascade en troisième niveau.
Niveau 1
Sous sous item 1
Sous sous item 2
Sous sous item 3
Sous sous item 4
Sous sous item 5
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Sous Item 1
Sous Item 2
Sous Item 3
Sous Item 4
Sous Item 5
Sous Item 6
Niveau 2
Niveau 3
Niveau 1
Sous sous item 1
Sous sous item 2
Sous sous item 3
Sous sous item 4
Sous sous item 5
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Sous Item 1
Sous Item 2
Sous Item 3
Sous Item 4
Sous Item 5
Sous Item 6
Niveau 2
Niveau 3
1.2.1.2. Système de navigation vertical
Le système de navigation vertical peut également être retenu comme système de navigation
principal. Il s’apparente à l’arborescence du poste de travail et de ce fait est en général bien
compris par les utilisateurs. Il convient particulièrement aux sites souhaitant mettre en valeur la
hiérarchie des niveaux d’informations. Il sert de « colonne vertébrale» structurante et rassurante
en affichant constamment la position dans l’architecture du site.
La navigation dans un système de navigation vertical se fait en cliquant sur les items (menus)
constituant les différents niveaux hiérarchiques. Le niveau de navigation en cours est repéré
graphiquement (couleur, éclairage, style, etc.).
Si un niveau de navigation donné n’est pas déroulé, un visuel distinctif et
compréhensible (flèche, signe « + », etc.) invite à le dérouler. Un clic sur cet item
déroule le niveau de navigation inférieur.
Si un niveau de navigation donné est déroulé, un visuel distinctif et compréhensible
(flèche, signe « - », etc.) invite à le refermer. Un clic sur cet item referme tous les
niveaux de navigation inférieurs.
Ce système présente l’avantage d’occuper peu de place à l’écran mais il nécessite de cliquer sur
les éléments pour « plier » et « déplier » les menus, ce qui peut devenir fastidieux en cas de
navigation intensive. De plus, il s’accommode mal des navigations transverses puisqu’il ne
permet pas de passer directement entre deux sous-niveaux situés dans des branches différentes
de l’architecture du site.
Utile Le système de navigation vertical est conseillé lorsque le premier niveau
d’information est important (gain de place par rapport au système de navigation
horizontal limité à environ 7 rubriques) ou lorsqu’il est susceptible d’augmenter
régulièrement. Il est en effet plus facile d’ajouter des rubriques verticalement
qu’horizontalement. Il convient toutefois de rappeler que la limitation du nombre de
rubriques à 7 [± 2] constitue une bonne pratique.
Utile Les sites dont les parcours de navigation attendus sont transverses aux rubriques
(logique de survol plutôt que d’approfondissement d’une rubrique) ne doivent pas
privilégier un système vertical d’arborescence nécessitant de nombreux clics avant
d’accéder à la rubrique désirée.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 15/115
Exemple de système de navigation vertical à 4 niveaux
Sous Item 2
Sous Item 3
Sous Item 4
Sous Item 1
Item 2 n-2
Item 2 n-2
Item 2 n-4
Item 2 n-4
Item 2 n-4
+ Item 2 n-3
Niveau 1
Niveau 2
Niveau 3
Niveau 4
1.2.1.3. Système de navigation par onglets
La navigation par onglet constitue un mode de navigation très courant s’apparentant au système
de navigation horizontal pour le premier niveau, mais elle ne fait en général pas appel aux
menus déroulants. La prise en main par les utilisateurs de ce type de navigation est très aisée et
intuitive.
Le système de navigation par onglet est particulièrement adapté dans le cas de pages dont le
cheminement est déterminé par un ordre établi (formulaires à étapes, démarche en ligne, etc.).
Elle structure et facilite le repérage (localisation) de l’utilisateur au sein de l’interface. Voir à ce
sujet le chapitre 1.2.4 Cas particulier de la navigation guidée.
Utile Il est conseillé de limiter l’utilisation d’un système de navigation par onglet aux
architectures ne comprenant que deux voire trois niveaux d’information.
Exemple de système de navigation par onglets à deux niveaux
Niveau 1
Item 2 n-3 | Item 2 n-3 | Item 2 n-3 | Item 2 n-3 Niveau 2
Sous Item 1 Sous Item 2 Sous Item 3 Sous Item 4
Item 2 n-3 | Item 2 n-3 Item 2 n-3 | Item 2 n-3 | Item 2 n-3
Sous Item 1 Sous Item 2 Sous Item 3 Sous Item 4
Item 2 n-3
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 16/115
1.2.1.4. Combinaison des différents systèmes de navigation
L’utilisation des différents systèmes de navigation ne se fait pas nécessairement de façon
exclusive. En fonction des objectifs du site et des caractéristiques de son contenu, il peut être
nécessaire de combiner des systèmes verticaux avec des systèmes horizontaux ou par onglets.
Recommandé Dans le cas où les niveaux d’information ont recours à des systèmes de navigation
distincts au sein du site (horizontal, vertical, onglets), la hiérarchie entre les niveaux
d’information doit être évidente pour les utilisateurs. Le positionnement hiérarchique
des différents niveaux d’information ne doit donc pas être source d’ambigüité.
Par exemple, en cas de recours à un système horizontal et vertical, le système
horizontal prime sur le système vertical. Par conséquent, le premier niveau
d’information est réservé au système horizontal et le second niveau d’information est
traité par le système vertical.
Le graphisme des systèmes de navigation peut également permettre de renforcer la
hiérarchie entre les niveaux d’information.
Exemple d’un système de navigation combinant un premier niveau affiché horizontalement et les niveaux
suivants affichés verticalement
Item 3.2
Item 3.3
Item 3.4
Item 3.1
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Niveau 1 (horizontal)
Item 3.2.1
Item 3.2 Niveaux 2 et 3 (verticaux)
Item 3.3
Item 3.4
Item 3.1
Item 1 Item 2 Item 3 Item 4 Item 5 Item 6
Niveau 1 (horizontal)
Item 3.2.1
Niveaux 2 et 3 (verticaux)
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 17/115
1.2.2. Autres éléments d’orientation et de navigation
1.2.2.1. Fil d’Ariane (chemin de navigation)
Le fil d’Ariane (également appelé chemin de navigation, chemin de fer ou encore « petit
poucet ») est un repère pour la navigation à l’intérieur d’un site Web. Il constitue donc une aide
aux systèmes de navigation.
Il est constitué d’une suite ordonnée de liens hiérarchiques représentant chacun un niveau de
l’arborescence parcouru par l’utilisateur. Il permet ainsi à l’internaute de repérer sa position
dans l’arborescence du site.
Recommandé Le fil d’Ariane est recommandé à partir de 3 niveaux de navigation.
Exemple de fil d’Ariane
Recommandé Chaque élément du fil d’Ariane est un lien hypertexte accessible directement. Le
niveau de navigation en cours doit être différencié des niveaux supérieurs (par
exemple par l’adoption d’un code couleur différent).
Recommandé Le fil d’Ariane doit être facilement repérable par l’utilisateur : l’emplacement le plus
courant se situe en haut à gauche de l’écran, sous le système de navigation principal
et au-dessus du contenu de la page.
Utile Les libellés du fil d’Ariane doivent correspondre aux titres des pages afin d’optimiser
le référencement de celles-ci par les moteurs de recherche. Si le titre est trop long, il
est possible de le raccourcir à une trentaine de caractères suivis de points de
suspension.
Que disent les référentiels généraux ?
RGAA 13.3 : Fournir des informations sur l'architecture générale du site
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 18/115
1.2.2.2. Adresse du site (URL)
L’adresse du site – ou URL (Uniform Resource Locator) – participe à l’identification des pages
et au repérage dans l’architecture du site, ainsi qu’à son référencement. En ce sens, elle
constitue un élément important du système de navigation. Avant toute démarche de création
d'un nouveau de domaine, il conviendra de se référer au décret n° 2007-162 du 6 février 2007,
relatif à l’attribution et à la gestion des noms de domaine de l’Internet et sur le site de l'AFNIC :
http://www.afnic.fr/.
Recommandé L’URL et les chemins associés (le chemin est la chaine de caractère qui suit l’URL
racine) doivent être signifiants : il est donc important qu'elle soit cohérente avec la
structure du site (emplacement des pages dans le site, titre des pages, etc.) afin que les
utilisateurs puissent appréhender le contenu d'une page à partir de son adresse.
Certains outils de publications génèrent automatiquement des URL du type
URL/article=161 ou URL/rubrique=12. Ce type d’URL n’est pas signifiant et doit
donc être évité.
Utile Concevoir des URL de qualité permet d'optimiser les stratégies de référencement.
Une URL doit être explicite sur le contenu du site et de la page permet d’améliorer le
classement dans les résultats des moteurs de recherche.
Par ailleurs, l’URL est déterminante pour la bonne visibilité du site car elle est susceptible d'être
vue par l'utilisateur à de nombreux endroits :
dans la barre d'adresse du navigateur ;
dans la barre de chargement du navigateur ;
sur d’autres sites Web (résultats d'un moteur de recherche, lien sur un site) ;
sur des supports divers (plaquettes, présentations, documents bureautiques, etc.).
Recommandé L’écriture d’une URL doit respecter les règles suivantes :
utilisation exclusive des minuscules sans mélange de casse (pour des
raisons évidentes de facilité de saisie et de mémorisation) ;
les accents sont proscrits ;
les caractères spéciaux sont proscrits ;
les séparateurs recommandés sont ‘-’ et ‘_’.
Recommandé S’il est fait mention d’une URL sur une page de site, celle-ci doit toujours être écrite
en mode texte HTML (et non pas une image cliquable) afin de permettre le copiercoller et faciliter son accessibilité.
Utile Une URL simple facilite la visibilité et la mémorisation du site. Pour ce faire, elle
doit exclure tout vocabulaire technique et symbole n’ayant aucune signification pour
les utilisateurs. Elle doit au contraire adopter des termes compréhensibles et
mémorisables. La mémorisation est d’autant plus facile que l’adresse est courte.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 19/115
Recommandé La création d’un nouveau nom de domaine en .gouv.fr nécessite une demande
préalable au Département Rédaction & Multimédia du Service d’Information du
Gouvernement.
Un formulaire d’agrément à compléter sera alors envoyé à l’émetteur du site. Une
fois le formulaire dûment rempli et retourné au SIG, celui-ci sera examiné. Le nom de
domaine soumis sera évalué en fonction de :
sa bonne articulation avec les sites gouvernementaux existants ;
sa cohérence avec le contenu du site ;
sa pertinence en termes de communication vers le grand public ;
sa capacité à être référencé efficacement dans les moteurs de recherche.
En cas d’agrément de principe, une lettre d’agrément définitif parviendra au
demandant, signé par le directeur du Service d'information du Gouvernement.
Après obtention de l’agrément votre demande sera transmise à l'AFNIC, organisme
chargé de la gestion des noms de domaine en France.
Contact veronique.valentin[at]pm.gouv.fr - 01 42 75 76 56
URL pour les appareils mobiles - Paragraphe en cours de construction
1.2.2.3. Zone de fonctions transverses (liens utilitaires)
La zone de fonctions transverses regroupe les liens utilitaires destinés à aider l’utilisateur dans
sa navigation. En fonction de la nature et des caractéristiques du site, elle comprend
généralement les éléments suivants :
le moteur de recherche ;
un bloc d’identification si le site dispose d’un accès restreint ;
le choix de la langue pour les sites proposant des contenus dans plusieurs langues ;
un lien « contact » si l’émetteur du site souhaite valoriser sa politique d’accueil (cette
fonction peut également être insérée dans le bas de page selon l’importance que
souhaite lui accorder l’émetteur du site).
Utile Les fonctions transverses sont regroupées dans une zone généralement située en haut
à droite. Sa position est constante sur l’ensemble du site.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 20/115
1.2.2.4. Pied de page
Le pied de page se situe en bas de chaque page du site. Il constitue un point de repère tout au
long du site et comprend généralement, selon de la nature et des caractéristiques du site, les
éléments suivants :
les mentions légales ;
le plan du site ;
un lien vers la page « presse » ;
un lien vers les horaires et le plan d’accès si l’émetteur du site reçoit du public ;
un lien vers la page accessibilité (voir à ce sujet, le chapitre 1.3.4 – Pictogrammes et
icônes) ;
un rappel du nom de l’émetteur du site et l’année de réalisation ou de refonte du site ;
un lien vers la page « répertoire des informations publiques » ;
un lien « contact » si l’émetteur du site ne souhaite pas particulièrement valoriser sa
politique d’accueil (voir à ce sujet le chapitre 3.2.3 – Page « Contact ») ;
un lien vers la page d’aide ou la page FAQ, si elles existent.
Recommandé Le pied de page doit apparaître sur l’ensemble des pages du site, en bas de page.
1.2.3. Positionnement des systèmes de navigation (zoning)
Lorsque l’architecture de l’information a été définie, le choix des systèmes de navigation
s’appuie généralement sur une étape de « zoning ». Cette phase consiste à définir visuellement
les grands espaces d’actions d’une interface sur lesquels l’utilisateur devra interagir. Les écrans
sont représentés de façon générique afin de garder une bonne lisibilité. L’approche choisie pour
le zoning conditionne :
L’organisation de l’information sur le site : les contenus aux fonctions similaires
sont regroupés dans une même zone pour rendre l’interface plus intuitive.
La hiérarchisation des zones d’information : le zoning prend en compte la nature du
site, ses objectifs, et l’importance stratégique des différents éléments de la page pour
les positionner dans l’interface. En fonction de son importance stratégique, une zone
peut être mise en avant, ou en retrait. Pour cela, on va la positionner à la place qui lui
convient le mieux dans le sens de lecture de la page, et lui accorder l’espace
d’encombrement qui convient à son importance dans la hiérarchisation de
l’information.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 21/115
La cohérence de l’organisation du contenu sur les différents types de modèle de
page (gabarits) : Le zoning représente les différents modèles de page présents dans le
site. La représentation de chaque modèle de page permet d’assurer une cohérence
ergonomique sur l’ensemble du site.
En analysant ces différents points stratégiques, et en proposant des solutions pour chacun
d’entre eux, la phase de zoning garantit la conception d’une interface entièrement adaptée aux
objectifs du site.
La phase de zoning propose généralement plusieurs scenarios permettant de comparer des
orientations différant notamment par leurs systèmes de navigation. Elle se conclut par la
rédaction du « document de zoning » précis et opérationnel.
Le zoning doit également prendre en compte les pratiques de lecture des internautes. Certaines
zones de l’écran sont statistiquement plus « vues » que d’autres, appelées zones morte.
Découpage de l’écran en fonction de la fréquentation de la zone (plus la zone est foncée, plus elle est
consultée). Source : Google.
1.2.3.1. Exemple 1 de zoning
Les écrans suivants constituent un exemple de zoning pour une page de premier niveau de
navigation et une page de niveau secondaire. Dans cet exemple, les systèmes de navigation
combinent un niveau principal horizontal et un niveau secondaire vertical.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 22/115
Pied de page
Bandeau identitaire
Espace contenu principal
(modulable)
Espace contenu
contextuel
(divisible)
> Liens
> Contenus sensibles
> Contenus transverses
> Contenus évènementiels
> Widgets / Abonnement RSS
PODCAST / WEBCAST…
Contenu d’intérêt Navigation Fonctionnalités Territoire de marque
1
1
1
2
2 Système de navigation principale
3
3
4
4
Fonctions transverses
> Fil d’Ariane
Premier niveau de navigation (exemple 1)
3 Zone identification
Recherche 3
Pied de page
Espace contenu principal
(modulable) Espace contenu
Contextuel
(divisible)
1
1
3
3
Zone
identification
Système de
navigation
secondaire
2
1 Contenu d’intérêt Navigation Fonctionnalités Territoir 2 3 4 e de marque
Niveau de navigation secondaire (exemple 1)
Bandeau identitaire
2 Système de navigation principale
4
Fonctions transverses
> Fil d’Ariane
Recherche 3
1.2.3.2. Exemple 2 de zoning
Les écrans suivants constituent un exemple de zoning pour une page de premier niveau de
navigation et une page de niveau secondaire. Dans cet exemple, les systèmes de navigation
combinent un niveau principal horizontal et un niveau secondaire en onglets.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 23/115
Pied de page
1
1
2
3
4
> Fil d’Ariane
Espace contenu
contextuel
(divisible)
1 Contenu d’intérêt Navigation Fonctionnalités Territoir 2 3 4 e de marque
Premier niveau de navigation (exemple 2)
Bandeau identitaire Fonctions transverses Identification Recherche 3
Système de navigation principale
Espace contenu principal
(modulable)
Pied de page
Espace contenu principal
(modulable)
1
1
3
Espace contenu
contextuel
(divisible)
Système de navigation
Secondaire 2
Niveau 3
1 Contenu d’intérêt Navigation Fonctionnalités Territoir 2 3 4 e de marque
Premier niveau de navigation (exemple 2)
Bandeau identitaire
2 Système de navigation principale
4
Fonctions transverses
> Fil d’Ariane
Recherche 3
1.2.4. Cas particulier de la navigation guidée
La navigation guidée, par opposition à la navigation libre, consiste à imposer à l’utilisateur un
parcours prédéfini. C’est le cas par exemple pour une démarche en ligne nécessitant le
renseignement de nombreux champs selon un ordre précis. Dans ce mode, les étapes se
succèdent de façon linéaire sans offrir de choix à l’utilisateur.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 24/115
La navigation guidée est appropriée pour :
les tâches de saisie des formulaires paginés ;
les tâches devant respecter une procédure précise (notamment les démarches en
ligne) ;
les tâches d’apprentissage (modules de formation en ligne).
Recommandé L’utilisateur doit pouvoir revenir à l’étape précédente à chaque étape (sauf la
première).
Recommandé Une sauvegarde implicite des données saisies doit être réalisée à chaque étape.
Recommandé Il faut fournir à l’utilisateur un retour visuel sur l’étape en cours, les étapes déjà
réalisées et les étapes à venir (via un système d’onglets avec distinction visuelle de
l’onglet actif, par exemple).
Utile Si l’abandon de la procédure est proposé, il faut fournir un écran intermédiaire, sur
lequel un texte explique la perte des données et demande confirmation de l’abandon.
Exemple de navigation guidée : le cas du changement d’adresse en ligne
(https://www.changement-adresse.gouv.fr)
Affichage des étapes avec retour
visuel
Possibilité de revenir à la
page précédente
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 25/115
Dans d’autres cas, la navigation est dite « semi-guidée » : c'est-à-dire que l’utilisateur doit
passer par un certain nombre d’étapes à effectuer sans ordre prédéfini (exemple : le
renseignement d’un curriculum vitae en ligne).
Recommandé Dans le cas d’une navigation « semi-guidée », l’utilisateur est libre de modifier sa
saisie pour chaque étape tant que la totalité des étapes n’a pas été validée. Il ne faut
donc pas recourir dans ce cas aux boutons de type « page précédente » ou « page
suivante », car on ne peut pas présumer du parcours de l’utilisateur.
Recommandé Il faut fournir à l’utilisateur un retour visuel (distinction graphique) sur l’étape en
cours.
Que disent les référentiels généraux ?
RGAA 13.9 : Faciliter la navigation sur des groupes de pages
1.3. LISIBILITE
1.3.1. Polices de caractères
Bien que l’utilisateur puisse toujours modifier les polices affichées par défaut dans son
navigateur, le recours aux polices de caractères doit respecter certaines règles.
Recommandé Pour garantir la meilleure lisibilité, il faut employer une police sans serif
(empattement), telles que Verdana, Arial ou Helvetica (ou leur équivalent), conçues
pour la lecture à l’écran. D’une manière générale, il convient de choisir des polices
disponibles en standard sur toutes les plates-formes (PC, Macintosh, etc.).
Recommandé Pour garder le texte courant lisible, il faut utiliser au minimum un corps de 10 pixels
(11 pixels conseillés) pour le texte normal. Les polices sont indiquées en taille
relative afin que l’utilisateur puisse redimensionner la taille des caractères affichés.
Attention : le comportement de ces tailles relatives peut différer d’un navigateur à
l’autre.
Utile Il est conseillé d’avoir recours à 3 polices différentes, avec un maximum de 4.
Chaque police doit remplir une fonction distincte : une pour les titres, l’autre pour les
boutons, etc.
L’affichage des polices choisies peut différer selon les caractéristiques du poste de travail. Les
couples suivants peuvent notamment poser des problèmes : X et K; l et L; O et Q; u et v; t et y;
S et 5; l et 1.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 26/115
Que disent les référentiels généraux ?
RGAA 3.4 : Utiliser des unités relatives pour la présentation
RGI 3.2 – Volet technique : Polices d'écriture et fontes de caractères
1.3.2. Utilisation des styles
Un style définit la police, le corps (taille) de la police, les attributs de la police (droit, italique,
gras, etc.), la casse (majuscule, minuscule), l’interlignage, l’interlettrage, la couleur et
l’alignement du texte.
Recommandé Dans un souci de cohérence entre les éléments textuels, des styles doivent être bien
définis pour chaque catégorie d’objet dans la mise en page. Ces styles sont appliqués
à l’ensemble du site.
Recommandé La hiérarchie des niveaux d’information (notamment les titres) doit être respectée,
afin par exemple de ne pas donner une taille de police trop grosse pour une
information secondaire.
Recommandé Les textes qui clignotent ou défilent sont à éviter. Ils détournent l’attention plutôt
qu’ils ne l’attirent et sont souvent mal perçus par les utilisateurs.
Pour le texte normal, il faut éviter les textes en lettres majuscules. L’utilisation des
majuscules est toutefois admise pour des informations brèves (intitulé d’un bouton,
titre de page, titre de rubrique, etc.) ou pour signaler un avertissement.
Par ailleurs, le soulignement doit être réservé aux liens hypertextes.
Utile Les phrases longues en italique, moins lisibles, sont à éviter.
Utile Il est conseillé d’aligner le texte d’un seul côté (généralement à gauche), plutôt que
de le justifier de chaque côté. En effet, la justification des textes (alignement du texte
à gauche ET à droite) perturbe la lecture, en particulier quand les lignes possèdent
peu de caractères.
Que disent les référentiels généraux ?
RGAA 7.3 : Eviter les mouvements de contenus
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 27/115
1.3.3. Couleurs
Les couleurs sont un élément important de la signalétique : elles facilitent le guidage de
l’utilisateur en regroupant visuellement les différentes catégories d’objets composant l’interface,
contribuant ainsi à un plus grand confort d’utilisation. Les couleurs permettent également de
mettre en valeur certaines informations.
Recommandé Les couleurs ne doivent pas fatiguer les yeux ou gêner la lecture. Le fond de page
doit être de préférence de couleur claire pour garantir une bonne lisibilité et faciliter
l’impression des pages du site. Afin d’augmenter le confort visuel, on recherchera un
fort contraste entre le fond de page et les textes. Ce contraste doit également être
positif (texte foncé sur fond clair).
Un test pratique pour évaluer la qualité du contraste consiste à visualiser les pages sur
un écran monochrome. Les couleurs seront alors transformées en niveaux de gris. Par
ailleurs, il est conseillé de toujours vérifier le résultat de l’impression d’une page
avant d’arrêter les choix de couleurs.
Utile Il est préférable de ne pas utiliser plus de 3 couleurs dominantes sur une même page
(hormis les couleurs des liens et du texte). Privilégier les couleurs pastel pour ne pas
gêner la lecture. Un site Web trop coloré ou dans lequel les couleurs sont utilisées
sans cohérence risque de nuire considérablement à sa consultation. Les utilisateurs
risquent d’y voir soit un défaut de conception soit une source d’irritation.
Certaines combinaisons de couleurs sont à éviter comme les lettres jaunes sur fond
blanc, les lettres rouges ou bleues sur fond noir, etc.; par exemple, un message
d’erreur en rouge pur sur fond noir sera difficile à lire.
Couleur du texte Couleur de fond à éviter Couleur de fond à utiliser
Blanc Jaune Magenta, Rouge, Vert, Bleu
Jaune Blanc, Cyan Bleu, (Rouge), (Magenta)
Cyan Vert, Jaune Bleu, (Blanc), (Rouge)
Vert Cyan, Bleu Jaune, Blanc, (Rouge), (Magenta)
Magenta Rouge Bleu, Blanc, (Cyan), (Vert)
Rouge Magenta, Bleu Blanc, Jaune, Cyan, Vert
Bleu Rouge Blanc, (Jaune), (Vert)
Utile Pour les typographies, on définira une couleur pour le texte de contenu, une couleur
de liens pour chaque état (actif, visité).
Utile Les conventions en matière de codes couleurs doivent être respectées. Par exemple, le
rouge signifie « arrêt » ou « danger », le vert, « départ » ou « repos », etc.
Utile Il est conseillé de réserver les couleurs vives pour attirer et capter l’attention. Par
exemple, le rouge est utile pour signaler des champs de saisie obligatoires.
Utile L’utilisation de fonds texturés ou avec des motifs doit être évitée car cela nuit à la
lisibilité du texte.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 28/115
Que disent les référentiels généraux ?
RGAA 2.1 : Ne pas utiliser uniquement la couleur pour donner accès à
l'information
2.2 : Proposer des contrastes de couleurs suffisants
7.1 : Eviter les changements brusques de luminosité
7.2 : Eviter les clignotements des éléments
1.3.4. Pictogrammes et icônes
Un pictogramme désigne un visuel de petite taille contribuant à la compréhension des
contenus. Sa fonction est de délivrer une information d’ordre général, mais il ne joue aucun rôle
dans la navigation.
Exemple de pictogramme :
Une icône désigne également un visuel de petite taille dont la fonction est d’aider l’utilisateur à
se repérer et à naviguer dans l’interface. Elle constitue notamment un code très efficace pour
illustrer un accès direct à certaines fonctions transverses (par exemple : retour à la page
d’accueil, accès à un formulaire pour poser une question, moteur de recherche, etc.).
Exemple d’icône :
Recommandé Les icônes et pictogrammes non usuels ou équivoques, sont doublés d’un libellé
explicite.
Recommandé Les pictogrammes et les icônes doivent inclure la balise ALT au même titre que
toutes les images signifiantes du site.
Utile Les formats d’icônes conseillés sont : 12×12, 24×24 ou 48×48 pixels.
Certaines certifications propres aux services publics peuvent faire l’objet d’un pictogramme
particulier. C’est le cas du RGAA (référentiel général d’accessibilité pour les administrations)
et du référentiel Marianne.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 29/115
Recommandé Les organismes publics ayant déposé une déclaration de conformité feront apparaître
un pictogramme RGAA au niveau du pied de page. La balise TITLE du pictogramme
sera renseignée avec la mention « Conforme RGAA » et précisera le niveau
d’accessibilité atteint.
Le pictogramme RGAA contient idéalement un lien renvoyant vers la page d’aide
accessibilité du site. Cette page liste les pages ou secteurs du site dérogeant aux
exigences d’accessibilité, leur type de contenu et les solutions alternatives pour y
remédier (cf. document d’accompagnement du RGAA).
Pictogramme RGAA (à venir)
Recommandé Le label Marianne garantit le respect des exigences du référentiel Marianne qui
définit la qualité de la relation entre l’administration et les usagers : accès aux
services, écoute, orientation et courtoisie, clarté et justesse des réponses, respect des
délais, traitement des réclamations, prise en compte des attentes, évaluation du niveau
de satisfaction, etc.
Les établissements publics ayant obtenu le label Marianne font apparaître le
pictogramme « labellisé Marianne » dans le pied de page de leur site institutionnel.
Pictogramme « labellisé Marianne »

Dans ce cas, l’info-bulle associée au pictogramme mentionne le texte suivant :
Cet établissement a obtenu le label Marianne auprès
d’un organisme de certification habilité
[nom_du_certificateur].
Cet établissement a obtenu le label Marianne auprès
d’un organisme de certification habilité
[nom_du_certificateur].
Un lien vers un éventuel article spécifique au label rédigé par l’émetteur du site est
associé au pictogramme. A défaut d’article spécifique, le lien pointe vers la
présentation du référentiel Marianne :
http://www.modernisation.gouv.fr/piliers/ameliorer/le-label-marianne/index.html
Utile Les établissements publics ayant engagé officiellement une démarche de mise en
conformité avec les exigences du référentiel Marianne peuvent faire apparaître le
pictogramme « engagements Marianne » dans le pied de page de leur site
institutionnel.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 30/115
Pictogramme « engagements Marianne »
Dans ce cas, l’info-bulle associée au pictogramme mentionne le texte suivant :
Cet établissement s’est engagé officiellement à
respecter les exigences du référentiel Marianne auprès
d’un organisme de certification habilité
[nom_du_certificateur].
Cet établissement s’est engagé officiellement à
respecter les exigences du référentiel Marianne auprès
d’un organisme de certification habilité
[nom_du_certificateur].
Un lien vers un éventuel article spécifique à la démarche engagée par l’émetteur du
site est associé au pictogramme. A défaut d’article spécifique, le lien pointe vers la
présentation du référentiel Marianne :
http://www.modernisation.gouv.fr/piliers/ameliorer/le-label-marianne/index.html
Emplacement des pictogrammes RGAA et label Marianne
Pied de page
Contenu principal
Contenu
contextuel
Système de navigation principal
Fonctions transverses
Recherche
Pictogramme
RGAA
Pictogramme
« labellisé Marianne »
Signature
Langues Authentification Contact
Bannière
E-régie
Contenu
contextuel
Liens externes
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 31/115
1.3.5. Lisibilité cognitive
La lisibilité cognitive désigne la façon dont un texte peut être compris et interprété par un
utilisateur, en complément de la lisibilité visuelle abordée dans les sous-chapitres précédents
(polices de caractères, styles, couleurs et pictogrammes).
La lecture sur Internet n’est pas une transposition de la lecture sur papier : le confort visuel,
l’organisation de l’information, la présentation du contenu et les modes de navigation diffèrent
sensiblement d’un support à l’autre. Les études tendent à montrer que la majorité du temps de
navigation est consacré au survol des sites et à l’exploration du contenu, au détriment de la
lecture mot à mot du contenu lui-même. Ce deuxième niveau de lecture, où la qualité du texte
est déterminante, n’intervient que lorsque l’information recherchée a été localisée.
L’utilisateur doit donc comprendre très rapidement si le contenu d’une page est susceptible de
l’intéresser ou correspond à l’information qu’il recherche. Les principes suivants permettent
d’optimiser la lisibilité cognitive des sites Internet.
Utile L’organisation de l’information et la hiérarchisation des contenus sont basées sur les
parcours de consultation prévisibles des différents profils d’utilisateurs.
Utile Il faut bannir la redondance des contenus qui peut avoir pour effet de perdre
l’utilisateur : autrement dit, un même contenu ne doit pas être répété à différents
endroits du même site. Par contre, il est utile de multiplier les points d’accès à ces
contenus en proposant des chemins alternatifs.
1.3.5.1. Titres et hiérarchisation de l’information
Le titre de la page correspond au titre du contenu éditorial de la page HTML.
Exemple de titre de page : « Une charte ergonomique unique pour les sites Internet publics »
Dans une page HTML, le titre de fenêtre correspond au libellé apparaissant dans le barre de
fenêtre du navigateur.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 32/115
Exemple de titre de fenêtre : « le portail de la modernisation de l’Etat »
Recommandé Chaque page du site doit être identifiée par un titre de page décrivant le contenu de
la page. Un bon titre ne dépasse en général pas 30 caractères.
Recommandé Chaque page du site doit adopter un titre de fenêtre en relation avec le contenu
affiché. Ce titre est composé de 1 à 6 mots et compte 60 caractères maximum. Les
titres choisis doivent être suffisamment précis car ce sont eux qui sont enregistrés en
signet.
1.3.5.2. Regroupement de l’information
Utile Les informations de même nature doivent être regroupés ; les éléments hétérogènes
sont distingués. Cette catégorisation peut être physique (localisation dans la page) ou
liée au format (styles, couleurs, etc.).
Utile Au-delà de trois éléments, l’utilisation de listes à puces ou à numéros permet de
regrouper visuellement des informations et d’en fournir une vision synthétique à
l’utilisateur. L’ergonomie des listes à puce respecte les principes suivants :
la présentation des listes est homogène sur l’ensemble du site ;
les listes sont aérées et légèrement séparées du texte pour améliorer la
lisibilité ;
les items de la liste sont cohérents dans leur rédaction et commencent par le
même type de mot (par exemple un infinitif, un impératif, un nom, etc.) ;
le contenu commun à chaque item est factorisé dans l’introduction de la
liste ;
la séparation des items de la liste peut se faire de deux façons :

pas de virgule à la fin de chaque item, ni de point à la fin ;
un point virgule à la fin de chaque item et un point à la fin.

1.3.5.3. Faciliter la compréhension de l’information présentée
Recommandé Les textes de support à la navigation et à la compréhension du contenu du site sont
courts et explicites. Dans ce cas, un principe ergonomique de base consiste à
n’afficher que les informations essentielles permettant de couvrir 80% des besoins et
proposer des liens permettant d’accéder aux informations complémentaires (détail)
pour traiter les 20% restants.
Les textes de contenus (article, mode d’emploi, texte officiel, etc.) sont par définition
plus longs.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 33/115
Utile La mise en valeur des informations importantes et des mots-clés via le recours aux
styles permet de renseigner rapidement l’utilisateur sur la nature du contenu de la
page.
Utile Les contractions, acronymes, abréviations, ainsi que les césures sont à proscrire, dans
un mot ou dans une phrase. Il est conseillé d’employer tant que possible des termes
clairs, simples et sans ambiguïté possible pour l’utilisateur.
Utile Il est conseillé de ne pas écrire de ligne de texte sur toute la largeur de l’écran. Cela
risque de générer des problèmes de présentation en cas de redimensionnement de la
fenêtre par l’utilisateur.
Que disent les référentiels généraux ?
RGAA 3.4 : Utiliser des unités relatives pour la présentation
3.5 : Utiliser la hiérarchie de titres
3.6 : Utiliser les éléments de liste de manière appropriée
3.7 : Baliser correctement les citations
4.2 : Spécifier la forme complète des abréviations et acronymes
12.1 : Donner un titre à chaque cadre
12.2 : Décrire l'objectif et les interactions entre les cadres
12.3 : Regrouper les informations de même nature
13.2 : Fournir des méta-données dans les pages
13.8 : Rédiger les contenus de façon simple, logique et ordonnée
14.1 : Utiliser un langage clair et simple
14.2 : Proposer des illustrations visuelles ou sonores
1.3.6. Aspects linguistiques
Recommandé Conformément à l’article 11 du décret n° 96-602 du 3 juillet 1996, il faut préférer un
équivalent français lorsqu’il existe à la place des termes et expressions en langues
étrangères.
Pour le bon usage de la langue française, se référer à la liste des termes adoptés par la
commission générale de terminologie et de néologie :
http://fr.wikipedia.org/wiki/Commission_g%C3%A9n%C3%A9rale_de_terminologie
_et_de_n%C3%A9ologie.
Recommandé Conformément à l’article 4 de la loi du 4 août 1994, dite « loi Toubon », lorsque des
textes font l’objet de traductions, celles-ci sont au moins au nombre de deux. Ceci
participe au pluralisme linguistique, à l’accessibilité pour les publics non
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 34/115
francophones et, sous un angle pédagogique, à la familiarisation et à l’apprentissage
des langues étrangères par les citoyens.
Utile Si le site dispose de versions en langues étrangères, il est conseillé de positionner la
zone dédiée au choix de la langue dans la zone de fonctions transverses. Dans ce cas,
il faut privilégier le nom (ou l’abréviation) de la langue à un drapeau national (par
exemple EN pour l’anglais, plutôt que le drapeau du Royaume-Uni.
Choix des langues sur service-public.fr
Utile La traduction des contenus dépend du public visé par les contenus. En fonction des
objectifs de l’émetteur du site, il peut être utile de traduire les contenus susceptibles
de concerner un public étranger (démarches concernant un public étranger, contenus à
vocation touristique, présentation institutionnelle de l’administration, etc.).
Utile Dans le cas d’un site présentant un contenu spécialisé, il est utile de fournir un
glossaire.
Que disent les référentiels généraux ?
RGAA 4.1 : Indiquer les changements de langue
4.3 : Identifier la langue de traitement d'une page et son sens de lecture
1.4. CONSIDERATIONS TECHNIQUES
1.4.1. Navigateurs
1.4.1.1. Compatibilité des navigateurs
Les pages doivent être développées et testées pour une visualisation optimale quelle que soit la
plate-forme de l’utilisateur (Windows, Mac ou Linux) et le navigateur utilisé.
Recommandé Les sites doivent être compatibles avec les principaux navigateurs du marché :
Internet Explorer 6 et versions supérieures ;
Mozilla Firefox 1.4 et versions supérieures.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 35/115
Utile Les sites doivent être compatibles avec les navigateurs secondaires du marché :
Safari 1.2 et versions supérieures ;
Opéra 7.6 et versions supérieures ;
Netscape 6 et versions supérieures.
Il est conseillé de vérifier le bon affichage des pages dans ces différents navigateurs afin de
valider la bonne prise en charge des CSS.
Que disent les référentiels généraux ?
RGI 5 – Volet technique : Recommandations sur les IHM.
En matière de navigateurs pour appareils mobiles, l’insuffisance du niveau de maturité du
secteur rend les préconisations difficiles. Les navigateurs se distinguent notamment par leur
capacité à fournir une restitution authentique de la page consultée sur un écran classique. On
parle alors de restitution fidèle ou de restitution allégée.
Les navigateurs de la première catégorie tentent de restituer le plus fidèlement possible les
pages HTML en préservant, dans la mesure du possible, les contenus enrichis. Ces navigateurs
supportent donc les standards XHTML, CSS, RSS, JavaScript, Flash, etc. Les navigateurs les
plus avancés dans ce domaine sont réservés aux appareils haut de gamme. On citera à titre
d’exemple :
Mobile Internet Explorer de Microsoft ;
Safari Mobile d’Apple ;
Opera Mobile d'Opera Software ;
NetFront d'Access Systems.
Les navigateurs de la seconde catégorie reformatent les pages du site en passant par un serveur
intermédiaire chargé d’alléger le contenu original du site. On citera à titre d’exemple :
Opera Mini d'Opera Software ;
ThunderHawk de Bitstream.
1.4.1.2. Fonctions navigateur
L’objectif est de prendre en compte les habitudes d’utilisation des fonctions du navigateur. En
complément de la navigation du site, les utilisateurs se servent des fonctionnalités du navigateur
pour maîtriser l’interface : bouton « page précédente » (« back ») pour revenir en arrière,
ouverture de nouvelles fenêtres de navigateur (Ctrl + n), etc.
Gestion du multi-fenêtrage
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 36/115
Dans le cas de sites dynamiques, le multi-fenêtrage (plusieurs fenêtres du même site ouvertes
simultanément) peut entraîner une désynchronisation entre les fenêtres et la base de données.
L’expiration de la session dans l’une des fenêtres, la prise en compte de données actualisées
dans une fenêtre, etc. sont autant de facteurs susceptibles d’entraîner des incohérences entre
l’affichage des différentes fenêtres. Quelques précautions de base permettent de limiter ces
désagréments.
Recommandé Le multi-fenêtrage ne doit pas être empêché par le site. L’ouverture délibérée de
plusieurs fenêtres fait partie du comportement des utilisateurs « avancés » pour
davantage d’efficacité et de confort.
Recommandé Quelle que soit la fenêtre, un clic sur le bouton « actualiser » (F5) du navigateur
actualise la page avec les dernières données enregistrées en session.
En cours de saisie, si des données sont appelées alors qu’elles ne sont plus
disponibles en base ou si des actions non applicables sont lancées, alors la page est
rafraîchie et comporte un message d’erreur explicite (données non disponibles, etc.).
Utile L’utilisation de fenêtres de type « pop-ups » est fortement déconseillée. Le
paramétrage des navigateurs risque en effet de bloquer leur ouverture et donc de
dérouter l’utilisateur.
Que disent les référentiels généraux ?
RGI 10.1 – Volet technique : le protocole HTTP
Cohabitation des signets et des sessions
Recommandé Les pages dynamiques d’une application, normalement accessibles après
identification (compte personnalisé, services en ligne), peuvent être accédées
directement en saisissant directement leur URL ou depuis un signet (favori). Dans ce
cas, si aucune session d’identification n’est active, le site doit demander
préalablement l’identification de l’utilisateur avant d’afficher la page sollicitée.
Recommandé Si une session est déjà ouverte et que l’utilisateur clique sur un signet d’une page du
site ou en saisit son URL, la page sollicitée s’affiche directement.
Fonctions « retour » (back) et « suivant » (forward)
Recommandé Les fonctions « retour » et « suivant » du navigateur peuvent avoir un comportement
distinct d’un navigateur à l’autre ; celles-ci doivent donc être réservées à un usage
d’appoint. Les sites proposant un contenu nécessitant des parcours de navigation
complexes (en particulier les sites proposant du contenu dynamique) mettront à
disposition un système de navigation spécifique permettant de naviguer entre
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 37/115
plusieurs séquences de pages.
Utile Les boutons « retour » et « suivant » du navigateur doivent toujours être disponibles,
c’est-à-dire que l’utilisateur doit pouvoir retourner en arrière à tout moment, sauf
dans le cas de certaines procédures en ligne où le remplissage des formulaires de la
procédure pourrait être perturbé par l’utilisation de ces boutons
Que disent les référentiels généraux ?
RGAA 7.4 : Ne pas rafraîchir automatiquement les pages
10.1 : Signaler l'ouverture de nouvelles fenêtres
1.4.2. Résolutions d’écran
Répartition des résolutions d’écran sur les sites français en 2007 – (Source Ergolab)
1.4.2.1. Résolution pour écrans standards
Recommandé Les pages sont optimisées pour s’afficher sans ascenseur horizontal en résolution
1024×768 avec un impératif de bonne lisibilité des systèmes de navigation sous
800×600.
Utile L’extensibilité (ou fluidité) d’une page Web désigne sa capacité à adapter la
disposition des contenus en fonction de la taille de la fenêtre du navigateur.
Il est utile de permettre l’extensibilité des pages entre 800×600 et 1248×1024 afin
d’adapter la présentation des pages à la largeur des fenêtres en cas de
redimensionnement de celles-ci.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 38/115
Dans le cas où cette option est retenue (totalement ou partiellement), il faut veiller à
ce que les systèmes de navigation ne soient pas perturbés par le redimensionnement
de la fenêtre.
L’extensibilité est par ailleurs déconseillée pour les sites dont les systèmes de
navigation occupent une surface importante et les sites dont le contenu
informationnel est complexe. La hiérarchie des informations risquerait en effet d’en
être perturbée.
Utile L'ascenseur horizontal doit être systématiquement évité ; l'ascenseur vertical est
utilisé si nécessaire (jusqu’à trois fois la hauteur de l’écran).
Que disent les référentiels généraux ?
RGAA 3.4 : Utiliser des unités relatives pour la présentation
1.4.2.2. Résolution pour écrans spécifiques
Le pourcentage d’utilisateurs de grands écrans à très haute résolution (1600×1200 jusqu’à
2048×1536) augmente régulièrement. L’affichage des sites pouvant varier sensiblement en
fonction des caractéristiques techniques de ce type d’écrans, il est conseillé de vérifier pour les
hautes résolutions les critères suivants :
Visibilité directe : l’information essentielle est-elle visible d’un seul coup d’œil par
l’internaute sans utiliser l’ascenseur (scrolling) ?
Lisibilité : l’information reste-t-elle lisible malgré la variation de la largeur des
différentes colonnes en fonction de la résolution ?
Esthétique : comment la page apparaît-elle une fois les éléments, titres, photos, etc.
positionnés pour une taille d’écran donnée ? L’alignement de l’ensemble est-il
respecté ? D’autre part, le redimensionnement successif de la fenêtre du navigateur
restitue-t-il convenablement la disposition des pages ?
Utile Dans le cas de sites dont le besoin d’affichage sur des écrans à très haute résolution
est avéré, il est conseillé d’adopter une structure extensible (fluide) dont la taille des
pages s’adapte à la largeur du support d’affichage. Quelle que soit la résolution de
l’écran ou la taille de la fenêtre, le contenu des pages occupe ainsi harmonieusement
l’espace alloué.
1.4.2.3. Résolutions pour appareils mobiles
Sur le Web mobile, la multiplicité des tailles d'interface et des particularités propres aux
appareils complique les problématiques d’affichage : l’éventail des résolutions possibles s’étend
de 128 à 320 pixels. De plus, certains offrent la possibilité d’afficher le contenu verticalement
ou horizontalement. Il faut prendre en fin en compte la présence ou non selon les appareils
d’outils de navigation très divers (clavier, souris, stylet, écran tactile, etc.).
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 39/115
Utile Dans le cas où le site offre certaines pages spécialement dédiées aux appareils
mobiles, il est conseillé d’optimiser les pages pour une résolution en 200×250 pixels.
Eventail de résolutions proposées sur les appareils mobiles
1.4.3. Langages et normes de développement
1.4.3.1. Langages
Recommandé Les normes de développement préconisées sont :
le HTML 4.01 (HyperText Markup Language) au minimum, sachant que le
XHTML 1.0 (reformulation du HTML 4.0 en XML 1.0) doit être
privilégié pour les nouveaux sites ;
le XML 1.0 (Extensible Markup Language) avec DTD (Document Type
Declaration = DOCTYPE) et / ou schémas ;
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 40/115
feuille de style CSS 1 au minimum (Cascading Style Sheets), sachant que le
CSS 2 doit être privilégié pour les nouveaux sites.
Le HTML dynamique (ou DHTML, i.e. l'utilisation de JavaScript pour agir sur
l'affichage de la page) présente des variations selon le poste, en fonction notamment
du navigateur et des fonctions JavaScript non filtrées par le pare-feu Internet. Son
utilisation doit donc respecter les critères d'accessibilité (voir à ce sujet le chapitre
1.4.4 - Technologies).
Il faut également éviter l’utilisation d’un éditeur HTML automatique et proscrire
l’usage de balises propriétaires à certains navigateurs.
Utile Pour le développement de pages spécialement dédiées aux appareils mobiles, les
langages conseillés sont le XHTML Mobile Profile (spécialisation du langage
XHTML destinée à incorporer des éléments au contexte d'utilisation des appareils
mobiles) et XHTML Basic.
Que disent les référentiels généraux ?
RGAA 11.1 : Privilégier les technologies du W3C
11.2 : Ne pas utiliser de composants obsolètes ou dépréciés
14.1 : Proposer une présentation cohérente sur tout le site
RGI 5.2 – Volet technique : Technologies pour construire les IHM Web
1.4.3.2. Normes de développement
Recommandé Afin de garantir la cohérence dans les styles et conserver l’homogénéité graphique et
fonctionnelle entre les pages d’un site ou entre un groupe de sites, il faut recourir au
feuilles de styles CSS 1.
Cette remarque s’applique également au développement de pages pour les appareils
mobiles.
Utile Une moyenne de 100 Ko par page (hors page d’accueil) constitue actuellement une
norme pour le poids des pages (code HTML, Javascripts, CSS, textes et images). Il
faut donc parvenir à un rapport équilibré entre présentation et poids.
Que disent les référentiels généraux ?
RGAA 3.1 : Remplacer les éléments non textuels par des styles CSS
3.2 : Créer des pages valides
3.3 : Privilégier l'utilisation des feuilles de styles par rapport au balisage
pour la présentation
6.1 : Maintenir la lisibilité et la compréhension des contenus lorsque les
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 41/115
styles sont désactivés
1.4.3.3. Cadres (frames)
L’un des principes du Web est que chaque page est représentée par une URL unique. Dans le
cas de pages contenant des cadres (frames), cette règle est brisée rendant la compréhension de
la structure du site plus complexe. De plus, les cadres rendent difficile l’indexation des pages
par les moteurs de recherche, complexifient l’impression des documents, perturbent
l’enregistrement des signets, etc.
Recommandé L’utilisation de cadres (frames) est proscrite.
1.4.4. Technologies
Les technologies comme Ajax, Flash, Flex et Java permettent de développer des sites
particulièrement dynamiques et participent à l’expérience utilisateur. Cependant, certains
inconvénients plaident pour une utilisation parcimonieuse de ces technologies.
Certains éléments programmés dans ce type de technologies peuvent se révéler
particulièrement lourds à charger pour les utilisateurs.
L’ergonomie spécifique des animations peut troubler certains utilisateurs et les
empêcher d’atteindre facilement et rapidement le contenu recherché.
La plupart de ces technologies ont recours à un plug-in (voir à ce sujet le chapitre
1.4.5 – Recours aux plug-ins), sauf AJAX qui repose sur JavaScript.
Ces technologies peuvent poser des difficultés d’accessibilité.
Recommandé Un site ne doit pas être entièrement construit sur une technologie telle que Flash,
Flex, Ajax.
Utile Il est conseillé de limiter l’usage de ces technologies à des animations ludiques,
expériences interactives évènementielles, etc. Les contenus critiques d’un site ne
doivent pas dépendre de ce type de technologies.
Utile Il est conseillé de doser justement l’utilisation de ces technologies et les mettre en
valeur afin d’en valoriser l’impact visuel (des animations Flash trop voyantes risquent
de noyer l’utilisateur dans un univers trop différent de celui auquel il est habitué). De
plus, la mise en valeur d’une animation dans une page a plus d’impact qu’une page
complètement animée.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 42/115
Afin de ne pas bloquer l’internaute dans sa progression il est nécessaire de ne pas placer de
« code obstrusif » dans les pages. Cela signifie que les morceaux de code en JavaScript ou de
type Applet ne doivent pas être indispensables à la navigation ou à la bonne compréhension du
contenu, de manière à ne pas pénaliser les utilisateurs n’ayant pas d’interpréteur JavaScript. La
population d’internautes ayant désactivé l’exécution de JavaScript est estimée de 6 à 8%.
Recommandé L’utilisation du JavaScript, en particulier dans les éléments de navigation doit
respecter les critères d’accessibilité : l’utilisateur ayant désactivé le JavaScript doit
pouvoir accéder aux éléments de navigation.
Que disent les référentiels généraux ?
RGAA 6.2 : Mettre à jour les alternatives aux contenus dynamiques
6.3 : Proposer une alternative au code javascript et aux éléments
programmables
6.4 : Assurer l'indépendance du périphérique d'accès aux fonctions
javascript
6.5 : Assurer l'accessibilité des contenus dynamiques
8.1 : Rendre accessibles les éléments programmables
9.2 : Assurer l'indépendance d'accès aux interfaces spécifiques par les
périphériques
9.3 : Assurer l'indépendance d'accès aux gestionnaires d'évènements par
les périphériques
11.4 : En dernier recours, fournir une version alternative accessible.
RGI 5.2 – Volet technique : Technologies pour construire les IHM Web
1.4.5. Recours aux plug-ins, scripts et applets
Le recours aux plug-ins peut poser des problèmes d’accessibilité et de compatibilité (absence
éventuelle du plug-in sur le système de l’utilisateur, temps du téléchargement des données
associées et du plug-in le cas échéant).
Ci-dessous une liste des plug-ins courants :
Acrobat Reader (Adobe) : permet de visionner et d'imprimer les documents PDF
(Adobe Portable Document Format).
Flash Player (Adobe) : permet de visionner des animations vectorielles interactives et
des vidéos parmi la plupart des systèmes d'opération majeurs, navigateurs, téléphones
mobiles et autres outils. Le tableau ci-dessous résume les versions de Flash déployées
en Europe (source Adobe.com – mars 2008).
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 43/115
Java (Sun) : permet de mettre en place des applications dites "applets" écrites dans le
langage de programmation Java.
QuickTime (Apple) : permet de visionner des vidéos, des trames sonores, des images
virtuelles, et autres fichiers graphiques. L’usage de ce plug-in tend à diminuer.
Windows Media Player (Microsoft) : permet de jouer des fichiers vidéo et audio sur
Internet en temps réel.
RealPlayer (Real Networks) : permet de jouer des fichiers RealVideo et RealAudio
sur Internet en temps réel. L’usage de ce plug-in temps à diminuer.
Recommandé Il ne faut faire appel aux plug-ins que dans les cas où ils apportent une réelle valeur
ajoutée.
Recommandé Dans le cas où le recours à un plug-in s’avère indispensable, il faut fournir une
information claire des procédures à suivre pour le télécharger et l’installer. Par
exemple : « si vous ne disposez pas de Acrobat Reader pour la lecture des fichiers de
format PDF, vous pouvez le télécharger, en cliquant sur l’icône…».
Utile Il est conseillé de ne pas avoir recours aux versions majeures de plug-ins moins d’un
an après leur sortie.
Que disent les référentiels généraux ?
RGI 5.2 – Volet technique : Technologies pour construire les IHM Web
1.5. SITES ACCESSIBLES APRES AUTHENTIFICATION
Certains sites restreignent l’accès à tout ou partie du contenu via un système d’authentification.
Cela peut être le cas notamment pour des services en ligne nécessitant une authentification
préalable ou pour l’accès à des fonctionnalités et des informations correspondant au profil de
l’utilisateur.
L’accès à ces sites est alors conditionné par une page d’authentification (identifiant, mot de
passe) qui garantira l’accès aux services proposés aux seules personnes autorisées et permettra
d’identifier le niveau de droits de l’utilisateur.
1.5.1. Principe de continuité du mode visiteur au mode authentifié
Certains sites offrant des services nécessitant une authentification proposeront également un
accès en mode visiteur. Dans ce cas, il doit y avoir une continuité entre le site « visiteur » (non
authentifié) et le site « authentifié », tant dans les aspects graphiques et ergonomiques que les
services proposés.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 44/115
Recommandé Lorsqu’un site offre des services en mode visiteur et des services supplémentaires en
mode authentifié, il ne peut y avoir de régression fonctionnelle lors du passage du
mode visiteur au mode identifié. L’utilisateur authentifié dispose a minima des
services accessibles en mode visiteur, en plus des services accessibles en mode
authentifié.
Recommandé Lorsqu’un site offre des services en mode visiteur et des services supplémentaires en
mode authentifié, les systèmes de navigation, la présentation du contenu et les aspects
graphiques doivent être conservés d’un mode à l’autre.
Utile En mode visiteur, l’utilisateur doit être clairement informé des services accessibles en
mode authentifié. La mise en valeur de ces services peut se faire via plusieurs
moyens :
réservation d’une rubrique spécifique proposant l’ensemble des services
restreints ;
utilisation d’un visuel distinctif pour l’accès aux services restreints ;
une incitation à cliquer sur le bloc d’authentification pour accéder aux
services restreints.
1.5.2. Authentification
Utile Le bloc d’authentification présente un champ identifiant, un champ mot de passe et
un bouton de validation bien mis en valeur. Deux endroits sont conseillés pour le
positionnement du bloc : le bandeau supérieur ou l’espace de contenu contextuel.
1
2
Bandeau supérieur
Espace de contenu contextuel
Utile La page d’authentification inclut idéalement un lien « mot de passe oublié » ainsi
qu’un lien invitant l’utilisateur à créer son propre compte s’il ne possède pas encore
de compte.
Recommandé Si le site est partenaire de mon-service-public.fr, le bloc d’authentification monservice-public.fr est positionné en-dessous du module d’authentification propre au
site partenaire.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 45/115
Bloc d’authentification mon.service-public.fr
Que disent les référentiels généraux ?
RGI 2 – Volet organisationnel : Gestion des identités et des d’accès aux
téléservices
3 – Volet organisationnel : Gestion des Identités des Usagers
4 – Volet organisationnel : Gestion des Accès aux téléservices
1.5.3. Déconnexion
Recommandé La fermeture du navigateur par l’utilisateur génère la fermeture de session.
Recommandé En cas d’inactivité prolongée, la session utilisateur est automatiquement fermée audelà d’un certain temps déterminé en fonction du niveau de sécurité requis par le
service.
Utile En cas de déconnexion automatique, il peut être utile de prévenir l’utilisateur de la
fermeture imminente de la session et lui permettre de prolonger cette session (dans ce
cas, le système d’alerte ne doit pas être intrusif). Après un délai d’affichage de 10
secondes environ, en l’absence de réponse, la déconnexion est automatique.
Dans ce cas, il faut afficher la page d’authentification avec une mention prévenant
l’utilisateur que sa session a expiré. Si l’utilisateur s’authentifie à nouveau, il accède
idéalement à la dernière page consultée si celle-ci est toujours disponible.
Utile Lorsque l’utilisateur navigue en mode connecté, il est conseillé de lui fournir sur
toutes les pages du site la possibilité d’interrompre sa session via un bouton
« déconnexion » ou « quitter » bien mis en valeur.
Un clic sur ce lien ferme la session de l’utilisateur et affiche la page de connexion
avec les champs d’authentification vides. Cela permet une nouvelle authentification
du même utilisateur ou d’un autre.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 46/115
Recommandé Si le site est partenaire de mon.service-public.fr, un bouton de déconnexion globale
de mon.service-public.fr et des sites partenaires doit être inséré dans la barre de
navigation.
Bouton de connexion / déconnexion mon.service-public.fr
Que disent les référentiels généraux ?
RGAA 10.1 : Signaler l'ouverture de nouvelles fenêtres
1.5.4. Gestion des informations personnelles
Recommandé Si la création de compte nécessite le renseignement de données à caractère personnel,
l’utilisateur doit avoir connaissance du traitement réservé à ces données
(confidentialité, droits d’accès aux données, conservation des données).
Ces informations apparaissent dans les conditions générales d’utilisation du service et
les mentions légales et sont accessibles depuis le formulaire de création de compte.
Utile Si le site est partenaire de mon.service-public.fr, le formulaire de création de compte
doit proposer de créer une liaison entre le compte partenaire nouvellement créé et le
compte mon.service-public.fr conformément au kit d’intégration mon.servicepublic.fr à destination des partenaires.
Bouton de création de liaison avec mon.service-public.fr
Utile En cas de gestion d’informations personnelles, il est conseillé de proposer un accès à
ces informations. L’utilisateur a un accès en écriture aux champs susceptibles d’être
modifiés (adresse, courriel, etc.) sauf lorsque le changement de ces informations fait
l’objet d’une procédure particulière.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 47/115
Que disent les référentiels généraux ?
RGI 7 – Volet organisationnel : Protection des données personnelles
1.6. REFERENCEMENT MUTUEL DES SITES PUBLICS
1.6.1. Cas de service-public.fr
Recommandé Conformément à la circulaire du 7 octobre 1999 relative aux sites Internet des
services et des établissements publics de l'Etat, les responsables des sites Internet
publics veillent à ce que des liens soient établis vers le portail de l'administration
française service-public.fr et vers le site juridique Legifrance.gouv.fr qui met à la
disposition du public les textes législatifs et réglementaires essentiels.
1.6.2. Cas de mon-service-public.fr
Recommandé Lorsqu’un utilisateur s’authentifie sur un site partenaire de mon.service-public.fr, une
référence au bandeau mon-service-public.fr apparait tout au long de son parcours de
navigation. Ce référencement se fait par l’intermédiaire des bandeaux fournis dans le
kit graphique et ergonomique mon-service-public.fr établi par la Direction générale
de la modernisation de l’Etat (DGME).
Exemples de bandeaux mon.service-public.fr fournis dans le kit d’intégration :
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 48/115
1.7. STAT@GOUV
Stat@gouv est un baromètre d'audience des sites gouvernementaux qui utilise la technologie des
marqueurs de bas de page. Ce service mis à disposition par le Service d’information du
Gouvernement permet à un niveau global de :
mesurer la volumétrie et les performances de l’ensemble des sites gouvernementaux ;
identifier le cheminement des internautes à travers les différents sites
gouvernementaux ;
comparer les résultats des différents sites et rubriques, dans un objectif d’optimisation
et de répartition du trafic en fonction de la saisonnalité.
Au niveau de chaque site, Stat@gouv permet de :
mesurer l’efficacité des choix éditoriaux et ergonomiques (place de rubrique, dossiers
en une, etc.) ;
mieux comprendre et connaître le comportement des internautes à l’intérieur du site
(sources d’accès, cheminement, pages de sortie) ;
identifier les éventuels problèmes liés à l’accès aux pages (erreurs 404, formulaires) ;
communiquer sur les performances du site et les résultats des campagnes de
communication.
Recommandé L’intégration de marqueurs de mesure d’audience XiTi dans les pages est
recommandée pour les sites gouvernementaux.
Pour ce faire, il faut dans un premier temps demander une ouverture de compte au
SIG en précisant l’intitulé du site, le nom de domaine et l’adresse électronique de la
personne qui sera administrateur du compte. Chaque émetteur de site a la charge
d’administrer son compte Xiti, de marquer le site et d’analyser l’audience. Le SIG
met à disposition un guide de marquage XiTi et un guide d’utilisation XiTi sur
Intercom.
Des formations peuvent être organisées avec le prestataire du SIG (coordination et
prise en charge par le SIG).
Contact SIG - Département Rédaction & Multimédia
Etienne Godfroy - 01 42 75 78 02
Utile Les responsables de site peuvent créer autant d’identifiants de rubrique « S2 » que
souhaité. Il est conseillé de suivre l’architecture du site pour la création des « S2 »,
afin d’identifier très facilement à quelle partie du site correspondent les statistiques
(exemple : un site comporte 3 rubriques, l’accueil, une partie actualité et une partie le
ministère).
Le plan de marquage serait le suivant :
S2=accueil (regroupant les différentes versions éventuelles de la page
d’accueil en français : IE, Firefox, txt, etc.) ;
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 49/115
S2=actualite (si une telle rubrique existe) ;
S2=ministere;
S2=secretariat_etat; etc. (regroupant les pages relatives à la présentation du
ministère : services, missions, organigramme, infos pratiques, offres
d’emploi, etc.) ;
S2=page 404 (création de page 404 propre sur un S2 spécifique pour
analyser les flux) ;
S2=info site (pour mettre des éléments, comme le plan du site, les mentions
légales ou les contacts, qui sont indépendants de l’architecture principale).
Exemple de tableau de bord général Stat@gouv :
1.8. ARCHIVAGE
L’archivage d’un site Web gouvernemental, visant à préserver la mémoire du Web, peut
intervenir pour plusieurs raisons :
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 50/115
en cas de refonte ou de nouvelle version d’un site : il convient de proposer aux
internautes un accès à l’ancienne version du site ;
en cas de changement de gouvernement ou de ministre.
Préparation d’un emplacement d’archivage
Préparation de l’URL : la version archivée du site devrait être placée sur un sousdomaine différent de celui du site actif. On utilisera l’adresse www.site.gouv.fr pour le
site Web et l’adresse archives.site.gouv.fr pour les archives (notez l’absence de www).
Identifiant visuel : afin d’être facilement identifiable, le site archivé doit arborer un
élément graphique indiquant clairement à l’internaute qu’il n’est plus sur le site
actualisé. L’ajout d’un “tampon archives” dans le graphisme d’en-tête du site est un
des éléments les plus couramment utilisés pour signifier cette démarcation.
Sélection des pages archivables : afin de préparer la tâche du webmestre qui se
chargera de l’archivage, il est recommandé à l’équipe éditoriale du site de sélectionner
les rubriques, dossiers ou pages qui doivent être ciblés par la procédure d’archivage.
Cela peut se faire en plaçant le statut "archivé" sur les articles concernés si l’interface
d’administration le permet, ou bien en sélectionnant manuellement les pages
susceptibles d’être archivées, en fonction des objectifs éditoriaux.
L’archivage en pratique
Il existe divers logiciels libres destinés à l’archivage d’un site. Le but pour le webmestre est
d’utiliser ces logiciels dans leur mode de fonctionnement “aspirateur” afin de créer un miroir du
site.
Le logiciel se chargera de surfer sur le site et sur toutes ses sous-pages afin de les enregistrer au
format HTML brut. À noter que les pages uniquement accessibles par formulaire et destinées à
l’archivage peuvent échapper à cette opération.
Une fois l’archivage terminé, le webmestre possède donc une série de fichiers à l’image du site
web. Il suffira de placer ces fichiers dans l’espace prévu pour accueillir les archives et de lier cet
espace à partir de la page d’accueil afin que les internautes puissent y avoir accès. Il est
recommandé de conserver un accès à ces fichiers en cas de modifications ultérieures.
Le déréférencement du site archivé
Le site d’archive ne doit pas entrer en concurrence avec le site actif. Seule la page d’accueil du
site d’archive doit rester indexable par les moteurs de recherche. En revanche, toutes les pages
du site archivé doivent être désindexées.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 51/115

REGLES SUR LES OBJETS

Cette deuxième partie s’attache à définir les règles d’ergonomie sur les objets couramment
présents sur les sites Internet : liens hypertextes, fichiers en téléchargement, formulaires,
boutons d’action, tableaux, images, objets multimédias, etc. Les règles d’ergonomie énoncées
dans cette partie portent sur la forme et non pas sur le fond : les objets présentés sont ainsi
abordés en tant que « réceptacles » (contenant) mais le contenu susceptible d’être accueilli par
ces objets n’est pas traité.
2.1. LIENS HYPERTEXTES
2.1.1. Utilisation des liens
Un lien hypertexte est un moyen de navigation, généralement entre deux pages s’ouvrant dans
une même fenêtre ou déclenchant l’ouverture d’une autre fenêtre. On distingue généralement les
types de liens suivants :
les liens internes qui conduisent vers d’autres pages du site (navigation contextuelle) ;
les liens externes qui s'ouvrent dans une nouvelle fenêtre de navigateur ;
les liens de téléchargement qui permettent de lancer des documents non HTML ;
les ancres qui renvoient à une rubrique spécifique d’une même page HTML ;
les liens s’apparentant à un bouton d’action.
Utile Il faut éviter le plus possible les liens vers des pages vides, incomplètes ou « en
construction ». Dans ce cas, privilégier une explication succincte du service qui sera
fourni. De même, un message spécifique renseigne l’utilisateur lorsque le site est en
maintenance.
De même, il faut veiller à ne jamais acheminer l’utilisateur vers une page dénuée de
liens, ce qui aurait pour effet de « casser » le parcours de l’utilisateur.
Dans le cas d’une page inexistante (erreur URL, page supprimée, lien brisé, etc.), un
message spécifique indique à l’utilisateur l’absence de la ressource et propose un lien
vers une page spécifique permettant de se réorienter dans le site.
Utile Dans le cas des pages spécifiquement dédiées aux appareils mobiles, il est conseillé
de limiter le nombre de liens par page à 10 et de les numéroter dans une liste à puce
ordonnée associée aux touches 0 à 9 de l’appareil (accesskeys). Les liens sont alors
classés par ordre décroissant en fonction de leur popularité.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 52/115
Que disent les référentiels généraux ?
RGAA 7.5 : Ne pas placer de redirections automatiques à partir des pages
2.1.2. Présentation des liens
Recommandé Un lien hypertexte, lorsqu'il est composé de texte simple (c'est-à-dire non inclus dans
un composant JavaScript ou un bouton) doit pouvoir être distingué par l’utilisateur du
texte normal.
Recommandé La présentation retenue pour les liens hypertextes doit être systématiquement
homogène sur tout le site afin d’ancrer chez l’utilisateur une équivalence entre la
structure d’un objet et sa fonction.
Cette remarque vaut particulièrement lorsque plusieurs styles de liens sont définis en
fonction de la nature du lien (interne, externe, téléchargement, etc.).
Recommandé Au passage du pointeur sur un lien explicite, le curseur prend la forme d'une main
afin de bien signifier qu'il est cliquable. L’adresse de destination (URL) du lien
apparaît en bas à gauche du navigateur.
Recommandé La balise TITLE du lien doit être systématiquement renseignée. Ce commentaire doit
fournir des informations plus détaillées à l’utilisateur sans l’obliger à cliquer sur le
lien. Ces informations apparaissent sous forme d’info-bulles au passage de la souris
sur le lien. Il n’y a pas de limite précise sur la longueur des textes dans les info-bulles
mais l’usage recommande de ne pas dépasser 80 caractères.
Recommandé Le lien doit être limité à un mot ou un groupe de mots pertinents. Il ne faut pas
utiliser une phrase entière comme lien car cela rend la lecture difficile.
Recommandé L’ouverture de liens externes (i.e. renvoyant vers un autre site) doit se faire dans une
nouvelle fenêtre ou onglet du navigateur.
Utile Le soulignement est identifié comme le principal signalement du lien (avant passage
de la souris). Le texte normal ne doit pas être souligné car les utilisateurs seraient
tentés de cliquer sur ce texte. D’une manière générale, il ne faut pas suggérer qu'un
élément est cliquable s'il ne l'est pas.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 53/115
Que disent les référentiels généraux ?
RGAA 1.2 : Doubler les zones cliquables côté serveur
10.5 : Séparer visuellement les liens adjacents de manière explicite
13.1 : Identifier la destination des liens
13.6 : Regrouper les liens par type de fonction
2.1.3. Signification des liens
Recommandé Un lien doit être explicite dans son contexte : l’utilisateur doit savoir s’il renvoie vers
une autre page, s’il ouvre un document bureautique ou s’il correspond à une adresse
électronique.
Recommandé Un même lien doit adopter un comportement constant sur l’ensemble du site.
Recommandé Les intitulés des liens doivent être clairs, concis (un maximum de 80 caractères est
conseillé), compréhensibles et refléter le contenu des pages sur lesquelles ils pointent.
On doit s’assurer qu’ils ne comportent pas de termes qui risquent de ne pas être
compris par la population visée.
Les boutons d’action et les liens doivent être représentés de manière distincte. Pour
l’utilisateur un lien déclenche une navigation tandis qu’un bouton correspond à un
traitement.
Recommandé
Exemple de lien :
Accès à la procédure
Exemple de bouton d’action :
Utile Dans le cas d’un lien interne, le libellé du lien est idéalement le même que le titre de
l’écran cible.
2.1.4. Liens de type « ancre »
Utile Lorsque le contenu de la page est long (article, formulaire), il est possible d’avoir
recours à des ancres afin de faciliter la navigation en donnant des accès directs aux
rubriques de la page.
Les ancres sont placées en haut de la page sous forme de sommaire et renvoient aux
différentes rubriques de la page. Il est également conseillé de l'afficher en bas de page
lorsque la longueur du contenu est importante.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 54/115
Utile En cas de recours aux ancres, des fonctions de type « accordéon » (plier – déplier)
permettent de limiter l’utilisation de l’ascenseur.
Exemple de texte en version « pliée » (à gauche) et « dépliée » (à droite) :
Un projet de grande ampleur
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum
Historique du projet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum
Etat d’avancement du projet
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum
Un projet de grande ampleur
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore
eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum
Historique du projet
Etat d’avancement du projet
2.2. FICHIERS EN TELECHARGEMENT
2.2.1. Téléchargement descendant (download)
Le téléchargement descendant de fichiers correspond à la mise à disposition de fichiers par
l’émetteur sur une page du site. L’utilisateur peut alors ouvrir le fichier ou l’enregistrer
localement sur son disque dur.
Recommandé Il faut indiquer le nom du fichier, le type de format et la taille du document
correspondant à la page. L’utilisateur ne doit pas être « surpris » par l’ouverture d’un
document bureautique ou par un lecteur multimédia.
Recommandé Un texte d’explication dans la balise TITLE du lien de téléchargement doit renseigner
l’utilisateur sur l’ouverture du lien dans une nouvelle fenêtre (ou onglet) ou dans la
fenêtre courante.
Utile Il est conseillé d’ouvrir les fichiers en téléchargement dans une nouvelle fenêtre ou
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 55/115
un nouvel onglet afin d’éviter les conflits de navigation susceptibles de survenir entre
le système de navigation du site et un éventuel plug-in.
Utile Un pictogramme associé à chaque type de document permet de faciliter
l’identification des types de documents. Il faut veiller à utiliser des pictogrammes
libres de droit.
Exemple de pictogramme permettant d’identifier le type du document :
Téléchargez le rapport de présentation :
Rapport_2008.pdf (PDF, 530 Ko)
Utile L’affichage d’un temps de téléchargement estimé en fonction de la nature de la
connexion Internet (modem 56K, ADSL, ADSL+, réseaux câblés, fibre optique, etc.)
renseigne l’utilisateur sur l’optimisation de son temps de navigation.
Il faut veiller à ne pas mettre en téléchargement des fichiers trop volumineux (10 Mo
semble constituer une limite à ne pas dépasser) sous peine d’entraîner une rupture
d’égalité d’accès à l’information entre les usagers.
Recommandé Les formats de fichiers proposés en téléchargement doivent être conformes aux
préconisations du volet technique du RGI.
Que disent les référentiels généraux ?
RGAA 10.1 : Signaler l'ouverture de nouvelles fenêtres
13.3 : Permettre aux utilisateurs de recevoir des documents conformes à
leurs préférences
RGI Volet technique – chapitre 3 : Interopérabilité des formats de données ;
Volet technique – chapitre 4 : Interopérabilité des formats de
documents.
2.2.2. Téléchargement montant (upload)
Le téléchargement montant de fichiers consiste pour l’utilisateur à envoyer un document stocké
sur son disque dur vers le site de l’émetteur. Cette démarche s’apparente à l’attachement d’une
pièce-jointe dans un courriel.
Recommandé En cas de proposition d’une fonctionnalité de téléchargement montant (upload), il
doit être fait mention de la liste des formats acceptés et la taille limite acceptée.
Les formats de fichiers proposés en téléchargement doivent être conformes aux
préconisations du volet technique du RGI.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 56/115
Recommandé Il faut signaler à l’utilisateur le succès ou non du téléchargement par un message
explicite.
Utile Il est conseillé de mentionner l’éventuelle possibilité de compresser un fichier trop
volumineux et d’indiquer dans ce cas les formats acceptés.
Utile Lors du téléchargement montant, il est conseillé de faire un test sur la taille du fichier
avant le début du téléchargement et d’empêcher immédiatement le téléchargement si
le fichier dépasse la taille limite autorisée. Ceci constitue un gain de temps précieux
pour l’utilisateur.
Ce principe s’applique également au format de fichier (format accepté ou non).
Utile Il est conseillé de ne pas bloquer la navigation de l’utilisateur pendant le temps de
téléchargement du fichier. Selon les situations, il faut :
proposer le téléchargement dans une fenêtre spécifique, afin que l’utilisateur
puisse poursuivre sa navigation pendant le temps de téléchargement ;
autoriser la poursuite de la navigation dans la page pendant le temps de
téléchargement dans le cas des pages de type formulaires (sous réserve de
faisabilité technique).
Que disent les référentiels généraux ?
RGI Volet technique – chapitre 3 : Interopérabilité des formats de données ;
Volet technique – chapitre 4 : Interopérabilité des formats de documents.
2.3. FORMULAIRES
Dans un site Internet, les formulaires désignent les objets permettant de recueillir des
informations de la part des utilisateurs. Un champ de moteur de recherche constitue à ce titre un
« formulaire ». Ce chapitre traite plus spécifiquement des formulaires complexes, permettant de
recueillir les informations nécessaires à la réalisation d’une véritable démarche en ligne,
éventuellement structurée en plusieurs étapes (chaque étape étant matérialisée par un ou
plusieurs formulaires).
2.3.1. Présentation et structuration des formulaires
La structuration des formulaires est essentielle, tant sur le fond que sur la forme, pour le bon
renseignement des champs de saisie par l’utilisateur. L’objectif est de faire en sorte que
l’utilisateur remplisse le formulaire le plus vite possible avec le moins d’erreurs possibles.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 57/115
Recommandé Au sein d’une même page de formulaire, il faut regrouper les champs en fonction de
leur nature sémantique en blocs distincts, portant un titre explicite.
Recommandé Afin de rester lisibles, les formulaires doivent être présentés dans une seule colonne
(un champ de saisie par ligne).
Recommandé La signalétique employée dans le formulaire doit figurer en début de page (par
exemple, le code adopté pour les champs obligatoires).
Recommandé Les champs de saisie sont alignés à gauche et les informations de guidage sont situées
à droite des champs de saisie. Pour les boîtes de liste et les boutons radio, les libellés
sont placés à droite des cases.
Exemple de présentation des champs de formulaire
Recommandé Les actions de validation, annulation, passage à l’étape suivante, etc. liées à la saisie
du (des) formulaire(s) doivent être signalées par des boutons d’action situés en bas du
formulaire (voir à ce sujet le chapitre 2.4.3 - Les boutons d’action dans un formulaire
en ligne).
Utile Si le formulaire est long (au-delà de trois fois la hauteur de l’écran), il convient de
scinder le formulaire en plusieurs pages (formulaire multipages).
Idéalement, le bouton de validation d’un formulaire doit idéalement être visible sans
avoir recours à l’ascenseur vertical sur un écran en résolution 1024×768. De même, le
formulaire et les aides contextuelles ne doivent pas nécessiter le recours à l’ascenseur
horizontal en 800×600.
En cas de formulaire multipages, il est important de fournir des éléments de guidage pour
assister la navigation de l’utilisateur, qu’il s’agisse d’une navigation guidée ou semi-guidée.
Voir à ce sujet le chapitre 1.2.4 - Cas particulier de la navigation guidée.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 58/115
Recommandé Une sauvegarde implicite des données saisies doit être réalisée à chaque page de
formulaire.
Recommandé Lorsque toutes les pages de formulaires ont été saisies, une page de récapitulatif des
données saisies est proposée avant la validation définitive et transmission du
formulaire.
Que disent les référentiels généraux ?
RGAA 10.2 : Associer visuellement les étiquettes et champs de formulaire
12.3 : Regrouper les informations de même nature
2.3.2. Minimisation de la charge de travail
La saisie d’informations dans un formulaire requiert la participation active de l’utilisateur. Un
principe essentiel d’ergonomie consiste alors à minimiser la charge de travail pour l’utilisateur
afin d’optimiser le remplissage des champs.
Recommandé Afin de faciliter la compréhension des formulaires par l’utilisateur, tous les libellés
doivent être clairs, concis et non tronqués. Les abréviations sont à éviter.
Recommandé Lorsque cela est pertinent, il faut indiquer le format de données attendu avec un
exemple.
Recommandé Certains utilisateurs avertis utilisent les touches de navigation du clavier pour
maximiser la vitesse de saisie des champs : la navigation entre les différents champs
avec la touche de tabulation doit donc être autorisée. De même, la touche
« ENTREE » doit permettre de valider le formulaire.
Utile Lorsque cela est opportun, il est conseillé d’avoir recours à des champs proposant
des valeurs par défaut (boîtes de listes, listes déroulantes, boutons radio, etc.) plutôt
qu’à des champs libres.
Utile Si les valeurs possibles pour un champ sont connues (une liste de codes référencés,
par exemple), il est conseillé d’utiliser une liste déroulante au lieu d’un champ de
saisie texte libre.
Utile Certains champs correspondent à un ensemble fini de réponse trop important pour
être proposés via une liste déroulante ou une boîte de liste (par exemple, la liste des
départements, une liste de pays, etc.). Dans ce cas, il est conseillé d’avoir recours à un
système de complètement automatique (auto-complétion) affichant les items
correspondants aux premières lettres saisies.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 59/115
Exemple de champ avec complètement automatique (auto-complétion)
Utile Il est conseillé de fournir une aide contextuelle (info-bulle, icône spécifique, etc.)
pour la saisie des champs pouvant présenter une difficulté d’interprétation. Celles-ci
visent à créer un climat d’accompagnement pour faciliter la tâche de l’utilisateur, par
de brèves informations incitatives ou pédagogiques (voir à ce sujet le chapitre 3.4.2 -
Aides contextuelles).
Que disent les référentiels généraux ?
RGAA 9.4 : Proposer un ordre logique de parcours au clavier
9.5 : Proposer des raccourcis clavier
2.3.3. Gestion des erreurs de saisie
La bonne gestion des erreurs est primordiale pour garantir une saisie optimale des données de
formulaires. Une bonne gestion commence par une prévention efficace : il faut mettre en œuvre
des moyens pour éviter d’induire l’utilisateur en erreur.
Recommandé Les champs obligatoires sont signalés par un astérisque rouge (*).
Recommandé Dans le cas d’un formulaire multipages, il faut effectuer la vérification de l’intégrité
des données à chaque validation de page.
Recommandé En cas d’erreur lors de la validation d’un formulaire, les erreurs doivent être listées en
début de page. De plus, chaque champ erroné ou incomplet doit être signalé par un
pictogramme et un changement de couleur dans le formulaire (et non pas dans une
deuxième fenêtre, boîte de dialogue ou autre).
Recommandé En cas d’erreur lors de la validation d’un formulaire, seules les données erronées sont
à ressaisir (et indiquées à l’utilisateur), le reste du formulaire devant rester inchangé.
Recommandé Dans le cas de saisies partielles ou erronées, le formulaire doit être réaffiché, sans
perte des champs précédemment renseignés.
Utile Le texte des messages d’erreur doit être précis et proposer une solution plutôt que de
se limiter au constat de l’anomalie.
Utile Il est conseillé d’effectuer les vérifications à deux niveaux :
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 60/115
côté client (au minimum pour les champs obligatoires), de sorte qu’un
message d’erreur s’affiche à côté du champ erroné lors du passage d’un
champ à l’autre ;
côté serveur à la validation du formulaire, sur l’ensemble des champs.
Le contrôle côté client doit être effectué par un script avant envoi des informations au
serveur. Ce type de contrôle à la volée permet de conserver le formulaire de saisie
dans le navigateur en limitant le nombre d’allers-retours entre le client et le serveur. Il
faut dans ce cas prévoir une alternative pour les clients n’interprétant pas les scripts.
Utile Le système doit prévoir la gestion de l’envoi du formulaire en double : certains
utilisateurs peuvent cliquer plusieurs fois consécutivement sur le bouton de validation
du formulaire en cas de temps de réponse long.
Utile Lorsqu’il existe des contraintes sur la saisie des champs (par exemple un nombre de
caractères maximum, un format de date), il faut indiquer ces contraintes à l’utilisateur
afin de limiter le risque d’erreur de saisie.
2.3.4. Types de champs de saisie et sélection
La bonne saisie des informations dépend du choix des types de champs de saisie. Bien choisir
les éléments d’interface pour chaque fonction de saisie participe donc à l’ergonomie des
formulaires. Chaque format de champ doit ainsi être adapté à la saisie attendue.
Recommandé La nature et la taille des champs de saisie doit être adaptée à la nature des
informations attendues.
2.3.4.1. Champs libres
La boîte de saisie de champ libre est utilisée pour saisir du texte de longueur limitée, sur une
seule ligne. Il est possible de limiter le nombre de caractères à saisir, et le nombre de caractères
visibles en même temps. C'est le champ de saisie de texte le plus utilisé car il répond à la
majorité des besoins.
Recommandé Le champ de saisie doit être dimensionné selon le nombre de caractères attendu.
Il faut éviter les champs trop petits qui obligeraient l’utilisateur à accomplir une
action du clavier ou de la souris pour visualiser l’ensemble des données saisies.
Utile Pour la saisie de textes longs (sur plusieurs lignes), il est conseillé d’avoir recours à la
boîte de saisie multi-lignes. Dans ce cas, la taille de la zone doit être adaptée à une
bonne visibilité (par exemple les 2/3 de la zone communément saisie doivent
apparaître sans avoir recours à l’ascenseur).
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 61/115
Exemple de champ de saisie simple :
Exemple de boite de saisie multi-lignes :
2.3.4.2. Boîte de listes
Si les valeurs possibles pour un champ sont connues (une liste de codes référencés, par
exemple), utiliser une boîte de liste ou une liste déroulante au lieu d’un champ de saisie texte
libre.
Dans une boîte de liste, les éléments de la liste sont affichés en permanence, en déroulé dans la
boîte de liste. L'utilisateur peut sélectionner dans la liste un ou plusieurs éléments.
Recommandé Le nombre de lignes à afficher est de 7 (plus ou moins 2).
Recommandé Le nombre d'éléments contenus dans la liste ne doit pas dépasser 100 (50 est une
borne plus réaliste). Au delà de 100 éléments, concevoir une page de recherche
intermédiaire.
Utile L’ordre de présentation des items dépend du nombre d’éléments présentés : si la liste
contient peu d’éléments (jusqu’à 5 éléments), il est possible de les classer par ordre
de fréquence de sélection. Au-delà, il est conseillé d’adopter un ordre « logique »
(ordre alphabétique par exemple).
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 62/115
Exemple de boite de liste à sélection multiple
D’autres modèles de boites de liste existent, notamment le modèle permettant de sélectionner
plusieurs items en maintenant les touche CTRL et SHIFT appuyée. Ce modèle est déconseillé
car trop compliqué pour les utilisateurs.
2.3.4.3. Listes déroulantes
Egalement appelée « menu déroulant », elle se comporte exactement comme une boîte de liste,
hormis le fait qu'un seul élément de la liste est visible par défaut. Pour afficher les autres
éléments, l'utilisateur doit cliquer dans cet élément d’interface. Ce type de contrôle est utile pour
économiser de la place dans la page. Il ne permet de sélectionner qu’un seul élément à la fois.
Recommandé Dans un questionnaire, afin d’inciter l’utilisateur à saisir le champ, un item défaut est
proposé ou une incitation à la saisie (« choisir item », par exemple).
Cette règle ne prévaut pas dans le cas d’un formulaire de moteur de recherche par
exemple.
Recommandé Le nombre d'éléments affichés dans une liste déroulante est limité à 50 maximum.
Au-delà, il faut scinder l’information en étapes supplémentaires (pages ou fenêtre
d’assistants) ou en plusieurs listes.
Exemple de liste déroulante
2.3.4.4. Boutons radio
Les boutons radio sont utilisés pour inciter l’internaute à sélectionner un seul élément parmi
plusieurs.
Recommandé Le nombre d'éléments dans un regroupement de boutons radio est de 12 maximum.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 63/115
Recommandé Les libellés des boutons radio sont placés à droite des cases.
Utile L’utilisation des boutons radio est conseillée pour les choix exclusifs (par exemple
« Oui – Non ») et permet d’insister sur le caractère binaire de l’information
demandée.
Utile Il est possible de sélectionner par défaut un des éléments proposés par les boutons
radio.
Cette possibilité permet de réduire le nombre d’actions de l’utilisateur, mais elle
contraint l’utilisateur à choisir obligatoirement un des éléments. Elle est donc à
réserver pour les cas où le renseignement du champ est obligatoire. Dans ce cas, le
bouton radio sélectionné par défaut doit correspondre à l’option supposément la plus
appropriée en fonction du contexte.
Si le champ n’est pas obligatoire, les boutons radio doivent être laissés décochés.
Exemple de boutons radio
2.3.4.5. Cases à cocher
Les cases à cocher servent pour des choix multiples, non exclusifs les uns des autres. Comme
pour les boutons radio, ce champ sélection présente l’avantage de rendre toutes les options
visibles sans nécessiter d'action de la part de l'utilisateur (contrairement à une liste déroulante
par exemple). En contrepartie, ce type de champs occupe une place importante à l’écran et peut
compliquer la lecture du formulaire.
La case à cocher est aussi employée pour des choix binaires (activation ou désactivation d’une
option, confirmation d’un choix, etc.).
Utile Le nombre d'éléments dans un regroupement de cases à cocher est de 12 maximum.
Recommandé Les libellés des cases à cocher sont placés à droite des cases.
Exemples de cases à cocher
Cyclisme
Equitation
Escrime
Quel sport pratiquez-vous ?
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 64/115
2.3.5. Cas particulier des formulaires CERFA
Recommandé Tous les formulaires CERFA sont accessibles sur service-public.fr (qui les référence
mais ne les héberge pas).
Ils sont hébergés sur un seul site à la fois, à savoir :
soit sur le site de l’organisme émetteur ;
soit sur le serveur de formulaire de la DGME.
Les autres sites publics peuvent y donner accès en faisant des liens fins vers le site
hébergeur du formulaire (ou un lien global vers service-public.fr).
Recommandé Les administrations locales ne doivent pas héberger et diffuser leurs propres versions
de formulaires lorsqu’il en existe une version nationale homologuée référencée sur
service-public.fr.
Avant la publication d’un arrêté au Journal Officiel impliquant la création ou la modification
d’un formulaire, l’administration émettrice doit contacter la DGME pour :
faire une demande d’homologation ;
convenir des modalités de mise en ligne du formulaire (sur son propre site ou sur le
serveur de formulaires géré par la DGME).
Le jour de la publication de l’arrêté au Journal Officiel, les organismes publics :
mettent en ligne leurs formulaires administratifs ;
signalent à service-public.fr l’URL du formulaire afin qu’il soit référencé sur le portail
de l'administration et que les usagers en soit informés : http://interactif.servicepublic.fr/cgi-bin/posez_question/akio.cgi?page=posez_question/site.html.
Si un nouveau formulaire, publié au Journal Officiel et donc en vigueur, connaît un délai
important pour sa mise à disposition dans les guichets, il convient d’avertir service-public.fr et
la DGME afin de le préciser dans les pages de service-public.fr de présentation des formulaires.
2.4. BOUTONS D’ACTION
Un bouton d’action sert à valider ou déclencher un traitement.
2.4.1. Libellés des boutons d’action
Recommandé Le titre du bouton doit être adapté au contexte et assez explicite pour être compris par
les utilisateurs. Il convient d’utiliser des verbes d’action (de préférence à l’infinitif)
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 65/115
décrivant la fonction qui fait suite à l’action de l’utilisateur. Un pictogramme visuel
peut-être associé au libellé pour renforcer sa signification (une croix pour « Annuler »
par exemple). En fonction de la charte graphique retenue par le site, le recours à la
couleur peut être un moyen de renforcer la signifiance des libellés.
Exemples de boutons d’action :
Exemples de fonctions associées aux libellés :
Libellé Fonction Commentaire
OK Valider un choix ou
une entrée
d’information
Est utilisé pour valider un choix ou l’entrée
d’une information dans un ou plusieurs champs
de saisie.
Envoyer Poster un
formulaire
Est utilisé pour envoyer ou poster un
formulaire complété.
Chercher Lancer une requête Est utilisé pour lancer une requête,
typiquement dans le cas d’une recherche.
Annuler Annuler une ou
plusieurs entrées
d’information
Est utilisé pour effacer l’information entrée
dans un champ de saisie ou dans tous les
champs d’un formulaire ; remet éventuellement
les valeurs par défaut.
Utile Pour un bouton d’action standard, le libellé ne dépasse généralement pas 15
caractères. Il n’est donc pas nécessaire de préciser le détail de l’action par rapport au
contenu hormis quand le contexte de l’action le nécessite.
Exemple : « Imprimer » plutôt que « Imprimer le formulaire de demande de
subvention ».
2.4.2. Présentation des boutons d’action
Recommandé Dans un souci d’accessibilité, les boutons d’action doivent être réalisés en mode texte
HTML (et non pas une image) afin d’être facilement interprétables par les lecteurs
alternatifs. Ceci permet également de faciliter l’adaptation des libellés en cas de
version du site en langues étrangères.
Recommandé Les boutons sont disposés de manière fonctionnelle et cohérente dans l’ensemble du
site. Les boutons de même nature fonctionnelle sont donc regroupés. Il doit y avoir
une cohérence globale des boutons d’action sur tout le site : ainsi, une même action
ne pourra pas être déclenchée par deux boutons d’action différents.
Recommandé Au passage de la souris sur un bouton, un changement d’état de souris et/ou du
bouton permet de signifier à l’utilisateur que le bouton est actif.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 66/115
Exemple de changement d’état du bouton au passage de la souris
L’action du bouton est alors déclenchée, soit par le clic de la souris, soit par la touche
<ENTREE> en cas de navigation avec le clavier (tabulation, flèches, etc.).
Recommandé Le libellé des boutons doit être centré.
Recommandé Les boutons adoptent une norme graphique commune : la hauteur doit toujours être
identique. La largeur doit être homogène, sauf lorsque pour des raisons de contexte,
le libellé du bouton est plus long.
Utile Il est conseillé de renseigner la balise TITLE du bouton afin qu’une info-bulle
apparaisse lorsque la souris survole le bouton. L’info-bulle décrit l’action liée au
bouton d’action.
2.4.3. Les boutons d’action dans un formulaire en ligne
Recommandé Lorsque qu’une même page propose une action de validation ou d’annulation, l’ordre
des boutons à privilégier est : « Valider – Annuler ».
Recommandé Les boutons d’action sont disposés en bas du formulaire. Si le formulaire est long
(hauteur supérieure à un écran), il est conseillé de rappeler les boutons en haut du
formulaire afin de limiter le recours à l’ascenseur.
Utile Dans le cadre de procédures guidées et linéaires, utiliser un bouton « Valider et
continuer » pour passer à l’étape suivante. Le bouton « Valider et terminer » permet
de marquer la fin de la procédure. Il déclenche alors l’affichage de la page de
confirmation.
Utile Le bouton « Modifier » permet de rendre les champs éditables et de modifier les
données d’un formulaire. Ce bouton est à utiliser dans le cadre d’une page de
confirmation avant envoi des informations.
Utile A toute étape, la fonction « Abandonner la procédure ? » est proposée en bas de page.
Ce lien déclenche l’affichage d’une page explicative alertant sur la perte des données
saisies et valorisant la fonction d’ouverture de compte si existante.
Que disent les référentiels généraux ?
RGAA 1.1 : Fournir une alternative textuelle aux éléments non textuels
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 67/115
2.5. ARBRES
Un arbre permet de représenter une information hiérarchisée de manière synthétique. Chaque
niveau de l'arbre est renseigné par un titre regroupant une information explicite et concise,
éventuellement accompagnée d'un pictogramme.
Recommandé Chaque niveau d'un objet arbre est soit un répertoire (père), soit un élément (fils). Le
clic sur un élément de l’arbre peut avoir deux types de comportement :
s’il s’agit d’un père, le contenu du répertoire est déployé (sous-répertoire(s)
et/ou élément(s) fils) ;
s’il s’agit d’un fils, cela déclenche une action liée à cet élément fils
(ouverture d’un document, affichage d’un contenu, renvoi vers un lien
externe ou interne, etc.).
Recommandé Ce composant est à utiliser uniquement lorsque l'on veut faire apparaître une notion
de hiérarchie (exemple : plan du site, organigramme, etc.).
La représentation sous forme d’arbre est également bien adaptée pour les plans de site,
notamment ceux dont la profondeur dépasserait 4 niveaux. L’arbre est alors un outil
complémentaire facilitant la navigation au sein du site.
2.6. TABLEAUX
Les tableaux permettent de restituer des informations classifiées et éventuellement de proposer
des actions particulières (voir le détail, supprimer, sélectionner, etc.) sur la ligne sélectionnée.
Ils nécessitent une présentation soignée pour ne pas alourdir visuellement la page.
2.6.1. Lisibilité des tableaux
Un tableau comporte les éléments suivants : un cadre ou bordure, une zone d'en-tête avec un
libellé descriptif par colonne et N lignes de champs (1 champ par colonne). Une cellule
correspond à l’intersection d’une ligne et d’une colonne.
Recommandé Les bordures permettent de distinguer les zones du tableau. Leur matérialisation
(bordures internes et externes) est optionnelle. En l'absence de matérialisation, cellesci prennent la couleur du fond du tableau.
Le choix de l'encadrement dépend de l'utilisation qui est faite du tableau. D’une
manière générale, il est conseillé de ne pas marquer les bordures, notamment si le
tableau s'intègre au sein d'un formulaire. En cas d’affichage des bordures, il faut
retenir une couleur claire afin de ne pas surcharger la page.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 68/115
Recommandé Les tableaux comportent obligatoirement un en-tête pour chaque colonne faisant
office de libellé pour les champs contenus dans la colonne. Les en-têtes de colonnes
sont différenciés des lignes de champ (par un fond de couleur plus foncé et des
caractères en gras par exemple).
Recommandé Les champs d'une même colonne doivent toujours être de même nature.
L’alignement des contenus de cellules varient en fonction de leur nature : les textes
sont justifiés à gauche tandis que les chiffres sont justifiés à droite.
Pour une meilleure lisibilité d’ensemble du tableau, il faut éviter les champs de texte
sur deux lignes, préférer l’utilisation des troncatures associées à l’attribut TITLE pour
afficher l’ensemble du contenu.
Un tableau peut également intégrer des éléments de saisie utilisés dans les
formulaires tels que des listes déroulantes, boutons radio, cases à cocher, etc.
Recommandé Afin de faciliter la lisibilité, il faut alterner la couleur les lignes du tableau (couleurs
les plus claires de la palette HTML de préférence). Pour la mise en avant d’une (ou
plusieurs) colonne, on peut mettre en gras son contenu ou utiliser des couleurs plus
saillantes.
Utile Si le tableau présente des informations « cliquables », la cellule cliquable ou la ligne
du tableau de l’utilisateur doit être différenciée visuellement lors du passage de la
souris sur la zone cliquable (mise en gras, soulignement, changement de couleur,
mise en relief, etc.). Une info-bulle apparaît lors du passage de la souris indiquant
l’action réalisée par le lien (voir détail de la ligne, téléchargement de document, etc.).
Exemple de présentation de tableau
N° de centre Nom Adresse CP Ville
123 456 789 Nom 1 55, rue des Lauriers 77 288 MELUN
123 456 789 Nom 2 48, rue des Gardes 77 288 MELUN
123 456 789 Nom 3 13, rue de le Bretonnière 77 288 MELUN
123 456 789 Nom 4 50, rue des Grandes Mottes 77 288 MELUN
123 456 789 Nom 6 48, rue des Gardes 77 288 MELUN
123 456 789 Nom 7 13, rue de le Bretonnière 77 288 MELUN
123 456 789 Nom 5 6, rue de la Pommeraie 77 288 MELUN
Voir les horaires et le plan d’accès
N° de centre Nom Adresse CP Ville
123 456 789 Nom 1 55, rue des Lauriers 77 288 MELUN
123 456 789 Nom 2 48, rue des Gardes 77 288 MELUN
123 456 789 Nom 3 13, rue de le Bretonnière 77 288 MELUN
123 456 789 Nom 4 50, rue des Grandes Mottes 77 288 MELUN
123 456 789 Nom 6 48, rue des Gardes 77 288 MELUN
123 456 789 Nom 7 13, rue de le Bretonnière 77 288 MELUN
123 456 789 Nom 5 6, rue de la Pommeraie 77 288 MELUN
Voir les horaires et le plan d’accès
Que disent les référentiels généraux ?
RGAA 5.1 : Baliser les en-têtes de lignes et de colonnes
5.2 : Associer les cellules de données aux en-têtes de lignes et de
colonnes
5.3 : N'utiliser des tableaux pour la mise en page que si leur linéarisation
est correcte
5.4 : Ne pas utiliser d'éléments de tableaux de données pour des tableaux
de mise en page
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 69/115
5.5 : Donner des informations complémentaires sur les tableaux de
données
5.6 : Proposer des valeurs de remplacement pour les en-têtes de tableaux
de données
2.6.2. Pagination des tableaux
Recommandé Le principe de fluidité de la navigation impose que les pages de tableaux ne soient
pas trop lourdes. Pour des raisons de performance du serveur et de l’affichage, ces
tableaux seront paginés : le nombre d’éléments affichés sur la même page ne peut
dépasser un maximum de deux fois la hauteur de la fenêtre (au-delà de cette hauteur,
la consultation de la fin du tableau nécessite plus d’un clic dans la barre d’ascenseur
vertical).
Exemple de tableau paginé
N° de centre Nom Adresse CP Ville
123 456 789 Nom 1 55, rue des Lauriers 77 288 MELUN
123 456 789 Nom 2 48, rue des Gardes 77 288 MELUN
123 456 789 Nom 3 13, rue de le Bretonnière 77 288 MELUN
123 456 789 Nom 4 50, rue des Grandes Mottes 77 288 MELUN
123 456 789 Nom 6 38, square des Moines 77 288 MELUN
123 456 789 Nom 7 38, rue des Noés 77 288 MELUN
123 456 789 Nom 5 6, rue de la Pommeraie 77 288 MELUN
123 456 789 Nom 8 48, rue des Gardes 77 288 MELUN
123 456 789 Nom 9 13, rue de le Bretonnière 77 288 MELUN
123 456 789 Nom 10 50, rue des Grandes Mottes 77 288 MELUN
43 résultats
43 résultats
Retour en haut de page
N° de centre Nom Adresse CP Ville
123 456 789 Nom 1 55, rue des Lauriers 77 288 MELUN
123 456 789 Nom 2 48, rue des Gardes 77 288 MELUN
123 456 789 Nom 3 13, rue de le Bretonnière 77 288 MELUN
123 456 789 Nom 4 50, rue des Grandes Mottes 77 288 MELUN
123 456 789 Nom 6 38, square des Moines 77 288 MELUN
123 456 789 Nom 7 38, rue des Noés 77 288 MELUN
123 456 789 Nom 5 6, rue de la Pommeraie 77 288 MELUN
123 456 789 Nom 8 48, rue des Gardes 77 288 MELUN
123 456 789 Nom 9 13, rue de le Bretonnière 77 288 MELUN
123 456 789 Nom 10 50, rue des Grandes Mottes 77 288 MELUN
43 résultats
43 résultats
Retour en haut de page
Utile En cas de pagination, un système de navigation de type « page suivante », « page
précédente » permet d’accéder aux différentes pages du tableau, y compris via un
accès direct à ces pages (les numéros de page sont cliquables, sauf le numéro de la
page courante repéré un style distinct des autres pages). Ce système de navigation est
répété dans le bas du tableau.
Utile Il est également conseillé d’afficher le nombre de lignes du tableau et de permettre à
l’utilisateur de paramétrer le nombre d’éléments affichés par page. Si le nombre de
lignes autorisés par page est important, un bouton « Retour en haut de page »
positionné sous le tableau permet de revenir facilement en haut de l’écran.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 70/115
2.6.3. Manipulation des tableaux
Recommandé Lorsque l’usager peut déclencher une action sur les items du tableau (suppression
d’un item, sélection multiple, etc.), il faut offrir la possibilité à l’utilisateur de cocher
individuellement chaque ligne ou toutes les lignes pour appliquer cette action.
Si le nombre de lignes du tableau est important, il est conseillé de rappeler le bouton
d’action déclenchant le traitement de masse sur les items sélectionnés en haut et en
bas du tableau. Le lien entre le(s) bouton(s) d’action(s) et les items sélectionnés doit
être explicite (message avant validation, intituler du bouton, etc.).
Dans le cas d’un tableau paginé, l’action ne s’applique qu’à la page visualisée à
l’écran.
Utile Les items du tableau sont présentés de façon ordonnée. Par défaut le tri est fait sur la
première colonne, par ordre alphabétique s'il s'agit d'un champ alphanumérique, par
ordre croissant s’il s’agit d’un champ numérique.
Le tableau doit proposer lorsque cela se justifie des possibilités de tris sur certaines
colonnes du tableau. Un clic sur un bouton de tri ou l’en-tête de colonne permet de
réafficher la liste en fonction des champs de la colonne sélectionnée. Un second clic
permet d’inverser l’ordre de tri.
Un indicateur visuel (pictogramme) permet à l’usager de savoir sur quelle colonne est
fait le tri.
Utile En cas de tableau multi-pages, il est conseillé de conserver en mémoire le tri sur les
en-têtes de colonnes lorsque l’utilisateur navigue entre les pages du tableau.
Nom du document Date Type de document Auteur
Certificat de non-gage 01/01/08 Certificat Jean Desmoulins
Certificat de concubinage 14/02/08 Certificat Jean Desmoulins
Attestation de l’employeur 31/03/08 Attestation Jean Desmoulins
Certificat médical 10/05/08 Certificat Jean Desmoulins
Récépissé dépôt de plainte 12/07/08 Accusé de réception Jean Desmoulins
Formulaire de demande d’aide 23/06/08 Formulaire Jean Desmoulins
Nom du document Date Type de document Auteur
Certificat de non-gage 01/01/08 Certificat Jean Desmoulins
Certificat de concubinage 14/02/08 Certificat Jean Desmoulins
Attestation de l’employeur 31/03/08 Attestation Jean Desmoulins
Certificat médical 10/05/08 Certificat Jean Desmoulins
Récépissé dépôt de plainte 12/07/08 Accusé de réception Jean Desmoulins
Formulaire de demande d’aide 23/06/08 Formulaire Jean Desmoulins
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 71/115
2.7. IMAGES
2.7.1. Format, taille et poids des images
La durée de chargement d’une page dépend en partie du poids de la page et donc du poids des
images contenues dans la page. L’hétérogénéité de l’équipement des utilisateurs (connexion,
matériel) ne doit pas entraîner d’inégalité d’accès au contenu. Dans cet esprit, on recherchera
constamment une optimisation du poids des images.
Recommandé Les formats d’images doivent être conformes aux préconisations du volet technique
du RGI.
Recommandé Afin de diminuer leur poids, les images doivent être enregistrées au format de
compression approprié (.JPG, .PNG). Le format retenu dépend du type d’image
(schéma, photographie, etc.). Le taux de compression détermine le poids mais
également la qualité de l’image finale : une compression très forte réduit ainsi le
poids mais également la qualité.
Il ne faut pas utiliser d’image animée dans les pages de contenus car ce type d’image
n’est pas accessible.
Utile Il est conseillé de retailler les images au plus juste de leur taille d’affichage car les
dimensions physiques sont un des facteurs de poids. Il est par conséquent utile de
connaître les dimensions initiales de l’image et celles de la cible.
Que disent les référentiels généraux ?
RGI Volet technique – chapitre 3 : Interopérabilité des formats de données.
2.7.2. Présentation des images
Recommandé La balise ALT de l’image doit être systématiquement renseignée pour les images
signifiantes afin de décrire succinctement l’image et d’en favoriser le référencement
par les moteurs de recherche.
Pour les images n’apportant pas de plus-value informationnelle (bordure de tableau,
puce, illustration) la balise ALT doit rester vide, afin de ne pas surcharger inutilement
la tâche des lecteurs alternatifs d’accessibilité.
Un lien est parfois associé à l’image ; on parle alors d’image-lien. Le recours aux images doit
être effectué à bon escient, car cela génère un certain nombre de contraintes liées à l’affichage
et l’utilisation :
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 72/115
les images se chargent plus lentement que le texte ;
elles ne possèdent pas par défaut d’éléments distinctifs liés à la possibilité de cliquer
dessus ;
elles ne possèdent pas d’éléments signifiant qu’elles ont déjà été visitées.
Utile Afin d’inciter l’utilisateur à cliquer sur les images-liens, celles-ci doivent changer
d’état au passage de la souris. De plus, l’insertion sous l’image d’une légende
constitue une incitation à cliquer sur l’image. Dans ce cas, l’adresse du lien associé à
la légende doit être identique au lien associé à l’image.
Exemple d’incitation pour cliquer sur l’image
Une image peut être décomposée en sous-blocs auxquels on associe un lien hypertexte
spécifique ; on parle alors d’image-map. La navigation par image-map peut être pertinente dans
certains cas particuliers : cartes géographiques, photo de groupe interactive, etc.
Utile Il est conseillé d’associer une distinction visuelle aux images composant une imagemap lorsque la souris survole la zone du sous-bloc. Ceci peut se faire via la balise
ALT associée aux images (info-bulle) ou un changement d’aspect visuel de l’image
(surbrillance, etc.).
Utile Il est conseillé de ne pas avoir recours aux image-maps pour les sites qui recherchent
une visibilité sur les appareils mobiles. Les tailles d’écran, les caractéristiques liées à
la navigation (clavier, stylet, etc.), le poids des pages et l’accessibilité font que cette
fonctionnalité n’est pas optimisée pour ce type de support.
2.7.3. Signification des images
Dans une page Internet, l’image peut revêtir plusieurs fonctions et significations. Elle peut être :
un élément d’information complémentaire d’un contenu (schémas,
illustrations…etc.) ;
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 73/115
un élément de navigation de type image-map (cartes, organigramme interactif, etc..) ;
un élément de mise en page (icône, bouton du système de navigation, pictogramme,
puces, etc.) ;
un élément décoratif (ensemble des éléments graphiques dénués de fonction
informative ou de navigation).
Utile Il est conseillé de minimiser le recours aux images, graphiques, animations, vidéos ou
effets multimédias purement esthétiques et sans plus-value informationnelle.
En effet, la présence d’images ou de schémas complexes ou de grande taille (même
s’ils sont présentés dans une perspective pédagogique) peut nuire à la consultation
d’une page en raison de la difficulté de la lecture à l’écran.
Utile En cas d’utilisation de graphiques, le choix du style de graphique doit correspondre
aux normes couramment admises (par exemple, un diagramme circulaire pour
représenter des proportions, un histogramme pour représenter des tendances, etc.).
Utile Il est conseillé de ne pas utiliser d’image pour les puces d’énumération, sauf si les
choix d’identité graphique du site sont prépondérants.
Que disent les référentiels généraux ?
RGAA 1.1 : Fournir une alternative textuelle aux éléments non textuels
1.2 : Doubler les zones cliquables côté serveur
3.6 : Utiliser les éléments de liste de manière appropriée
9.1 : Fournir des images avec zones cliquables côté client
RGI Volet technique – chapitre 3 : Interopérabilité des formats de données.
2.8. OBJETS MULTIMEDIAS
En matière d’utilisation des objets multimédias (audio, vidéo, animations) dans un site, la règle
de base est la modération. Certes, les choix effectués peuvent contribuer à l’amélioration
esthétique des pages mais ils doivent avant tout viser la lisibilité et la compréhension du contenu
informationnel du site. Pour ces raisons, le recours aux objets multimédias est plus fréquent
pour les sites à fort pouvoir communicant (site promotionnel, événementiel) ou pédagogique.
Utile Il est conseillé de n’utiliser les animations ou effets multimédias que s’ils apportent
une réelle plus-value au site – que ce soit sur le plan informationnel ou en termes
d’image du site – et si l’équipement des utilisateurs visés supporte la technologie
utilisée. Dans tous les cas, il faut prévoir leur équivalent textuel.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 74/115
Utile Il est conseillé de s’assurer que le temps de chargement des pages ne sera pas affecté
par la présence d’objets multimédias.
Utile Il est conseillé de placer les objets multimédias dans des pages ne contenant que peu
d’information textuelle ou sur la page d’accueil (vitrine du site).
Utile Dans un souci d’accessibilité et de référencement, il est conseillé de fournir un
équivalent textuel aux fichiers multimédias. Cet équivalent doit comprendre des
mots-clés pertinents afin d’améliorer le référencement des éléments multimédias
présents sur le site par les moteurs de recherche.
L’utilisation d’effets visuels dynamiques (HTML dynamique, Flash, …) convient bien aux sites
ou sections de sites à but promotionnel (exemple : visite virtuelle d’un site) ou pédagogique
(exemple : illustration graphique d’un contenu textuel dans le souci d’en favoriser la
compréhension).
Que disent les référentiels généraux ?
RGAA 1.1 : Fournir une alternative textuelle aux éléments non textuels
1.3 : Fournir une description audio des contenus multimédias
1.4 : Synchroniser les équivalents des contenus multimédias
6.5 : Assurer l'accessibilité des contenus dynamiques
11.4 : En dernier recours, fournir une version alternative accessible
2.8.1. Objets audio (baladodiffusion ou podcast)
La baladodiffusion (podcasting) est un système de diffusion et d'agrégation de contenus audio
destinés aux baladeurs numériques. Cette technique utilise le format de syndication de contenus
RSS 2.0, pour rendre les enregistrements sonores automatiquement disponibles aux abonnés, de
la même manière que l'on s'abonne à un flux RSS de contenus écrits. Le programme qui capture
le flux audio et le synchronise avec le diffuseur est appelé un podcatcher.
Un balado (podcast) est constitué d'un fichier audio (MP3 par exemple) encapsulé dans un fil
XML auquel peut s'abonner un internaute. Une fois publié en ligne, il est possible d’écouter le
podcast de deux manières :
directement sur le site via un plug-in dédié à la lecture du podcast ;
sur un baladeur numérique après téléchargement automatique.
Enfin, un podcast peut être accompagné de photos ou de textes. Dans le cas d'une vidéo on parle
alors de vidéocast.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 75/115
Exemple de plug-in dédié à la lecture du podcast :
Recommandé En cas de lecture directement sur le site, l’utilisateur doit conserver le contrôle du
déroulement du podcast. Celui-ci ne doit pas se lancer sans que l’utilisateur l’ait
explicitement décidé. L’utilisateur doit pouvoir interrompre le déroulement du
podcast à tout moment. Le système doit également le renseigner sur la durée du
podcast, le temps restant et un indicateur de progression du chargement. L’utilisateur
doit enfin pouvoir contrôler le volume sonore.
Recommandé Il est recommandé de mentionner pour chaque document audio la taille du fichier
ainsi que son format et sa durée.
Utile Il est conseillé d’associer au podcast un titre, une date de création ainsi qu’un bref
descriptif du contenu audio.
Utile Il est conseillé de prévoir une rubrique dédiée aux conditions d’utilisation ainsi
qu’une liste présentant le matériel nécessaire à l’écoute du podcast.
Recommandé Il faut prendre en compte les spécificités du matériel audio de l’internaute en mettant
à disposition :
un mode d’emploi détaillant pas-à-pas la procédure permettant d’accéder au
contenu audio ;
de questions-réponses sur le téléchargement du podcast au sein de la rubrique
« questions fréquentes » (FAQ).
Exemple de mode de questions réponse et de mode d’emploi :
Foire aux questions
Qu'est-ce que le podcasting?
Il s’agit d’un mode de diffusion de contenus sonores ou audiovisuels qui permet de télécharger automatiquement sur son ordinateur, à l'aide de logiciels spécialisés, les
émissions préalablement sélectionnées, et par la suite de les transférer sur un baladeur numérique pour les écouter en différé. La sélection se fait au moyen d'un
abonnement à des listes de téléchargements.
Comment s'abonner?
1- Pour accéder aux contenus …….. , vous avez besoin d'un ordinateur avec accès Internet et d'un logiciel qui puisse lire et télécharger les fichiers MP3, M4A et M4V. Par
exemple, le logiciel gratuit iTunes (à partir de la version 6) vous permet de vous abonner et d'écouter vos émissions baladodiffusées.
2- Suivez le mode d’emploi ci-dessous afin de compléter votre abonnement.
3- Pour pouvoir écouter les podcasts sur votre baladeur numérique, il vous suffit de brancher ce dernier à votre ordinateur et de procéder à un transfert manuel ou
automatique.
Quand vos produits sont-ils disponibles?
…… (préciser ici la nature des contenus, la fréquence de mise à jour, ainsi que la profondeur des archives disponibles)
Dois-je avoir un lecteur numérique portatif (baladeur) pour écouter les émissions en baladodiffusion?
Il n'est pas nécessaire d'avoir un lecteur numérique portatif pour écouter ces émissions. Elles peuvent être écoutées directement sur votre ordinateur personnel au moment
qui vous convient.
Dois-je avoir un iPod comme lecteur numérique?
Tout lecteur numérique portatif peut être utilisé.
Quelles sont les technologies nécessaires pour consulter les contenus vidéo?
Si vous désirez consulter les contenus vidéo sur un baladeur numérique, vous devez disposer d'un baladeur qui supporte le format vidéo.
Y aura-t-il d'autres émissions ajoutées en baladodiffusion?
Préciser la future politique prévue
Quelles sont les conditions d’utilisation
Préciser les conditions d’utilisation
Mode d'emploi

Téléchargez et installez le logiciel de podcast de votre choix sur votre ordinateur. Ouvrez le logiciel et sélectionnez la fonction : "s’abonner au Podcast" (ou équivalent)

Dans la fenêtre qui s’ouvre, recopiez l’adresse URL du flux que vous souhaiter recevoir.

Le logiciel affiche alors la liste des documents vidéo et audio disponibles à l’écoute. Vous devrez les télécharger afin de les écouter et éventuellement les exporter vers

votre baladeur MP3.

Selon les options que propose votre logiciel, vous serez prévenu automatiquement ou manuellement des mises à jour du flux.

L’équipe du site à votre écoute : si vous avez des demandes spécifiques concernant les podcasts, vous pouvez contacter le webmestre.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 76/115
Que disent les référentiels généraux ?
RGI 3.12 – Volet technique : Formats pour les séquences sonores.
3.15 – Volet technique : Diffusion en mode continu de flux audio ou
vidéo
2.8.2. Objets vidéo
La vidéo doit être utilisée avec modération compte tenu des limites en termes de bande passante
et seulement dans des contextes particuliers (exemple : présentation d’un échantillon de contenu
cinématographique ou télévisuel, démonstration d’un phénomène dans une perspective
pédagogique ou informative; etc.).
Il existe deux manières de proposer de la vidéo sur un site Internet :
le fichier est proposé en téléchargement sur le site ;
le fichier est proposé en lecture continue sur le site (streaming).
Dans le premier cas, l’utilisateur télécharge directement la vidéo sur son poste de travail. Dans
le second, la vidéo est lue directement sur le site au moyen d’un plug-in (Windows Media,
Flash, Real, QuickTime, etc.).
Recommandé Une vidéo doit être accompagnée d’un bref descriptif de son contenu consultable
avant le visionnage. Pour des raisons d’accessibilité, il faut également fournir
l’équivalent textuel des contenus vidéo.
Recommandé Dans le cas d’une lecture en continu sur le site, l’utilisateur doit conserver le contrôle
du déroulement de la vidéo et du volume sonore de la vidéo. La vidéo ne doit pas se
lancer sans que l’utilisateur l’ait explicitement décidé. L’utilisateur doit pouvoir
interrompre le déroulement de la vidéo à tout moment. Le système doit également le
renseigner sur la durée de la vidéo, le temps restant et un indicateur de progression du
chargement.
Utile Il est conseillé d’utiliser la lecture en continu des vidéos qui ne nécessite pas de
téléchargement ni de lecteur spécifique en dehors d’un plug-in courant.
Le téléchargement de la vidéo sera plutôt réservé aux vidéos pour lesquelles un haut
niveau de qualité de l’image est recherché.
Utile Il est conseillé de sous-titrer les vidéos pour des raisons d’accessibilité.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 77/115
Exemple de vidéo en lecture continue
Que disent les référentiels généraux ?
RGI 3.13 – Volet technique : Formats pour la vidéo basse définition
3.14 – Volet technique : Formats pour l’audiovisuel et la vidéo HD
3.15 – Volet technique : Diffusion en mode continu de flux audio ou
vidéo
2.8.3. Animations
Le recours aux animations est très courant pour la mise en valeur de certains éléments ou les
explications à caractères didactiques (visite guidée, explication d’un processus, etc.).
Recommandé L’utilisateur doit toujours conserver le contrôle de l’animation. Celle-ci ne doit pas
se lancer sans l’accord explicite de l’utilisateur qui peut également l’arrêter à tout
moment.
Si le site propose une introduction animée en page d’accueil, il faut lui fournir les
moyens d’accéder directement au contenu du site sans visionner toute l’animation.
Recommandé Si l’animation comporte des éléments sonores, il faut proposer à l’utilisateur un
système permettant de désactiver le son.
Utile Il est conseillé de découper les animations didactiques en tranches logiques de façon
à ce que l’utilisateur puisse organiser son parcours dans l’animation via un système
de navigation propre (menu, précédent, suivant, etc.).
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 78/115
Utile Il est conseillé de ne jouer les animations qu'une seule fois, afin que l'utilisateur les
remarque lors des premières secondes de sa visite, et puisse continuer son exploration
du reste du contenu sans être perturbé.
Utile Le recours au clignotement et au défilement est déconseillé pour des raisons
d’accessibilité.
S’ils sont utilisés dans un contexte particulier, ils doivent s’arrêter après un court laps
de temps et ne pas se poursuivre indéfiniment car un mouvement permanent nuit
considérablement à la lecture du texte.
Que disent les référentiels généraux ?
RGI 3.10 – Volet technique : Formats pour l'animation simple d’images
3.11 – Volet technique : Formats pour l'animation complexe d’images
2.9. BANNIERES PROMOTIONNELLES E-REGIE
E-régie est un dispositif informatique (logiciel+serveur) de gestion de campagnes
promotionnelles qui permet de programmer l’affichage dynamique des bannières dans les
espaces prévus sur les sites Internet gouvernementaux. Ce dispositif piloté par le Service
d’information du Gouvernement permet (SIG) de :
Diffuser les campagnes ministérielles qui comportent un volet en ligne sur les sites du
dispositif E-régie pour les faire bénéficier de l’audience des sites gouvernementaux.
Permettre de diffuser des bannières d’information de manière instantanée en cas de
communication de crise sur tous les sites « E-régie ».
Favoriser le trafic à l’intérieur de la toile gouvernementale (diffusion de campagnes
spécifiques en fonction des affinités et des usages constatés des internautes des
différents sites de la toile gouvernementale, création de campagnes ad hoc pour les
sites gouvernementaux ne disposant pas de budget de communication Web).
Analyser et suivre le plus finement possible les taux de transformations de ces
campagnes en vue de leur pilotage fin et dynamique.
En cas de communication de crise, une procédure de réquisition de l’espace bannière peut être
décidée. Cette procédure entraîne la suspension des campagnes en cours au profit d’une
campagne de communication de crise sur tout ou partie des sites participant à E-régie. La
procédure d’intégration des sites Internet publics au dispositif E-régie est la suivante :
Le webmestre ou le directeur de la communication du site émetteur fait part au SIG de
sa volonté d’intégrer le projet.
Le prestataire du SIG propose plusieurs maquettes d’intégration de bannières dans la
page d’accueil. Les maquettes sont transmises par le SIG.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 79/115
Le webmestre ou le directeur de la communication choisit un format de bannière à
intégrer à la page d’accueil du site.
La balise correspondant au format de bannière est transmise au webmestre par le SIG.
La balise est à intégrer dans la page d’accueil à l’endroit où le webmestre souhaite
faire apparaître la bannière.
La demande de diffusion d’une nouvelle campagne devra faire l’objet d’une demande
du directeur de la communication du ministère au directeur du SIG.
Pour toute demande de suppression d’une campagne, le directeur de la communication
adresse sa demande au directeur du SIG.
La diffusion d’une bannière via le dispositif E-régie doit respecter le planning suivant :
jusqu’au 15 du mois : transmission au SIG des projets de campagnes pour le mois
suivant ;
entre le 15 et le 20 du mois : réunion au SIG entre le département Campagnes et le
département Multimédia pour finaliser le plan de programmation du mois suivant ;
entre le 20 et le 25 du mois : envoi du plan de programmation du mois suivant pour
validation ;
entre le 25 et le 31 du mois : programmation des campagnes par le SIG ;
entre le 1er et le 5 du mois suivant : lancement des campagnes. Envoi des rapports
statistiques par site et/ou campagne aux webmestres concernés.
Recommandé Les bannières E-régie doivent être au format GIF (ou GIF animé) et correspondre aux
standards de l’IAB (Internet Architecture Board) :
468×60, 25 Ko ;
728×90, 25 Ko ;
250×250, 25 Ko ;
180×150, 25 Ko.
Recommandé Les pages d’accueil et les pages les plus consultées des sites arborent des bannières
E-régie visibles sans avoir recours à l’ascenseur vertical. Au maximum, 10
campagnes simultanées peuvent figurer sur un site.
Recommandé Les bannières doivent intégrer la « Marianne » pour que l’internaute puisse identifier
la campagne comme une campagne gouvernementale, avec le nom du ministère ou le
nom du site.
Recommandé Les bannières intègrent un visuel ou un texte pour inciter au clic vers une page
spécifique du site émetteur de la bannière.
Recommandé Les bannières intègrent à la fin des séquences une signature avec l’URL du site de
l’émetteur (éventuellement, ajouter « cliquez ici »).
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 80/115
Utile Les bannières doivent respecter un scénario de 3 à 4 étapes maximum. Les
animations excessives risquant de perturber le message sont à éviter. Les animations
présentant des difficultés d’accessibilité (clignotement, défilement rapide) doivent
proposer une alternative.
Utile Les bannières transmettent un message simple qui ne défile pas trop rapidement.
Utile Marquer la page de destination de la campagne (stat@gouv). Voir à ce sujet le
chapitre 1.7 - Stat@gouv.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 81/115

REGLES SUR LES CONTENUS

Cette troisième partie s’attache à définir les règles d’ergonomie des contenus courants des sites
Internet : la page d’accueil, les pages à vocation éditoriale (articles), etc. Elle aborde également
un contenu très spécifique aux sites Internet publics : les démarches en ligne et les fonctions
d’aide en ligne qui y sont associées. Enfin, le chapitre sur les contenus 2.0 constitue un résumé
des bonnes pratiques liées au Web 2.0, domaine où les standards commencent seulement à
émerger.
3.1. PAGE D’ACCUEIL
La « page d’accueil » désigne la principale page d'un site Web, accessible par le nom de
domaine (URL) et permettant l'accès aux autres pages du site. La page d’accueil constitue une
vitrine du site : elle doit donc donner au visiteur une vision globale du site, lui offrir un accès à
l’ensemble des contenus et le renseigner sur l’émetteur du site, les contenus abordés et les
éventuels services proposés.
La page d’accueil est un point d’entrée fréquent dans le site et est de loin la page la plus visitée
du site. Sa perception est donc déterminante pour la navigation dans le site car elle conditionne
la visite des pages de contenus à l’intérieur du site.
3.1.1. Facilités d’accès à la page d’accueil
La facilité d’accès à la page d’accueil doit être pris en compte tant dans le cas d’un premier
accès (lien depuis un moteur de recherche ou un autre site, saisie manuelle de l’URL, etc.) que
dans le cas d’un accès récurrent via les signets (favoris) du navigateur ou l’historique de
navigation. Un accès facile à la page d’accueil permet d’optimiser le trafic vers les pages
intérieures du site ; l’objectif est de perdre le moins possible de visiteurs dès la première page
du site et de les inciter au contraire à naviguer à l’intérieur du site.

Recommandé La page d’accueil est accessible depuis l’URL racine du nom de domaine et ne
comporte pas d'autres extensions.
Recommandé Il est recommandé de bien spécifier l’attribut « TITLE » affecté à la page d’accueil
afin d’en optimiser le référencement (pertinence des résultats des moteurs de
recherches), sa visibilité (affichage dans les navigateurs) et son accessibilité (nom
proposé par défaut dans les signets ou favoris). Ce titre doit renseigner sur l’ensemble
des contenus présents sur le site.
Utile Il est conseillé d’optimiser le temps de chargement de la page d’accueil : les tests en
utilisabilité préconisent un temps de chargement inférieur à 3 secondes, ce qui
suppose un poids de page compris entre 100 et 250 Ko (le temps de chargement
dépend également de la nature du matériel et de la connexion de l’utilisateur).
La balise « ALT » des images présentes sur la page d’accueil doit être renseignée,
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 82/115
notamment celles supportant la navigation afin de permettre aux utilisateurs qui
connaissent déjà le site de cliquer sur les boutons de navigation avant l’affichage
complet des images.
Utile Il est conseillé d’utiliser pour les sites à fort trafic une « favicône » afin de renforcer
l’identité visuelle du site. Une favicône est un pictogramme qui s’affiche avant l’URL
dans la barre d'adresses du navigateur, dans la liste des favoris et dans l'historique de
navigation. Cette marque visuelle permet de retrouver le site plus facilement dans une
liste de site et contribue à renforcer le sentiment de « familiarité » avec le site.
Exemple de favicône pour le site service-public.fr
Utile Il est conseillé de ne pas avoir recours à des pages d’introduction s’intercalant avant
la véritable page d’accueil (page intermédiaire présentant souvent une animation à
fort pouvoir communiquant). Ce type de page impose une étape supplémentaire
inutile et souvent dissuasive à l’utilisateur avant l’accès aux contenus.
3.1.2. Valorisation des contenus de la page d’accueil
La présentation des contenus de la page d’accueil est cruciale pour inciter l’utilisateur à
naviguer dans le site. La page répond à la fois à une fonction de navigation dans le site et aux
besoins de valorisation des contenus présents sur le site. Elle résulte toujours d’un bon
compromis entre une présentation exhaustive des fonctions principales du site, les impératifs de
lisibilité (la page d’accueil ne doit pas être surchargée) et le temps de chargement de la page.
Recommandé La page d’accueil est le point d’entrée du site et doit se distinguer des autres pages
par une mise en page spécifique tout en restant cohérente avec l’ensemble du site : les
systèmes de navigation et les styles adoptés sur la page d’accueil doivent ainsi être
repris sur l’ensemble du site.
Recommandé Toutes les pages du site doivent comporter un lien vers la page d’accueil. Il est
courant d’appliquer ce lien sur le logo ou sur un bouton/icône « Accueil ». Ce lien
doit être désactivé sur la page d’accueil elle-même.
Utile Il est conseillé d’utiliser les principes de remontées d’informations (liens contextuels,
transversaux etc.) pour dynamiser la page d’accueil et permettre à l’utilisateur
d’accéder rapidement à des contenus spécifiques.
Pour les sites à fort contenu éditorial, la page d’accueil ne doit pas être statique mais
doit au contraire refléter la vie du site et donner des indications implicites sur les
mises à jour récentes.
Il est conseillé de mettre en avant certaines rubriques afin d’inciter l’utilisateur à
« aller plus loin » et fournissant des liens transversaux, des menus contextuels, des
indices sur le contenu des rubriques ou en donnant un aperçu de certains articles.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 83/115
Utile Il est conseillé d’optimiser la présentation de la page d’accueil afin de permettre aux
utilisateurs de retrouver les informations facilement et de réduire ainsi le temps de
recherche.
Pour les pages d’accueil ayant un recours à un ascenseur vertical, il est donc conseillé
de faire apparaître les contenus les plus recherchés dans la première partie de la page
d’accueil sans que l’utilisateur n’ait besoin d’utiliser l’ascenseur.
3.1.3. Identité commune de la page d’accueil des sites publics
La définition d’une « marque commune » caractéristique des sites Internet publics passe aussi
par l’harmonisation des contenus présents sur les pages d’accueil des sites Internet publics. A
l’heure où la ressemblance de certains sites commerciaux avec des sites publics perturbe les
repères, le respect de principes communs dans la présentation des pages d’accueil vise à
renforcer la confiance des usagers envers les sites Internet publics.
Les recommandations en matière de présentation des pages d’accueil portent uniquement sur les
contenus, le graphisme restant à l’initiative de l’administration émettrice. Certaines règles sont
spécifiques à la sphère gouvernementale. Elles sont alors signalées par le
pictogramme Marianne : .
3.1.3.1. Le système de navigation principal
Recommandé Le système de navigation principal (bandeau horizontal ou vertical de navigation de
premier niveau) est présent dès la première page du site et son positionnement est
constant sur l’ensemble du site. Afin de faciliter le repérage, la rubrique courante est
mise en valeur par une distinction graphique (surbrillance, changement de couleur).
Exemple de système de navigation principale
(sites www.premier-ministre.gouv.fr et pme.service-public.fr)
3.1.3.2. Les liens externes vers des sites publics
Recommandé Les liens externes vers d’autres sites publics sont regroupés dans une zone spécifique
sur la page d’accueil.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 84/115
Recommandé Un lien permet notamment d’accéder aux sites service-public.fr et Legifrance dès la
page d’accueil, conformément à la circulaire Premier ministre du 7 octobre 1999
relative aux sites Internet des services et des établissements publics de l’Etat.
3.1.3.3. Le bloc Marianne
Recommandé L’émetteur du site est signalé par un bloc marque situé en haut à gauche des pages du
site. Dans le cas des sites gouvernementaux, le bloc marque reprend la Marianne qui
marque l’appartenance à la sphère gouvernementale.
Recommandé Si le site dépend de plusieurs émetteurs, ceux-ci doivent être présents dans le bloc
marque.
Recommandé La typographie à utiliser pour le nom de l'administration est le TIMES NEW
ROMAN, en toutes capitales. Pour le bloc marque, la typographie doit venir en
défonce blanche sur un fond de couleur, ou être en couleur sur un fond blanc.
Exemples de bloc-marques :
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 85/115
Recommandé Les éventuels partenaires du site sont signalés en bas de la page d’accueil du site, en
respectant le format du bloc-marque de l’administration émettrice.
Exemple de rappel des partenaires du site en bas de page :
Utile Les administrations peuvent avoir recours à un logotype spécifique (en dehors du
bloc-marque) si celui-ci est bien identifiable et utilisé de façon constante dans tous les
éléments de communication.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 86/115
3.1.3.4. Les bannières E-régie
Recommandé La page d’accueil des sites gouvernementaux arbore des bannières E-régie. Celles-ci
doivent être visibles sans avoir recours à l’ascenseur. Voir à ce sujet le chapitre 2.9 -
Bannières E-régie.
3.1.3.5. La signature du site
Certains sites peuvent avoir recours à une signature (également appelée « baseline »), c'est-àdire une petite ligne ou phrase d’accroche résumant le positionnement du site. Dans ce cas, la
signature répond à certaines caractéristiques.
Utile Le recours à une signature permet de contextualiser un site dont le positionnement
n’est pas explicite. En cas de recours à une signature, celle-ci est courte (quelques
mots), explicite, sobre, apposée au bloc-marque (en dessous ou à droite) et non
animée.
3.1.3.6. Les fonctions transverses
Les fonctions transverses, également appelées liens utilitaires, permettent d’aider l’utilisateur
dans sa navigation au sein du site (voir à ce sujet le chapitre 3.1.3.1 – Zone de fonctions
transverses). Ces fonctions sont regroupées dans une zone située généralement en haut à droite.
Utile En fonction de la nature et des caractéristiques du site, cette zone de fonctions
transverses contient les éléments suivants :
le moteur de recherche (voir à ce sujet le chapitre 3.2.4 – Moteur de
recherche) ;
un bloc d’authentification si le site dispose d’un accès restreint (voir à ce
sujet le chapitre 1.5 – Sites accessibles après authentification) ;
le choix de la langue si le site propose des contenus traduits (voir à ce
sujet le chapitre 1.3.6 – Aspects linguistiques) ;
un lien « contact » si l’émetteur du site souhaite valoriser sa politique
d’accueil (voir à ce sujet le chapitre 3.2.3 – Page « Contact »).
3.1.3.7. Le pied de page
Le pied de page est, comme son nom l’indique, situé en bas de la page d’accueil et présent sur
toutes les pages du site. En fonction de la nature et des caractéristiques du site, le pied de page
contient généralement les éléments suivants :
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 87/115
les mentions légales ;
le plan du site ;
un lien vers la page « presse » ;
un lien vers les horaires et le plan d’accès si l’émetteur du site reçoit du public ;
un lien vers la page accessibilité (voir à ce sujet le chapitre 1.3.4 – Pictogrammes et
icônes) ;
un rappel du nom de l’émetteur du site et l’année de réalisation ou de refonte du site ;
un lien vers la page « répertoire des informations publiques » ;
un lien « contact » si l’émetteur du site ne souhaite pas particulièrement valoriser sa
politique d’accueil (voir à ce sujet le chapitre 3.2.3 – Page « Contact ») ;
un lien vers la page d’aide ou la page FAQ, si elles existent.
Recommandé Les mentions légales sont rappelées dans le pied de page. Elles contiennent les
informations suivantes :
1) Informations éditoriales
Doivent figurer sur les sites Internet publics un ensemble d’informations obligatoires
analogues à l’ours d’une publication papier traditionnelle : publication spécifique des
noms, prénoms et qualités du/des directeurs de la publication, ainsi que les noms,
prénoms et qualités du/des membres de l’équipe éditoriale et, le cas échéant, ceux du
responsable de la rédaction.
De même, doivent être indiqués, pour les personnes morales, leur dénomination ou
leur raison sociale et leur siège social, leur numéro de téléphone.
Pour éviter le spam, il est recommandé de ne pas mentionner les adresses
électroniques.
2) Informations relatives au traitement de données à caractère personnel
Dès lors que des données personnelles (au sens de l’article 2 de la loi n°78-17 du 6
janvier 1978 relative à l'informatique, aux fichiers et aux libertés) sont collectées sur
un site Internet, il est nécessaire :
d’indiquer quelles données personnelles sont collectées ;
les droits des internautes associés à cette collecte (rectification,
opposition, désinscription des listes de diffusion).
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 88/115
Exemple de rédaction :
Ce site internet a fait l’objet d’une déclaration à la Commission Nationale de
l’Informatique et des Libertés (CNIL) sous le n°[…] . Conformément aux dispositions
de la loi n°78-17 du 6 janvier 1978 relative à l’in formatique, aux fichiers et aux
libertés, vous disposez d’un droit d’accès, de modification, de rectification et de
suppression des données qui vous concernent. Ce droit s’exerce, en justifiant de son
identité […] par voie postale : (…), par courrier électronique :
contact[arobase]siteinternet.gouv.fr ]
De plus, le traitement de ces données doit correspondre à une finalité légitime, et ne
pas servir à d’autres fins que celles pour lesquelles les données sont initialement
collectées et traitées.
La loi impose la signalisation des personnes responsables du traitement des
données ainsi que l’indication des moyens dont dispose la personne pour lui
permettre de faire valoir les droits susmentionnés.
Ce site internet a fait l’objet d’une déclaration à la Commission Nationale de
l’Informatique et des Libertés (CNIL) sous le n°[…] . Conformément aux dispositions
de la loi n°78-17 du 6 janvier 1978 relative à l’in formatique, aux fichiers et aux
libertés, vous disposez d’un droit d’accès, de modification, de rectification et de
suppression des données qui vous concernent. Ce droit s’exerce, en justifiant de son
identité […] par voie postale : (…), par courrier électronique :
contact[arobase]siteinternet.gouv.fr ]
De plus, le traitement de ces données doit correspondre à une finalité légitime, et ne
pas servir à d’autres fins que celles pour lesquelles les données sont initialement
collectées et traitées.
La loi impose la signalisation des personnes responsables du traitement des
données ainsi que l’indication des moyens dont dispose la personne pour lui
permettre de faire valoir les droits susmentionnés.
3) Informations relatives aux prestataires d’hébergement
Doivent être publiés sur le site, le nom, la dénomination ou la raison sociale, l’adresse
et le numéro de téléphone de l’hébergeur du site et, le cas échéant, de l’hébergeur de
la liste de diffusion, de l’organisateur des éventuels “chats”, du gestionnaire des
statistiques de fréquentation du site.
4) Informations relatives aux données et aux informations publiques
Depuis l’ordonnance n° 2005-650 du 6 juin 2005 relative à la liberté d’accès aux
documents administratifs et à la réutilisation des informations publiques, les données
publiques peuvent être réutilisées et retraitées mais il faut en garantir leur intégrité. Il
est donc nécessaire d’indiquer les conditions de réutilisation de ces données, avec la
possibilité pour l’Administration d’indiquer la mention « tous droits réservés » au bas
de chaque écran, précisant la propriété de l’Administration sur le contenu de son site.
En cas de diffusion de photographies, vidéos, logos sur votre site, doivent être
respectées la législation en matière de droit d’auteur, avec notamment l’indication des
sources.
5) Informations relatives aux liens hypertextes
Lorsque des liens renvoient l’internaute vers des sites non publics, il est préférable de
rappeler que le service en charge du site public ne peut être tenu pour responsable des
contenus vers lesquels ces liens pointent.
6) Informations relatives aux espaces de discussion (forum)
Sur la page d’accueil des forums de discussion, il est recommandé d’indiquer, outre
le thème du forum, le type de modération, l’utilisation et l’archivage éventuels des
contributions ainsi que les modalités de clôture de l’espace de discussion.
7) Conformité avec la charte ergonomique
Il est possible de faire mention du niveau de conformité du site Internet avec la charte
ergonomique dans cette section.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 89/115
Recommandé Le plan du site fait l’objet d’un lien dans le pied de page.
Le plan du site donne aux utilisateurs une vision globale de l’architecture du site et
constitue un moyen alternatif de navigation. Il permet de repérer la partie du site
susceptible de contenir l’information recherchée.
Recommandé La rubrique ou la page « presse », lorsqu’elle existe, est rappelée dans le pied de
page.
Cette règle n’interdit pas aux sites à forte notoriété de valoriser cette rubrique en
premier niveau d’information, accessible dès le système de navigation principal.
Recommandé Les établissements recevant du public fournissent dans le bas de page de leur site
Internet un lien vers les horaires d’ouverture et le plan d’accès à l’établissement.
Recommandé La page accessibilité est signalée dans le bas de page.
Cette page liste les pages ou secteurs du site dérogeant aux exigences d’accessibilité
(cf. document d’accompagnement du RGAA). Voir à ce sujet le chapitre 1.3.4 –
Pictogrammes et icônes.
Pour les sites Internet ayant déposé un dossier de conformité RGAA, cette page est
également accessible par le pictogramme RGAA.
Recommandé Le nom de l’émetteur du site et l’année de réalisation (ou de refonte du site) sont
rappelés dans le pied de page.
Il peut être rappelé que le contenu informationnel du site est protégé par les
dispositions du code de la propriété intellectuelle. Il est préférable d’éviter la
l’utilisation du terme copyright qui correspond à une notion de droit anglo-saxon.
Recommandé Les administrations qui produisent ou détiennent des informations publiques doivent
mettre en ligne sur leur site Internet un répertoire des principaux documents dans
lesquels ces informations figurent.
Ce répertoire est accessible dans une rubrique (ou page) intitulée « Répertoire des
informations publiques ». Un lien vers cette rubrique (ou page) figure au minimum
dans le pied de page.
Pour les administrations disposant d'un répertoire atteignant une taille conséquente ou
souhaitant lui donner une plus grande visibilité, il peut s'avérer utile de créer une
rubrique directement accessible depuis le système de navigation principal du site.
Dans le cas où une administration exploite plusieurs sites Internet en plus de son site
institutionnel, il est possible de ne faire figurer le répertoire des informations
publiques relevant de cette administration que sur le site principal et que l'ensemble
des liens de bas de pages des différents sites pointent vers ce répertoire.
Utile Le lien « contact », si la politique d’accueil de l’émetteur n’est pas particulièrement
valorisée, peut figurer dans le pied de page.
Utile La page « Aide » et / ou la page « FAQ » est indispensable pour les services en ligne
et peut être rappelée dans le bas de page.
La page FAQ répond aux principales questions posées par les utilisateurs et est
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 90/115
accompagnée d’un dispositif de remontée des questions (voir à ce sujet le chapitre
3.4.3 – Foire aux questions (FAQ)).
3.1.3.8. Exemple de zoning
L’image ci-dessous constitue un exemple de zoning d’une page d’accueil respectant les
recommandations énoncées plus haut.
Exemple de zoning de page d’accueil type (à titre indicatif)
Pied de page
Contenu principal
Contenu
contextuel
Système de navigation principal
Fonctions transverses
Recherche
Pictogramme
RGAA
Pictogramme
label Marianne
Signature
Langues Authentification Contact
Bannière
E-régie
Contenu
contextuel
Mentions légales Plan du site Presse Horaires et plan d’accès
Accessibilité Répertoire des informations publiques Contact FAQ, aide
Liens externes
(…)
Autres sites publics
Nom de l’administration - 2008
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 91/115
3.1.4. Page d’accueil des démarches en ligne
La page d’accueil des sites dédiés à la réalisation d’une démarche en ligne doit respecter
certains principes spécifiques. L’objectif de cette page d’accueil est de démystifier la démarche
et sa complexité en permettant à l’utilisateur d’anticiper la succession des étapes. Elle doit
également aider l’utilisateur à évaluer la nature et la quantité d’informations qu’il aura à saisir,
et le temps que cela lui prendra en employant un ton pédagogique et rassurant.
Page d’accueil de la démarche de demande d’acte d’état-civil :
Recommandé La page d’accueil doit être structurée en deux blocs nommés comme suit :
« Avant de commencer » permettant succinctement de présenter la démarche
ainsi que les conditions administratives et pièces nécessaires ;
« Vous êtes prêt ? » informant du temps nécessaire (estimation), présentant
les étapes, les conditions générales d’utilisation et proposant un accès simple
à la démarche en ligne.
Recommandé Le bouton « Commencer » doit être mis en valeur pour inciter l’utilisateur à initier la
démarche.
Recommandé La hauteur de la page d’accueil doit être limitée à la hauteur d’un écran 1024×768. Le
bloc « Avant de commencer » doit être visible sans ascenseur en 800×600.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 92/115
Recommandé Les pré-requis techniques doivent être résumés dans le bloc « Avant de commencer ».
Si besoin, il est possible d’avoir recours à un lien complémentaire (En savoir plus)
vers une page dédiée.
Recommandé Le nombre d’étapes de la démarche doit être indiqué (à défaut, une indication sur les
grands moments de la procédure). Ces étapes doivent adopter un titre en langage
courant (30 caractères maximum).
Recommandé Le format du produit final (fichier à imprimer ou transmission de demande
électronique ou autre) doit être indiqué à l’utilisateur dès la page d’accueil.
Utile Il est conseillé de donner la durée approximative d’achèvement pour une personne
non experte.
3.2. AUTRES PAGES SPECIFIQUES
3.2.1. Pages de contenu type « article »
Les sites à fort contenu éditorial se sont beaucoup développés ces dernières années avec
l’apparition d’outils dédiés à la publication et à la gestion de contenu (en anglais CMS pour
Content Management System). Ce type d’outil dispose de fonctionnalités de publication et offre
une interface d'administration permettant à un administrateur et/ou rédacteur de site de créer,
organiser et partager les différentes rubriques et contenus qui les composent. La publication des
articles s’appuie sur un processus régissant les règles de validation avant la publication
(worfklow).
Que disent les référentiels généraux ?
RGAA 11.4 : En dernier recours, fournir une version alternative accessible
13.8 : Rédiger les contenus de façon simple, logique et ordonnée
14.1 : Utiliser un langage clair et simple
14.2 : Proposer des illustrations visuelles ou sonores
3.2.1.1. Présentation d’un contenu de type article
Dans un site à fort contenu éditorial, le contenu de base est l’article. La présentation d’un
contenu de type article répond à quelques principes ergonomiques de base, en particulier les
principes liés à lisibilité cognitive (hiérarchisation et regroupement de l’information, cohérence
du vocabulaire, longueur des textes, etc.). Voir à ce sujet le chapitre 1.3.5 – Lisibilité cognitive.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 93/115
Recommandé Les articles du site doivent adopter une présentation homogène et reprendre les
mêmes éléments sur tout le site.
Les éléments de base d’un article respectent les règles suivantes :
Utile Le titre : il est court, explicatif et suscite l’intérêt (la moitié des lecteurs délaissent
une page dont le titre ne leur parait pas intéressant).
Utile La date : il est vivement conseillé de faire figurer la date de publication des articles
(ou de mise à jour en cas de modification). Compte tenu du taux très élevé de
renouvellement des informations sur Internet, la date de l’article permet de
matérialiser la « pertinence » et l’actualité du contenu de l’article.
Utile Le chapeau (optionnel) : il s’agit d’un texte court (souvent en caractère gras) sous le
titre de l’article. Il résume l’essentiel de la page en 2 à 5 lignes. Il permet de
renseigner l’utilisateur sur le contenu de l’article. Le chapeau constitue une accroche
et doit donner envie de lire l’article.
Utile Les sous-titres (optionnel) : il est conseillé de sectionner le texte via des sous-titres
donc la fonction est d’entretenir l’attention du lecteur et préserver la dynamique de
lecture. Les sous-titres doivent être distingués visuellement du reste du texte et
adoptent des styles différents en fonction de la hiérarchie du sous-titre.
Utile Le corps de texte (paragraphes) : il est conseillé de découper le corps de texte en
paragraphes courts séparés régulièrement par des sous-titres. Chaque paragraphe doit
être court et développe en général une seule idée principale. Il est à noter que la
majorité des utilisateurs ne lit pas les paragraphes en entier mais effectue une lecture
en diagonale destinée en extraire les idées essentielles. Une présentation des éléments
sous forme de listes, tableaux, etc. lorsque cela est possible permet de fournir une
vision synthétique des contenus adaptée à la lecture rapide du Web.
Utile Les images (optionnel) : il est conseillé d’intégrer au moins une image par page pour
reposer l’œil du lecteur et susciter son attention. Les images doivent être à la fois
illustratives et explicatives ; elles comportent également une légende. Il faut veiller à
utiliser des images libres de droit.
Utile Les encadrés (optionnel) : pour « casser » les mises en page trop rigides, il est
conseillé d’utiliser des encadrés (cadre graphique, couleur de fond, police spécifique,
etc.) contenant un complément d’information ou une synthèse des éléments les plus
importants de l’article.
3.2.1.2. Longueur du texte
Les pages contenant beaucoup d’information sont longues et « mesurent » plusieurs pages
d'écran, ce qui rend la lecture ligne à ligne fastidieuse pour l’utilisateur. Il importe dans ce cas
de respecter quelques préconisations propres aux textes longs.
Recommandé Il est important de limiter la taille des pages à trois écrans en résolution 1024×768
avec une taille de police standard.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 94/115
Recommandé Pour les contenus de type « dossier », il est nécessaire de fournir à l'utilisateur une
navigation interne (exemple : un sommaire propre à la page) pour l'aider à lire la page
dans les meilleures conditions (pas plus de trois écrans en résolution 1024×768 entre
chaque lien de navigation interne). Une fois que l'utilisateur a lu la page, il est
important de lui donner la possibilité de revenir à ce sommaire.
Recommandé Pour les articles longs, il est indispensable de fournir à l'utilisateur des moyens de
contourner la lecture à l'écran, par exemple en lui proposant une version imprimable
ou un fichier PDF à télécharger.
Utile En cas de version imprimable ou téléchargeable (PDF) de l’article, il est conseillé de
soigner la mise en page de l’article, en ayant recours à une feuille de style CSS dédiée
à l’impression. Afin de resituer le contexte de la page imprimée, celle-ci reprend les
éléments suivants :
l’émetteur du site ;
la date de l’impression ;
l’URL de la page ;
le chemin de la page dans le site (fil d’Ariane par exemple).
Utile En cas de textes longs, les textes sont parfois découpés en plusieurs pages articulées
entre elles via un système de navigation minimaliste (page suivante, page
précédente). Cette pratique est déconseillée pour les articles car elle nécessite le
chargement successif des pages.
Son utilisation doit donc être limitée aux articles thématiques (dossiers). Il est
conseillé dans ce cas de proposer ce type de liens sous formes d’encadrés contextuels
du type « voir aussi ».
3.2.1.3. Fonctions associées à l’article
Un certain nombre de fonctions associées à l’article permettent d’enrichir les utilisations de
l’article. Les fonctions proposées peuvent être classées en trois catégories :
Les fonctions de base :

imprimer ;
envoyer l’article à un tiers ;
télécharger.

Les fonctions d’accessibilité :

augmenter la taille de la police ;
accéder à une version de l’article dans une autre langue.

Les fonctions interactives :

commenter ;
partager l’article sur une plateforme de réseau social ;

DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 95/115

s’abonner au flux RSS de la rubrique de publication de l’article ;
attribuer une note ou recommander l’article, etc.

Utile En cas d’utilisation des fonctions associées aux articles, il est conseillé de regrouper
ces fonctions dans une zone spécifique de l’article et d’associer à chaque fonction une
icône explicite.
Exemple de barre de fonctions associées à un article (lemonde.fr)
3.2.2. Plan du site
La présence d’un plan permet de répondre aux préférences de certains utilisateurs en terme de
stratégie de navigation, surtout dans le cas d’un site avec une architecture complexe.
Le plan doit permettre à l’utilisateur de repérer rapidement la partie du site la plus susceptible
de contenir l’information recherchée (sinon de trouver directement l’information). Le plan
reflète l’architecture du site et contient l’ensemble des catégories d’information présentées dans
les pages, de façon à ce que l’utilisateur puisse se rendre directement à un point donné du site
sans avoir à retourner à la page d’accueil.
Recommandé Le plan du site est rappelé dans le pied de page afin d’être accessible à partir de
toutes les pages du site.
Utile Il est conseillé de faire figurer une marque visuelle du type « Vous êtes ici » afin de
signifier à l’utilisateur l’endroit où il se trouve dans le site (page depuis laquelle le
plan du site est appelé).
Que disent les référentiels généraux ?
RGAA 13.3 : Fournir des informations sur l'architecture générale du site
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 96/115
3.2.3. Page « Contact »
La page « contact » (parfois appelée « Contact » ou « nous écrire ») permet aux utilisateurs
d’interagir avec l’émetteur du site en posant une question ou en donnant son avis ou faire des
suggestions à l’émetteur du site. Quelques principes de base s’appliquent à la mise en place d’un
tel dispositif.
Recommandé Il est conseillé de privilégier la mise en place d’un formulaire plutôt qu’une adresse
courriel cliquable du type contact@administration.gouv.fr .
Le formulaire évitera les allers et retours successifs entre l’utilisateur et l’émetteur du
site, permettra de recueillir des renseignements spécifiques afin d’améliorer le
traitement des questions (un objet de message pré-typé permet d’aiguiller le message
vers les bons répondants par exemple). De plus, une adresse de type SMTP présentée
sur une page Internet constitue une proie vulnérable pour les automates chargés de
collecter des banques d’adresses courriel. La mise en place d’un formulaire permet
donc de limiter les messages non désirés (spams).
Utile En cas de mise en place d’un formulaire, il est conseillé d’avoir recours à un
« captcha », c'est-à-dire un dispositif visuel destiné à se prémunir contre les questions
automatisées et intensives réalisées par des automates.
Exemple de formulaire avec captcha
Votre adresse électronique :
L’objet de votre message :
Votre message :
Si vous n’arrivez pas à lire le code,
cliquez-ici pour en créer un autre
Votre adresse électronique :
L’objet de votre message :
Votre message :
Si vous n’arrivez pas à lire le code,
cliquez-ici pour en créer un autre
Utile Le traitement des messages postés sur un site nécessite bien souvent une organisation
particulière et des outils de suivis spécifiques, sous peine de créer une attente chez
l’utilisateur à laquelle on ne pourra pas répondre convenablement.
Utile Si le volume de questions posées est important, il est conseillé de proposer une
présélection des sujets (ou objets) de question posées afin de mettre en place un
aiguillage des messages vers les répondants compétents.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 97/115
Accusé de réception
Si l’usager est identifié et conformément aux dispositions du référentiel général de Sécurité
(RGS) un accusé de réception est produit à l’intention de l’usager pour tout échange engagé
avec l’administration par voie électronique. En fonction du canal d’émission retenu (courriel,
courrier, SMS, etc.), l’accusé de réception peut revêtir des formes distinctes. Par ailleurs, son
contenu dépend du niveau de criticité de la transaction engagée entre l’usager et
l’administration. Dans certains cas, l’accusé de réception peut être précédé d’un accusé
d’enregistrement qui atteste la bonne réception de la demande mais n’engage pas
l’administration sur un délai de traitement.
La confirmation de transaction et l’accusé de réception sont des documents non éditables
soumis aux mêmes règles d’ergonomie et d’accessibilité que les autres formulaires. Les
mentions obligatoires portées par ces documents seront détaillées dans le décret du RGS relatif à
l’ordonnance 2005-1516. Les principes généraux suivants peuvent s’appliquer à ces documents :
la confirmation est présentée en ligne, via le navigateur ;
l’accusé de réception (respectivement d’enregistrement) est affiché à l’écran et peutêtre envoyé à l’usager par le canal retenu (courriel, courrier, SMS, etc.) et à l’adresse
qu’il aura préalablement fournie à l’administration (durant la démarche en ligne ou
lors d’une précédente démarche).
Recommandé Lorsqu’une question est posée par un usager via le formulaire de contact d’un site
Internet, un accusé de réception (ou d’enregistrement) est envoyé à l’utilisateur à
l’adresse qu’il aura préalablement fournie).
Que disent les référentiels généraux ?
RGS Chapitre 4 : Accusé d’enregistrement et de réception
3.2.4. Moteur de recherche
3.2.4.1. Généralités
La présence d’un moteur de recherche est conseillée dans le cas d’un site à fort contenu éditorial
ou avec une architecture complexe. Un moteur de recherche peu efficace, lent ou qui donne des
résultats non pertinents, nuit considérablement à la consultation du site et constitue une source
de gêne pour l’utilisateur.
Recommandé Le moteur de recherche est accessible à partir de toutes les pages du site et adopte une
présentation homogène (voir à ce sujet le chapitre 1.2.2.3 – Zone de fonctions
transverses).
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 98/115
Recommandé Le moteur de recherche se présente sous la forme d’une boîte de texte (et non pas
sous la forme d’un lien à cliquer).
Rechercher Recherche avancée OK
Utile L’usage le plus courant positionne le moteur de recherche en haut à droite de la page.
Utile L’utilisation du moteur de recherche peut être facilitée par le recours à l’autocomplétion, appelé aussi « complètement automatique », qui consiste à proposer des
saisies afin d’aider l’utilisateur dans ses choix. Elle permet donc d’accélérer la saisie
sur un site (recherche, formulaire…), ce qui rend la navigation moins pénible. Elle
permet également de limiter les erreurs de saisie, en entrant sans intervention
humaine les caractères qu’il reste à inscrire.
Exemple de complètement automatique
Ministère de l’Intérieur
Ministère de la Justice
Ministère de l’Education nationale
Services du Premier ministre
Ministère de l’Intérieur
Ministère de la Justice
Ministère de l’Education nationale
Services du Premier ministre
Administration : minist
Utile Il est conseillé de faire porter la recherche sur tous les contenus du site, y compris les
documents téléchargeables depuis le site (on parle alors de recherche plein texte).
3.2.4.2. Recherche avancée
Utile La présence d’une fonction de recherche avancée est conseillée dans le cas d’un site
au contenu riche et complexe afin de permettre à l’utilisateur de préciser sa requête
pour trouver plus rapidement l’information recherchée.
Utile Il est conseillé de fournir une aide à l’utilisation de la fonction de recherche avancée
sous la forme d’exemples et de consignes claires. Cette aide doit être rapidement
accessible (idéalement lisible depuis la page de recherche avancée).
Que disent les référentiels généraux ?
RGAA 13.7 : Faciliter l'usage du moteur de recherche
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 99/115
3.2.4.3. Résultat de la recherche
Recommandé Le résultat de la recherche doit être affiché sous forme d’une liste triée par ordre de
pertinence.
Recommandé Il est recommandé d’afficher les éléments suivants dans la page de résultat d’une
recherche :
le nombre de résultats de la recherche ;
le titre de la page contenant la chaine de recherche ;
un lien vers la page contenant la chaine de recherche ;
la nature du résultat de la recherche : page HTML ou document (s’il s’agit
d’un document, afficher le format et le poids du document).
Utile Il est conseillé d’afficher les éléments suivants dans la page de résultat d’une
recherche :
un (des) extrait(s) de la page de résultat comportant la chaine de recherche
(idéalement avec mise en exergue de la chaine recherchée) ;
un système de pagination permettant en cas de nombre de résultats
importants (idéalement, l’utilisateur peut paramétrer le nombre de résultats à
afficher par page) ;
un classement des résultats par catégorie de contenus si les contenus du site
sont catégorisés par typologie (par exemple : articles, vidéos, document
légaux, formulaires, etc.).
3.2.5. Répertoire des informations publiques
La loi n°78-753 du 17 juillet 1978 portant diverses mesures d’amélioration des relations entre
l’administration et le public et diverses dispositions d’ordre administratif, social et fiscal prévoit
que les administrations qui produisent ou détiennent des informations publiques tiennent à la
disposition des usagers un répertoire des principaux documents dans lesquels ces informations
figurent. Lorsque l’administration dispose d’un site Internet, elle rend le répertoire accessible en
ligne.
Recommandé Chaque document figurant dans le « répertoire des informations publiques » est
accompagné des renseignements suivants :
son titre exact ;
son objet (descriptif des informations) ;
la date de sa création ;
les conditions de sa réutilisation ;
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 100/115
le cas échéant, la date et l’objet de ses mises à jour.
Recommandé Le répertoire pourra également contenir d’autres renseignements, facultatifs, mais
très utiles pour les ré-utilisateurs des informations publiques, comme le format dans
lequel les informations sont disponibles.
Il pourra aussi indiquer le nom de la personne responsable de l’accès aux documents
administratifs et des questions relatives aux informations publiques afin de faciliter
son utilisation et le traitement des demandes de réutilisation par les demandeurs.
Dans le cas où la réutilisation des informations contenues dans le répertoire est
conditionnée par le paiement d’une redevance et la délivrance d’une licence, un lien
Internet pourra donner accès à la licence-type et aux informations concernant le
montant de la redevance.
Recommandé Dans un premier temps, il est recommandé de présenter les documents sous la forme
de simples tableaux ou listes.
Dans un souci de lisibilité par les divers publics et pour faciliter la navigation, il est
recommandé que l’objet du document reste bref. De même, il est recommandé que le
descriptif des modifications apportées à l’issue des mises à jour soit court.
Dans le même souci, il est aussi recommandé d'organiser le répertoire en fonction de
grandes thématiques et d’en limiter le nombre.
3.3. CAS DES DEMARCHES EN LIGNE
3.3.1. Présentation des démarches en ligne
Avant même le démarrage d’une procédure, le site émetteur doit faciliter l’accès aux démarches
en ligne et promouvoir les autres démarches en ligne présente sur le site.
Recommandé Un site proposant plusieurs démarches en ligne en fournit la liste globale avec une
description synthétique pour chaque démarche.
Recommandé Toute nouvelle démarche en ligne offerte sur un site public doit être signalée à la
Documentation Française au minimum une semaine avant sa mise en ligne pour mise
à jour du site service-public.fr. Il convient également de signaler si la démarche est
accessible via mon.service-public.fr.
Le signalement est réalisé via ce lien : http://interactif.service-public.fr/cgibin/posez_question/akio.cgi?page=posez_question/site.html
La démarche sera alors référencée dans les pages du portail et annoncée dans la lettre
hebdomadaire de service-public.fr.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 101/115
Utile Tout site proposant un ou des démarches en ligne fournit un lien vers vers la rubrique
« Démarches en ligne » de service-public.fr (http://www.servicepublic.fr/demarches24h24/). Cette rubrique référence l’ensemble des démarches en
ligne offertes aux particuliers dans la sphère publique.
3.3.2. Navigation dans la démarche
Etapes de la démarche
Une démarche en ligne est toujours structurée en étapes présentant le cheminement de la
procédure.
Exemple de présentation des étapes : le cas du changement d’adresse en ligne
Recommandé Le site doit afficher la liste des étapes de la démarche. Un traitement graphique
approprié permet de distinguer les étapes réalisées, l’étape en cours et les étapes à
venir.
Utile Une barre de progression indiquant à l’utilisateur le chemin réalisé et le chemin
restant constitue un indicateur apprécié afin d’aider l’utilisateur à optimiser la gestion
de son temps.
Exemple de barre de progression :

Récapitulatif de la démarche
Dans certains cas, la démarche en ligne est proposée au sein d’un site disposant déjà de son
propre système de navigation. L’interaction entre la navigation dans le site et la navigation dans
la procédure doit alors faire l’objet d’une attention particulière. Dans d’autres cas, la démarche
fait l’objet d’un site dédié qui dispose donc d’un seul système de navigation.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 102/115
Utile Pour la présentation (page d’accueil) d’une démarche en ligne, il convient d’utiliser la
structure de navigation du site global. Cela permet à l’utilisateur d’accéder aux autres
types de contenu. Mais une fois la démarche initiée, la barre d’étapes de la démarche
constitue l’unique système de navigation actif. Les menus de navigation autres que
ceux de la procédure ne sont plus accessibles ou sont provisoirement désactivés pour
éviter les conflits de navigation.
A la fin de la démarche, il faut fournir une page de récapitulatif permettant à l’utilisateur de
vérifier l’exactitude des données renseignées. Elle lui permet de transmettre sa demande ou bien
de modifier les données ou étapes renseignées.
Recommandé Le récapitulatif constitue la dernière étape de la démarche. Elle doit donc figurer dans
la barre d’étapes et n’est accessible qu’une fois les étapes précédentes renseignées.
Recommandé La page récapitulative reprend les données précédemment saisies dans la page, en
mode consultation (non saisissables directement). Il faut alors fournir un bouton
d’action « Modifier » permettant de retourner à la page de formulaire correspondante
en mode saisie.
Dans le cas de démarches comportant plusieurs étapes, il faut répéter ce bouton autant
de fois que d’étapes.
Recommandé La démarche se conclut toujours par un bouton d’action « Valider et terminer » pour
envoyer le questionnaire rempli.
Que disent les référentiels généraux ?
RGAA 13.9 : Faciliter la navigation sur des groupes de pages
3.3.3. Assistance à l’utilisateur dans la démarche
3.3.3.1. Aide générale de la démarche et aides contextuelles
En plus des règles présentées pour la construction de formulaires, l’utilisateur se voit proposer
divers éléments d’assistance visant à le guider au mieux dans la démarche et lui éviter les
erreurs.
Recommandé Toute démarche en ligne comporte une page d’aide. Celle-ci doit être accessible
depuis toutes les pages de la démarche, et s’ouvre dans une nouvelle fenêtre (ou
onglet) de navigateur (de sorte à conserver la procédure en cours) et est disponible en
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 103/115
version imprimable. Cette aide doit être organisée selon la succession des étapes de la
procédure. Voir à ce sujet le chapitre 3.4.1 - Aide générale.
Utile Des aides contextuelles permettent utilement d’assister l’utilisateur dans la saisie des
champs de formulaire. Voir à ce sujet le chapitre 3.4.2 - Aides contextuelles.
3.3.3.2. Questions fréquentes relatives à la démarche
Recommandé Une démarche en ligne comporte obligatoirement une page de questions fréquentes
(FAQ) fournissant des réponses aux questions susceptibles d’empêcher les
utilisateurs de démarrer la procédure ou de la réaliser correctement.
La page « questions fréquentes » contient :
au minimum les informations suivantes :

à qui s’adresse la démarche en ligne ;
les pré-requis techniques ;
les pré-requis administratifs ;
le responsable technique de la démarche en ligne ;

de façon facultative les informations suivantes :

les délais de réponse ;
le service traitant.

3.3.3.3. Visite guidée
La visite guidée (ou démonstration) représente un mode d’assistance spécifique aux sites
proposant des services en ligne (notamment les démarches en ligne). Elle vise à présenter à
l’utilisateur tous les éléments avec lesquels il va devoir interagir de façon autonome lors la
réalisation de la démarche en ligne. Ce dernier peut ainsi se familiariser avec la présentation des
informations, le vocabulaire employé, les actions à réaliser. Son caractère pédagogique permet
de minimiser les efforts d’apprentissage lors de la réalisation effective de la démarche.
Recommandé Si le site propose une visite guidée, celle-ci s’ouvre dans une nouvelle fenêtre de
navigateur (pour conserver la procédure active).
Recommandé Si le site propose une visite guidée, celle-ci est accessible en page d’accueil de la
démarche.
Recommandé Si le site propose une visite guidée en flash ou un tutoriel animé, il faut également
proposer une alternative au format texte ou HTML.
Utile Les démarches en ligne de plus d’une étape proposent une démonstration au
minimum faite d’écrans HTML simulant le déroulement des écrans en cours de
remplissage.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 104/115
Utile Il est conseillé de faire apparaître les éléments décrits dans la visite guidée de manière
distinctive (par exemple en surbrillance) dans un souci de pédagogie.
3.3.4. Confirmation de la démarche et accusé de réception
En fin de procédure, après validation de sa démarche ou à certaines étapes clés, il faut rassurer
l’usager, l’informer et lui faire découvrir les autres démarches en ligne, dans une optique de
qualité de la « relation usager ». A minima, une confirmation de la transaction réalisée est
systématiquement présentée à l’usager à l’issue d’une démarche en ligne.
Recommandé Il faut informer l’utilisateur de la réussite de la transmission et lui fournir un
récapitulatif (non modifiable et imprimable) des données envoyées disponible en
version imprimable.
Recommandé Sur la page de confirmation, il faut permettre à l’utilisateur de poursuivre sa
navigation par des liens (exemples : « retour à l’accueil », « retour à la liste des
démarches en ligne ») ou par le système de navigation.
Utile Afin d’améliorer la qualité du service rendu, il est possible de proposer le remplissage
d’un questionnaire de satisfaction à la fin de la démarche.
Si l’usager est identifié et conformément aux dispositions du référentiel général de Sécurité
(RGS) un accusé de réception est produit à l’intention de l’usager pour tout échange engagé
avec l’administration par voie électronique. En fonction du canal d’émission retenu (courriel,
courrier, SMS, etc.), l’accusé de réception peut revêtir des formes distinctes. Par ailleurs, son
contenu dépend du niveau de criticité de la transaction engagée entre l’usager et
l’administration. Dans certains cas, l’accusé de réception peut être précédé d’un accusé
d’enregistrement qui atteste la bonne réception de la demande mais n’engage pas
l’administration sur un délai de traitement.
La confirmation de transaction et l’accusé de réception sont des documents non éditables
soumis aux mêmes règles d’ergonomie et d’accessibilité que les autres formulaires. Les
mentions obligatoires portées par ces documents seront détaillées dans le décret du RGS relatif à
l’ordonnance 2005-1516. Les principes généraux suivants peuvent s’appliquer à ces documents :
la confirmation est présentée en ligne, via le navigateur ;
l’accusé de réception (respectivement d’enregistrement) est affiché à l’écran et peutêtre envoyé à l’usager par le canal retenu (courriel, courrier, SMS, etc.) et à l’adresse
qu’il aura préalablement fournie à l’administration (durant la démarche en ligne ou
lors d’une précédente démarche).
Recommandé Suivant la nature de la démarche, un accusé de réception (ou d’enregistrement) est
envoyé à l’utilisateur à l’adresse qu’il aura préalablement fournie).
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 105/115

Que disent les référentiels généraux ?
RGS Chapitre 4 : Accusé d’enregistrement et de réception
3.4. ASSISTANCE A L’UTILISATEUR
3.4.1. Aide générale
Certains sites, notamment ceux proposant des services en ligne, nécessitent la mise à disposition
d’une aide générale afin de renseigner au mieux l’utilisateur sur l’utilisation du site.
Recommandé Lorsqu’elle existe, l’aide générale est accessible depuis toute page, et s’ouvre dans
une fenêtre dédiée. L’objectif est de permettre à l’utilisateur de continuer sa
navigation dans le site tout en ayant ponctuellement recours à l’aide.
Recommandé L’aide générale est rédigée dans un langage clair, non technique.
Recommandé Les aides de plus d’une page écran sont segmentées en sections dont une liste est
présentée en début d’aide. Cette liste fournit également un accès direct à chacune des
sections (ancres ou liens inter-pages selon le volume d’information). A chaque
section, un lien permet de revenir vers l’accueil de l’aide.
Utile Il est conseillé de fournir une version imprimable de l’aide générale. De façon
facultative, cette aide est également téléchargeable.
Utile Il est conseillé de fournir dans l’aide générale un accès direct aux éventuels autres
éléments d’assistance du site (questions fréquentes, visite guidée, etc.).
3.4.2. Aides contextuelles
L’objectif des aides contextuelles est d’apporter des réponses précises à des problèmes locaux
liés à une étape de la procédure et à la saisie d’informations. On distingue deux types d’aides
contextuelles :
les informations de guidage affichées dans un formulaire et apposées aux champs de
saisie ;
les renvois ponctuels à un endroit précis de l’aide générale.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 106/115
Recommandé Dans le cas des informations de guidage, celles-ci doivent être affichées directement
près du champ, sans clic supplémentaire pour l’utilisateur ou sous forme d’info-bulle
apparaissant lors du survol de la zone par la souris. Dans ce dernier cas, un
signalement visuel permet d’inciter l’utilisateur à survoler la zone.
Exemple d’information de guidage située à droite des champs de saisie
Informations relatives à l'identité de la personne pour laquelle la copie d'acte d'état
civil est demandée
. Nom de famille, obligatoire ( gras) : C'est votre nom de famille ; ou votre nom de
jeune fille, dans le cas d'une femme mariée.
. Prénom : Prénom(s)
. Seul le premier prénom dans l'ordre de l'état civil est obligatoire
. Le trait d'union ne doit être utilisé que pour un prénom composé exemple : JeanPierre
Exemple d’information de guidage affichée dans une info-bulle lors du passage de la
souris
Vous pouvez saisir
plusieurs éléments en
les déplaçant de la
gauche vers la droite
grâce aux flèches.
Recommandé Dans le cas des renvois ponctuels à l’aide générale, ceux-ci doivent être signalés par
une icône spécifique et constante sur tout le site à chaque fois que cela est nécessaire.
Cette icône cliquable renvoie automatiquement à la partie correspondante de l’aide
générale.
Exemple d’icône de renvoi ponctuel à l’aide générale
3.4.3. Foire aux questions (FAQ)
La présence d’une foire aux questions (FAQ, questions fréquentes, etc.) est utile pour présenter
une vision synthétique du contenu du site et réduire ainsi les demandes de renseignement
émanant de nouveaux utilisateurs. Le contenu de la FAQ est alimenté par les questions et
retours des utilisateurs du site. Pour les sites complexes, une étape d’analyse des besoins des
utilisateurs permet notamment d’améliorer la pertinence du contenu de la FAQ.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 107/115
Recommandé La FAQ doit proposer en haut de page un sommaire des questions ou des thèmes
renvoyant vers la liste des réponses ou des thèmes. A la fin de la réponse, un lien
permet de renvoyer vers le sommaire.
Recommandé Dans la liste des réponses, il faut répéter la question avant la réponse. La question et
la réponse sont distinguées visuellement par l’emploi de styles distincts.
Utile Il est conseillé de fournir une version imprimable de la FAQ.
Utile La FAQ offre la possibilité aux utilisateurs d’ajouter une question à la liste des
questions référencées. Un lien vers le formulaire de contact (avec idéalement le
renseignement automatique de l’objet de la question) permet de faire remonter
progressivement les questions pour lesquelles les utilisateurs ne trouvent pas de
réponse dans la FAQ.
3.4.4. Assistance téléphonique
Certains sites proposant des services en ligne disposent d’une assistance téléphonique destinée à
guider téléphoniquement l’utilisateur dans l’utilisation du service.
Recommandé Si le site propose une assistance téléphonique, il faut veiller à bien faire figurer le prix
de l’appel pour l’usager et les horaires d’ouverture du service d'assistance par des
répondants.
Utile Si le site propose une assistance téléphonique, il est conseillé de faire apparaître le
numéro de contact téléphonique sur les seules pages d’aide générale et de questions
fréquentes (FAQ).
En matière d'assistance dans l'utilisation d'un service en ligne, le canal téléphonique
est une assistance accessible en second recours, après les modes d'assistance en ligne.
Compte tenu du coût de traitement des appels téléphoniques pour l’administration, il
faut favoriser en priorité le renseignement de l’utilisateur via les systèmes d’aide en
ligne et de questions fréquentes.
Exemple de présentation pour l’assistance téléphonique
Si vous n’avez pas trouvé la réponse, vous pouvez contacter l’assistance par téléphone au
0800 123 456 (coût d’un appel local depuis un poste fixe), tous les jours, de 8h à minuit.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 108/115
3.5. TERMINOLOGIE
Terminologie - Paragraphe en cours de construction
Afin de renforcer le sentiment de confiance de l’usager lorsqu’il navigue sur un site Internet de
service public, il convient d’harmoniser les pratiques en matière de sémantique. Les émetteurs
de sites publics doivent veiller à adopter un terme commun pour les éléments suivants (liste en
cours de recensement ; arbitrage à réaliser en réunion inter-administrations).
3.6. CONTENUS 2.0
Les sites Internet ont subi de profondes mutations ces dernières années sous l’effet des
évolutions technologiques. L’usage de l’Internet en a par ailleurs été profondément modifié. Ces
évolutions sont couramment regroupées sous l’appellation « 2.0 » (par opposition à la première
génération de sites, désormais appelée Web 1.0). Concrètement, le concept du Web 2.0 regroupe
trois notions fondamentales :
l’évolution des usages et des modes de consultation d’Internet (offre de services
accrue, participation la participation active des utilisateurs à la production de contenucf. l’encyclopédie libre et collaborative Wikipedia) ;
l’évolution des interfaces Web grâce à l’émergence de nouvelles technologies (ces
interfaces se rapprochent progressivement des standards du client lourd) ;
la capacité à mélanger des services issus de sites distincts sur une même page.
L’évolution des usages est de loin l’innovation la plus marquante du 2.0. D’une utilisation
passive et consumériste de l’Internet, l’internaute s’est transformé en « producteur de
contenus » : les outils de wikis, blogs et de partage de contenus multimédias permettent
désormais à des millions d’utilisateurs de s’exprimer, de partager et de devenir acteurs de
l’Internet.
Cette vulgarisation de la production de contenus pose de nouvelles contraintes ergonomiques
pour adapter les interfaces aux besoins toujours plus complexes des utilisateurs. Les sites
Internet arborent de plus en plus des éléments d’interface « 2.0 » quand ils ne sont pas
entièrement conçus en mode 2.0. Ceci fait émerger de nouvelles pratiques ergonomiques qu’il
faut désormais intégrer dans la conception des sites Internet publics.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 109/115
3.6.1. Flux RSS
Un flux RSS (ou flux d’actualités) est un format de syndication de contenus basé sur XML qui
permet de mettre à disposition tout ou partie des productions éditoriales d’un site Internet.
Concrètement, un flux RSS permet de récupérer les nouveaux contenus publiés sur un site sans
avoir à visiter ce site. Ces contenus peuvent alors être affichés dans un logiciel dédié à
l’agrégation de flux RSS : au même titre qu’un outil de messagerie permet de collecter et
organiser les courriels, il existe des agrégateurs de flux qui permettent de consolider l’ensemble
des flux RSS sélectionnés par un utilisateur et de les trier, regrouper, etc. Ces contenus peuvent
également être réaffichés, reformatés et actualisés en temps réel sur un autre site Internet.
3.6.1.1. Syndication de flux RSS
La syndication de flux RSS consiste à rendre disponible le contenu d’un site instantanément à
disposition d’autres sites. Ainsi, dès lors que le contenu syndiqué d’un site est mis à jour
(création ou modification d’un article), le flux RSS est automatiquement mis à jour.
Responsabilité sur les flux agrégés
Si un site Internet public agrège sur ces pages un flux RSS issu d’un site tiers, il peut
potentiellement encourir une responsabilité propre à un éditeur de contenu.
Recommandé Avant d’agréger un fil RSS sur un site public, il convient de vérifier sa qualité
rédactionnelle et ses conditions générales d’utilisation. Les contenus de ces fils RSS
syndiqués sont régulièrement vérifiés.
Ouverture des liens d’un flux RSS
Recommandé L’ouverture des liens d’un flux RSS doit être différenciée selon la nature du lien :
dans le cas d’un lien interne (flux des derniers articles ou commentaires
publiés sur le site par exemple), l’ouverture du lien se fait dans la même
fenêtre ;
dans le cas d’un lien externe (flux RSS provenant d’un autre site), l’ouverture
du lien se fait dans une autre fenêtre.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 110/115
Cas des univers Netvibes
Les univers Netvibes sont des pages personnalisables thématiques qui agrègent des dizaines,
parfois des centaines de flux RSS. Ces univers sont ouverts à tous et permettent de centraliser
les flux RSS de différents sites d’un même thème. Il est également possible de créer un univers
regroupant les flux d’un même site. La création d’un tel univers nécessite également la
définition d’un thème graphique propre à l’univers.
Par exemple, la Documentation française propose une page qui regroupe l’ensemble des flux
RSS mis à disposition sur les différents sites dont elle a la responsabilité. Cette page permet de
centraliser une large gamme de productions éditoriales : rapports publics, publications,
concours, lois, discours, etc.
Exemple d’univers Netvibes : l’univers de la Documentation française
3.6.1.2. Production de flux RSS
Pour les sites à fort contenu éditorial, la mise à disposition d’un ou de plusieurs flux RSS
contribue à :
la fidélisation du lectorat car il permet aux utilisateurs du site de se tenir au courant
des nouveaux contenus mis en ligne sans avoir besoin de se rendre sur le site ;
l’élargissement de l’audience du site en offrant la possibilité d’agréger ses contenus
sur d’autres sites tiers.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 111/115
Recommandé Les sites à fort contenu éditorial mettent à disposition un ou plusieurs flux RSS. Le
recours aux flux doit être réservé aux rubriques pour lesquels les contenus sont
régulièrement mis à jour. Un flux RSS non actualisé est en effet progressivement
abandonné et dessert la fréquentation du site.
Utile Il est conseillé de proposer plusieurs flux RSS par catégories ou rubriques de
contenus pour les sites dont la production éditoriale alimente plusieurs rubriques.
Ceci permet aux utilisateurs avertis d’améliorer le suivi des contenus en fonction de
leurs centres d’intérêts.
Format des flux RSS
Recommandé Les formats de flux RSS mis à disposition doivent être conformes aux préconisations
du volet technique du RGI.
Que disent les référentiels généraux ?
RGI Volet technique – chapitre 5.5 : Syndication de contenu.
Aide concernant l’utilisation des flux RSS
Recommandé La mise à disposition de flux RSS nécessite un accompagnement des utilisateurs pour
faciliter l’utilisation de ces flux. Cette aide peut se présenter sous forme d’une aide
contextuelle présente sur la page proposant l’abonnement aux flux ou faire l’objet
d’un paragraphe dans l’aide générale du site.
3.6.2. Widgets
Les widgets désignent un composant d’un site (assemblage d'HTML, de CSS et de JavaScript et
occasionnellement un langage compilé), permettant d'obtenir de l'information (calculatrice,
post-it, agrégateur RSS).
Utile Un widget doit être intégré dans les espaces réservés au contenu principal et
secondaire. Les éléments des systèmes de navigation du site doivent être conservés.
Utile Afin de ne pas ralentir le chargement des pages du site par le rapatriement de données
externes au site, il est conseillé de ne pas multiplier le nombre de widgets par page.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 112/115
3.6.3. Mashups
Un mashup désigne la combinaison de plusieurs applications Web au sein d'une application
unique afin de créer un nouveau service. Le contenu de ces applications peut provenir de sites
tiers et être mis à disposition par le biais d'API (Application Programming Interface ou interface
de programmation), c'est-à-dire des services Web autorisant l'extraction et le traitement
d'informations.
Les mashups ont quelques points communs avec les widgets puisqu’ils sont, dans les deux cas, à
intégrer dans une zone définie dans une page existante. L’intégration d’un mashup reste aussi
simple que l’intégration d’un widget puisqu’il suffit souvent de copier du code XHTML et du
Javascript dans la page hôte. Un mashup peut être ainsi intégré aussi bien dans un site
développé en Java, .NET ou PHP.
L’intégration d’un mashup dans un site nécessite au préalable de prendre en compte certains
aspects de sécurité tels que l’authentification du producteur des contenus repris dans le mashup
et la protection des canaux de communication (usage de protocoles cryptographiés, etc.).
Utile Un widget doit être intégré dans les espaces réservés au contenu principal et
secondaire. Les éléments des systèmes de navigation du site doivent être conservés.
3.6.4. Partage communautaire de contenus
Le partage communautaire de contenus ou encore partage de signets (social
bookmarking) permet aux internautes de stocker, classer, chercher et partager leurs liens favoris.
Dans un système ou réseau de partage de signets, les utilisateurs enregistrent des listes de
ressources Internet qu’ils trouvent utiles (pages, vidéos, etc.) sur des plateformes de réseaux
sociaux Facebook, Digg, del.icio.us, Technorati, etc. D’autres utilisateurs ayant les mêmes
centres d’intérêt peuvent consulter les liens par sujet, catégorie, étiquette, etc. Les sites à fort
contenu éditorial peuvent mettre à disposition une fonctionnalité de partage communautaire de
contenus à tout ou partie des articles d’un site.
Utile Si un site propose une fonctionnalité de partage communautaire, celle-ci sera placée
dans la zone de fonctions associées à l’article (Voir à ce sujet le chapitre 3.6.4.1 –
Fonctions associées à l’article).
Exemple d’un article du quotidien Le Monde proposant des fonctionnalités de partage communautaire de
contenus via 6 réseaux
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 113/115
GLOSSAIRE
Accessibilité : Un site Web accessible est consultable et utilisable par tout le monde, quel que
soit son matériel ou le logiciel utilisé pour naviguer sur le site.
Accesskeys : L’attribut HTML « accesskey », permet d’implémenter des raccourcis claviers sur
les liens d’une page Web. Le raccourci ainsi défini est accessible par une combinaison de
touches.
Agrégateur : Logiciel ou service Web permettant l’affichage de plusieurs sources de contenus
d’Internet (Flux RSS), en temps réel, en une seule application qui sera avant tout un outil de
gestion de l’information.
Ajax : Technique de développement d’applications Web interactives qui permet d’améliorer
l’affichage des sites Internet en ne chargeant que certaines données avec un serveur au lieu de
rafraîchir la globalité de la page du site Internet.
Arborescence : La conception de l’arborescence permet, de figer les grandes rubriques,
sections, sous-sections et pages visualisées. On peut profiter de la réflexion sur l’arborescence
pour différencier visuellement les liens regroupant une thématique (regroupant des pages) des
pages elles-mêmes, visualisées par l’internaute. Les popup, les pages par défaut, celles réservées
à certaines catégories d’internautes (après identification par exemple) sont spécifiées.
Balise ou attribut : les balises sont des marqueurs (< >) permettant de structurer le langage
HTML d’une page Web.
Cookies : Ces fichiers textes, stockés par le navigateur sur le disque dur de l’utilisateur,
permettent d’enregistrer les informations ou le parcours de ce dernier sur les différents sites
visités.
Cadres (frames) : Les frames permettent de diviser une page HTML en plusieurs fenêtres.
Cette fonction permet d’afficher des documents différents dans chacune des fenêtres (affichage
permanent d’informations de façon statique ou dynamique, affichage simultané des requêtes et
des réponses dans une même page mais dans des espaces différents).
Cinématique : La cinématique explicite l’enchaînement des écrans d’un site Internet,
éventuellement les traitements lorsque ces derniers restent simples.
Cas d'utilisation (use cases) : Les cas d’utilisation permettent de formaliser le comportement
d’un utilisateur dans une interface. En fonction des profils de l’utilisateur, les cas d’utilisation
permettent de présenter différents scénarii. Ils permettent de mesurer la pertinence des choix
graphiques en fonction des cibles.
CSS (Cascading Style Sheets) : Format de feuille de style pour navigateurs. Ce format peut
transformer le visuel entier d'un site en ne modifiant qu'un seul fichier. CSS désigne aussi
l'extension des fichiers qui renferment une CSS. Les styles permettent de définir des règles
appliquées à un ou plusieurs documents HTML. Ces règles portent sur le positionnement des
éléments, l'alignement, les polices de caractères, les couleurs, les marges et espacements, les
bordures, les images de fond, etc.
Favicône (de FAVorite ICON) : Icône associée à une URL facilitant visuellement la gestion
des favoris.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 114/115
HTML (HyperText Markup Language) : Le langage HTML, est le format de données conçu
pour représenter les pages Web. Il permet notamment d'implanter de l'hypertexte dans le
contenu des pages et repose sur un langage de balisage, d’où son nom. HTML permet aussi de
structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources
multimédias dont des images, des formulaires de saisie, et des éléments programmables tels que
des applets. Il permet de créer des documents interopérables avec des équipements très variés de
manière conforme aux exigences de l’accessibilité du web. Il est souvent utilisé conjointement
avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de
style en cascade). HTML est initialement dérivé du Standard Generalized Markup Language
(SGML).
Infobulle : Message apparaissant lors du passage de la souris sur certains éléments. Elle tire son
nom de sa proximité avec les bulles des bandes dessinées.
Liens hypertextes : Moyen très simple de navigation dans un ensemble de pages Internet.
Lorsque un utilisateur active un lien dans une page, il aboutit directement au point
correspondant dans une autre page, et ainsi de suite.
Maquettage / Gabarits (templates) : Représentations statiques d'une page d'un site ou d'une
application. On doit y formaliser les éléments présents, leur taille approximative, leur
localisation, leur appellation. Ces gabarits de pages peuvent intégrer des notions de zoning
(division de la page en espaces d'information). Ils mentionnent alors la taille relative des
éléments en nombre de pixels. Ils visent à harmoniser la construction des pages d’un site.
Mashup : Une application composite est une application qui combine du contenu provenant de
plusieurs applications plus ou moins hétérogènes. On parle de mashup artistique ou de mashup
technologiques. Le principe d'un mashup est donc d'agréger du contenu provenant d'autres sites,
afin de créer un site nouveau.
Navigateur : application permettant de consulter des sites web ou des applications multimédia à
partir de son ordinateur.
Pied de page : Le pied de page est une zone de liens secondaires située en bas de l’interface. Il
comporte souvent des informations de crédits, mentions légales, et/ou des liens redondants avec
la navigation principale, afin d’en faciliter l’accès si le défilement de la page est nécessaire pour
y accéder.
Podcast (ballado-diffusion) : Technique de diffusion de fichiers sonores ou vidéos permettant
à l’internaute de le télécharger ou de s’y abonner par le biais des flux RSS afin de recevoir
automatiquement les derniers enregistrements. Le podcasting est une émission reprenant la
technique du podcast.
Pop-up (fenêtre surgissante) : Fenêtre apparaissant subitement lors de la sélection d'une
option ou d'une fonction clé spéciale. Habituellement, les fenêtres pop up contiennent des
menus de commandes. Elles restent à l'écran jusqu'à la sélectionne de l'une de ces commandes.
Psychologie cognitive : La psychologie cognitive est une démarche scientifique qui vise à
décrire et à expliquer les mécanismes par lesquels un organisme acquiert de l’information, la
traite, la conserve et l’exploite. Ainsi, elle concerne notamment la mémoire, le langage, le
raisonnement, la résolution de problèmes, la perception et l’attention.
Roll-over : Action consistant à bouger le curseur de la souris pour provoquer des évènements,
simplement en passant sur un objet, sans avoir à cliquer.
DGME
Charte ergonomique des sites Internet publics
Version 2.0 - 19 décembre 2008 Page 115/115
RSS - Flux RSS (Really Simple Syndication). : Procédé simple de mise à jour d’un fils
d’information, d’un site ou blogs, permettant à un internaute d’être alerté en temps réel sur son
agrégateur de flux RSS.
Signets (favoris, bookmarks) : les signets permettent à son utilisateur de mettre en mémoire
une adresse URL sous forme de marque-page afin de pouvoir y revenir ultérieurement.
SIG (Service d’information du gouvernement) : Le service d’information du gouvernement
est un service placé sous l’autorité du Premier ministre et chargé de :
d'analyser l'évolution de l'opinion publique et le contenu des médias ;
de diffuser aux élus, à la presse et au public des informations sur l'action
gouvernementale ;
d'entreprendre des actions d'information d'intérêt général à caractère interministériel
sur le plan national et, en liaison avec les préfets et les ambassadeurs, sur le plan des
services déconcentrés de l'État ;
d'apporter une assistance technique aux administrations publiques et de coordonner la
politique de communication de celles-ci, en particulier en matière de campagnes
d'information et d'études d'opinion.
Streaming (diffusion en continu) : Emission d’un contenu audio ou vidéo par Internet vers un
lecteur client, qui peut en commencer la lecture sans attendre la fin du téléchargement.
Tri de cartes : Le tri de cartes consiste à présenter à l'utilisateur un paquet de « cartes »,
correspondant aux contenus à rubriquer, et à lui demander de faire des groupes de cartes puis de
les nommer. Les résultats d'un tri de cartes sont des sources d'informations très riches pour
construire un rubriquage pertinent.
Utilisabilité : Notion proche de l’ergonomie dont le but est de répondre à trois critères qui
détermineront la facilité avec laquelle les internautes naviguent sur un site : efficacité, efficience
et satisfaction.
efficacité, pour le résultat final. Si l’utilisateur est arrivé à ses fins ;
efficience, pour le temps écoulé par l’utilisateur pour arriver à son objectif ;
satisfaction, pour le confort et l’impression finale de l’utilisateur face à la navigation
sur le site.
Widget / portlet : Un widget est un objet graphique pouvant réagir avec l’utilisateur sur des
systèmes d’exploitation, sur des sites web. Exemple : des boutons, des zones de saisies, des
cases à cocher.
XHTML (Extensible HyperText Markup Language) : Version d'HTML reformulée pour se
conformer aux règles syntaxiques d'XML.
XML (Extensible Markup Language) : Langage de balisage ressemblant à HTML, mais qui
permet à l'auteur de décrire des données en définissant des balises personnalisées.
Zoning : Le zoning permet de définir les grands espaces d’actions sur lesquels l’utilisateur
devra interagir. Ce document doit rester assez générique et n’a pas besoin d’être trop détaillé,
ceci afin de garder une bonne lisibilité.