Charte CERSIAT : présentation

♦ Objectif :
donner des recommandations à l’usage des
webmasters pour le développement de sites
web raccordés à l’intraterre
 Charte CERSIAT : présentation

♦ Rappel sur le comportement des

intranautes :
– Ils cheminent au travers des documents en
fonction de leurs connaissances et du côté
suggestif des pages
– Ils vont directement à l’information (titres,
listes, liens)
 Charte CERSIAT : présentation

♦ Interface web doit éveiller l ’attention de

l’intranaute et la retenir

– l’éveiller grâce à une interface intuitive et prévisible

– la retenir en évitant la monotonie de l’interface

 Charte CERSIAT : présentation
♦ Objectifs ergonomiques :

– être suffisamment attirant pour donner envie aux

utilisateurs de parcourir le site,
– fournir un accès aisé à l’information pour que
les utilisateurs ne soient pas déconcertés,
– cacher la technologie sous-jacente,
– être toujours orientée vers l’utilisateur et
l’information à délivrer par le site.
 Charte CERSIAT : présentation

♦ Spécificités des Armées :

– le site intranet d’un organisme n’a pas à se

démarquer fondamentalement de ses
homologues, d’où standardisation dans
l’ergonomie
 Charte CERSIAT : présentation

♦ Classement des règles :

A. Conception ergonomique du site
(règles n° 1 à 30)
B. Conception des pages du site
(règles n° 31 à 95)
C. Mise en œuvre des composants dans les pages
(règles n° 96 à 188)
D. Outils et techniques de développement
(règles n° 189 à 211)
 Charte CERSIAT : présentation

♦ Classement des règles :

A. Conception ergonomique du site
(règles n° 1 à 30)

 Règles relatives à la structure du site

 Règles relatives à la navigation
 Moyens de navigation
 Moyens de repérage
 A : Structure d'un Site (1/3)

1-c Pas de transposition directe d’un document

textuel classique en document Intranet.

2-c Le découpage en thèmes doit être réalisé

conjointement entre les concepteurs du site et les
utilisateurs.

3-c Les pages de niveau supérieur contiennent les

points d’entrée vers les niveaux inférieurs.
 A : Structure d'un Site (2/3)

4-c Chaque page doit se focaliser sur un seul thème

5-c L’information doit être organisée du général au

particulier

6-c Le niveau le plus haut du site doit regrouper

l’information en grands thèmes ou rubriques à travers
5 ou 6, voire 8 entrées vers le niveau inférieur.
A : Structure d'un Site (3/3)

7-c La profondeur d’un site doit s’efforcer de ne pas

dépasser 4 niveaux.
Page de niveau 1 : Page d’accueil (menu)
Page de niveau 2 : Les principales rubriques (menu)
Page de niveau 3 : Le développé des rubriques (contenu)
Page de niveau 4 : Le développé des sous- rubriques (contenu)

9-i L’organisation physique du site doit être

transparente pour l’utilisateur. Elle doit s’effacer
derrière l’aide à la navigation.
A : Navigation-moyens (1/10)
10-i Navigation visuelle de l’intranaute :

commencer la page, les titres, les sous-titres, les

phrases par la conclusion,
placer l’essentiel de l’information dans les
premiers mots de titres et de phrases,
placer l’information significative derrière des
liens hypertextes,
A : Navigation-moyens (2/10)
10-i Navigation visuelle de l’intranaute :

véhiculer une seule information par phrase,

différencier les mots clés (couleur, …),
selon l’opportunité, présenter l’information
sous forme de liste (2 ou 3 mots par liste, puces
guidant les yeux).
A : Navigation-moyens (3/10)

11-c Barre de navigation principale du site :

permettre de naviguer de tête de rubrique en tête de

rubrique.
contenu constant pour tout le site.
peut être présentée verticalement à gauche de l’écran.
A : Navigation-moyens (4/10)

12-c Barre spécifique de navigation de rubrique

peut être présentée horizontalement en haut

d’écran.
doit être moins présente visuellement que la
barre principale.
A : Navigation- moyens (5/10)

13-c Barre de navigation d’accueil (contact,

carte):
peut être indépendante et bien différente
des deux autres pour ne pas rentrer en
conflit avec elles.
A : Navigation-moyens (6/10)
18-i Éléments de navigation :
à partir de toutes les pages du site, l’intranaute doit
être capable de retourner à la page d’accueil ou aux
points essentiels de navigation du site (carte, têtes
de rubrique).

19-i Aucune page morte :

chaque page doit avoir au moins un lien hypertexte.
A : Navigation-moyens (7/10)

20-i Pas de lien vers une page en travail (lien vide)

21-i Tout chemin déjà parcouru doit être indiqué par

un changement de couleur du lien qui a permis le
cheminement.

22-i Informations sur la destination d ’un lien :

fenêtres pop-up, zones de commentaires, etc…

23-i Liens visibles dès la 1ère page écran

A : Navigation-moyens (8/10)

24-i rappeler le bandeau de navigation dans le bas

de la page sous forme textuelle pour les documents
sur plusieurs pages écran.

25-i Lien vers document à accès limité : informer

de ces restrictions avant l’activation du lien
temps de chargement, navigateur particulier, authentification,
extensions applicatives.
A : Navigation-moyens (9/10)

26-i Les différents types de liens doivent être

reconnaissables visuellement :

Liens externes au site

Liens internes au site
Liens textuels, images, vidéos, sonores
A : Navigation- repérage (10/10)

28-i On doit fournir à l’utilisateur une carte du

site.

29-i Différenciations esthétiques des rubriques

entre elles
une couleur de fond spécifique,
une image ou logo particulier.

Fin A
 Charte CERSIAT : présentation

♦ Classement des règles :

B. Conception des pages du site
(règles n° 31 à 95)

 Toutes les pages

 Page Accueil
 Page de recherche
 Page de contenu
 Page de menu
 Page dite « carte du site »
B : Toute Page - généralités

31-i Les pages doivent être conçues pour le format

VGA
32-i Titre du document obligatoire (61-I)
tout ou partie du titre de la page
spécifique (62-I), compréhensive et représentative
(63-I)
reformulé si document déplacé (64-I)
 B : Toute Page - contenu

34-c Contenu d ’une page : logo d’identification,

titre, zone de contenu, zone de liens, @ E-mail,
date de mise à jour
35-c Éviter en milieu de page des liens vers des
sites externes.
37-c Ne pas envoyer l’intranaute vers un autre site
pour une information importante mais la rapatrier
et la mettre à jour régulièrement.
 B : Toute Page - aspects
juridiques

44-i Respecter la législation sur le droit d’auteur

45-i Document d ’un autre organisme à référencer

Faire apparaître une référence
Indiquer qu’il s’agir d’une copie
B : Toute Page - Design (1/4)

46-i Pas de page style « couverture de livre » : :

amener l’internaute à interagir avec la page en
alternant texte et graphiques.
47-c Pas trop d ’animations : éviter les couleurs
trop lumineuses, les clignotements et l’utilisation
exagérée d’images animées
B : Toute Page - Design (2/4)
48 & 49-c Homogénéité du site
modèle de page unique ou coordonné
grille des éléments de même statut : conventions
éditoriales (titres, liens….)

50-i Présentation de l’information dissociée de

l’information (ex : images contenant le moins de
texte possible)
B : Toute Page - Design (3/4)

51-i Structurer l’information d’une page

52-i Contrastes visuels entre les différentes zones

53-i Bonne répartition des textes et des vides

54-c Éviter les ascenseurs

B : Toute Page - Design (4/4)

55-i Pas plus de 5 écrans par page

56-c Information importante dans le tiers supérieur

gauche

58-c Homogénéité de style des composants d’une

page
B : Toute Page – Impressions
(V)

65-i Format d ’impression

mieux adaptée = 535*670 pixels (largeur /
hauteur)
format A4 = ne pas dépasser 535*320
67-c Option d’impression pour consolider les
pages web séparées en une seule page papier.
 B : Pages Accueil (1/2)
68-i Page d’accueil du site
un texte présentant le site et/ou un logo
illustrant l’organisme,
un sommaire de liens vers les rubriques
principales,
un accès raccourci vers les nouveautés du
site,
une vue sur les liens vers les autres sites,
un moteur de recherche si besoin,
une adresse e-mail (contact),
une date de dernière mise à jour.
 B : Pages Accueil (2/2)

69-i Lien vers le portail de l’intraterre

70-i Applications web et les services d’un site
doivent être fédérés dans la page d’accueil
71-i Lien (graphique ou non) pour accéder à
chaque thème et service du site.
72c & 75-c Page d ’accueil rapide à charger mais
attractive pour capter l’intranaute
 B : Pages de recherche

[77-i à 78-c, 85-i] Pages de résultats de recherche

10 à 20 réponses par page,

étendre la recherche aux sous-sites si besoin,
liens vers « Suivant » et « Précédent »
 B : Pages de contenu

[ [79 à 84] Pages de contenu

lien vers page d’accueil situé en haut à gauche
bannière de navigation d’accès aux rubriques du
site placée verticalement et à gauche de la page
bannière de navigation spécifique d’accès aux
développés de rubriques et sous rubriques est
placée en haut et sous le titre de la page
 B : Pages de menus

86 à 88 : Page de menus
comporte 4 ou 5 liens minimum et pas plus de
8 liens
sans ascenseur
B : Page « Carte du site » (1/2)

89 à 95-c : Carte de site : n’est pas forcément la

page d’accueil
présenter l’organisation logique du site (+ objet
de chaque page), accès direct aux différentes
pages,
représentations de style spatial (bannières) ou
arborescent
B : Pages Carte du Site (2/2)
89-c à 95-i : Carte de site
couleur pour différencier les niveaux ,
couleur pour relier les menus
ordre des pages de la carte en conformité avec
l’ordre de présentation dans les bannières de
navigation,
dans le cas de sites complexes, l’organisation
spatiale de la carte doit être compréhensible
sans avoir à utiliser l’ascenseur.

FIN B
 C : Composants des Pages
(1/16)
 96-105 : Texte
 106-110 : Titres et sous-titres
 111-114 : Libellés, textes d ’habillage et de …
 115-126 : Barres de navigation
 127-140 : Liens
 141-146 : Tableaux
 147-149 : Listes et puces
 150-151 : Pieds de page
 Charte CERSIAT : présentation
♦ Classement des règles :
C. Mise en œuvre des composants dans les
pages (règles n° 96 à 188)
 96-105 : Texte
 106-110 : Titres et sous-titres
 111-114 : Libellés, textes d ’habillage et de …
 115-126 : Barres de navigation
 127-140 : Liens
 141-146 : Tableaux
 147-149 : Listes et puces
 150-151 : Pieds de page
 Charte CERSIAT : présentation
♦ Classement des règles :
C. Mise en œuvre des composants dans les
pages (règles n° 96 à 188)
 152-155 : Couleur
 156-160 : Fond d ’écran
 161-172 : Images
 173-175 : Images Map
 176-178 : Digital audio, vidéo et animation
 179-188 : Composants des applications
bureautiques
C : Composants des Pages
(1/14)
96-105 : Texte
police de caractères, taille et couleur associées
à un rôle précis dans le modèle de page
ne pas utiliser plus de trois polices de
caractères différentes dans une page
texte jamais écrit en majuscules
écrire en couleur foncée sur fond clair
C : Composants des Pages
(2/14)
106-110 : Titres et sous-titres
titre de page significatif et alléchant
titre sans abréviations
titre au sommet de la page
style des titres homogène
111-114 : libellés, textes d ’habillage et de …
libellés associés aux objets alignés à gauche
colonnes de chiffres justifiées à droite
C : Composants des Pages
(3/14)
115-126 : Barres de navigation
items textuels de navigation non produits à
partir d’images graphiques
item de navigation sous forme d’image
associé à un item textuel
pour les images graphiques, rédiger les
légendes associées aux images pour les
décrire
les rubriques de la barre de navigation
doivent se détacher nettement du fond
C : Composants des Pages
(4/14)
115-126 : Barres de navigation / II

symboles connus de tous plutôt que des

symboles réinventés
représentation constante de la bannière de
navigation dans tout le site
chaque rubrique d’une bannière de navigation
doit afficher son état par une modification
visuelle de son aspect
 C: Composants des Pages
(5/14)
127-140 : Liens / I
le passage du curseur sur un lien doit modifier
l’aspect du curseur
tout lien doit afficher son état par une
modification visuelle de son aspect (lien sur lequel le
curseur passe, correspondant à une page déjà visitée, lien )

informer de la destination d’un lien avant

l’activation (popup, barre d ’état, fenêtre, bulle)
des références relatives pour définir les liens
 C : Composants des Pages
(6/14)
127-140 : Liens / II
apparence constante des boutons d’un site
(135-i)
une fois visitée, une image liée doit être
repérable et être distincte visuellement des autres
images hypertextes non visitées (137-i)
nécessaire de prévoir une zone de texte sensible
en dessous de l’image (138-i)
soulignement réservé aux liens hypertextes
(139-i)
liens actifs en bleu ; liens visités en violet (140i)
 C : Composants des Pages
(7/14)
141-146 : Tableaux
tableau de largeur visualisable, sans ascenseur
(141-i)
tout tableau et toute colonne doivent avoir un
titre (143-i)
tableau à 2 colonnes pour présenter un
formulaire de saisie (144-c)
 C : Composants des Pages
(8/14)
147-149 : Listes et puces
ne pas utiliser de puces dans plusieurs rôles
simultanés et incompatibles (147-i)
lignes associées aux puces concises, les
premiers mots renfermant le contenu informatif
le plus important (149-c)
 C : Composants des Pages
(9/14)
150-151 : Pieds de page
il peut être graphique (150-c)
il contient : lien vers la page d’accueil, retour au
sommet de la page si celle-ci est longue, date de
dernière mise à jour, reprise des items de la barre
de navigation spécifique, accès à la page de
recherche, informations sur le copyright (151-c)
152-155 : Couleur
éviter les couleurs trop lumineuses (152-c)
ne pas utiliser plus de 3 nuances différentes sur
une même page (153-c)
 C : Composants des Pages
(10/14)
156-160 : Fond d ’écran
une texture utilisée en fond de page ne doit pas
être complexe visuellement (157-i)
image à réelle valeur ajoutée au contenu (158-c)
161-172 : Images / I
image ne peut elle seule véhiculer un contenu
informatif (162-i)
minimum de texte en image (163-i)
utiliser des images de petite taille et choisir une
structure de page orientée texte (image >30k trop
lourde à charger) (164-c)
C : Composants des Pages
(11/14)
161-172 : Images / II
utiliser les attributs Alt, Width et Height (165
& 166-i)
formats de compression utilisés : JPEG et GIF
(167-i)
utiliser le principe des vignettes pour assurer
une prévisualisation des grandes images (172-i)
C : Composants des Pages
(12/14)
173-175 : Images Map
utilisation réservée aux infrastructures à forte
bande passante (173-i)
lien explicite et identifiable immédiatement
comme moyen de sortie de la page visualisée,
l’action attendue doit être précisée dans la page
si ambiguïté (174-i)
C : Composants des Pages
(13/14)
176-178 : Digital audio, vidéo et animation
à utiliser uniquement dans les cas où il apporte
une valeur informative réelle (176-i)
ne pas forcer l’intranaute à charger des
extensions applicatives (177-i)
fournir les moyens de contrôler ce type de
composants (bouton « arrêt », …) (178-i)
C : Composants des Pages
(14/14)
179-188 : Composants des formulaires
taille des champs de saisie proportionnelle à la
taille des informations contenues (179-i)
libellés des champs de formulaires en police
maigre ou grasse, non soulignée, non italique
(180-i)

FIN C
Charte CERSIAT : présentation
♦ Classement des règles :

D. Développement (règles n° 189 à 211)

D : Techniques Développement
(1/5)
189-192 : Nommage et stockage des fichiers
189-c : page d ’accueil = index.htm
190-i : nommage (minuscules, [a-z] et [0-9],
longueur du nom fonction du SE)

193-199 : Langages utilisés / I

HTML 3.2 (193-i), Javascript (194-i)
Contrôles ActiveX interdits (195-i),
limiter les Javascripts côté client (196-c)
limiter les Applet Java, taille < 100Ko (197-c)
D : Techniques Développement (2/5)

193-199 : Langages utilisés / II

199-c : l’information sur le site doit indiquer
les configurations nécessaires pour bénéficier
de l’ensemble des fonctionnalités du site.

200-c : Impressions
format d’impression préconisé : RTF ou PDF
D : Techniques Développement (3/5)

201-209 : Applications de gestion / I

201-i : page de contenu d’une application =
page de formulaire ou page de résultat
204-i : bouton d ’action pour valider ou
déclencher un traitement
D : Techniques Développement (4/5)

201-209 : Applications de gestion / II

206-i : résultat d’un contrôle sur les données
saisies dans un formulaire affiché dans une
fenêtre
208-i : aide en ligne intégrée aux pages Web
D : Techniques Développement (5/5)

210-i : Pages confidentielles non stockées dans un

cache (cf. balise META pragma)

211-i : Les scripts et applications sont développés

sous la responsabilité du gestionnaire du site local
(maintenance).

FIN D