Charte-cersiat

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