Charte Ergonomique D'un Site Internet. Rédigé Par Le Gouvernement Français Et Mis À Dispositon Des Collectivités Locales

Ministre du Budget, des Comptes publics et de la Fonction publique
Charte ergonomique des sites Internet publics
Date Rdacteur
: :
19 dcembre 2008 Nombre de pages DGME Projets dadministration lectronique Version
: 115 : 2.0
DGME Charte ergonomique des sites Internet publics Version 2.0 - 19 dcembre 2008
Page 1/115
FICHE DE CONTROLE DU DOCUMENT

Version
1.0 2.0
Date
30 juin 2008 19 dcembre 2008
Rdacteur
DGME DGME
Modification
Initialisation du document Prise en compte remarques du groupe pilote et du club des webmestres
Page 2/115
TABLE DES MATIERES

1. REGLES DORDRE GENERAL...................................................................................................................... 9 1.1. ARCHITECTURE DE LINFORMATION .............................................................................................................. 9 1.1.1. Dfinition de larchitecture de linformation........................................................................................ 9 1.1.2. Largeur et profondeur dun site.......................................................................................................... 10 1.2. SYSTEMES DE NAVIGATION .......................................................................................................................... 11 1.2.1. Systme de navigation principal et secondaire................................................................................... 12
1.2.1.1. 1.2.1.2. 1.2.1.3. 1.2.1.4. Systme de navigation horizontal .................................................................................................................... 13 Systme de navigation vertical ........................................................................................................................ 14 Systme de navigation par onglets................................................................................................................... 15 Combinaison des diffrents systmes de navigation ........................................................................................ 16
1.2.2.
1.2.2.1. 1.2.2.2. 1.2.2.3. 1.2.2.4.
Autres lments dorientation et de navigation................................................................................... 17

Fil dAriane (chemin de navigation) ................................................................................................................ 17 Adresse du site (URL) ..................................................................................................................................... 18 Zone de fonctions transverses (liens utilitaires) ............................................................................................... 19 Pied de page..................................................................................................................................................... 20
1.2.3.
1.2.3.1. 1.2.3.2.
Positionnement des systmes de navigation (zoning) ......................................................................... 20

Exemple 1 de zoning........................................................................................................................................ 21 Exemple 2 de zoning........................................................................................................................................ 22
1.2.4. Cas particulier de la navigation guide.............................................................................................. 23 1.3. LISIBILITE .................................................................................................................................................... 25 1.3.1. Polices de caractres .......................................................................................................................... 25 1.3.2. Utilisation des styles ........................................................................................................................... 26 1.3.3. Couleurs.............................................................................................................................................. 27 1.3.4. Pictogrammes et icnes ...................................................................................................................... 28 1.3.5. Lisibilit cognitive............................................................................................................................... 31
1.3.5.1. 1.3.5.2. 1.3.5.3. Titres et hirarchisation de linformation......................................................................................................... 31 Regroupement de linformation ....................................................................................................................... 32 Faciliter la comprhension de linformation prsente .................................................................................... 32
1.3.6. Aspects linguistiques........................................................................................................................... 33 1.4. CONSIDERATIONS TECHNIQUES ................................................................................................................... 34 1.4.1. Navigateurs......................................................................................................................................... 34

1.4.1.1. 1.4.1.2. Compatibilit des navigateurs.......................................................................................................................... 34 Fonctions navigateur........................................................................................................................................ 35
1.4.2.
1.4.2.1. 1.4.2.2. 1.4.2.3.
Rsolutions dcran ............................................................................................................................ 37

Rsolution pour crans standards..................................................................................................................... 37 Rsolution pour crans spcifiques.................................................................................................................. 38 Rsolutions pour appareils mobiles ................................................................................................................. 38
1.4.3.
1.4.3.1. 1.4.3.2. 1.4.3.3.
Langages et normes de dveloppement............................................................................................... 39

Langages .......................................................................................................................................................... 39 Normes de dveloppement............................................................................................................................... 40 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. Dconnexion ....................................................................................................................................... 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 2. REGLES SUR LES OBJETS .......................................................................................................................... 51 2.1. LIENS HYPERTEXTES .................................................................................................................................... 51 2.1.1. Utilisation des liens ............................................................................................................................ 51 2.1.2. Prsentation des liens ......................................................................................................................... 52
Page 3/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. Tlchargement descendant (download)............................................................................................. 54 2.2.2. Tlchargement montant (upload) ...................................................................................................... 55 2.3. FORMULAIRES ............................................................................................................................................. 56 2.3.1. Prsentation 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 slection ............................................................................................... 60
2.3.4.1. 2.3.4.2. 2.3.4.3. 2.3.4.4. 2.3.4.5. Champs libres .................................................................................................................................................. 60 Bote de listes................................................................................................................................................... 61 Listes droulantes ............................................................................................................................................ 62 Boutons radio................................................................................................................................................... 62 Cases cocher.................................................................................................................................................. 63
2.3.5. Cas particulier des formulaires CERFA ............................................................................................. 64 2.4. BOUTONS DACTION .................................................................................................................................... 64 2.4.1. Libells des boutons daction.............................................................................................................. 64 2.4.2. Prsentation des boutons daction...................................................................................................... 65 2.4.3. Les boutons daction 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. Prsentation 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 vido ........................................................................................................................................ 76 2.8.3. Animations .......................................................................................................................................... 77 2.9. BANNIERES PROMOTIONNELLES E-REGIE .................................................................................................... 78 3. REGLES SUR LES CONTENUS.................................................................................................................... 81 3.1. PAGE DACCUEIL ......................................................................................................................................... 81 3.1.1. Facilits daccs la page daccueil.................................................................................................. 81 3.1.2. Valorisation des contenus de la page daccueil.................................................................................. 82 3.1.3. Identit commune de la page daccueil des sites publics.................................................................... 83
3.1.3.1. 3.1.3.2. 3.1.3.3. 3.1.3.4. 3.1.3.5. 3.1.3.6. 3.1.3.7. 3.1.3.8. Le systme de navigation principal.................................................................................................................. 83 Les liens externes vers des sites publics........................................................................................................... 83 Le bloc Marianne............................................................................................................................................. 84 Les bannires E-rgie....................................................................................................................................... 86 La signature du site .......................................................................................................................................... 86 Les fonctions transverses ................................................................................................................................. 86 Le pied de page................................................................................................................................................ 86 Exemple de zoning........................................................................................................................................... 90
3.1.4. Page daccueil des dmarches en ligne .............................................................................................. 91 3.2. AUTRES PAGES SPECIFIQUES ........................................................................................................................ 92 3.2.1. Pages de contenu type article ....................................................................................................... 92
3.2.1.1. 3.2.1.2. 3.2.1.3. Prsentation dun contenu de type article ........................................................................................................ 92 Longueur du texte ............................................................................................................................................ 93 Fonctions associes larticle.......................................................................................................................... 94
3.2.2. 3.2.3. 3.2.4.

3.2.4.1. 3.2.4.2. 3.2.4.3.
Plan du site ......................................................................................................................................... 95 Page Contact ................................................................................................................................. 96 Moteur de recherche ........................................................................................................................... 97

Gnralits ....................................................................................................................................................... 97 Recherche avance........................................................................................................................................... 98 Rsultat de la recherche ................................................................................................................................... 99
3.2.5. Rpertoire des informations publiques ............................................................................................... 99 3.3. CAS DES DEMARCHES EN LIGNE ................................................................................................................. 100
Page 4/115
3.3.1. 3.3.2. 3.3.3.

3.3.3.1. 3.3.3.2. 3.3.3.3.
Prsentation des dmarches en ligne................................................................................................ 100 Navigation dans la dmarche ........................................................................................................... 101 Assistance lutilisateur dans la dmarche...................................................................................... 102
Aide gnrale de la dmarche et aides contextuelles ..................................................................................... 102 Questions frquentes relatives la dmarche ................................................................................................ 103 Visite guide .................................................................................................................................................. 103
3.3.4. Confirmation de la dmarche et accus de rception ....................................................................... 104 3.4. ASSISTANCE A LUTILISATEUR................................................................................................................... 105 3.4.1. Aide gnrale .................................................................................................................................... 105 3.4.2. Aides contextuelles............................................................................................................................ 105 3.4.3. Foire aux questions (FAQ) ............................................................................................................... 106 3.4.4. Assistance tlphonique .................................................................................................................... 107 3.5. TERMINOLOGIE .......................................................................................................................................... 108 3.6. CONTENUS 2.0 ........................................................................................................................................... 108 3.6.1. Flux RSS............................................................................................................................................ 109
3.6.1.1. 3.6.1.2. Syndication de flux RSS ................................................................................................................................ 109 Production de flux RSS.................................................................................................................................. 110
3.6.2. 3.6.3. 3.6.4.
Widgets ............................................................................................................................................. 111 Mashups............................................................................................................................................ 112 Partage communautaire de contenus................................................................................................ 112
Page 5/115
INTRODUCTION
Quest-ce que lergonomie informatique ?
L'ergonomie (du grec ergon - travail, et nomos - loi) est la discipline recherchant ladquation entre les caractristiques humaines et les caractristiques dun outil. Apparue dans le domaine de loptimisation du poste de travail, elle consiste adapter lenvironnement de travail et le comportement de la machine en fonction des caractristiques du travailleur (et non l'inverse). L'ergonomie informatique a pour objectif l'amlioration du dialogue homme ordinateur dans deux domaines principaux : lergonomie du logiciel et lergonomie du Web. La distinction entre ces deux domaines tend dailleurs sestomper compte tenu des rcentes volutions technologiques. A lheure o les contenus sur Internet se multiplient, le temps daccs linformation recherche et la facilit dutilisation dun site deviennent dterminants. La rflexion sur lergonomie des sites Web revt donc un caractre de plus en plus stratgique mesure que les usages se gnralisent et que la production de sites sindustrialise. La dmarche ergonomique consiste amliorer lutilisabilit des sites, c'est--dire le degr selon lequel un site peut tre utilis, par des utilisateurs identifis, pour atteindre des buts dfinis avec efficacit, efficience et satisfaction. Les tudes en utilisabilit menes auprs des internautes ont ainsi permis didentifier quelques facteurs de russite pour un site : un contenu de qualit ; des mises jour frquentes ; des temps de tlchargement minimaux ; un usage facile. Pour quun site rponde ces critres, on considre en ergonomie quil doit tre la fois utile, cest--dire adapt aux besoins et attentes des utilisateurs, et utilisable, cest--dire facile apprhender et utiliser. Lintgration de la dimension ergonomique dans le cycle de dveloppement dun site Internet est donc indispensable lamlioration significative de son degr dutilit et dutilisabilit.
Pourquoi une charte ergonomique unique des sites publics ?

On constate une forte progression du canal Web dans la relation entre les usagers et ladministration, tant en termes de volumes dchanges que daugmentation de loffre de sites et services en ligne. Dans un tel contexte, il est indispensable de maintenir la cohrence du paysage des sites Internet publics. Cette cohrence exige, entre autres, ladoption 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.
Page 6/115
Cest pourquoi le Conseil de Modernisation des Politiques Publiques du 12 dcembre 2007 a prvu ladoption dune charte ergonomique unique pour tous les services en ligne dans le cadre de lamlioration de laccueil des usagers dans les services publics. En offrant une vision cohrente et unifie des services publics en ligne pour les usagers, cette charte ergonomique commune aux sites Internet publics participe la dmarche damlioration de laccueil via le canal Web. Le respect des principes dicts par cette charte permettra ainsi de garantir pour les sites publics un niveau minimum de confort d'utilisation et d'accessibilit, l'homognit des codes visuels courants et des principes de navigation et l'amlioration des processus de conception et dalimentation en contenu. La charte a donc pour objet de dfinir un ensemble de rgles ergonomiques communes aux interfaces des sites Internet publics. Elle sinscrit par ailleurs dans le respect des standards du Word Wide Web Consortium (W3C) et des principes dinteroprabilit, daccessibilit et de scurit des rfrentiels gnraux (RGI, RGAA, RGS).
Quel est le champ dapplication de cette charte ?

Cette charte fait suite la charte des tlprocdures publiques (DGME 2006) quelle annule et remplace. Son champ dapplication dpasse dsormais les sites de dmarches en ligne : la charte sapplique en effet tout site Internet manant dun organisme assurant un service public, que celui-ci soit une autorit administrative ou quil agisse par dlgation dune telle autorit. Le contenu de la charte vise particulirement les sites institutionnels ainsi que les sites de services en ligne (notamment les sites de dmarches en ligne) de ces organisations. Elle peut ventuellement servir de rfrence pour les sites vnementiels, les sites Intranet ou les applications mtier Web, bien que ces cas particuliers ncessitent ladoption de rgles ergonomiques spcifiques. La charte sapplique ncessairement aux sites Internet institutionnels et aux sites de dmarches en ligne de lEtat. Elle peut aussi sappliquer utilement tous les autres sites de la sphre publique (juridictions judiciaires et administratives, collectivits territoriales, tablissements hospitaliers, tablissements publics divers, organismes grant des rgimes de protection sociale, organismes chargs de la gestion dun service public administratif, tablissements de lEducation Nationale, etc.).
Que contient cette charte ?

Les articles de la charte respectent la structure suivante : une description de la notion aborde dans le chapitre (facultatif) ; les rgles dergonomie associes cette notion, classes en deux catgories : recommand : ce niveau de prconisation indique que la rgle dicte reprsente une exigence forte de la charte ergonomique ; utile : ce niveau de prconisation indique que la rgle dicte constitue seulement une bonne pratique ergonomique ; Les rgles spcifiques la sphre gouvernementale sont signales par un pictogramme Marianne. les chapitres issus des rfrentiels gnraux en relation avec la notion dergonomie.
Page 7/115
Il est important de noter que cette charte ergonomique nest pas une charte graphique : les lments constituant lidentit graphique des sites restent linitiative des administrations mettrices. Cette charte constitue donc le cadre de rfrence sur lequel pourront sappuyer les administrations pour raliser la dclinaison graphique de leurs sites Internet. Par ailleurs, il importe de rappeler que lergonomie des sites Internet doit s'accommoder des principes d'accessibilit. Ceux-ci garantissent que l'accs aux services en ligne est donn au plus grand nombre dutilisateurs, y compris aux personnes atteintes d'un handicap. Cest pourquoi la charte ergonomique est complmentaire du rfrentiel gnral daccessibilit pour les administrations (RGAA), auquel elle fait rfrence quand les notions dergonomie ont impact en matire daccessibilit.
Comment utiliser cette charte ?

La charte a vocation guider les concepteurs et les dveloppeurs de sites Internet publics dans leur dmarche de ralisation et dharmonisation des sites. A ce titre, elle peut tre annexe aux cahiers des charges des marchs publics afin de fixer le cadre ergonomique de rfrence. Ce cadre est dessein large et exhaustif ; en fonction des objectifs spcifiques des administrations, du public vis, de la nature du message vhiculer, les administrations pourront btir partir de ce cadre des rgles ergonomiques spcifiques. En tant que recueil des bonnes pratiques ergonomiques, la charte peut galement tre utilise en tant que support de rfrence par les chefs de projet, les concepteurs et dveloppeurs, les services de communication. La charte ergonomique fera lobjet dun processus de rvision rgulier permettant de ladapter lvolution des usages dInternet et aux spcificits des administrations. Les volutions de la charte ayant un impact potentiel sur les sites publics font lobjet dune concertation au sein du club des webmestres gouvernementaux runis par le Service dInformation du Gouvernement (SIG).
Comment se mettre en conformit

La conformit dun site Internet avec la charte ergonomique repose sur une dmarche dautodclaration. Cette dclaration de mise en conformit se fait partir dun guide dauto-valuation remplir directement par le responsable du site. A lissue de lvaluation, un systme de notation indiquera le niveau de respect de la charte. La DGME dlivrera alors une attestation de conformit, si le site atteint un seuil minimal de rgles respectes. Lmetteur du site peut alors signaler la conformit du site en question dans les mentions lgales. Ce dispositif repose donc sur la confiance envers les metteurs de site, la DGME se rservant toutefois la possibilit de procder des sondages pour sassurer du respect des principes de la charte ergonomique sur les sites ayant effectu une dclaration.
Page 8/115
1. REGLES DORDRE GENERAL

Cette premire partie sattache dfinir les rgles dergonomie dordre gnral dans des domaines cl tels que la navigation lintrieur dun site, la lisibilit et la structuration de linformation. Les aspects techniques lis aux navigateurs, rsolutions, langages seront galement abords dans cette partie sous langle de lergonomie. Des questions plus spcifiques la sphre publique, tels que le rfrencement entre sites publics ou les dispositifs danalyse statistique seront galement traits en fin de partie.
1.1. ARCHITECTURE DE LINFORMATION
1.1.1. Dfinition de larchitecture de linformation

Larchitecture de linformation est lart dorganiser le contenu pour aider les utilisateurs combler leurs besoins en information. Dans sa dfinition minimale, larchitecture de linformation consiste en une approche raisonne de lorganisation de contenus interactifs. De larchitecture de linformation vont donc dpendre la structure, la navigation et linteractivit de lapplication. La dfinition de larchitecture de linformation est une tape cl dans la conception dun site. Elle consiste modliser la structure dun site, notamment : le systme de navigation ; la structure et lorganisation ; le systme de recherche ; le plan de site. Une mauvaise architecture dinformation prsente 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 dvelopper et cela accrot son cot final ; un site mal structur est plus difficile et couteux faire voluer. La dfinition de larchitecture de linformation permettra de circonscrire prcisment le primtre fonctionnel du site, les contenus traits par le site et larticulation entre ces contenus.
Recommand
Larchitecture de linformation doit tre dfinie ds le dbut de la conception dun site. Cette tape est dautant plus critique que le contenu du site est complexe.
La dfinition de larchitecture de linformation dun site se fait en trois tapes :
Page 9/115
1re tape : recenser de faon exhaustive les contenus (contenus existants, attentes supposes ou exprimes des utilisateurs, etc.) ; 2e tape : catgoriser 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) ; 3e tape : structurer les contenus (dfinition des hirarchies entre les contenus, des liens transversaux entre les contenus, etc.). Ces tapes sont ralises en fonction de considrations ergonomiques de base telles que : la rapidit daccs linformation (les informations les plus recherches doivent tre accessibles rapidement, la hirarchie des niveaux dinformation doit correspondre la vision de lutilisateur, etc.) ; la cohrence des regroupements dinformation (regroupement des contenus de mme nature, non redondance de linformation, etc.) ; la clart de lorganisation du contenu (quilibre entre les rubriques, titres de rubriques explicites et comprhensibles par les utilisateurs, etc.).
Utile
Il est conseill de dfinir larchitecture de linformation sur la base dune hypothse de parcours logique et cohrent de consultation des utilisateurs. Larchitecture de linformation ne doit pas tre le simple reflet de la structure organisationnelle de ladministration mettrice.
1.1.2. Largeur et profondeur dun site

Ltape de structuration des contenus va permettre de dfinir deux notions essentielles de larchitecture du site : La largeur du site : la largeur correspond au nombre ditems (appels rubriques) par niveau dinformation. Par abus de langage, on entend par largeur du site le nombre de rubriques de premier niveau, mme si cette largeur varie dun niveau dinformation lautre. La profondeur du site : la profondeur correspond au nombre de niveaux dinformations contenus dans le site.
Page 10/115
Exemple darchitecture de linformation (largeur du premier niveau : 4 ; profondeur = 3)
Accueil Accueil
1er niveau
L=4
2e niveau P=3
L=3
3e niveau
L=2
La dfinition de larchitecture de linformation aboutit une cartographie des rubriques du site. Lquilibre entre largeur et profondeur du site rpond quelques principes de bases.
Utile
Il est conseill de ne pas dpasser 7 rubriques plus ou moins 2 en largeur par niveau dinformation. Au-del, la mmoire court terme nest plus capable dintgrer lorganisation du contenu. Il est conseill de ne pas dpasser une profondeur de 3 4 niveaux dinformation. Au-del, linformation risque dtre trop enfouie et lutilisateur sera dcourag dans sa navigation. Il est conseill de trouver un bon compromis entre largeur et profondeur du site : les rubriques et niveaux dinformations doivent tre quilibrs et le site ne doit tre ni trop large, ni trop profond.
Utile
Utile
1.2. SYSTEMES DE NAVIGATION

Une fois larchitecture de linformation arrte, il faut concevoir les lments qui permettront de garantir une bonne navigation dans le site. Ces lments, appels systmes de navigation , dfinissent la manire dont les crans senchanent (on parle alors de cinmatique des crans) via des outils spcifiques : bandeau de navigation, menus contextuels, fonctions transverses, etc.
Page 11/115
La navigation dans le site doit tre suffisamment cohrente et intuitive pour devenir transparente aux yeux des utilisateurs. Ceux-ci doivent pouvoir se concentrer sur le contenu prsent dans le site et non pas sur la recherche et la comprhension des mcanismes de navigation permettant dy avoir accs. Par le biais de fils conducteurs (guidage), lutilisateur doit comprendre rapidement o aller chercher linformation et comment accder aux fonctionnalits dont il a besoin. La navigation et laccs aux divers lments du site se fait au travers des systmes de navigation gnralement classs en deux catgories : les menus ou boutons de navigation, regroups dans un bandeau de navigation, souvent dsigns comme systme de navigation principal ; les liens ou icnes qui servent dlments dorientation de navigation complmentaires. Ils compltent le systme de navigation principal et permettent daccder aux diffrents contenus et fonctionnalits du site.
Recommand Recommand
La position de tous les systmes de navigation doit tre constante sur lensemble des pages du site. Chaque page du site doit comporter des lments de navigation et de reprage permettant lutilisateur de rpondre trois questions : O suis-je ? Do viens-je ? O puis-je aller ? Autrement dit, lutilisateur doit pouvoir localiser la page affiche parmi lensemble des pages du site et poursuivre sa navigation en consultant dautres pages.
Utile
Il est conseill de concevoir les lments de navigation de telle sorte que lutilisateur puisse accder aux contenus du site via deux parcours distincts (un chemin principal et un ou plusieurs chemins alternatifs).
Que disent les rfrentiels gnraux ? RGAA 13.4 : Fournir des mcanismes de navigation cohrents 13.6 : Regrouper les liens par type de fonction
1.2.1. Systme de navigation principal et secondaire

Recommand Les lments du systme de navigation principal doivent imprativement tre visibles et prsents de faon cohrente sur toutes les pages du site (format et localisation) sous forme dun bandeau de navigation (horizontal, vertical ou mixte). Une prsentation cohrente diminue grandement la dure dapprentissage des
Page 12/115
mcanismes de navigation et favorise le dveloppement de rflexes de navigation chez les utilisateurs. loppos, une prsentation incohrente a pour consquence de favoriser les risques derreur dans les choix de navigation. Recommand Utile Le systme de navigation principal doit indiquer visuellement lutilisateur dans quel menu ou rubrique il se trouve (mise en surbrillance, code couleur, etc.). Lutilisation dimages cliquables plutt que de boutons textuels pour la ralisation 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 daccessibilit. En dehors du systme de navigation, les boutons daction doivent tre raliss en mode texte HTML. Voir ce sujet le chapitre 2.4 Boutons daction.
Que disent les rfrentiels gnraux ? RGAA RGI 13.5 : Proposer une barre ou un menu de navigation 5.3 Volet technique : indpendance par rapport aux appareils et leur IHM
1.2.1.1. Systme de navigation horizontal

Le systme de navigation horizontal est le style le plus courant et il convient tous les types darchitecture. Il est suffisant pour les sites dont la profondeur nexcde pas trois niveaux de profondeur (au-del, il faut le coupler avec un systme de navigation secondaire). Il consiste prsenter toutes les options de navigation possibles (ou au moins celles de premier niveau) sur chaque page. Lavantage est quil permet doffrir lutilisateur une vue densemble de larchitecture du site. Linconvnient est que la liste des options de navigation peut requrir un espace relativement important dans la page, surtout dans le cas dun site avec une architecture complexe, ce qui peut rduire considrablement la place rserve au contenu. Le systme de navigation horizontal est souvent complt par des menus droulants et/ou des menus en cascade accessibles partir du premier niveau dinformation. Ces menus apparaissent lors du survol de la zone laide de la souris (ce survol sappelle roll-over ). Lavantage de cette navigation permet de limiter le nombre de clics pour lutilisateur et daccder rapidement linformation recherche. Quelque soit la solution technique retenue, une attention particulire doit tre apporte laccessibilit de ce type de systme de navigation.
Utile
Les sites ayant un systme de navigation principal horizontal nexcdent pas trois niveaux de profondeur dinformation.
Page 13/115
Exemple de systme de navigation horizontal avec menu droulant en deuxime niveau et menu en cascade en troisime niveau.
Niveau 1
Item 1
Item 2
Item 3 Sous Item 1 Sous Item 2 Sous Item 3
Item 4
Item 5
Item 6
Sous sous item 1 Sous sous item 2 Sous sous item 3 Sous sous item 4 Sous sous item 5
Niveau 3
Niveau 2
Sous Item 4 Sous Item 5 Sous Item 6
1.2.1.2. Systme de navigation vertical

Le systme de navigation vertical peut galement tre retenu comme systme de navigation principal. Il sapparente larborescence du poste de travail et de ce fait est en gnral bien compris par les utilisateurs. Il convient particulirement aux sites souhaitant mettre en valeur la hirarchie des niveaux dinformations. Il sert de colonne vertbrale structurante et rassurante en affichant constamment la position dans larchitecture du site. La navigation dans un systme de navigation vertical se fait en cliquant sur les items (menus) constituant les diffrents niveaux hirarchiques. Le niveau de navigation en cours est repr graphiquement (couleur, clairage, style, etc.). Si un niveau de navigation donn nest pas droul, un visuel distinctif et comprhensible (flche, signe + , etc.) invite le drouler. Un clic sur cet item droule le niveau de navigation infrieur. Si un niveau de navigation donn est droul, un visuel distinctif et comprhensible (flche, signe - , etc.) invite le refermer. Un clic sur cet item referme tous les niveaux de navigation infrieurs. Ce systme prsente lavantage doccuper peu de place lcran mais il ncessite de cliquer sur les lments pour plier et dplier les menus, ce qui peut devenir fastidieux en cas de navigation intensive. De plus, il saccommode mal des navigations transverses puisquil ne permet pas de passer directement entre deux sous-niveaux situs dans des branches diffrentes de larchitecture du site.
Utile
Le systme de navigation vertical est conseill lorsque le premier niveau dinformation est important (gain de place par rapport au systme de navigation horizontal limit environ 7 rubriques) ou lorsquil est susceptible daugmenter rgulirement. Il est en effet plus facile dajouter des rubriques verticalement quhorizontalement. Il convient toutefois de rappeler que la limitation du nombre de rubriques 7 [ 2] constitue une bonne pratique. Les sites dont les parcours de navigation attendus sont transverses aux rubriques (logique de survol plutt que dapprofondissement dune rubrique) ne doivent pas privilgier un systme vertical darborescence ncessitant de nombreux clics avant daccder la rubrique dsire.
Utile
Page 14/115
Exemple de systme de navigation vertical 4 niveaux
Niveau 1 Sous Item 1 Sous Item 2 Item 2 n-2 Niveau 2 Item 2 n-2 + Item 2 n-3 Item 2 n-4 Item 2 n-4 Item 2 n-4 Sous Item 3 Sous Item 4 Niveau 4 Niveau 3
1.2.1.3. Systme de navigation par onglets

La navigation par onglet constitue un mode de navigation trs courant sapparentant au systme de navigation horizontal pour le premier niveau, mais elle ne fait en gnral pas appel aux menus droulants. La prise en main par les utilisateurs de ce type de navigation est trs aise et intuitive. Le systme de navigation par onglet est particulirement adapt dans le cas de pages dont le cheminement est dtermin par un ordre tabli (formulaires tapes, dmarche en ligne, etc.). Elle structure et facilite le reprage (localisation) de lutilisateur au sein de linterface. Voir ce sujet le chapitre 1.2.4 Cas particulier de la navigation guide.
Utile
Il est conseill de limiter lutilisation dun systme de navigation par onglet aux architectures ne comprenant que deux voire trois niveaux dinformation.
Exemple de systme de navigation par onglets deux niveaux
Niveau 1 Sous Item 1 Item 2 n-3 Sous Item 2 | Item 2 n-3 | Sous Item 3 Item 2 n-3 Sous Item 4 Niveau 2
| Item 22 n-3 Item n-3
Page 15/115
1.2.1.4. Combinaison des diffrents systmes de navigation

Lutilisation des diffrents systmes de navigation ne se fait pas ncessairement de faon exclusive. En fonction des objectifs du site et des caractristiques de son contenu, il peut tre ncessaire de combiner des systmes verticaux avec des systmes horizontaux ou par onglets.
Recommand
Dans le cas o les niveaux dinformation ont recours des systmes de navigation distincts au sein du site (horizontal, vertical, onglets), la hirarchie entre les niveaux dinformation doit tre vidente pour les utilisateurs. Le positionnement hirarchique des diffrents niveaux dinformation ne doit donc pas tre source dambigit. Par exemple, en cas de recours un systme horizontal et vertical, le systme horizontal prime sur le systme vertical. Par consquent, le premier niveau dinformation est rserv au systme horizontal et le second niveau dinformation est trait par le systme vertical. Le graphisme des systmes de navigation peut galement permettre de renforcer la hirarchie entre les niveaux dinformation.
Exemple dun systme de navigation combinant un premier niveau affich horizontalement et les niveaux suivants affichs verticalement
Niveau 1 (horizontal)
Item 1
Item 3.1 Item 3.2
Item 3.2.1
Item 2
Item 3
Item 4
Item 5
Item 6
Niveaux 2 et 3 (verticaux)
Item 3.3 Item 3.4
Page 16/115
1.2.2. Autres lments dorientation et de navigation
1.2.2.1. Fil dAriane (chemin de navigation)

Le fil dAriane (galement appel chemin de navigation, chemin de fer ou encore petit poucet ) est un repre pour la navigation lintrieur dun site Web. Il constitue donc une aide aux systmes de navigation. Il est constitu dune suite ordonne de liens hirarchiques reprsentant chacun un niveau de larborescence parcouru par lutilisateur. Il permet ainsi linternaute de reprer sa position dans larborescence du site.
Recommand
Le fil dAriane est recommand partir de 3 niveaux de navigation. Exemple de fil dAriane
Recommand
Chaque lment du fil dAriane est un lien hypertexte accessible directement. Le niveau de navigation en cours doit tre diffrenci des niveaux suprieurs (par exemple par ladoption dun code couleur diffrent). Le fil dAriane doit tre facilement reprable par lutilisateur : lemplacement le plus courant se situe en haut gauche de lcran, sous le systme de navigation principal et au-dessus du contenu de la page.
Recommand
Utile
Les libells du fil dAriane doivent correspondre aux titres des pages afin doptimiser le rfrencement de celles-ci par les moteurs de recherche. Si le titre est trop long, il est possible de le raccourcir une trentaine de caractres suivis de points de suspension.
Que disent les rfrentiels gnraux ? RGAA 13.3 : Fournir des informations sur l'architecture gnrale du site
Page 17/115
1.2.2.2. Adresse du site (URL)

Ladresse du site ou URL (Uniform Resource Locator) participe lidentification des pages et au reprage dans larchitecture du site, ainsi qu son rfrencement. En ce sens, elle constitue un lment important du systme de navigation. Avant toute dmarche de cration d'un nouveau de domaine, il conviendra de se rfrer au dcret n 2007-162 du 6 fvrier 2007, relatif lattribution et la gestion des noms de domaine de lInternet et sur le site de l'AFNIC : http://www.afnic.fr/.
Recommand
LURL et les chemins associs (le chemin est la chaine de caractre qui suit lURL racine) doivent tre signifiants : il est donc important qu'elle soit cohrente avec la structure du site (emplacement des pages dans le site, titre des pages, etc.) afin que les utilisateurs puissent apprhender le contenu d'une page partir de son adresse. Certains outils de publications gnrent automatiquement des URL du type URL/article=161 ou URL/rubrique=12. Ce type dURL nest pas signifiant et doit donc tre vit.
Utile
Concevoir des URL de qualit permet d'optimiser les stratgies de rfrencement. Une URL doit tre explicite sur le contenu du site et de la page permet damliorer le classement dans les rsultats des moteurs de recherche. Par ailleurs, lURL est dterminante 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 dautres sites Web (rsultats d'un moteur de recherche, lien sur un site) ; sur des supports divers (plaquettes, prsentations, documents bureautiques, etc.).
Recommand
Lcriture dune URL doit respecter les rgles suivantes : utilisation exclusive des minuscules sans mlange de casse (pour des raisons videntes de facilit de saisie et de mmorisation) ; les accents sont proscrits ; les caractres spciaux sont proscrits ; les sparateurs recommands sont - et _.
Recommand
Sil est fait mention dune 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. Une URL simple facilite la visibilit et la mmorisation du site. Pour ce faire, elle doit exclure tout vocabulaire technique et symbole nayant aucune signification pour les utilisateurs. Elle doit au contraire adopter des termes comprhensibles et mmorisables. La mmorisation est dautant plus facile que ladresse est courte.
Utile
Page 18/115
Recommand
La cration dun nouveau nom de domaine en .gouv.fr ncessite une demande pralable au Dpartement Rdaction & Multimdia du Service dInformation du Gouvernement. Un formulaire dagrment complter sera alors envoy lmetteur du site. Une fois le formulaire dment 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 cohrence avec le contenu du site ; sa pertinence en termes de communication vers le grand public ; sa capacit tre rfrenc efficacement dans les moteurs de recherche. En cas dagrment de principe, une lettre dagrment dfinitif parviendra au demandant, sign par le directeur du Service d'information du Gouvernement. Aprs obtention de lagrment 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 destins aider lutilisateur dans sa navigation. En fonction de la nature et des caractristiques du site, elle comprend gnralement les lments suivants : le moteur de recherche ; un bloc didentification si le site dispose dun accs restreint ; le choix de la langue pour les sites proposant des contenus dans plusieurs langues ; un lien contact si lmetteur du site souhaite valoriser sa politique daccueil (cette fonction peut galement tre insre dans le bas de page selon limportance que souhaite lui accorder lmetteur du site).
Utile
Les fonctions transverses sont regroupes dans une zone gnralement situe en haut droite. Sa position est constante sur lensemble du site.
Page 19/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 repre tout au long du site et comprend gnralement, selon de la nature et des caractristiques du site, les lments suivants : les mentions lgales ; le plan du site ; un lien vers la page presse ; un lien vers les horaires et le plan daccs si lmetteur du site reoit du public ; un lien vers la page accessibilit (voir ce sujet, le chapitre 1.3.4 Pictogrammes et icnes) ; un rappel du nom de lmetteur du site et lanne de ralisation ou de refonte du site ; un lien vers la page rpertoire des informations publiques ; un lien contact si lmetteur du site ne souhaite pas particulirement valoriser sa politique daccueil (voir ce sujet le chapitre 3.2.3 Page Contact ) ; un lien vers la page daide ou la page FAQ, si elles existent.
Recommand
Le pied de page doit apparatre sur lensemble des pages du site, en bas de page.
1.2.3. Positionnement des systmes de navigation (zoning)

Lorsque larchitecture de linformation a t dfinie, le choix des systmes de navigation sappuie gnralement sur une tape de zoning . Cette phase consiste dfinir visuellement les grands espaces dactions dune interface sur lesquels lutilisateur devra interagir. Les crans sont reprsents de faon gnrique afin de garder une bonne lisibilit. Lapproche choisie pour le zoning conditionne : Lorganisation de linformation sur le site : les contenus aux fonctions similaires sont regroups dans une mme zone pour rendre linterface plus intuitive. La hirarchisation des zones dinformation : le zoning prend en compte la nature du site, ses objectifs, et limportance stratgique des diffrents lments de la page pour les positionner dans linterface. En fonction de son importance stratgique, 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 lespace dencombrement qui convient son importance dans la hirarchisation de linformation.
Page 20/115
La cohrence de lorganisation du contenu sur les diffrents types de modle de page (gabarits) : Le zoning reprsente les diffrents modles de page prsents dans le site. La reprsentation de chaque modle de page permet dassurer une cohrence ergonomique sur lensemble du site. En analysant ces diffrents points stratgiques, et en proposant des solutions pour chacun dentre eux, la phase de zoning garantit la conception dune interface entirement adapte aux objectifs du site. La phase de zoning propose gnralement plusieurs scenarios permettant de comparer des orientations diffrant notamment par leurs systmes de navigation. Elle se conclut par la rdaction du document de zoning prcis et oprationnel. Le zoning doit galement prendre en compte les pratiques de lecture des internautes. Certaines zones de lcran sont statistiquement plus vues que dautres, appeles zones morte. Dcoupage de lcran en fonction de la frquentation de la zone (plus la zone est fonce, plus elle est consulte). 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 systmes de navigation combinent un niveau principal horizontal et un niveau secondaire vertical.
Page 21/115
Premier niveau de navigation (exemple 1)

1 Contenu dintrt 2 Navigation 3 Fonctionnalits 4 Territoire de marque
Recherche
4 Bandeau identitaire
Fonctions transverses
2 Systme de navigation principale

> Fil dAriane
Zone identification
1
Espace contenu principal (modulable)
1
Espace contenu contextuel
(divisible) > Liens > Contenus sensibles > Contenus transverses > Contenus vnementiels > Widgets / Abonnement RSS PODCAST / WEBCAST
3 Pied de page
Niveau de navigation secondaire (exemple 1)

Recherche

> Fil dAriane
2
Systme de navigation secondaire
3 identification
Zone
1
1
Espace contenu Contextuel (divisible)
3 Pied de page
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 systmes de navigation combinent un niveau principal horizontal et un niveau secondaire en onglets.
Page 22/115

1 Contenu dintrt 2 Navigation 3 Fonctionnalits
4 Territoire de marque
Identification Recherche

> Fil dAriane
1
Espace contenu contextuel (divisible)
3 Pied de page

Recherche

> Fil dAriane
2
Niveau 3
Systme de navigation Secondaire
1
Espace contenu contextuel (divisible)
3 Pied de page
1.2.4. Cas particulier de la navigation guide

La navigation guide, par opposition la navigation libre, consiste imposer lutilisateur un parcours prdfini. Cest le cas par exemple pour une dmarche en ligne ncessitant le renseignement de nombreux champs selon un ordre prcis. Dans ce mode, les tapes se succdent de faon linaire sans offrir de choix lutilisateur.
Page 23/115
La navigation guide est approprie pour : les tches de saisie des formulaires pagins ; les tches devant respecter une procdure prcise (notamment les dmarches en ligne) ; les tches dapprentissage (modules de formation en ligne).
Recommand Recommand Recommand
Lutilisateur doit pouvoir revenir ltape prcdente chaque tape (sauf la premire). Une sauvegarde implicite des donnes saisies doit tre ralise chaque tape. Il faut fournir lutilisateur un retour visuel sur ltape en cours, les tapes dj ralises et les tapes venir (via un systme donglets avec distinction visuelle de longlet actif, par exemple). Si labandon de la procdure est propos, il faut fournir un cran intermdiaire, sur lequel un texte explique la perte des donnes et demande confirmation de labandon. Exemple de navigation guide : le cas du changement dadresse en ligne (https://www.changement-adresse.gouv.fr)
Utile
Affichage des tapes avec retour visuel
Possibilit de revenir la page prcdente
Page 24/115
Dans dautres cas, la navigation est dite semi-guide : c'est--dire que lutilisateur doit passer par un certain nombre dtapes effectuer sans ordre prdfini (exemple : le renseignement dun curriculum vitae en ligne).
Recommand
Dans le cas dune navigation semi-guide , lutilisateur est libre de modifier sa saisie pour chaque tape tant que la totalit des tapes na pas t valide. Il ne faut donc pas recourir dans ce cas aux boutons de type page prcdente ou page suivante , car on ne peut pas prsumer du parcours de lutilisateur. Il faut fournir lutilisateur un retour visuel (distinction graphique) sur ltape en cours.
Recommand
Que disent les rfrentiels gnraux ? RGAA 13.9 : Faciliter la navigation sur des groupes de pages
1.3. LISIBILITE
1.3.1. Polices de caractres

Bien que lutilisateur puisse toujours modifier les polices affiches par dfaut dans son navigateur, le recours aux polices de caractres doit respecter certaines rgles.
Recommand
Pour garantir la meilleure lisibilit, il faut employer une police sans serif (empattement), telles que Verdana, Arial ou Helvetica (ou leur quivalent), conues pour la lecture lcran. Dune manire gnrale, il convient de choisir des polices disponibles en standard sur toutes les plates-formes (PC, Macintosh, etc.). Pour garder le texte courant lisible, il faut utiliser au minimum un corps de 10 pixels (11 pixels conseills) pour le texte normal. Les polices sont indiques en taille relative afin que lutilisateur puisse redimensionner la taille des caractres affichs. Attention : le comportement de ces tailles relatives peut diffrer dun navigateur lautre. Il est conseill davoir recours 3 polices diffrentes, avec un maximum de 4. Chaque police doit remplir une fonction distincte : une pour les titres, lautre pour les boutons, etc.
Recommand
Utile
Laffichage des polices choisies peut diffrer selon les caractristiques du poste de travail. Les couples suivants peuvent notamment poser des problmes : X et K; l et L; O et Q; u et v; t et y; S et 5; l et 1.
Page 25/115
Que disent les rfrentiels gnraux ? RGAA RGI 3.4 : Utiliser des units relatives pour la prsentation 3.2 Volet technique : Polices d'criture et fontes de caractres
1.3.2. Utilisation des styles

Un style dfinit la police, le corps (taille) de la police, les attributs de la police (droit, italique, gras, etc.), la casse (majuscule, minuscule), linterlignage, linterlettrage, la couleur et lalignement du texte.
Recommand
Dans un souci de cohrence entre les lments textuels, des styles doivent tre bien dfinis pour chaque catgorie dobjet dans la mise en page. Ces styles sont appliqus lensemble du site. La hirarchie des niveaux dinformation (notamment les titres) doit tre respecte, afin par exemple de ne pas donner une taille de police trop grosse pour une information secondaire. Les textes qui clignotent ou dfilent sont viter. Ils dtournent lattention plutt quils ne lattirent et sont souvent mal perus par les utilisateurs. Pour le texte normal, il faut viter les textes en lettres majuscules. Lutilisation des majuscules est toutefois admise pour des informations brves (intitul dun bouton, titre de page, titre de rubrique, etc.) ou pour signaler un avertissement. Par ailleurs, le soulignement doit tre rserv aux liens hypertextes.
Recommand
Recommand
Utile Utile
Les phrases longues en italique, moins lisibles, sont viter. Il est conseill daligner le texte dun seul ct (gnralement gauche), plutt que de le justifier de chaque ct. En effet, la justification des textes (alignement du texte gauche ET droite) perturbe la lecture, en particulier quand les lignes possdent peu de caractres.
Que disent les rfrentiels gnraux ? RGAA 7.3 : Eviter les mouvements de contenus
Page 26/115
1.3.3. Couleurs
Les couleurs sont un lment important de la signaltique : elles facilitent le guidage de lutilisateur en regroupant visuellement les diffrentes catgories dobjets composant linterface, contribuant ainsi un plus grand confort dutilisation. Les couleurs permettent galement de mettre en valeur certaines informations.
Recommand
Les couleurs ne doivent pas fatiguer les yeux ou gner la lecture. Le fond de page doit tre de prfrence de couleur claire pour garantir une bonne lisibilit et faciliter limpression des pages du site. Afin daugmenter 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 transformes en niveaux de gris. Par ailleurs, il est conseill de toujours vrifier le rsultat de limpression dune page avant darrter les choix de couleurs.
Utile
Il est prfrable de ne pas utiliser plus de 3 couleurs dominantes sur une mme page (hormis les couleurs des liens et du texte). Privilgier les couleurs pastel pour ne pas gner la lecture. Un site Web trop color ou dans lequel les couleurs sont utilises sans cohrence risque de nuire considrablement sa consultation. Les utilisateurs risquent dy voir soit un dfaut de conception soit une source dirritation. 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 derreur en rouge pur sur fond noir sera difficile lire.
Couleur du texte Blanc Jaune Cyan Vert Magenta Rouge Bleu Utile Utile Utile Utile
Couleur de fond viter Jaune Blanc, Cyan Vert, Jaune Cyan, Bleu Rouge Magenta, Bleu Rouge
Couleur de fond utiliser Magenta, Rouge, Vert, Bleu Bleu, (Rouge), (Magenta) Bleu, (Blanc), (Rouge) Jaune, Blanc, (Rouge), (Magenta) Bleu, Blanc, (Cyan), (Vert) Blanc, Jaune, Cyan, Vert Blanc, (Jaune), (Vert)
Pour les typographies, on dfinira une couleur pour le texte de contenu, une couleur de liens pour chaque tat (actif, visit). Les conventions en matire de codes couleurs doivent tre respectes. Par exemple, le rouge signifie arrt ou danger , le vert, dpart ou repos , etc. Il est conseill de rserver les couleurs vives pour attirer et capter lattention. Par exemple, le rouge est utile pour signaler des champs de saisie obligatoires. Lutilisation de fonds texturs ou avec des motifs doit tre vite car cela nuit la lisibilit du texte.
Page 27/115
Que disent les rfrentiels gnraux ? RGAA 2.1 : Ne pas utiliser uniquement la couleur pour donner accs l'information 2.2 : Proposer des contrastes de couleurs suffisants 7.1 : Eviter les changements brusques de luminosit 7.2 : Eviter les clignotements des lments
1.3.4. Pictogrammes et icnes

Un pictogramme dsigne un visuel de petite taille contribuant la comprhension des contenus. Sa fonction est de dlivrer une information dordre gnral, mais il ne joue aucun rle dans la navigation. Exemple de pictogramme :
Une icne dsigne galement un visuel de petite taille dont la fonction est daider lutilisateur se reprer et naviguer dans linterface. Elle constitue notamment un code trs efficace pour illustrer un accs direct certaines fonctions transverses (par exemple : retour la page daccueil, accs un formulaire pour poser une question, moteur de recherche, etc.). Exemple dicne :
Recommand Recommand Utile
Les icnes et pictogrammes non usuels ou quivoques, sont doubls dun libell explicite. Les pictogrammes et les icnes doivent inclure la balise ALT au mme titre que toutes les images signifiantes du site. Les formats dicnes conseills sont : 1212, 2424 ou 4848 pixels.
Certaines certifications propres aux services publics peuvent faire lobjet dun pictogramme particulier. Cest le cas du RGAA (rfrentiel gnral daccessibilit pour les administrations) et du rfrentiel Marianne.
Page 28/115
Recommand
Les organismes publics ayant dpos une dclaration de conformit feront apparatre un pictogramme RGAA au niveau du pied de page. La balise TITLE du pictogramme sera renseigne avec la mention Conforme RGAA et prcisera le niveau daccessibilit atteint. Le pictogramme RGAA contient idalement un lien renvoyant vers la page daide accessibilit du site. Cette page liste les pages ou secteurs du site drogeant aux exigences daccessibilit, leur type de contenu et les solutions alternatives pour y remdier (cf. document daccompagnement du RGAA). Pictogramme RGAA ( venir)
Recommand
Le label Marianne garantit le respect des exigences du rfrentiel Marianne qui dfinit la qualit de la relation entre ladministration et les usagers : accs aux services, coute, orientation et courtoisie, clart et justesse des rponses, respect des dlais, traitement des rclamations, prise en compte des attentes, valuation du niveau de satisfaction, etc. Les tablissements publics ayant obtenu le label Marianne font apparatre le pictogramme labellis Marianne dans le pied de page de leur site institutionnel. Pictogramme labellis Marianne
Dans ce cas, linfo-bulle associe au pictogramme mentionne le texte suivant :
Cet tablissement a obtenu le label Marianne auprs Cet tablissement a obtenu le label Marianne auprs dun organisme de certification habilit dun organisme de certification habilit [nom_du_certificateur]. [nom_du_certificateur].
Un lien vers un ventuel article spcifique au label rdig par lmetteur du site est associ au pictogramme. A dfaut darticle spcifique, le lien pointe vers la prsentation du rfrentiel Marianne : http://www.modernisation.gouv.fr/piliers/ameliorer/le-label-marianne/index.html Utile Les tablissements publics ayant engag officiellement une dmarche de mise en conformit avec les exigences du rfrentiel Marianne peuvent faire apparatre le pictogramme engagements Marianne dans le pied de page de leur site institutionnel.
Page 29/115
Pictogramme engagements Marianne
Dans ce cas, linfo-bulle associe au pictogramme mentionne le texte suivant :
Cet tablissement sest engag officiellement Cet tablissement sest engag officiellement respecter les exigences du rfrentiel Marianne auprs respecter les exigences du rfrentiel Marianne auprs dun organisme de certification habilit dun organisme de certification habilit [nom_du_certificateur]. [nom_du_certificateur].
Un lien vers un ventuel article spcifique la dmarche engage par lmetteur du site est associ au pictogramme. A dfaut darticle spcifique, le lien pointe vers la prsentation du rfrentiel Marianne : http://www.modernisation.gouv.fr/piliers/ameliorer/le-label-marianne/index.html Emplacement des pictogrammes RGAA et label Marianne
Langues Authentification Contact Recherche
Signature Systme de navigation principal
Contenu contextuel
Contenu contextuel Contenu principal
Liens externes Bannire E-rgie
Pied de page
Pictogramme RGAA
Pictogramme labellis Marianne
Page 30/115
1.3.5. Lisibilit cognitive

La lisibilit cognitive dsigne la faon dont un texte peut tre compris et interprt par un utilisateur, en complment de la lisibilit visuelle aborde dans les sous-chapitres prcdents (polices de caractres, styles, couleurs et pictogrammes). La lecture sur Internet nest pas une transposition de la lecture sur papier : le confort visuel, lorganisation de linformation, la prsentation du contenu et les modes de navigation diffrent sensiblement dun support lautre. Les tudes tendent montrer que la majorit du temps de navigation est consacr au survol des sites et lexploration du contenu, au dtriment de la lecture mot mot du contenu lui-mme. Ce deuxime niveau de lecture, o la qualit du texte est dterminante, nintervient que lorsque linformation recherche a t localise. Lutilisateur doit donc comprendre trs rapidement si le contenu dune page est susceptible de lintresser ou correspond linformation quil recherche. Les principes suivants permettent doptimiser la lisibilit cognitive des sites Internet.
Utile Utile
Lorganisation de linformation et la hirarchisation des contenus sont bases sur les parcours de consultation prvisibles des diffrents profils dutilisateurs. Il faut bannir la redondance des contenus qui peut avoir pour effet de perdre lutilisateur : autrement dit, un mme contenu ne doit pas tre rpt diffrents endroits du mme site. Par contre, il est utile de multiplier les points daccs ces contenus en proposant des chemins alternatifs.
1.3.5.1. Titres et hirarchisation de linformation

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 fentre correspond au libell apparaissant dans le barre de fentre du navigateur.
Page 31/115
Exemple de titre de fentre : le portail de la modernisation de lEtat
Recommand Recommand
Chaque page du site doit tre identifie par un titre de page dcrivant le contenu de la page. Un bon titre ne dpasse en gnral pas 30 caractres. Chaque page du site doit adopter un titre de fentre en relation avec le contenu affich. Ce titre est compos de 1 6 mots et compte 60 caractres maximum. Les titres choisis doivent tre suffisamment prcis car ce sont eux qui sont enregistrs en signet.
1.3.5.2. Regroupement de linformation

Utile Les informations de mme nature doivent tre regroups ; les lments htrognes sont distingus. Cette catgorisation peut tre physique (localisation dans la page) ou lie au format (styles, couleurs, etc.). Au-del de trois lments, lutilisation de listes puces ou numros permet de regrouper visuellement des informations et den fournir une vision synthtique lutilisateur. Lergonomie des listes puce respecte les principes suivants : la prsentation des listes est homogne sur lensemble du site ; les listes sont ares et lgrement spares du texte pour amliorer la lisibilit ; les items de la liste sont cohrents dans leur rdaction et commencent par le mme type de mot (par exemple un infinitif, un impratif, un nom, etc.) ; le contenu commun chaque item est factoris dans lintroduction de la liste ; la sparation des items de la liste peut se faire de deux faons : 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.
Utile
1.3.5.3. Faciliter la comprhension de linformation prsente

Recommand Les textes de support la navigation et la comprhension du contenu du site sont courts et explicites. Dans ce cas, un principe ergonomique de base consiste nafficher que les informations essentielles permettant de couvrir 80% des besoins et proposer des liens permettant daccder aux informations complmentaires (dtail) pour traiter les 20% restants. Les textes de contenus (article, mode demploi, texte officiel, etc.) sont par dfinition plus longs.
Page 32/115
Utile
La mise en valeur des informations importantes et des mots-cls via le recours aux styles permet de renseigner rapidement lutilisateur sur la nature du contenu de la page. Les contractions, acronymes, abrviations, ainsi que les csures sont proscrire, dans un mot ou dans une phrase. Il est conseill demployer tant que possible des termes clairs, simples et sans ambigut possible pour lutilisateur. Il est conseill de ne pas crire de ligne de texte sur toute la largeur de lcran. Cela risque de gnrer des problmes de prsentation en cas de redimensionnement de la fentre par lutilisateur.
Utile
Utile
Que disent les rfrentiels gnraux ? RGAA 3.4 : Utiliser des units relatives pour la prsentation 3.5 : Utiliser la hirarchie de titres 3.6 : Utiliser les lments de liste de manire approprie 3.7 : Baliser correctement les citations 4.2 : Spcifier la forme complte des abrviations et acronymes 12.1 : Donner un titre chaque cadre 12.2 : Dcrire l'objectif et les interactions entre les cadres 12.3 : Regrouper les informations de mme nature 13.2 : Fournir des mta-donnes dans les pages 13.8 : Rdiger les contenus de faon simple, logique et ordonne 14.1 : Utiliser un langage clair et simple 14.2 : Proposer des illustrations visuelles ou sonores
1.3.6. Aspects linguistiques

Recommand Conformment larticle 11 du dcret n 96-602 du 3 juillet 1996, il faut prfrer un quivalent franais lorsquil existe la place des termes et expressions en langues trangres. Pour le bon usage de la langue franaise, se rfrer la liste des termes adopts par la commission gnrale de terminologie et de nologie : http://fr.wikipedia.org/wiki/Commission_g%C3%A9n%C3%A9rale_de_terminologie _et_de_n%C3%A9ologie. Recommand Conformment larticle 4 de la loi du 4 aot 1994, dite loi Toubon , lorsque des textes font lobjet de traductions, celles-ci sont au moins au nombre de deux. Ceci participe au pluralisme linguistique, laccessibilit pour les publics non
Page 33/115
francophones et, sous un angle pdagogique, la familiarisation et lapprentissage des langues trangres par les citoyens. Utile Si le site dispose de versions en langues trangres, il est conseill de positionner la zone ddie au choix de la langue dans la zone de fonctions transverses. Dans ce cas, il faut privilgier le nom (ou labrviation) de la langue un drapeau national (par exemple EN pour langlais, plutt que le drapeau du Royaume-Uni. Choix des langues sur service-public.fr
Utile
La traduction des contenus dpend du public vis par les contenus. En fonction des objectifs de lmetteur du site, il peut tre utile de traduire les contenus susceptibles de concerner un public tranger (dmarches concernant un public tranger, contenus vocation touristique, prsentation institutionnelle de ladministration, etc.). Dans le cas dun site prsentant un contenu spcialis, il est utile de fournir un glossaire.
Utile
Que disent les rfrentiels gnraux ? 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 dveloppes et testes pour une visualisation optimale quelle que soit la plate-forme de lutilisateur (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 suprieures ; Mozilla Firefox 1.4 et versions suprieures.
Page 34/115
Utile
Les sites doivent tre compatibles avec les navigateurs secondaires du march : Safari 1.2 et versions suprieures ; Opra 7.6 et versions suprieures ; Netscape 6 et versions suprieures. Il est conseill de vrifier le bon affichage des pages dans ces diffrents navigateurs afin de valider la bonne prise en charge des CSS.
Que disent les rfrentiels gnraux ? RGI 5 Volet technique : Recommandations sur les IHM.
En matire de navigateurs pour appareils mobiles, linsuffisance du niveau de maturit du secteur rend les prconisations difficiles. Les navigateurs se distinguent notamment par leur capacit fournir une restitution authentique de la page consulte sur un cran classique. On parle alors de restitution fidle ou de restitution allge. Les navigateurs de la premire catgorie tentent de restituer le plus fidlement possible les pages HTML en prservant, dans la mesure du possible, les contenus enrichis. Ces navigateurs supportent donc les standards XHTML, CSS, RSS, JavaScript, Flash, etc. Les navigateurs les plus avancs dans ce domaine sont rservs aux appareils haut de gamme. On citera titre dexemple : Mobile Internet Explorer de Microsoft ; Safari Mobile dApple ; Opera Mobile d'Opera Software ; NetFront d'Access Systems. Les navigateurs de la seconde catgorie reformatent les pages du site en passant par un serveur intermdiaire charg dallger le contenu original du site. On citera titre dexemple : Opera Mini d'Opera Software ; ThunderHawk de Bitstream.
1.4.1.2. Fonctions navigateur

Lobjectif est de prendre en compte les habitudes dutilisation des fonctions du navigateur. En complment de la navigation du site, les utilisateurs se servent des fonctionnalits du navigateur pour matriser linterface : bouton page prcdente ( back ) pour revenir en arrire, ouverture de nouvelles fentres de navigateur (Ctrl + n), etc.
Gestion du multi-fentrage
Page 35/115
Dans le cas de sites dynamiques, le multi-fentrage (plusieurs fentres du mme site ouvertes simultanment) peut entraner une dsynchronisation entre les fentres et la base de donnes. Lexpiration de la session dans lune des fentres, la prise en compte de donnes actualises dans une fentre, etc. sont autant de facteurs susceptibles dentraner des incohrences entre laffichage des diffrentes fentres. Quelques prcautions de base permettent de limiter ces dsagrments.
Recommand
Le multi-fentrage ne doit pas tre empch par le site. Louverture dlibre de plusieurs fentres fait partie du comportement des utilisateurs avancs pour davantage defficacit et de confort. Quelle que soit la fentre, un clic sur le bouton actualiser (F5) du navigateur actualise la page avec les dernires donnes enregistres en session. En cours de saisie, si des donnes sont appeles alors quelles ne sont plus disponibles en base ou si des actions non applicables sont lances, alors la page est rafrachie et comporte un message derreur explicite (donnes non disponibles, etc.).
Recommand
Utile
Lutilisation de fentres de type pop-ups est fortement dconseille. Le paramtrage des navigateurs risque en effet de bloquer leur ouverture et donc de drouter lutilisateur.
Que disent les rfrentiels gnraux ? RGI 10.1 Volet technique : le protocole HTTP
Cohabitation des signets et des sessions
Recommand
Les pages dynamiques dune application, normalement accessibles aprs identification (compte personnalis, services en ligne), peuvent tre accdes directement en saisissant directement leur URL ou depuis un signet (favori). Dans ce cas, si aucune session didentification nest active, le site doit demander pralablement lidentification de lutilisateur avant dafficher la page sollicite. Si une session est dj ouverte et que lutilisateur clique sur un signet dune page du site ou en saisit son URL, la page sollicite saffiche directement.
Recommand
Fonctions retour (back) et suivant (forward)
Recommand
Les fonctions retour et suivant du navigateur peuvent avoir un comportement distinct dun navigateur lautre ; celles-ci doivent donc tre rserves un usage dappoint. Les sites proposant un contenu ncessitant des parcours de navigation complexes (en particulier les sites proposant du contenu dynamique) mettront disposition un systme de navigation spcifique permettant de naviguer entre
Page 36/115
plusieurs squences de pages. Utile Les boutons retour et suivant du navigateur doivent toujours tre disponibles, cest--dire que lutilisateur doit pouvoir retourner en arrire tout moment, sauf dans le cas de certaines procdures en ligne o le remplissage des formulaires de la procdure pourrait tre perturb par lutilisation de ces boutons
Que disent les rfrentiels gnraux ? RGAA 7.4 : Ne pas rafrachir automatiquement les pages 10.1 : Signaler l'ouverture de nouvelles fentres
1.4.2. Rsolutions dcran

Rpartition des rsolutions dcran sur les sites franais en 2007 (Source Ergolab)
1.4.2.1. Rsolution pour crans standards

Recommand Les pages sont optimises pour safficher sans ascenseur horizontal en rsolution 1024768 avec un impratif de bonne lisibilit des systmes de navigation sous 800600. Lextensibilit (ou fluidit) dune page Web dsigne sa capacit adapter la disposition des contenus en fonction de la taille de la fentre du navigateur. Il est utile de permettre lextensibilit des pages entre 800600 et 12481024 afin dadapter la prsentation des pages la largeur des fentres en cas de redimensionnement de celles-ci.
Utile
Page 37/115
Dans le cas o cette option est retenue (totalement ou partiellement), il faut veiller ce que les systmes de navigation ne soient pas perturbs par le redimensionnement de la fentre. Lextensibilit est par ailleurs dconseille pour les sites dont les systmes de navigation occupent une surface importante et les sites dont le contenu informationnel est complexe. La hirarchie des informations risquerait en effet den tre perturbe. Utile L'ascenseur horizontal doit tre systmatiquement vit ; l'ascenseur vertical est utilis si ncessaire (jusqu trois fois la hauteur de lcran).
Que disent les rfrentiels gnraux ? RGAA 3.4 : Utiliser des units relatives pour la prsentation
1.4.2.2. Rsolution pour crans spcifiques

Le pourcentage dutilisateurs de grands crans trs haute rsolution (16001200 jusqu 20481536) augmente rgulirement. Laffichage des sites pouvant varier sensiblement en fonction des caractristiques techniques de ce type dcrans, il est conseill de vrifier pour les hautes rsolutions les critres suivants : Visibilit directe : linformation essentielle est-elle visible dun seul coup dil par linternaute sans utiliser lascenseur (scrolling) ? Lisibilit : linformation reste-t-elle lisible malgr la variation de la largeur des diffrentes colonnes en fonction de la rsolution ? Esthtique : comment la page apparat-elle une fois les lments, titres, photos, etc. positionns pour une taille dcran donne ? Lalignement de lensemble est-il respect ? Dautre part, le redimensionnement successif de la fentre du navigateur restitue-t-il convenablement la disposition des pages ?
Utile
Dans le cas de sites dont le besoin daffichage sur des crans trs haute rsolution est avr, il est conseill dadopter une structure extensible (fluide) dont la taille des pages sadapte la largeur du support daffichage. Quelle que soit la rsolution de lcran ou la taille de la fentre, le contenu des pages occupe ainsi harmonieusement lespace allou.
1.4.2.3. Rsolutions pour appareils mobiles

Sur le Web mobile, la multiplicit des tailles d'interface et des particularits propres aux appareils complique les problmatiques daffichage : lventail des rsolutions possibles stend de 128 320 pixels. De plus, certains offrent la possibilit dafficher le contenu verticalement ou horizontalement. Il faut prendre en fin en compte la prsence ou non selon les appareils doutils de navigation trs divers (clavier, souris, stylet, cran tactile, etc.).
Page 38/115
Utile
Dans le cas o le site offre certaines pages spcialement ddies aux appareils mobiles, il est conseill doptimiser les pages pour une rsolution en 200250 pixels.
Eventail de rsolutions proposes sur les appareils mobiles
1.4.3. Langages et normes de dveloppement
1.4.3.1. Langages
Recommand Les normes de dveloppement prconises 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 privilgi pour les nouveaux sites ; le XML 1.0 (Extensible Markup Language) avec DTD (Document Type Declaration = DOCTYPE) et / ou schmas ;
Page 39/115
feuille de style CSS 1 au minimum (Cascading Style Sheets), sachant que le CSS 2 doit tre privilgi pour les nouveaux sites. Le HTML dynamique (ou DHTML, i.e. l'utilisation de JavaScript pour agir sur l'affichage de la page) prsente des variations selon le poste, en fonction notamment du navigateur et des fonctions JavaScript non filtres par le pare-feu Internet. Son utilisation doit donc respecter les critres d'accessibilit (voir ce sujet le chapitre 1.4.4 - Technologies). Il faut galement viter lutilisation dun diteur HTML automatique et proscrire lusage de balises propritaires certains navigateurs. Utile Pour le dveloppement de pages spcialement ddies aux appareils mobiles, les langages conseills sont le XHTML Mobile Profile (spcialisation du langage XHTML destine incorporer des lments au contexte d'utilisation des appareils mobiles) et XHTML Basic.
Que disent les rfrentiels gnraux ? RGAA 11.1 : Privilgier les technologies du W3C 11.2 : Ne pas utiliser de composants obsoltes ou dprcis 14.1 : Proposer une prsentation cohrente sur tout le site RGI 5.2 Volet technique : Technologies pour construire les IHM Web
1.4.3.2. Normes de dveloppement

Recommand Afin de garantir la cohrence dans les styles et conserver lhomognit graphique et fonctionnelle entre les pages dun site ou entre un groupe de sites, il faut recourir au feuilles de styles CSS 1. Cette remarque sapplique galement au dveloppement de pages pour les appareils mobiles. Utile Une moyenne de 100 Ko par page (hors page daccueil) constitue actuellement une norme pour le poids des pages (code HTML, Javascripts, CSS, textes et images). Il faut donc parvenir un rapport quilibr entre prsentation et poids.
Que disent les rfrentiels gnraux ? RGAA 3.1 : Remplacer les lments non textuels par des styles CSS 3.2 : Crer des pages valides 3.3 : Privilgier l'utilisation des feuilles de styles par rapport au balisage pour la prsentation 6.1 : Maintenir la lisibilit et la comprhension des contenus lorsque les
Page 40/115
styles sont dsactivs
1.4.3.3. Cadres (frames)

Lun des principes du Web est que chaque page est reprsente par une URL unique. Dans le cas de pages contenant des cadres (frames), cette rgle est brise rendant la comprhension de la structure du site plus complexe. De plus, les cadres rendent difficile lindexation des pages par les moteurs de recherche, complexifient limpression des documents, perturbent lenregistrement des signets, etc.
Recommand
Lutilisation de cadres (frames) est proscrite.
1.4.4. Technologies
Les technologies comme Ajax, Flash, Flex et Java permettent de dvelopper des sites particulirement dynamiques et participent lexprience utilisateur. Cependant, certains inconvnients plaident pour une utilisation parcimonieuse de ces technologies. Certains lments programms dans ce type de technologies peuvent se rvler particulirement lourds charger pour les utilisateurs. Lergonomie spcifique des animations peut troubler certains utilisateurs et les empcher datteindre 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 difficults daccessibilit.
Recommand
Un site ne doit pas tre entirement construit sur une technologie telle que Flash, Flex, Ajax. Il est conseill de limiter lusage de ces technologies des animations ludiques, expriences interactives vnementielles, etc. Les contenus critiques dun site ne doivent pas dpendre de ce type de technologies. Il est conseill de doser justement lutilisation de ces technologies et les mettre en valeur afin den valoriser limpact visuel (des animations Flash trop voyantes risquent de noyer lutilisateur dans un univers trop diffrent de celui auquel il est habitu). De plus, la mise en valeur dune animation dans une page a plus dimpact quune page compltement anime.
Utile
Utile
Page 41/115
Afin de ne pas bloquer linternaute dans sa progression il est ncessaire 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 comprhension du contenu, de manire ne pas pnaliser les utilisateurs nayant pas dinterprteur JavaScript. La population dinternautes ayant dsactiv lexcution de JavaScript est estime de 6 8%.
Recommand
Lutilisation du JavaScript, en particulier dans les lments de navigation doit respecter les critres daccessibilit : lutilisateur ayant dsactiv le JavaScript doit pouvoir accder aux lments de navigation.
Que disent les rfrentiels gnraux ? RGAA 6.2 : Mettre jour les alternatives aux contenus dynamiques 6.3 : Proposer une alternative au code javascript et aux lments programmables 6.4 : Assurer l'indpendance du priphrique d'accs aux fonctions javascript 6.5 : Assurer l'accessibilit des contenus dynamiques 8.1 : Rendre accessibles les lments programmables 9.2 : Assurer l'indpendance d'accs aux interfaces spcifiques par les priphriques 9.3 : Assurer l'indpendance d'accs aux gestionnaires d'vnements par les priphriques 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 problmes daccessibilit et de compatibilit (absence ventuelle du plug-in sur le systme de lutilisateur, temps du tlchargement des donnes associes et du plug-in le cas chant). 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 vidos parmi la plupart des systmes d'opration majeurs, navigateurs, tlphones mobiles et autres outils. Le tableau ci-dessous rsume les versions de Flash dployes en Europe (source Adobe.com mars 2008).
Page 42/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 vidos, des trames sonores, des images virtuelles, et autres fichiers graphiques. Lusage de ce plug-in tend diminuer. Windows Media Player (Microsoft) : permet de jouer des fichiers vido et audio sur Internet en temps rel. RealPlayer (Real Networks) : permet de jouer des fichiers RealVideo et RealAudio sur Internet en temps rel. Lusage de ce plug-in temps diminuer.
Recommand Recommand
Il ne faut faire appel aux plug-ins que dans les cas o ils apportent une relle valeur ajoute. Dans le cas o le recours un plug-in savre indispensable, il faut fournir une information claire des procdures suivre pour le tlcharger et linstaller. Par exemple : si vous ne disposez pas de Acrobat Reader pour la lecture des fichiers de format PDF, vous pouvez le tlcharger, en cliquant sur licne. Il est conseill de ne pas avoir recours aux versions majeures de plug-ins moins dun an aprs leur sortie.
Utile
Que disent les rfrentiels gnraux ? RGI 5.2 Volet technique : Technologies pour construire les IHM Web
1.5. SITES ACCESSIBLES APRES AUTHENTIFICATION

Certains sites restreignent laccs tout ou partie du contenu via un systme dauthentification. Cela peut tre le cas notamment pour des services en ligne ncessitant une authentification pralable ou pour laccs des fonctionnalits et des informations correspondant au profil de lutilisateur. Laccs ces sites est alors conditionn par une page dauthentification (identifiant, mot de passe) qui garantira laccs aux services proposs aux seules personnes autorises et permettra didentifier le niveau de droits de lutilisateur.
1.5.1. Principe de continuit du mode visiteur au mode authentifi

Certains sites offrant des services ncessitant une authentification proposeront galement un accs 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 proposs.
Page 43/115
Recommand
Lorsquun site offre des services en mode visiteur et des services supplmentaires en mode authentifi, il ne peut y avoir de rgression fonctionnelle lors du passage du mode visiteur au mode identifi. Lutilisateur authentifi dispose a minima des services accessibles en mode visiteur, en plus des services accessibles en mode authentifi. Lorsquun site offre des services en mode visiteur et des services supplmentaires en mode authentifi, les systmes de navigation, la prsentation du contenu et les aspects graphiques doivent tre conservs dun mode lautre. En mode visiteur, lutilisateur doit tre clairement inform des services accessibles en mode authentifi. La mise en valeur de ces services peut se faire via plusieurs moyens : rservation dune rubrique spcifique proposant lensemble des services restreints ; utilisation dun visuel distinctif pour laccs aux services restreints ; une incitation cliquer sur le bloc dauthentification pour accder aux services restreints.
Recommand
Utile
1.5.2. Authentification
Utile Le bloc dauthentification prsente un champ identifiant, un champ mot de passe et un bouton de validation bien mis en valeur. Deux endroits sont conseills pour le positionnement du bloc : le bandeau suprieur ou lespace de contenu contextuel.
1 2 Bandeau suprieur Espace de contenu contextuel
Utile
La page dauthentification inclut idalement un lien mot de passe oubli ainsi quun lien invitant lutilisateur crer son propre compte sil ne possde pas encore de compte. Si le site est partenaire de mon-service-public.fr, le bloc dauthentification monservice-public.fr est positionn en-dessous du module dauthentification propre au site partenaire.
Recommand
Page 44/115
Bloc dauthentification mon.service-public.fr
Que disent les rfrentiels gnraux ? RGI 2 Volet organisationnel : Gestion des identits et des daccs aux tlservices 3 Volet organisationnel : Gestion des Identits des Usagers 4 Volet organisationnel : Gestion des Accs aux tlservices
1.5.3. Dconnexion
Recommand Recommand La fermeture du navigateur par lutilisateur gnre la fermeture de session. En cas dinactivit prolonge, la session utilisateur est automatiquement ferme audel dun certain temps dtermin en fonction du niveau de scurit requis par le service. En cas de dconnexion automatique, il peut tre utile de prvenir lutilisateur de la fermeture imminente de la session et lui permettre de prolonger cette session (dans ce cas, le systme dalerte ne doit pas tre intrusif). Aprs un dlai daffichage de 10 secondes environ, en labsence de rponse, la dconnexion est automatique. Dans ce cas, il faut afficher la page dauthentification avec une mention prvenant lutilisateur que sa session a expir. Si lutilisateur sauthentifie nouveau, il accde idalement la dernire page consulte si celle-ci est toujours disponible. Utile Lorsque lutilisateur navigue en mode connect, il est conseill de lui fournir sur toutes les pages du site la possibilit dinterrompre sa session via un bouton dconnexion ou quitter bien mis en valeur. Un clic sur ce lien ferme la session de lutilisateur et affiche la page de connexion avec les champs dauthentification vides. Cela permet une nouvelle authentification du mme utilisateur ou dun autre.
Utile
Page 45/115
Recommand
Si le site est partenaire de mon.service-public.fr, un bouton de dconnexion globale de mon.service-public.fr et des sites partenaires doit tre insr dans la barre de navigation. Bouton de connexion / dconnexion mon.service-public.fr
Que disent les rfrentiels gnraux ? RGAA 10.1 : Signaler l'ouverture de nouvelles fentres
1.5.4. Gestion des informations personnelles

Recommand Si la cration de compte ncessite le renseignement de donnes caractre personnel, lutilisateur doit avoir connaissance du traitement rserv ces donnes (confidentialit, droits daccs aux donnes, conservation des donnes). Ces informations apparaissent dans les conditions gnrales dutilisation du service et les mentions lgales et sont accessibles depuis le formulaire de cration de compte. Utile Si le site est partenaire de mon.service-public.fr, le formulaire de cration de compte doit proposer de crer une liaison entre le compte partenaire nouvellement cr et le compte mon.service-public.fr conformment au kit dintgration mon.servicepublic.fr destination des partenaires. Bouton de cration de liaison avec mon.service-public.fr
Utile
En cas de gestion dinformations personnelles, il est conseill de proposer un accs ces informations. Lutilisateur a un accs en criture aux champs susceptibles dtre modifis (adresse, courriel, etc.) sauf lorsque le changement de ces informations fait lobjet dune procdure particulire.
Page 46/115
Que disent les rfrentiels gnraux ? RGI 7 Volet organisationnel : Protection des donnes personnelles
1.6. REFERENCEMENT MUTUEL DES SITES PUBLICS
1.6.1. Cas de service-public.fr

Recommand Conformment 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 franaise service-public.fr et vers le site juridique Legifrance.gouv.fr qui met la disposition du public les textes lgislatifs et rglementaires essentiels.
1.6.2. Cas de mon-service-public.fr

Recommand Lorsquun utilisateur sauthentifie sur un site partenaire de mon.service-public.fr, une rfrence au bandeau mon-service-public.fr apparait tout au long de son parcours de navigation. Ce rfrencement se fait par lintermdiaire des bandeaux fournis dans le kit graphique et ergonomique mon-service-public.fr tabli par la Direction gnrale de la modernisation de lEtat (DGME). Exemples de bandeaux mon.service-public.fr fournis dans le kit dintgration :
Page 47/115
1.7. STAT@GOUV
Stat@gouv est un baromtre d'audience des sites gouvernementaux qui utilise la technologie des marqueurs de bas de page. Ce service mis disposition par le Service dinformation du Gouvernement permet un niveau global de : mesurer la volumtrie et les performances de lensemble des sites gouvernementaux ; identifier le cheminement gouvernementaux ; des internautes travers les diffrents sites
comparer les rsultats des diffrents sites et rubriques, dans un objectif doptimisation et de rpartition du trafic en fonction de la saisonnalit. Au niveau de chaque site, Stat@gouv permet de : mesurer lefficacit des choix ditoriaux et ergonomiques (place de rubrique, dossiers en une, etc.) ; mieux comprendre et connatre le comportement des internautes lintrieur du site (sources daccs, cheminement, pages de sortie) ; identifier les ventuels problmes lis laccs aux pages (erreurs 404, formulaires) ; communiquer sur les performances du site et les rsultats des campagnes de communication.
Recommand
Lintgration de marqueurs de mesure daudience XiTi dans les pages est recommande pour les sites gouvernementaux. Pour ce faire, il faut dans un premier temps demander une ouverture de compte au SIG en prcisant lintitul du site, le nom de domaine et ladresse lectronique de la personne qui sera administrateur du compte. Chaque metteur de site a la charge dadministrer son compte Xiti, de marquer le site et danalyser laudience. Le SIG met disposition un guide de marquage XiTi et un guide dutilisation XiTi sur Intercom. Des formations peuvent tre organises avec le prestataire du SIG (coordination et prise en charge par le SIG). Contact SIG - Dpartement Rdaction & Multimdia Etienne Godfroy - 01 42 75 78 02
Utile
Les responsables de site peuvent crer autant didentifiants de rubrique S2 que souhait. Il est conseill de suivre larchitecture du site pour la cration des S2 , afin didentifier trs facilement quelle partie du site correspondent les statistiques (exemple : un site comporte 3 rubriques, laccueil, une partie actualit et une partie le ministre). Le plan de marquage serait le suivant : S2=accueil (regroupant les diffrentes versions ventuelles de la page daccueil en franais : IE, Firefox, txt, etc.) ;
Page 48/115
S2=actualite (si une telle rubrique existe) ; S2=ministere; S2=secretariat_etat; etc. (regroupant les pages relatives la prsentation du ministre : services, missions, organigramme, infos pratiques, offres demploi, etc.) ; S2=page 404 (cration de page 404 propre sur un S2 spcifique pour analyser les flux) ; S2=info site (pour mettre des lments, comme le plan du site, les mentions lgales ou les contacts, qui sont indpendants de larchitecture principale).
Exemple de tableau de bord gnral Stat@gouv :
1.8. ARCHIVAGE
Larchivage dun site Web gouvernemental, visant prserver la mmoire du Web, peut intervenir pour plusieurs raisons :
Page 49/115
en cas de refonte ou de nouvelle version dun site : il convient de proposer aux internautes un accs lancienne version du site ; en cas de changement de gouvernement ou de ministre. Prparation dun emplacement darchivage Prparation de lURL : la version archive du site devrait tre place sur un sousdomaine diffrent de celui du site actif. On utilisera ladresse www.site.gouv.fr pour le site Web et ladresse archives.site.gouv.fr pour les archives (notez labsence de www). Identifiant visuel : afin dtre facilement identifiable, le site archiv doit arborer un lment graphique indiquant clairement linternaute quil nest plus sur le site actualis. Lajout dun tampon archives dans le graphisme den-tte du site est un des lments les plus couramment utiliss pour signifier cette dmarcation. Slection des pages archivables : afin de prparer la tche du webmestre qui se chargera de larchivage, il est recommand lquipe ditoriale du site de slectionner les rubriques, dossiers ou pages qui doivent tre cibls par la procdure darchivage. Cela peut se faire en plaant le statut "archiv" sur les articles concerns si linterface dadministration le permet, ou bien en slectionnant manuellement les pages susceptibles dtre archives, en fonction des objectifs ditoriaux. Larchivage en pratique Il existe divers logiciels libres destins larchivage dun site. Le but pour le webmestre est dutiliser ces logiciels dans leur mode de fonctionnement aspirateur afin de crer 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 destines larchivage peuvent chapper cette opration. Une fois larchivage termin, le webmestre possde donc une srie de fichiers limage du site web. Il suffira de placer ces fichiers dans lespace prvu pour accueillir les archives et de lier cet espace partir de la page daccueil afin que les internautes puissent y avoir accs. Il est recommand de conserver un accs ces fichiers en cas de modifications ultrieures. Le drfrencement du site archiv Le site darchive ne doit pas entrer en concurrence avec le site actif. Seule la page daccueil du site darchive doit rester indexable par les moteurs de recherche. En revanche, toutes les pages du site archiv doivent tre dsindexes.
Page 50/115
2. REGLES SUR LES OBJETS

Cette deuxime partie sattache dfinir les rgles dergonomie sur les objets couramment prsents sur les sites Internet : liens hypertextes, fichiers en tlchargement, formulaires, boutons daction, tableaux, images, objets multimdias, etc. Les rgles dergonomie nonces dans cette partie portent sur la forme et non pas sur le fond : les objets prsents sont ainsi abords en tant que rceptacles (contenant) mais le contenu susceptible dtre accueilli par ces objets nest pas trait.
2.1. LIENS HYPERTEXTES
2.1.1. Utilisation des liens

Un lien hypertexte est un moyen de navigation, gnralement entre deux pages souvrant dans une mme fentre ou dclenchant louverture dune autre fentre. On distingue gnralement les types de liens suivants : les liens internes qui conduisent vers dautres pages du site (navigation contextuelle) ; les liens externes qui s'ouvrent dans une nouvelle fentre de navigateur ; les liens de tlchargement qui permettent de lancer des documents non HTML ; les ancres qui renvoient une rubrique spcifique dune mme page HTML ; les liens sapparentant un bouton daction.
Utile
Il faut viter le plus possible les liens vers des pages vides, incompltes ou en construction . Dans ce cas, privilgier une explication succincte du service qui sera fourni. De mme, un message spcifique renseigne lutilisateur lorsque le site est en maintenance. De mme, il faut veiller ne jamais acheminer lutilisateur vers une page dnue de liens, ce qui aurait pour effet de casser le parcours de lutilisateur. Dans le cas dune page inexistante (erreur URL, page supprime, lien bris, etc.), un message spcifique indique lutilisateur labsence de la ressource et propose un lien vers une page spcifique permettant de se rorienter dans le site.
Utile
Dans le cas des pages spcifiquement ddies aux appareils mobiles, il est conseill de limiter le nombre de liens par page 10 et de les numroter dans une liste puce ordonne associe aux touches 0 9 de lappareil (accesskeys). Les liens sont alors classs par ordre dcroissant en fonction de leur popularit.
Page 51/115
Que disent les rfrentiels gnraux ? RGAA 7.5 : Ne pas placer de redirections automatiques partir des pages
2.1.2. Prsentation 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 lutilisateur du texte normal. La prsentation retenue pour les liens hypertextes doit tre systmatiquement homogne sur tout le site afin dancrer chez lutilisateur une quivalence entre la structure dun objet et sa fonction. Cette remarque vaut particulirement lorsque plusieurs styles de liens sont dfinis en fonction de la nature du lien (interne, externe, tlchargement, 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. Ladresse de destination (URL) du lien apparat en bas gauche du navigateur. La balise TITLE du lien doit tre systmatiquement renseigne. Ce commentaire doit fournir des informations plus dtailles lutilisateur sans lobliger cliquer sur le lien. Ces informations apparaissent sous forme dinfo-bulles au passage de la souris sur le lien. Il ny a pas de limite prcise sur la longueur des textes dans les info-bulles mais lusage recommande de ne pas dpasser 80 caractres.
Recommand
Recommand
Recommand Recommand Utile
Le lien doit tre limit un mot ou un groupe de mots pertinents. Il ne faut pas utiliser une phrase entire comme lien car cela rend la lecture difficile. Louverture de liens externes (i.e. renvoyant vers un autre site) doit se faire dans une nouvelle fentre ou onglet du navigateur. 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 tents de cliquer sur ce texte. Dune manire gnrale, il ne faut pas suggrer qu'un lment est cliquable s'il ne l'est pas.
Page 52/115
Que disent les rfrentiels gnraux ? RGAA 1.2 : Doubler les zones cliquables ct serveur 10.5 : Sparer visuellement les liens adjacents de manire 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 : lutilisateur doit savoir sil renvoie vers une autre page, sil ouvre un document bureautique ou sil correspond une adresse lectronique. Un mme lien doit adopter un comportement constant sur lensemble du site. Les intituls des liens doivent tre clairs, concis (un maximum de 80 caractres est conseill), comprhensibles et reflter le contenu des pages sur lesquelles ils pointent. On doit sassurer quils ne comportent pas de termes qui risquent de ne pas tre compris par la population vise. Les boutons daction et les liens doivent tre reprsents de manire distincte. Pour lutilisateur un lien dclenche une navigation tandis quun bouton correspond un traitement. Exemple de lien :
Accs la procdure
Recommand Recommand
Recommand
Exemple de bouton daction :
Utile
Dans le cas dun lien interne, le libell du lien est idalement le mme que le titre de lcran cible.
2.1.4. Liens de type ancre

Utile Lorsque le contenu de la page est long (article, formulaire), il est possible davoir recours des ancres afin de faciliter la navigation en donnant des accs directs aux rubriques de la page. Les ancres sont places en haut de la page sous forme de sommaire et renvoient aux diffrentes rubriques de la page. Il est galement conseill de l'afficher en bas de page lorsque la longueur du contenu est importante.
Page 53/115
Utile
En cas de recours aux ancres, des fonctions de type accordon (plier dplier) permettent de limiter lutilisation de lascenseur. Exemple de texte en version plie ( gauche) et dplie ( 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
Un projet de grande ampleur

Historique du projet
Historique du projet Etat davancement du projet
Etat davancement du projet

2.2. FICHIERS EN TELECHARGEMENT
2.2.1. Tlchargement descendant (download)

Le tlchargement descendant de fichiers correspond la mise disposition de fichiers par lmetteur sur une page du site. Lutilisateur peut alors ouvrir le fichier ou lenregistrer 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. Lutilisateur ne doit pas tre surpris par louverture dun document bureautique ou par un lecteur multimdia. Un texte dexplication dans la balise TITLE du lien de tlchargement doit renseigner lutilisateur sur louverture du lien dans une nouvelle fentre (ou onglet) ou dans la fentre courante. Il est conseill douvrir les fichiers en tlchargement dans une nouvelle fentre ou
Recommand
Utile
Page 54/115
un nouvel onglet afin dviter les conflits de navigation susceptibles de survenir entre le systme de navigation du site et un ventuel plug-in. Utile Un pictogramme associ chaque type de document permet de faciliter lidentification des types de documents. Il faut veiller utiliser des pictogrammes libres de droit. Exemple de pictogramme permettant didentifier le type du document :
Tlchargez le rapport de prsentation :

Rapport_2008.pdf (PDF, 530 Ko)
Utile
Laffichage dun temps de tlchargement estim en fonction de la nature de la connexion Internet (modem 56K, ADSL, ADSL+, rseaux cbls, fibre optique, etc.) renseigne lutilisateur sur loptimisation de son temps de navigation. Il faut veiller ne pas mettre en tlchargement des fichiers trop volumineux (10 Mo semble constituer une limite ne pas dpasser) sous peine dentraner une rupture dgalit daccs linformation entre les usagers.
Recommand
Les formats de fichiers proposs en tlchargement doivent tre conformes aux prconisations du volet technique du RGI.
Que disent les rfrentiels gnraux ? RGAA 10.1 : Signaler l'ouverture de nouvelles fentres 13.3 : Permettre aux utilisateurs de recevoir des documents conformes leurs prfrences RGI Volet technique chapitre 3 : Interoprabilit des formats de donnes ; Volet technique chapitre 4 : Interoprabilit des formats de documents.
2.2.2. Tlchargement montant (upload)

Le tlchargement montant de fichiers consiste pour lutilisateur envoyer un document stock sur son disque dur vers le site de lmetteur. Cette dmarche sapparente lattachement dune pice-jointe dans un courriel.
Recommand
En cas de proposition dune fonctionnalit de tlchargement montant (upload), il doit tre fait mention de la liste des formats accepts et la taille limite accepte. Les formats de fichiers proposs en tlchargement doivent tre conformes aux prconisations du volet technique du RGI.
Page 55/115
Recommand Utile Utile
Il faut signaler lutilisateur le succs ou non du tlchargement par un message explicite. Il est conseill de mentionner lventuelle possibilit de compresser un fichier trop volumineux et dindiquer dans ce cas les formats accepts. Lors du tlchargement montant, il est conseill de faire un test sur la taille du fichier avant le dbut du tlchargement et dempcher immdiatement le tlchargement si le fichier dpasse la taille limite autorise. Ceci constitue un gain de temps prcieux pour lutilisateur. Ce principe sapplique galement au format de fichier (format accept ou non).
Utile
Il est conseill de ne pas bloquer la navigation de lutilisateur pendant le temps de tlchargement du fichier. Selon les situations, il faut : proposer le tlchargement dans une fentre spcifique, afin que lutilisateur puisse poursuivre sa navigation pendant le temps de tlchargement ; autoriser la poursuite de la navigation dans la page pendant le temps de tlchargement dans le cas des pages de type formulaires (sous rserve de faisabilit technique).
Que disent les rfrentiels gnraux ? RGI Volet technique chapitre 3 : Interoprabilit des formats de donnes ; Volet technique chapitre 4 : Interoprabilit des formats de documents.
2.3. FORMULAIRES
Dans un site Internet, les formulaires dsignent 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 spcifiquement des formulaires complexes, permettant de recueillir les informations ncessaires la ralisation dune vritable dmarche en ligne, ventuellement structure en plusieurs tapes (chaque tape tant matrialise par un ou plusieurs formulaires).
2.3.1. Prsentation 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 lutilisateur. Lobjectif est de faire en sorte que lutilisateur remplisse le formulaire le plus vite possible avec le moins derreurs possibles.
Page 56/115
Recommand Recommand Recommand Recommand
Au sein dune mme page de formulaire, il faut regrouper les champs en fonction de leur nature smantique en blocs distincts, portant un titre explicite. Afin de rester lisibles, les formulaires doivent tre prsents dans une seule colonne (un champ de saisie par ligne). La signaltique employe dans le formulaire doit figurer en dbut de page (par exemple, le code adopt pour les champs obligatoires). Les champs de saisie sont aligns gauche et les informations de guidage sont situes droite des champs de saisie. Pour les botes de liste et les boutons radio, les libells sont placs droite des cases. Exemple de prsentation des champs de formulaire
Recommand
Les actions de validation, annulation, passage ltape suivante, etc. lies la saisie du (des) formulaire(s) doivent tre signales par des boutons daction situs en bas du formulaire (voir ce sujet le chapitre 2.4.3 - Les boutons daction dans un formulaire en ligne). Si le formulaire est long (au-del de trois fois la hauteur de lcran), il convient de scinder le formulaire en plusieurs pages (formulaire multipages). Idalement, le bouton de validation dun formulaire doit idalement tre visible sans avoir recours lascenseur vertical sur un cran en rsolution 1024768. De mme, le formulaire et les aides contextuelles ne doivent pas ncessiter le recours lascenseur horizontal en 800600.
Utile
En cas de formulaire multipages, il est important de fournir des lments de guidage pour assister la navigation de lutilisateur, quil sagisse dune navigation guide ou semi-guide. Voir ce sujet le chapitre 1.2.4 - Cas particulier de la navigation guide.
Page 57/115
Recommand Recommand
Une sauvegarde implicite des donnes saisies doit tre ralise chaque page de formulaire. Lorsque toutes les pages de formulaires ont t saisies, une page de rcapitulatif des donnes saisies est propose avant la validation dfinitive et transmission du formulaire.
Que disent les rfrentiels gnraux ? RGAA 10.2 : Associer visuellement les tiquettes et champs de formulaire 12.3 : Regrouper les informations de mme nature
2.3.2. Minimisation de la charge de travail

La saisie dinformations dans un formulaire requiert la participation active de lutilisateur. Un principe essentiel dergonomie consiste alors minimiser la charge de travail pour lutilisateur afin doptimiser le remplissage des champs.
Afin de faciliter la comprhension des formulaires par lutilisateur, tous les libells doivent tre clairs, concis et non tronqus. Les abrviations sont viter. Lorsque cela est pertinent, il faut indiquer le format de donnes attendu avec un exemple. Certains utilisateurs avertis utilisent les touches de navigation du clavier pour maximiser la vitesse de saisie des champs : la navigation entre les diffrents champs avec la touche de tabulation doit donc tre autorise. De mme, la touche ENTREE doit permettre de valider le formulaire. Lorsque cela est opportun, il est conseill davoir recours des champs proposant des valeurs par dfaut (botes de listes, listes droulantes, boutons radio, etc.) plutt qu des champs libres. Si les valeurs possibles pour un champ sont connues (une liste de codes rfrencs, par exemple), il est conseill dutiliser une liste droulante au lieu dun champ de saisie texte libre. Certains champs correspondent un ensemble fini de rponse trop important pour tre proposs via une liste droulante ou une bote de liste (par exemple, la liste des dpartements, une liste de pays, etc.). Dans ce cas, il est conseill davoir recours un systme de compltement automatique (auto-compltion) affichant les items correspondants aux premires lettres saisies.
Utile
Utile
Utile
Page 58/115
Exemple de champ avec compltement automatique (auto-compltion)
Utile
Il est conseill de fournir une aide contextuelle (info-bulle, icne spcifique, etc.) pour la saisie des champs pouvant prsenter une difficult dinterprtation. Celles-ci visent crer un climat daccompagnement pour faciliter la tche de lutilisateur, par de brves informations incitatives ou pdagogiques (voir ce sujet le chapitre 3.4.2 Aides contextuelles).
Que disent les rfrentiels gnraux ? 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 donnes de formulaires. Une bonne gestion commence par une prvention efficace : il faut mettre en uvre des moyens pour viter dinduire lutilisateur en erreur.
Les champs obligatoires sont signals par un astrisque rouge (*). Dans le cas dun formulaire multipages, il faut effectuer la vrification de lintgrit des donnes chaque validation de page. En cas derreur lors de la validation dun formulaire, les erreurs doivent tre listes en dbut 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 deuxime fentre, bote de dialogue ou autre). En cas derreur lors de la validation dun formulaire, seules les donnes errones sont ressaisir (et indiques lutilisateur), le reste du formulaire devant rester inchang. Dans le cas de saisies partielles ou errones, le formulaire doit tre raffich, sans perte des champs prcdemment renseigns. Le texte des messages derreur doit tre prcis et proposer une solution plutt que de se limiter au constat de lanomalie. Il est conseill deffectuer les vrifications deux niveaux :
Recommand Recommand Utile Utile
Page 59/115
ct client (au minimum pour les champs obligatoires), de sorte quun message derreur saffiche ct du champ erron lors du passage dun champ lautre ; ct serveur la validation du formulaire, sur lensemble des champs. Le contrle ct client doit tre effectu par un script avant envoi des informations au serveur. Ce type de contrle la vole permet de conserver le formulaire de saisie dans le navigateur en limitant le nombre dallers-retours entre le client et le serveur. Il faut dans ce cas prvoir une alternative pour les clients ninterprtant pas les scripts. Utile Le systme doit prvoir la gestion de lenvoi du formulaire en double : certains utilisateurs peuvent cliquer plusieurs fois conscutivement sur le bouton de validation du formulaire en cas de temps de rponse long. Lorsquil existe des contraintes sur la saisie des champs (par exemple un nombre de caractres maximum, un format de date), il faut indiquer ces contraintes lutilisateur afin de limiter le risque derreur de saisie.
Utile
2.3.4. Types de champs de saisie et slection

La bonne saisie des informations dpend du choix des types de champs de saisie. Bien choisir les lments dinterface pour chaque fonction de saisie participe donc lergonomie 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 adapte la nature des informations attendues.
2.3.4.1. Champs libres

La bote de saisie de champ libre est utilise pour saisir du texte de longueur limite, sur une seule ligne. Il est possible de limiter le nombre de caractres saisir, et le nombre de caractres visibles en mme temps. C'est le champ de saisie de texte le plus utilis car il rpond la majorit des besoins.
Recommand
Le champ de saisie doit tre dimensionn selon le nombre de caractres attendu. Il faut viter les champs trop petits qui obligeraient lutilisateur accomplir une action du clavier ou de la souris pour visualiser lensemble des donnes saisies.
Utile
Pour la saisie de textes longs (sur plusieurs lignes), il est conseill davoir recours la bote de saisie multi-lignes. Dans ce cas, la taille de la zone doit tre adapte une bonne visibilit (par exemple les 2/3 de la zone communment saisie doivent apparatre sans avoir recours lascenseur).
Page 60/115
Exemple de champ de saisie simple :
Exemple de boite de saisie multi-lignes :
2.3.4.2. Bote de listes

Si les valeurs possibles pour un champ sont connues (une liste de codes rfrencs, par exemple), utiliser une bote de liste ou une liste droulante au lieu dun champ de saisie texte libre. Dans une bote de liste, les lments de la liste sont affichs en permanence, en droul dans la bote de liste. L'utilisateur peut slectionner dans la liste un ou plusieurs lments.
Recommand Recommand
Le nombre de lignes afficher est de 7 (plus ou moins 2). Le nombre d'lments contenus dans la liste ne doit pas dpasser 100 (50 est une borne plus raliste). Au del de 100 lments, concevoir une page de recherche intermdiaire. Lordre de prsentation des items dpend du nombre dlments prsents : si la liste contient peu dlments (jusqu 5 lments), il est possible de les classer par ordre de frquence de slection. Au-del, il est conseill dadopter un ordre logique (ordre alphabtique par exemple).
Utile
Page 61/115
Exemple de boite de liste slection multiple
Dautres modles de boites de liste existent, notamment le modle permettant de slectionner plusieurs items en maintenant les touche CTRL et SHIFT appuye. Ce modle est dconseill car trop compliqu pour les utilisateurs.
2.3.4.3. Listes droulantes

Egalement appele menu droulant , elle se comporte exactement comme une bote de liste, hormis le fait qu'un seul lment de la liste est visible par dfaut. Pour afficher les autres lments, l'utilisateur doit cliquer dans cet lment dinterface. Ce type de contrle est utile pour conomiser de la place dans la page. Il ne permet de slectionner quun seul lment la fois.
Recommand
Dans un questionnaire, afin dinciter lutilisateur saisir le champ, un item dfaut est propos ou une incitation la saisie ( choisir item , par exemple). Cette rgle ne prvaut pas dans le cas dun formulaire de moteur de recherche par exemple.
Recommand
Le nombre d'lments affichs dans une liste droulante est limit 50 maximum. Au-del, il faut scinder linformation en tapes supplmentaires (pages ou fentre dassistants) ou en plusieurs listes.
Exemple de liste droulante
2.3.4.4. Boutons radio

Les boutons radio sont utiliss pour inciter linternaute slectionner un seul lment parmi plusieurs.
Recommand
Le nombre d'lments dans un regroupement de boutons radio est de 12 maximum.
Page 62/115
Recommand Utile
Les libells des boutons radio sont placs droite des cases. Lutilisation des boutons radio est conseille pour les choix exclusifs (par exemple Oui Non ) et permet dinsister sur le caractre binaire de linformation demande. Il est possible de slectionner par dfaut un des lments proposs par les boutons radio. Cette possibilit permet de rduire le nombre dactions de lutilisateur, mais elle contraint lutilisateur choisir obligatoirement un des lments. Elle est donc rserver pour les cas o le renseignement du champ est obligatoire. Dans ce cas, le bouton radio slectionn par dfaut doit correspondre loption supposment la plus approprie en fonction du contexte. Si le champ nest pas obligatoire, les boutons radio doivent tre laisss dcochs.
Utile
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 slection prsente lavantage de rendre toutes les options visibles sans ncessiter d'action de la part de l'utilisateur (contrairement une liste droulante par exemple). En contrepartie, ce type de champs occupe une place importante lcran et peut compliquer la lecture du formulaire. La case cocher est aussi employe pour des choix binaires (activation ou dsactivation dune option, confirmation dun choix, etc.).
Utile Recommand
Le nombre d'lments dans un regroupement de cases cocher est de 12 maximum. Les libells des cases cocher sont placs droite des cases. Exemples de cases cocher
Quel sport pratiquez-vous ?
Cyclisme Equitation Escrime
Page 63/115
2.3.5. Cas particulier des formulaires CERFA
Recommand
Tous les formulaires CERFA sont accessibles sur service-public.fr (qui les rfrence mais ne les hberge pas). Ils sont hbergs sur un seul site la fois, savoir : soit sur le site de lorganisme metteur ; soit sur le serveur de formulaire de la DGME. Les autres sites publics peuvent y donner accs en faisant des liens fins vers le site hbergeur du formulaire (ou un lien global vers service-public.fr).
Recommand
Les administrations locales ne doivent pas hberger et diffuser leurs propres versions de formulaires lorsquil en existe une version nationale homologue rfrence sur service-public.fr.
Avant la publication dun arrt au Journal Officiel impliquant la cration ou la modification dun formulaire, ladministration mettrice doit contacter la DGME pour : faire une demande dhomologation ; convenir des modalits de mise en ligne du formulaire (sur son propre site ou sur le serveur de formulaires gr par la DGME). Le jour de la publication de larrt au Journal Officiel, les organismes publics : mettent en ligne leurs formulaires administratifs ; signalent service-public.fr lURL du formulaire afin quil soit rfrenc sur le portail de l'administration et que les usagers en soit informs : 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, connat un dlai important pour sa mise disposition dans les guichets, il convient davertir service-public.fr et la DGME afin de le prciser dans les pages de service-public.fr de prsentation des formulaires.
2.4. BOUTONS DACTION

Un bouton daction sert valider ou dclencher un traitement.
2.4.1. Libells des boutons daction

Recommand Le titre du bouton doit tre adapt au contexte et assez explicite pour tre compris par les utilisateurs. Il convient dutiliser des verbes daction (de prfrence linfinitif)
Page 64/115
dcrivant la fonction qui fait suite laction de lutilisateur. 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 libells. Exemples de boutons daction :
Exemples de fonctions associes aux libells : Libell OK Fonction Valider un choix ou une entre dinformation Poster un formulaire Lancer une requte Annuler une ou plusieurs entres dinformation Commentaire Est utilis pour valider un choix ou lentre dune information dans un ou plusieurs champs de saisie. Est utilis pour envoyer ou poster un formulaire complt. Est utilis pour lancer une requte, typiquement dans le cas dune recherche. Est utilis pour effacer linformation entre dans un champ de saisie ou dans tous les champs dun formulaire ; remet ventuellement les valeurs par dfaut.
Envoyer Chercher Annuler
Utile
Pour un bouton daction standard, le libell ne dpasse gnralement pas 15 caractres. Il nest donc pas ncessaire de prciser le dtail de laction par rapport au contenu hormis quand le contexte de laction le ncessite. Exemple : Imprimer plutt que Imprimer le formulaire de demande de subvention .
2.4.2. Prsentation des boutons daction

Recommand Dans un souci daccessibilit, les boutons daction doivent tre raliss en mode texte HTML (et non pas une image) afin dtre facilement interprtables par les lecteurs alternatifs. Ceci permet galement de faciliter ladaptation des libells en cas de version du site en langues trangres. Les boutons sont disposs de manire fonctionnelle et cohrente dans lensemble du site. Les boutons de mme nature fonctionnelle sont donc regroups. Il doit y avoir une cohrence globale des boutons daction sur tout le site : ainsi, une mme action ne pourra pas tre dclenche par deux boutons daction diffrents. Au passage de la souris sur un bouton, un changement dtat de souris et/ou du bouton permet de signifier lutilisateur que le bouton est actif.
Recommand
Recommand
Page 65/115
Exemple de changement dtat du bouton au passage de la souris
Laction du bouton est alors dclenche, soit par le clic de la souris, soit par la touche <ENTREE> en cas de navigation avec le clavier (tabulation, flches, etc.). Recommand Recommand Le libell des boutons doit tre centr. Les boutons adoptent une norme graphique commune : la hauteur doit toujours tre identique. La largeur doit tre homogne, sauf lorsque pour des raisons de contexte, le libell du bouton est plus long. Il est conseill de renseigner la balise TITLE du bouton afin quune info-bulle apparaisse lorsque la souris survole le bouton. Linfo-bulle dcrit laction lie au bouton daction.
Utile
2.4.3. Les boutons daction dans un formulaire en ligne

Recommand Recommand Lorsque quune mme page propose une action de validation ou dannulation, lordre des boutons privilgier est : Valider Annuler . Les boutons daction sont disposs en bas du formulaire. Si le formulaire est long (hauteur suprieure un cran), il est conseill de rappeler les boutons en haut du formulaire afin de limiter le recours lascenseur. Dans le cadre de procdures guides et linaires, utiliser un bouton Valider et continuer pour passer ltape suivante. Le bouton Valider et terminer permet de marquer la fin de la procdure. Il dclenche alors laffichage de la page de confirmation. Le bouton Modifier permet de rendre les champs ditables et de modifier les donnes dun formulaire. Ce bouton est utiliser dans le cadre dune page de confirmation avant envoi des informations. A toute tape, la fonction Abandonner la procdure ? est propose en bas de page. Ce lien dclenche laffichage dune page explicative alertant sur la perte des donnes saisies et valorisant la fonction douverture de compte si existante.
Utile
Utile
Utile
Que disent les rfrentiels gnraux ? RGAA 1.1 : Fournir une alternative textuelle aux lments non textuels
Page 66/115
2.5. ARBRES
Un arbre permet de reprsenter une information hirarchise de manire synthtique. Chaque niveau de l'arbre est renseign par un titre regroupant une information explicite et concise, ventuellement accompagne d'un pictogramme.
Recommand
Chaque niveau d'un objet arbre est soit un rpertoire (pre), soit un lment (fils). Le clic sur un lment de larbre peut avoir deux types de comportement : sil sagit dun pre, le contenu du rpertoire est dploy (sous-rpertoire(s) et/ou lment(s) fils) ; sil sagit dun fils, cela dclenche une action lie cet lment fils (ouverture dun document, affichage dun contenu, renvoi vers un lien externe ou interne, etc.).
Recommand
Ce composant est utiliser uniquement lorsque l'on veut faire apparatre une notion de hirarchie (exemple : plan du site, organigramme, etc.).
La reprsentation sous forme darbre est galement bien adapte pour les plans de site, notamment ceux dont la profondeur dpasserait 4 niveaux. Larbre est alors un outil complmentaire facilitant la navigation au sein du site.
2.6. TABLEAUX
Les tableaux permettent de restituer des informations classifies et ventuellement de proposer des actions particulires (voir le dtail, supprimer, slectionner, etc.) sur la ligne slectionne. Ils ncessitent une prsentation soigne pour ne pas alourdir visuellement la page.
2.6.1. Lisibilit des tableaux

Un tableau comporte les lments suivants : un cadre ou bordure, une zone d'en-tte avec un libell descriptif par colonne et N lignes de champs (1 champ par colonne). Une cellule correspond lintersection dune ligne et dune colonne.
Recommand
Les bordures permettent de distinguer les zones du tableau. Leur matrialisation (bordures internes et externes) est optionnelle. En l'absence de matrialisation, cellesci prennent la couleur du fond du tableau. Le choix de l'encadrement dpend de l'utilisation qui est faite du tableau. Dune manire gnrale, il est conseill de ne pas marquer les bordures, notamment si le tableau s'intgre au sein d'un formulaire. En cas daffichage des bordures, il faut retenir une couleur claire afin de ne pas surcharger la page.
Page 67/115
Recommand
Les tableaux comportent obligatoirement un en-tte pour chaque colonne faisant office de libell pour les champs contenus dans la colonne. Les en-ttes de colonnes sont diffrencis des lignes de champ (par un fond de couleur plus fonc et des caractres en gras par exemple). Les champs d'une mme colonne doivent toujours tre de mme nature. Lalignement des contenus de cellules varient en fonction de leur nature : les textes sont justifis gauche tandis que les chiffres sont justifis droite. Pour une meilleure lisibilit densemble du tableau, il faut viter les champs de texte sur deux lignes, prfrer lutilisation des troncatures associes lattribut TITLE pour afficher lensemble du contenu. Un tableau peut galement intgrer des lments de saisie utiliss dans les formulaires tels que des listes droulantes, boutons radio, cases cocher, etc.
Recommand
Recommand
Afin de faciliter la lisibilit, il faut alterner la couleur les lignes du tableau (couleurs les plus claires de la palette HTML de prfrence). Pour la mise en avant dune (ou plusieurs) colonne, on peut mettre en gras son contenu ou utiliser des couleurs plus saillantes. Si le tableau prsente des informations cliquables , la cellule cliquable ou la ligne du tableau de lutilisateur doit tre diffrencie 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 apparat lors du passage de la souris indiquant laction ralise par le lien (voir dtail de la ligne, tlchargement de document, etc.). Exemple de prsentation de tableau
Utile
N de centre 123 456 789 123 456 789 123 456 789 123 456 789 123 456 789 123 456 789
Nom Nom 1 Nom 2 Nom 3 Nom 4 Nom 5 Nom 7
Adresse 55, rue des Lauriers 48, rue des Gardes 13, rue de le Bretonnire 50, rue des Grandes Mottes 6, rue de la Pommeraie 13, rue de le Bretonnire
CP 77 288 77 288 77 288 77 288 77 288 77 288 77 288
Ville MELUN MELUN MELUN MELUN MELUN MELUN MELUN
Voir Nom 6 123 456 789Voirles horaires et le plan48, rue des Gardes les horaires et le plandaccs daccs
Que disent les rfrentiels gnraux ? RGAA 5.1 : Baliser les en-ttes de lignes et de colonnes 5.2 : Associer les cellules de donnes aux en-ttes de lignes et de colonnes 5.3 : N'utiliser des tableaux pour la mise en page que si leur linarisation est correcte 5.4 : Ne pas utiliser d'lments de tableaux de donnes pour des tableaux de mise en page
Page 68/115
5.5 : Donner des informations complmentaires sur les tableaux de donnes 5.6 : Proposer des valeurs de remplacement pour les en-ttes de tableaux de donnes
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 laffichage, ces tableaux seront pagins : le nombre dlments affichs sur la mme page ne peut dpasser un maximum de deux fois la hauteur de la fentre (au-del de cette hauteur, la consultation de la fin du tableau ncessite plus dun clic dans la barre dascenseur vertical). Exemple de tableau pagin
43 rsultats
N de centre 123 456 789 123 456 789 123 456 789 123 456 789 123 456 789 123 456 789 123 456 789 123 456 789 123 456 789 123 456 789
43 rsultats
Nom Nom 1 Nom 2 Nom 3 Nom 4 Nom 5 Nom 6 Nom 7 Nom 8 Nom 9 Nom 10
Adresse 55, rue des Lauriers 48, rue des Gardes 13, rue de le Bretonnire 50, rue des Grandes Mottes 6, rue de la Pommeraie 38, square des Moines 38, rue des Nos 48, rue des Gardes 13, rue de le Bretonnire 50, rue des Grandes Mottes
CP 77 288 77 288 77 288 77 288 77 288 77 288 77 288 77 288 77 288 77 288
Ville MELUN MELUN MELUN MELUN MELUN MELUN MELUN MELUN MELUN MELUN
Retour en haut de page
Utile
En cas de pagination, un systme de navigation de type page suivante , page prcdente permet daccder aux diffrentes pages du tableau, y compris via un accs direct ces pages (les numros de page sont cliquables, sauf le numro de la page courante repr un style distinct des autres pages). Ce systme de navigation est rpt dans le bas du tableau. Il est galement conseill dafficher le nombre de lignes du tableau et de permettre lutilisateur de paramtrer le nombre dlments affichs par page. Si le nombre de lignes autoriss par page est important, un bouton Retour en haut de page positionn sous le tableau permet de revenir facilement en haut de lcran.
Utile
Page 69/115
2.6.3. Manipulation des tableaux

Recommand Lorsque lusager peut dclencher une action sur les items du tableau (suppression dun item, slection multiple, etc.), il faut offrir la possibilit lutilisateur 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 daction dclenchant le traitement de masse sur les items slectionns en haut et en bas du tableau. Le lien entre le(s) bouton(s) daction(s) et les items slectionns doit tre explicite (message avant validation, intituler du bouton, etc.). Dans le cas dun tableau pagin, laction ne sapplique qu la page visualise lcran. Utile Les items du tableau sont prsents de faon ordonne. Par dfaut le tri est fait sur la premire colonne, par ordre alphabtique s'il s'agit d'un champ alphanumrique, par ordre croissant sil sagit dun champ numrique. Le tableau doit proposer lorsque cela se justifie des possibilits de tris sur certaines colonnes du tableau. Un clic sur un bouton de tri ou len-tte de colonne permet de rafficher la liste en fonction des champs de la colonne slectionne. Un second clic permet dinverser lordre de tri. Un indicateur visuel (pictogramme) permet lusager de savoir sur quelle colonne est fait le tri. Utile En cas de tableau multi-pages, il est conseill de conserver en mmoire le tri sur les en-ttes de colonnes lorsque lutilisateur navigue entre les pages du tableau.
Nom du document Certificat de non-gage Certificat de concubinage Attestation de lemployeur Certificat mdical Formulaire de demande daide Rcpiss dpt de plainte
Date 01/01/08 14/02/08 31/03/08 10/05/08 23/06/08 12/07/08
Type de document Certificat Certificat Attestation Certificat Formulaire Accus de rception
Auteur Jean Desmoulins Jean Desmoulins Jean Desmoulins Jean Desmoulins Jean Desmoulins Jean Desmoulins
Page 70/115
2.7. IMAGES
2.7.1. Format, taille et poids des images

La dure de chargement dune page dpend en partie du poids de la page et donc du poids des images contenues dans la page. Lhtrognit de lquipement des utilisateurs (connexion, matriel) ne doit pas entraner dingalit daccs au contenu. Dans cet esprit, on recherchera constamment une optimisation du poids des images.
Recommand Recommand
Les formats dimages doivent tre conformes aux prconisations du volet technique du RGI. Afin de diminuer leur poids, les images doivent tre enregistres au format de compression appropri (.JPG, .PNG). Le format retenu dpend du type dimage (schma, photographie, etc.). Le taux de compression dtermine le poids mais galement la qualit de limage finale : une compression trs forte rduit ainsi le poids mais galement la qualit. Il ne faut pas utiliser dimage anime dans les pages de contenus car ce type dimage nest pas accessible.
Utile
Il est conseill de retailler les images au plus juste de leur taille daffichage car les dimensions physiques sont un des facteurs de poids. Il est par consquent utile de connatre les dimensions initiales de limage et celles de la cible.
Que disent les rfrentiels gnraux ? RGI Volet technique chapitre 3 : Interoprabilit des formats de donnes.
2.7.2. Prsentation des images

Recommand La balise ALT de limage doit tre systmatiquement renseigne pour les images signifiantes afin de dcrire succinctement limage et den favoriser le rfrencement par les moteurs de recherche. Pour les images napportant pas de plus-value informationnelle (bordure de tableau, puce, illustration) la balise ALT doit rester vide, afin de ne pas surcharger inutilement la tche des lecteurs alternatifs daccessibilit. Un lien est parfois associ limage ; on parle alors dimage-lien. Le recours aux images doit tre effectu bon escient, car cela gnre un certain nombre de contraintes lies laffichage et lutilisation :
Page 71/115
les images se chargent plus lentement que le texte ; elles ne possdent pas par dfaut dlments distinctifs lis la possibilit de cliquer dessus ; elles ne possdent pas dlments signifiant quelles ont dj t visites.
Utile
Afin dinciter lutilisateur cliquer sur les images-liens, celles-ci doivent changer dtat au passage de la souris. De plus, linsertion sous limage dune lgende constitue une incitation cliquer sur limage. Dans ce cas, ladresse du lien associ la lgende doit tre identique au lien associ limage. Exemple dincitation pour cliquer sur limage
Une image peut tre dcompose en sous-blocs auxquels on associe un lien hypertexte spcifique ; on parle alors dimage-map. La navigation par image-map peut tre pertinente dans certains cas particuliers : cartes gographiques, photo de groupe interactive, etc.
Utile
Il est conseill dassocier 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 associe aux images (info-bulle) ou un changement daspect visuel de limage (surbrillance, etc.). Il est conseill de ne pas avoir recours aux image-maps pour les sites qui recherchent une visibilit sur les appareils mobiles. Les tailles dcran, les caractristiques lies la navigation (clavier, stylet, etc.), le poids des pages et laccessibilit font que cette fonctionnalit nest pas optimise pour ce type de support.
Utile
2.7.3. Signification des images

Dans une page Internet, limage peut revtir plusieurs fonctions et significations. Elle peut tre : un lment dinformation illustrationsetc.) ; complmentaire dun contenu (schmas,
Page 72/115
un lment de navigation de type image-map (cartes, organigramme interactif, etc..) ; un lment de mise en page (icne, bouton du systme de navigation, pictogramme, puces, etc.) ; un lment dcoratif (ensemble des lments graphiques dnus de fonction informative ou de navigation).
Utile
Il est conseill de minimiser le recours aux images, graphiques, animations, vidos ou effets multimdias purement esthtiques et sans plus-value informationnelle. En effet, la prsence dimages ou de schmas complexes ou de grande taille (mme sils sont prsents dans une perspective pdagogique) peut nuire la consultation dune page en raison de la difficult de la lecture lcran.
Utile
En cas dutilisation de graphiques, le choix du style de graphique doit correspondre aux normes couramment admises (par exemple, un diagramme circulaire pour reprsenter des proportions, un histogramme pour reprsenter des tendances, etc.). Il est conseill de ne pas utiliser dimage pour les puces dnumration, sauf si les choix didentit graphique du site sont prpondrants.
Utile
Que disent les rfrentiels gnraux ? RGAA 1.1 : Fournir une alternative textuelle aux lments non textuels 1.2 : Doubler les zones cliquables ct serveur 3.6 : Utiliser les lments de liste de manire approprie 9.1 : Fournir des images avec zones cliquables ct client RGI Volet technique chapitre 3 : Interoprabilit des formats de donnes.
2.8. OBJETS MULTIMEDIAS

En matire dutilisation des objets multimdias (audio, vido, animations) dans un site, la rgle de base est la modration. Certes, les choix effectus peuvent contribuer lamlioration esthtique des pages mais ils doivent avant tout viser la lisibilit et la comprhension du contenu informationnel du site. Pour ces raisons, le recours aux objets multimdias est plus frquent pour les sites fort pouvoir communicant (site promotionnel, vnementiel) ou pdagogique.
Utile
Il est conseill de nutiliser les animations ou effets multimdias que sils apportent une relle plus-value au site que ce soit sur le plan informationnel ou en termes dimage du site et si lquipement des utilisateurs viss supporte la technologie utilise. Dans tous les cas, il faut prvoir leur quivalent textuel.
Page 73/115
Utile Utile Utile
Il est conseill de sassurer que le temps de chargement des pages ne sera pas affect par la prsence dobjets multimdias. Il est conseill de placer les objets multimdias dans des pages ne contenant que peu dinformation textuelle ou sur la page daccueil (vitrine du site). Dans un souci daccessibilit et de rfrencement, il est conseill de fournir un quivalent textuel aux fichiers multimdias. Cet quivalent doit comprendre des mots-cls pertinents afin damliorer le rfrencement des lments multimdias prsents sur le site par les moteurs de recherche.
Lutilisation deffets visuels dynamiques (HTML dynamique, Flash, ) convient bien aux sites ou sections de sites but promotionnel (exemple : visite virtuelle dun site) ou pdagogique (exemple : illustration graphique dun contenu textuel dans le souci den favoriser la comprhension).
Que disent les rfrentiels gnraux ? RGAA 1.1 : Fournir une alternative textuelle aux lments non textuels 1.3 : Fournir une description audio des contenus multimdias 1.4 : Synchroniser les quivalents des contenus multimdias 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 systme de diffusion et d'agrgation de contenus audio destins aux baladeurs numriques. Cette technique utilise le format de syndication de contenus RSS 2.0, pour rendre les enregistrements sonores automatiquement disponibles aux abonns, de la mme manire 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 dcouter le podcast de deux manires : directement sur le site via un plug-in ddi la lecture du podcast ; sur un baladeur numrique aprs tlchargement automatique. Enfin, un podcast peut tre accompagn de photos ou de textes. Dans le cas d'une vido on parle alors de vidocast.
Page 74/115
Exemple de plug-in ddi la lecture du podcast :
Recommand
En cas de lecture directement sur le site, lutilisateur doit conserver le contrle du droulement du podcast. Celui-ci ne doit pas se lancer sans que lutilisateur lait explicitement dcid. Lutilisateur doit pouvoir interrompre le droulement du podcast tout moment. Le systme doit galement le renseigner sur la dure du podcast, le temps restant et un indicateur de progression du chargement. Lutilisateur doit enfin pouvoir contrler le volume sonore. Il est recommand de mentionner pour chaque document audio la taille du fichier ainsi que son format et sa dure. Il est conseill dassocier au podcast un titre, une date de cration ainsi quun bref descriptif du contenu audio. Il est conseill de prvoir une rubrique ddie aux conditions dutilisation ainsi quune liste prsentant le matriel ncessaire lcoute du podcast. Il faut prendre en compte les spcificits du matriel audio de linternaute en mettant disposition : un mode demploi dtaillant pas--pas la procdure permettant daccder au contenu audio ; de questions-rponses sur le tlchargement du podcast au sein de la rubrique questions frquentes (FAQ). Exemple de mode de questions rponse et de mode demploi :
Recommand Utile Utile Recommand
Foire aux questions Qu'est-ce que le podcasting? Il sagit dun mode de diffusion de contenus sonores ou audiovisuels qui permet de tlcharger automatiquement sur son ordinateur, l'aide de logiciels spcialiss, les missions pralablement slectionnes, et par la suite de les transfrer sur un baladeur numrique pour les couter en diffr. La slection se fait au moyen d'un abonnement des listes de tlchargements. Comment s'abonner? 1- Pour accder aux contenus .. , vous avez besoin d'un ordinateur avec accs Internet et d'un logiciel qui puisse lire et tlcharger 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 baladodiffuses. 2- Suivez le mode demploi ci-dessous afin de complter votre abonnement. 3- Pour pouvoir couter les podcasts sur votre baladeur numrique, il vous suffit de brancher ce dernier votre ordinateur et de procder un transfert manuel ou automatique. Quand vos produits sont-ils disponibles? (prciser ici la nature des contenus, la frquence de mise jour, ainsi que la profondeur des archives disponibles) Dois-je avoir un lecteur numrique portatif (baladeur) pour couter les missions en baladodiffusion? Il n'est pas ncessaire d'avoir un lecteur numrique portatif pour couter ces missions. Elles peuvent tre coutes directement sur votre ordinateur personnel au moment qui vous convient. Dois-je avoir un iPod comme lecteur numrique? Tout lecteur numrique portatif peut tre utilis. Quelles sont les technologies ncessaires pour consulter les contenus vido? Si vous dsirez consulter les contenus vido sur un baladeur numrique, vous devez disposer d'un baladeur qui supporte le format vido. Y aura-t-il d'autres missions ajoutes en baladodiffusion? Prciser la future politique prvue Quelles sont les conditions dutilisation Prciser les conditions dutilisation Mode d'emploi 1. Tlchargez et installez le logiciel de podcast de votre choix sur votre ordinateur. Ouvrez le logiciel et slectionnez la fonction : "sabonner au Podcast" (ou quivalent) Dans la fentre qui souvre, recopiez ladresse URL du flux que vous souhaiter recevoir. 2. Le logiciel affiche alors la liste des documents vido et audio disponibles lcoute. Vous devrez les tlcharger afin de les couter et ventuellement les exporter vers votre baladeur MP3. 3. Selon les options que propose votre logiciel, vous serez prvenu automatiquement ou manuellement des mises jour du flux. Lquipe du site votre coute : si vous avez des demandes spcifiques concernant les podcasts, vous pouvez contacter le webmestre.
Page 75/115
Que disent les rfrentiels gnraux ? RGI 3.12 Volet technique : Formats pour les squences sonores. 3.15 Volet technique : Diffusion en mode continu de flux audio ou vido
2.8.2. Objets vido

La vido doit tre utilise avec modration compte tenu des limites en termes de bande passante et seulement dans des contextes particuliers (exemple : prsentation dun chantillon de contenu cinmatographique ou tlvisuel, dmonstration dun phnomne dans une perspective pdagogique ou informative; etc.). Il existe deux manires de proposer de la vido sur un site Internet : le fichier est propos en tlchargement sur le site ; le fichier est propos en lecture continue sur le site (streaming). Dans le premier cas, lutilisateur tlcharge directement la vido sur son poste de travail. Dans le second, la vido est lue directement sur le site au moyen dun plug-in (Windows Media, Flash, Real, QuickTime, etc.).
Recommand
Une vido doit tre accompagne dun bref descriptif de son contenu consultable avant le visionnage. Pour des raisons daccessibilit, il faut galement fournir lquivalent textuel des contenus vido. Dans le cas dune lecture en continu sur le site, lutilisateur doit conserver le contrle du droulement de la vido et du volume sonore de la vido. La vido ne doit pas se lancer sans que lutilisateur lait explicitement dcid. Lutilisateur doit pouvoir interrompre le droulement de la vido tout moment. Le systme doit galement le renseigner sur la dure de la vido, le temps restant et un indicateur de progression du chargement. Il est conseill dutiliser la lecture en continu des vidos qui ne ncessite pas de tlchargement ni de lecteur spcifique en dehors dun plug-in courant. Le tlchargement de la vido sera plutt rserv aux vidos pour lesquelles un haut niveau de qualit de limage est recherch.
Recommand
Utile
Utile
Il est conseill de sous-titrer les vidos pour des raisons daccessibilit.
Page 76/115
Exemple de vido en lecture continue
Que disent les rfrentiels gnraux ? RGI 3.13 Volet technique : Formats pour la vido basse dfinition 3.14 Volet technique : Formats pour laudiovisuel et la vido HD 3.15 Volet technique : Diffusion en mode continu de flux audio ou vido
2.8.3. Animations
Le recours aux animations est trs courant pour la mise en valeur de certains lments ou les explications caractres didactiques (visite guide, explication dun processus, etc.).
Recommand
Lutilisateur doit toujours conserver le contrle de lanimation. Celle-ci ne doit pas se lancer sans laccord explicite de lutilisateur qui peut galement larrter tout moment. Si le site propose une introduction anime en page daccueil, il faut lui fournir les moyens daccder directement au contenu du site sans visionner toute lanimation.
Recommand Utile
Si lanimation comporte des lments sonores, il faut proposer lutilisateur un systme permettant de dsactiver le son. Il est conseill de dcouper les animations didactiques en tranches logiques de faon ce que lutilisateur puisse organiser son parcours dans lanimation via un systme de navigation propre (menu, prcdent, suivant, etc.).
Page 77/115
Utile
Il est conseill de ne jouer les animations qu'une seule fois, afin que l'utilisateur les remarque lors des premires secondes de sa visite, et puisse continuer son exploration du reste du contenu sans tre perturb. Le recours au clignotement et au dfilement est dconseill pour des raisons daccessibilit. Sils sont utiliss dans un contexte particulier, ils doivent sarrter aprs un court laps de temps et ne pas se poursuivre indfiniment car un mouvement permanent nuit considrablement la lecture du texte.
Utile
Que disent les rfrentiels gnraux ? RGI 3.10 Volet technique : Formats pour l'animation simple dimages 3.11 Volet technique : Formats pour l'animation complexe dimages
2.9. BANNIERES PROMOTIONNELLES E-REGIE

E-rgie est un dispositif informatique (logiciel+serveur) de gestion de campagnes promotionnelles qui permet de programmer laffichage dynamique des bannires dans les espaces prvus sur les sites Internet gouvernementaux. Ce dispositif pilot par le Service dinformation du Gouvernement permet (SIG) de : Diffuser les campagnes ministrielles qui comportent un volet en ligne sur les sites du dispositif E-rgie pour les faire bnficier de laudience des sites gouvernementaux. Permettre de diffuser des bannires dinformation de manire instantane en cas de communication de crise sur tous les sites E-rgie . Favoriser le trafic lintrieur de la toile gouvernementale (diffusion de campagnes spcifiques en fonction des affinits et des usages constats des internautes des diffrents sites de la toile gouvernementale, cration 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 procdure de rquisition de lespace bannire peut tre dcide. Cette procdure entrane la suspension des campagnes en cours au profit dune campagne de communication de crise sur tout ou partie des sites participant E-rgie. La procdure dintgration des sites Internet publics au dispositif E-rgie est la suivante : Le webmestre ou le directeur de la communication du site metteur fait part au SIG de sa volont dintgrer le projet. Le prestataire du SIG propose plusieurs maquettes dintgration de bannires dans la page daccueil. Les maquettes sont transmises par le SIG.
Page 78/115
Le webmestre ou le directeur de la communication choisit un format de bannire intgrer la page daccueil du site. La balise correspondant au format de bannire est transmise au webmestre par le SIG. La balise est intgrer dans la page daccueil lendroit o le webmestre souhaite faire apparatre la bannire. La demande de diffusion dune nouvelle campagne devra faire lobjet dune demande du directeur de la communication du ministre au directeur du SIG. Pour toute demande de suppression dune campagne, le directeur de la communication adresse sa demande au directeur du SIG. La diffusion dune bannire via le dispositif E-rgie doit respecter le planning suivant : jusquau 15 du mois : transmission au SIG des projets de campagnes pour le mois suivant ; entre le 15 et le 20 du mois : runion au SIG entre le dpartement Campagnes et le dpartement Multimdia 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 concerns.
Recommand
Les bannires E-rgie doivent tre au format GIF (ou GIF anim) et correspondre aux standards de lIAB (Internet Architecture Board) : 46860, 25 Ko ; 72890, 25 Ko ; 250250, 25 Ko ; 180150, 25 Ko.
Recommand
Les pages daccueil et les pages les plus consultes des sites arborent des bannires E-rgie visibles sans avoir recours lascenseur vertical. Au maximum, 10 campagnes simultanes peuvent figurer sur un site. Les bannires doivent intgrer la Marianne pour que linternaute puisse identifier la campagne comme une campagne gouvernementale, avec le nom du ministre ou le nom du site. Les bannires intgrent un visuel ou un texte pour inciter au clic vers une page spcifique du site metteur de la bannire.
Recommand
Recommand
Recommand
Les bannires intgrent la fin des squences une signature avec lURL du site de lmetteur (ventuellement, ajouter cliquez ici ).
Page 79/115
Utile
Les bannires doivent respecter un scnario de 3 4 tapes maximum. Les animations excessives risquant de perturber le message sont viter. Les animations prsentant des difficults daccessibilit (clignotement, dfilement rapide) doivent proposer une alternative. Les bannires transmettent un message simple qui ne dfile pas trop rapidement.
Utile
Utile
Marquer la page de destination de la campagne (stat@gouv). Voir ce sujet le chapitre 1.7 - Stat@gouv.
Page 80/115
3. REGLES SUR LES CONTENUS

Cette troisime partie sattache dfinir les rgles dergonomie des contenus courants des sites Internet : la page daccueil, les pages vocation ditoriale (articles), etc. Elle aborde galement un contenu trs spcifique aux sites Internet publics : les dmarches en ligne et les fonctions daide en ligne qui y sont associes. Enfin, le chapitre sur les contenus 2.0 constitue un rsum des bonnes pratiques lies au Web 2.0, domaine o les standards commencent seulement merger.
3.1. PAGE DACCUEIL

La page daccueil dsigne la principale page d'un site Web, accessible par le nom de domaine (URL) et permettant l'accs aux autres pages du site. La page daccueil constitue une vitrine du site : elle doit donc donner au visiteur une vision globale du site, lui offrir un accs lensemble des contenus et le renseigner sur lmetteur du site, les contenus abords et les ventuels services proposs. La page daccueil est un point dentre frquent dans le site et est de loin la page la plus visite du site. Sa perception est donc dterminante pour la navigation dans le site car elle conditionne la visite des pages de contenus lintrieur du site.
3.1.1. Facilits daccs la page daccueil

La facilit daccs la page daccueil doit tre pris en compte tant dans le cas dun premier accs (lien depuis un moteur de recherche ou un autre site, saisie manuelle de lURL, etc.) que dans le cas dun accs rcurrent via les signets (favoris) du navigateur ou lhistorique de navigation. Un accs facile la page daccueil permet doptimiser le trafic vers les pages intrieures du site ; lobjectif est de perdre le moins possible de visiteurs ds la premire page du site et de les inciter au contraire naviguer lintrieur du site.
Recommand Recommand
La page daccueil est accessible depuis lURL racine du nom de domaine et ne comporte pas d'autres extensions. Il est recommand de bien spcifier lattribut TITLE affect la page daccueil afin den optimiser le rfrencement (pertinence des rsultats des moteurs de recherches), sa visibilit (affichage dans les navigateurs) et son accessibilit (nom propos par dfaut dans les signets ou favoris). Ce titre doit renseigner sur lensemble des contenus prsents sur le site. Il est conseill doptimiser le temps de chargement de la page daccueil : les tests en utilisabilit prconisent un temps de chargement infrieur 3 secondes, ce qui suppose un poids de page compris entre 100 et 250 Ko (le temps de chargement dpend galement de la nature du matriel et de la connexion de lutilisateur). La balise ALT des images prsentes sur la page daccueil doit tre renseigne,
Utile
Page 81/115
notamment celles supportant la navigation afin de permettre aux utilisateurs qui connaissent dj le site de cliquer sur les boutons de navigation avant laffichage complet des images. Utile Il est conseill dutiliser pour les sites fort trafic une favicne afin de renforcer lidentit visuelle du site. Une favicne est un pictogramme qui saffiche avant lURL 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 favicne pour le site service-public.fr
Utile
Il est conseill de ne pas avoir recours des pages dintroduction sintercalant avant la vritable page daccueil (page intermdiaire prsentant souvent une animation fort pouvoir communiquant). Ce type de page impose une tape supplmentaire inutile et souvent dissuasive lutilisateur avant laccs aux contenus.
3.1.2. Valorisation des contenus de la page daccueil

La prsentation des contenus de la page daccueil est cruciale pour inciter lutilisateur naviguer dans le site. La page rpond la fois une fonction de navigation dans le site et aux besoins de valorisation des contenus prsents sur le site. Elle rsulte toujours dun bon compromis entre une prsentation exhaustive des fonctions principales du site, les impratifs de lisibilit (la page daccueil ne doit pas tre surcharge) et le temps de chargement de la page.
Recommand
La page daccueil est le point dentre du site et doit se distinguer des autres pages par une mise en page spcifique tout en restant cohrente avec lensemble du site : les systmes de navigation et les styles adopts sur la page daccueil doivent ainsi tre repris sur lensemble du site. Toutes les pages du site doivent comporter un lien vers la page daccueil. Il est courant dappliquer ce lien sur le logo ou sur un bouton/icne Accueil . Ce lien doit tre dsactiv sur la page daccueil elle-mme. Il est conseill dutiliser les principes de remontes dinformations (liens contextuels, transversaux etc.) pour dynamiser la page daccueil et permettre lutilisateur daccder rapidement des contenus spcifiques. Pour les sites fort contenu ditorial, la page daccueil ne doit pas tre statique mais doit au contraire reflter la vie du site et donner des indications implicites sur les mises jour rcentes. Il est conseill de mettre en avant certaines rubriques afin dinciter lutilisateur aller plus loin et fournissant des liens transversaux, des menus contextuels, des indices sur le contenu des rubriques ou en donnant un aperu de certains articles.
Recommand
Utile
Page 82/115
Utile
Il est conseill doptimiser la prsentation de la page daccueil afin de permettre aux utilisateurs de retrouver les informations facilement et de rduire ainsi le temps de recherche. Pour les pages daccueil ayant un recours un ascenseur vertical, il est donc conseill de faire apparatre les contenus les plus recherchs dans la premire partie de la page daccueil sans que lutilisateur nait besoin dutiliser lascenseur.
3.1.3. Identit commune de la page daccueil des sites publics

La dfinition dune marque commune caractristique des sites Internet publics passe aussi par lharmonisation des contenus prsents sur les pages daccueil des sites Internet publics. A lheure o la ressemblance de certains sites commerciaux avec des sites publics perturbe les repres, le respect de principes communs dans la prsentation des pages daccueil vise renforcer la confiance des usagers envers les sites Internet publics. Les recommandations en matire de prsentation des pages daccueil portent uniquement sur les contenus, le graphisme restant linitiative de ladministration mettrice. Certaines rgles sont spcifiques la sphre gouvernementale. Elles sont alors signales par le pictogramme Marianne : .
3.1.3.1. Le systme de navigation principal

Recommand Le systme de navigation principal (bandeau horizontal ou vertical de navigation de premier niveau) est prsent ds la premire page du site et son positionnement est constant sur lensemble du site. Afin de faciliter le reprage, la rubrique courante est mise en valeur par une distinction graphique (surbrillance, changement de couleur). Exemple de systme 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 dautres sites publics sont regroups dans une zone spcifique sur la page daccueil.
Page 83/115
Recommand
Un lien permet notamment daccder aux sites service-public.fr et Legifrance ds la page daccueil, conformment la circulaire Premier ministre du 7 octobre 1999 relative aux sites Internet des services et des tablissements publics de lEtat.
3.1.3.3. Le bloc Marianne

Recommand Lmetteur 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 lappartenance la sphre gouvernementale. Si le site dpend de plusieurs metteurs, ceux-ci doivent tre prsents dans le bloc marque.
Recommand
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 dfonce blanche sur un fond de couleur, ou tre en couleur sur un fond blanc. Exemples de bloc-marques :
Page 84/115
Recommand
Les ventuels partenaires du site sont signals en bas de la page daccueil du site, en respectant le format du bloc-marque de ladministration mettrice. Exemple de rappel des partenaires du site en bas de page :
Utile
Les administrations peuvent avoir recours un logotype spcifique (en dehors du bloc-marque) si celui-ci est bien identifiable et utilis de faon constante dans tous les lments de communication.
Page 85/115
3.1.3.4. Les bannires E-rgie

Recommand La page daccueil des sites gouvernementaux arbore des bannires E-rgie. Celles-ci doivent tre visibles sans avoir recours lascenseur. Voir ce sujet le chapitre 2.9 Bannires E-rgie.
3.1.3.5. La signature du site

Certains sites peuvent avoir recours une signature (galement appele baseline ), c'est-dire une petite ligne ou phrase daccroche rsumant le positionnement du site. Dans ce cas, la signature rpond certaines caractristiques.
Utile
Le recours une signature permet de contextualiser un site dont le positionnement nest pas explicite. En cas de recours une signature, celle-ci est courte (quelques mots), explicite, sobre, appose au bloc-marque (en dessous ou droite) et non anime.
3.1.3.6. Les fonctions transverses

Les fonctions transverses, galement appeles liens utilitaires, permettent daider lutilisateur dans sa navigation au sein du site (voir ce sujet le chapitre 3.1.3.1 Zone de fonctions transverses). Ces fonctions sont regroupes dans une zone situe gnralement en haut droite.
Utile
En fonction de la nature et des caractristiques du site, cette zone de fonctions transverses contient les lments suivants : le moteur de recherche (voir ce sujet le chapitre 3.2.4 Moteur de recherche) ; un bloc dauthentification si le site dispose dun accs restreint (voir ce sujet le chapitre 1.5 Sites accessibles aprs 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 lmetteur du site souhaite valoriser sa politique daccueil (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 lindique, situ en bas de la page daccueil et prsent sur toutes les pages du site. En fonction de la nature et des caractristiques du site, le pied de page contient gnralement les lments suivants :
Page 86/115
les mentions lgales ; le plan du site ; un lien vers la page presse ; un lien vers les horaires et le plan daccs si lmetteur du site reoit du public ; un lien vers la page accessibilit (voir ce sujet le chapitre 1.3.4 Pictogrammes et icnes) ; un rappel du nom de lmetteur du site et lanne de ralisation ou de refonte du site ; un lien vers la page rpertoire des informations publiques ; un lien contact si lmetteur du site ne souhaite pas particulirement valoriser sa politique daccueil (voir ce sujet le chapitre 3.2.3 Page Contact ) ; un lien vers la page daide ou la page FAQ, si elles existent.
Recommand
Les mentions lgales sont rappeles dans le pied de page. Elles contiennent les informations suivantes : 1) Informations ditoriales Doivent figurer sur les sites Internet publics un ensemble dinformations obligatoires analogues lours dune publication papier traditionnelle : publication spcifique des noms, prnoms et qualits du/des directeurs de la publication, ainsi que les noms, prnoms et qualits du/des membres de lquipe ditoriale et, le cas chant, ceux du responsable de la rdaction. De mme, doivent tre indiqus, pour les personnes morales, leur dnomination ou leur raison sociale et leur sige social, leur numro de tlphone. Pour viter le spam, il est recommand de ne pas mentionner les adresses lectroniques. 2) Informations relatives au traitement de donnes caractre personnel Ds lors que des donnes personnelles (au sens de larticle 2 de la loi n78-17 du 6 janvier 1978 relative l'informatique, aux fichiers et aux liberts) sont collectes sur un site Internet, il est ncessaire : dindiquer quelles donnes personnelles sont collectes ; les droits des internautes associs cette collecte (rectification, opposition, dsinscription des listes de diffusion).
Page 87/115
Exemple de rdaction :
Ce site internet a fait lobjet dune dclaration la Commission Nationale de Ce site internet a fait lobjet dune dclaration la Commission Nationale de lInformatique et des Liberts (CNIL) sous le n [].. Conformment aux dispositions [] Conformment aux dispositions lInformatique et des Liberts (CNIL) sous le n de la loi n 78-17 du 6 janvier 1978 relative lin formatique, aux fichiers et aux 78-17 du 6 janvier 1978 relative lin formatique, aux fichiers et aux de la loi n liberts, vous disposez dun droit daccs, de modification, de rectification et de liberts, vous disposez dun droit daccs, de modification, de rectification et de suppression des donnes qui vous concernent. Ce droit sexerce, en justifiant de son suppression des donnes qui vous concernent. Ce droit sexerce, en justifiant de son identit [] par voie postale :: (), par courrier lectronique :: identit [] par voie postale (), par courrier lectronique contact[arobase]siteinternet.gouv.fr ]] contact[arobase]siteinternet.gouv.fr De plus, le traitement de ces donnes doit correspondre une finalit lgitime, et ne De plus, le traitement de ces donnes doit correspondre une finalit lgitime, et ne pas servir dautres fins que celles pour lesquelles les donnes sont initialement pas servir dautres fins que celles pour lesquelles les donnes sont initialement collectes et traites. collectes et traites. La loi impose la signalisation des personnes responsables du traitement des La loi impose la signalisation des personnes responsables du traitement des donnes ainsi que lindication des moyens dont dispose la personne pour lui donnes ainsi que lindication des moyens dont dispose la personne pour lui permettre de faire valoir les droits susmentionns. permettre de faire valoir les droits susmentionns.
3) Informations relatives aux prestataires dhbergement Doivent tre publis sur le site, le nom, la dnomination ou la raison sociale, ladresse et le numro de tlphone de lhbergeur du site et, le cas chant, de lhbergeur de la liste de diffusion, de lorganisateur des ventuels chats, du gestionnaire des statistiques de frquentation du site. 4) Informations relatives aux donnes et aux informations publiques Depuis lordonnance n 2005-650 du 6 juin 2005 relative la libert daccs aux documents administratifs et la rutilisation des informations publiques, les donnes publiques peuvent tre rutilises et retraites mais il faut en garantir leur intgrit. Il est donc ncessaire dindiquer les conditions de rutilisation de ces donnes, avec la possibilit pour lAdministration dindiquer la mention tous droits rservs au bas de chaque cran, prcisant la proprit de lAdministration sur le contenu de son site. En cas de diffusion de photographies, vidos, logos sur votre site, doivent tre respectes la lgislation en matire de droit dauteur, avec notamment lindication des sources. 5) Informations relatives aux liens hypertextes Lorsque des liens renvoient linternaute vers des sites non publics, il est prfrable 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 daccueil des forums de discussion, il est recommand dindiquer, outre le thme du forum, le type de modration, lutilisation et larchivage ventuels des contributions ainsi que les modalits de clture de lespace 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.
Page 88/115
Recommand
Le plan du site fait lobjet dun lien dans le pied de page. Le plan du site donne aux utilisateurs une vision globale de larchitecture du site et constitue un moyen alternatif de navigation. Il permet de reprer la partie du site susceptible de contenir linformation recherche.
Recommand
La rubrique ou la page presse , lorsquelle existe, est rappele dans le pied de page. Cette rgle ninterdit pas aux sites forte notorit de valoriser cette rubrique en premier niveau dinformation, accessible ds le systme de navigation principal.
Recommand Recommand
Les tablissements recevant du public fournissent dans le bas de page de leur site Internet un lien vers les horaires douverture et le plan daccs ltablissement. La page accessibilit est signale dans le bas de page. Cette page liste les pages ou secteurs du site drogeant aux exigences daccessibilit (cf. document daccompagnement du RGAA). Voir ce sujet le chapitre 1.3.4 Pictogrammes et icnes. Pour les sites Internet ayant dpos un dossier de conformit RGAA, cette page est galement accessible par le pictogramme RGAA.
Recommand
Le nom de lmetteur du site et lanne de ralisation (ou de refonte du site) sont rappels dans le pied de page. Il peut tre rappel que le contenu informationnel du site est protg par les dispositions du code de la proprit intellectuelle. Il est prfrable dviter la lutilisation du terme copyright qui correspond une notion de droit anglo-saxon.
Recommand
Les administrations qui produisent ou dtiennent des informations publiques doivent mettre en ligne sur leur site Internet un rpertoire des principaux documents dans lesquels ces informations figurent. Ce rpertoire est accessible dans une rubrique (ou page) intitule Rpertoire des informations publiques . Un lien vers cette rubrique (ou page) figure au minimum dans le pied de page. Pour les administrations disposant d'un rpertoire atteignant une taille consquente ou souhaitant lui donner une plus grande visibilit, il peut s'avrer utile de crer une rubrique directement accessible depuis le systme 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 rpertoire des informations publiques relevant de cette administration que sur le site principal et que l'ensemble des liens de bas de pages des diffrents sites pointent vers ce rpertoire.
Utile Utile
Le lien contact , si la politique daccueil de lmetteur nest pas particulirement valorise, peut figurer dans le pied de page. La page Aide et / ou la page FAQ est indispensable pour les services en ligne et peut tre rappele dans le bas de page. La page FAQ rpond aux principales questions poses par les utilisateurs et est
Page 89/115
accompagne dun dispositif de remonte des questions (voir ce sujet le chapitre 3.4.3 Foire aux questions (FAQ)).
3.1.3.8. Exemple de zoning

Limage ci-dessous constitue un exemple de zoning dune page daccueil respectant les recommandations nonces plus haut. Exemple de zoning de page daccueil type ( titre indicatif)
Langues Authentification Contact Recherche
Signature Systme de navigation principal
Contenu contextuel
Contenu contextuel Contenu principal
Liens externes Bannire E-rgie

() Autres sites publics
Pied de page
Mentions lgales Plan du site Presse Horaires et plan daccs Accessibilit Rpertoire des informations publiques Contact FAQ, aide Nom de ladministration - 2008 Pictogramme RGAA Pictogramme label Marianne
Page 90/115
3.1.4. Page daccueil des dmarches en ligne

La page daccueil des sites ddis la ralisation dune dmarche en ligne doit respecter certains principes spcifiques. Lobjectif de cette page daccueil est de dmystifier la dmarche et sa complexit en permettant lutilisateur danticiper la succession des tapes. Elle doit galement aider lutilisateur valuer la nature et la quantit dinformations quil aura saisir, et le temps que cela lui prendra en employant un ton pdagogique et rassurant.
Page daccueil de la dmarche de demande dacte dtat-civil :
Recommand
La page daccueil doit tre structure en deux blocs nomms comme suit : Avant de commencer permettant succinctement de prsenter la dmarche ainsi que les conditions administratives et pices ncessaires ; Vous tes prt ? informant du temps ncessaire (estimation), prsentant les tapes, les conditions gnrales dutilisation et proposant un accs simple la dmarche en ligne.
Recommand Recommand
Le bouton Commencer doit tre mis en valeur pour inciter lutilisateur initier la dmarche. La hauteur de la page daccueil doit tre limite la hauteur dun cran 1024768. Le bloc Avant de commencer doit tre visible sans ascenseur en 800600.
Page 91/115
Recommand
Les pr-requis techniques doivent tre rsums dans le bloc Avant de commencer . Si besoin, il est possible davoir recours un lien complmentaire (En savoir plus) vers une page ddie. Le nombre dtapes de la dmarche doit tre indiqu ( dfaut, une indication sur les grands moments de la procdure). Ces tapes doivent adopter un titre en langage courant (30 caractres maximum). Le format du produit final (fichier imprimer ou transmission de demande lectronique ou autre) doit tre indiqu lutilisateur ds la page daccueil. Il est conseill de donner la dure approximative dachvement pour une personne non experte.
Recommand
Recommand Utile
3.2. AUTRES PAGES SPECIFIQUES
3.2.1. Pages de contenu type article

Les sites fort contenu ditorial se sont beaucoup dvelopps ces dernires annes avec lapparition doutils ddis la publication et la gestion de contenu (en anglais CMS pour Content Management System). Ce type doutil dispose de fonctionnalits de publication et offre une interface d'administration permettant un administrateur et/ou rdacteur de site de crer, organiser et partager les diffrentes rubriques et contenus qui les composent. La publication des articles sappuie sur un processus rgissant les rgles de validation avant la publication (worfklow).
Que disent les rfrentiels gnraux ? RGAA 11.4 : En dernier recours, fournir une version alternative accessible 13.8 : Rdiger les contenus de faon simple, logique et ordonne 14.1 : Utiliser un langage clair et simple 14.2 : Proposer des illustrations visuelles ou sonores
3.2.1.1. Prsentation dun contenu de type article

Dans un site fort contenu ditorial, le contenu de base est larticle. La prsentation dun contenu de type article rpond quelques principes ergonomiques de base, en particulier les principes lis lisibilit cognitive (hirarchisation et regroupement de linformation, cohrence du vocabulaire, longueur des textes, etc.). Voir ce sujet le chapitre 1.3.5 Lisibilit cognitive.
Page 92/115
Recommand
Les articles du site doivent adopter une prsentation homogne et reprendre les mmes lments sur tout le site.
Les lments de base dun article respectent les rgles suivantes : Utile Utile Le titre : il est court, explicatif et suscite lintrt (la moiti des lecteurs dlaissent une page dont le titre ne leur parait pas intressant). 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 trs lev de renouvellement des informations sur Internet, la date de larticle permet de matrialiser la pertinence et lactualit du contenu de larticle. Le chapeau (optionnel) : il sagit dun texte court (souvent en caractre gras) sous le titre de larticle. Il rsume lessentiel de la page en 2 5 lignes. Il permet de renseigner lutilisateur sur le contenu de larticle. Le chapeau constitue une accroche et doit donner envie de lire larticle. Les sous-titres (optionnel) : il est conseill de sectionner le texte via des sous-titres donc la fonction est dentretenir lattention du lecteur et prserver la dynamique de lecture. Les sous-titres doivent tre distingus visuellement du reste du texte et adoptent des styles diffrents en fonction de la hirarchie du sous-titre. Le corps de texte (paragraphes) : il est conseill de dcouper le corps de texte en paragraphes courts spars rgulirement par des sous-titres. Chaque paragraphe doit tre court et dveloppe en gnral une seule ide principale. Il est noter que la majorit des utilisateurs ne lit pas les paragraphes en entier mais effectue une lecture en diagonale destine en extraire les ides essentielles. Une prsentation des lments sous forme de listes, tableaux, etc. lorsque cela est possible permet de fournir une vision synthtique des contenus adapte la lecture rapide du Web. Les images (optionnel) : il est conseill dintgrer au moins une image par page pour reposer lil du lecteur et susciter son attention. Les images doivent tre la fois illustratives et explicatives ; elles comportent galement une lgende. Il faut veiller utiliser des images libres de droit. Les encadrs (optionnel) : pour casser les mises en page trop rigides, il est conseill dutiliser des encadrs (cadre graphique, couleur de fond, police spcifique, etc.) contenant un complment dinformation ou une synthse des lments les plus importants de larticle.
Utile
Utile
Utile
Utile
Utile
3.2.1.2. Longueur du texte

Les pages contenant beaucoup dinformation sont longues et mesurent plusieurs pages d'cran, ce qui rend la lecture ligne ligne fastidieuse pour lutilisateur. Il importe dans ce cas de respecter quelques prconisations propres aux textes longs.
Recommand
Il est important de limiter la taille des pages trois crans en rsolution 1024768 avec une taille de police standard.
Page 93/115
Recommand
Pour les contenus de type dossier , il est ncessaire 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 rsolution 1024768 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. 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 tlcharger. En cas de version imprimable ou tlchargeable (PDF) de larticle, il est conseill de soigner la mise en page de larticle, en ayant recours une feuille de style CSS ddie limpression. Afin de resituer le contexte de la page imprime, celle-ci reprend les lments suivants : lmetteur du site ; la date de limpression ; lURL de la page ; le chemin de la page dans le site (fil dAriane par exemple).
Recommand
Utile
Utile
En cas de textes longs, les textes sont parfois dcoups en plusieurs pages articules entre elles via un systme de navigation minimaliste (page suivante, page prcdente). Cette pratique est dconseille pour les articles car elle ncessite le chargement successif des pages. Son utilisation doit donc tre limite aux articles thmatiques (dossiers). Il est conseill dans ce cas de proposer ce type de liens sous formes dencadrs contextuels du type voir aussi .
3.2.1.3. Fonctions associes larticle

Un certain nombre de fonctions associes larticle permettent denrichir les utilisations de larticle. Les fonctions proposes peuvent tre classes en trois catgories : Les fonctions de base : imprimer ; envoyer larticle un tiers ; tlcharger. Les fonctions daccessibilit : augmenter la taille de la police ; accder une version de larticle dans une autre langue. Les fonctions interactives : commenter ; partager larticle sur une plateforme de rseau social ;
Page 94/115
sabonner au flux RSS de la rubrique de publication de larticle ; attribuer une note ou recommander larticle, etc.
Utile
En cas dutilisation des fonctions associes aux articles, il est conseill de regrouper ces fonctions dans une zone spcifique de larticle et dassocier chaque fonction une icne explicite. Exemple de barre de fonctions associes un article (lemonde.fr)
3.2.2. Plan du site

La prsence dun plan permet de rpondre aux prfrences de certains utilisateurs en terme de stratgie de navigation, surtout dans le cas dun site avec une architecture complexe. Le plan doit permettre lutilisateur de reprer rapidement la partie du site la plus susceptible de contenir linformation recherche (sinon de trouver directement linformation). Le plan reflte larchitecture du site et contient lensemble des catgories dinformation prsentes dans les pages, de faon ce que lutilisateur puisse se rendre directement un point donn du site sans avoir retourner la page daccueil.
Recommand Utile
Le plan du site est rappel dans le pied de page afin dtre accessible partir de toutes les pages du site. Il est conseill de faire figurer une marque visuelle du type Vous tes ici afin de signifier lutilisateur lendroit o il se trouve dans le site (page depuis laquelle le plan du site est appel).
Que disent les rfrentiels gnraux ? RGAA 13.3 : Fournir des informations sur l'architecture gnrale du site
Page 95/115
3.2.3. Page Contact

La page contact (parfois appele Contact ou nous crire ) permet aux utilisateurs dinteragir avec lmetteur du site en posant une question ou en donnant son avis ou faire des suggestions lmetteur du site. Quelques principes de base sappliquent la mise en place dun tel dispositif.
Recommand
Il est conseill de privilgier la mise en place dun formulaire plutt quune adresse courriel cliquable du type contact@administration.gouv.fr . Le formulaire vitera les allers et retours successifs entre lutilisateur et lmetteur du site, permettra de recueillir des renseignements spcifiques afin damliorer le traitement des questions (un objet de message pr-typ permet daiguiller le message vers les bons rpondants par exemple). De plus, une adresse de type SMTP prsente sur une page Internet constitue une proie vulnrable pour les automates chargs de collecter des banques dadresses courriel. La mise en place dun formulaire permet donc de limiter les messages non dsirs (spams).
Utile
En cas de mise en place dun formulaire, il est conseill davoir recours un captcha , c'est--dire un dispositif visuel destin se prmunir contre les questions automatises et intensives ralises par des automates. Exemple de formulaire avec captcha
Votre adresse lectronique : Lobjet de votre message : Votre message :
Si vous narrivez pas lire le code, cliquez-ici pour en crer un autre
Utile
Le traitement des messages posts sur un site ncessite bien souvent une organisation particulire et des outils de suivis spcifiques, sous peine de crer une attente chez lutilisateur laquelle on ne pourra pas rpondre convenablement. Si le volume de questions poses est important, il est conseill de proposer une prslection des sujets (ou objets) de question poses afin de mettre en place un aiguillage des messages vers les rpondants comptents.
Utile
Page 96/115
Accus de rception Si lusager est identifi et conformment aux dispositions du rfrentiel gnral de Scurit (RGS) un accus de rception est produit lintention de lusager pour tout change engag avec ladministration par voie lectronique. En fonction du canal dmission retenu (courriel, courrier, SMS, etc.), laccus de rception peut revtir des formes distinctes. Par ailleurs, son contenu dpend du niveau de criticit de la transaction engage entre lusager et ladministration. Dans certains cas, laccus de rception peut tre prcd dun accus denregistrement qui atteste la bonne rception de la demande mais nengage pas ladministration sur un dlai de traitement. La confirmation de transaction et laccus de rception sont des documents non ditables soumis aux mmes rgles dergonomie et daccessibilit que les autres formulaires. Les mentions obligatoires portes par ces documents seront dtailles dans le dcret du RGS relatif lordonnance 2005-1516. Les principes gnraux suivants peuvent sappliquer ces documents : la confirmation est prsente en ligne, via le navigateur ; laccus de rception (respectivement denregistrement) est affich lcran et peuttre envoy lusager par le canal retenu (courriel, courrier, SMS, etc.) et ladresse quil aura pralablement fournie ladministration (durant la dmarche en ligne ou lors dune prcdente dmarche).
Recommand
Lorsquune question est pose par un usager via le formulaire de contact dun site Internet, un accus de rception (ou denregistrement) est envoy lutilisateur ladresse quil aura pralablement fournie).
Que disent les rfrentiels gnraux ? RGS Chapitre 4 : Accus denregistrement et de rception
3.2.4. Moteur de recherche
3.2.4.1. Gnralits
La prsence dun moteur de recherche est conseille dans le cas dun site fort contenu ditorial ou avec une architecture complexe. Un moteur de recherche peu efficace, lent ou qui donne des rsultats non pertinents, nuit considrablement la consultation du site et constitue une source de gne pour lutilisateur.
Recommand
Le moteur de recherche est accessible partir de toutes les pages du site et adopte une prsentation homogne (voir ce sujet le chapitre 1.2.2.3 Zone de fonctions transverses).
Page 97/115
Recommand
Le moteur de recherche se prsente sous la forme dune bote de texte (et non pas sous la forme dun lien cliquer).
Rechercher
OK
Recherche avance
Utile
Lusage le plus courant positionne le moteur de recherche en haut droite de la page.
Utile
Lutilisation du moteur de recherche peut tre facilite par le recours lautocompltion, appel aussi compltement automatique , qui consiste proposer des saisies afin daider lutilisateur dans ses choix. Elle permet donc dacclrer la saisie sur un site (recherche, formulaire), ce qui rend la navigation moins pnible. Elle permet galement de limiter les erreurs de saisie, en entrant sans intervention humaine les caractres quil reste inscrire. Exemple de compltement automatique
Administration :
minist Ministre de lIntrieur Ministre de la Justice Ministre de lEducation nationale Services du Premier ministre
Utile
Il est conseill de faire porter la recherche sur tous les contenus du site, y compris les documents tlchargeables depuis le site (on parle alors de recherche plein texte).
3.2.4.2. Recherche avance

Utile La prsence dune fonction de recherche avance est conseille dans le cas dun site au contenu riche et complexe afin de permettre lutilisateur de prciser sa requte pour trouver plus rapidement linformation recherche. Il est conseill de fournir une aide lutilisation de la fonction de recherche avance sous la forme dexemples et de consignes claires. Cette aide doit tre rapidement accessible (idalement lisible depuis la page de recherche avance).
Utile
Que disent les rfrentiels gnraux ? RGAA 13.7 : Faciliter l'usage du moteur de recherche
Page 98/115
3.2.4.3. Rsultat de la recherche

Recommand Recommand Le rsultat de la recherche doit tre affich sous forme dune liste trie par ordre de pertinence. Il est recommand dafficher les lments suivants dans la page de rsultat dune recherche : le nombre de rsultats 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 rsultat de la recherche : page HTML ou document (sil sagit dun document, afficher le format et le poids du document). Utile Il est conseill dafficher les lments suivants dans la page de rsultat dune recherche : un (des) extrait(s) de la page de rsultat comportant la chaine de recherche (idalement avec mise en exergue de la chaine recherche) ; un systme de pagination permettant en cas de nombre de rsultats importants (idalement, lutilisateur peut paramtrer le nombre de rsultats afficher par page) ; un classement des rsultats par catgorie de contenus si les contenus du site sont catgoriss par typologie (par exemple : articles, vidos, document lgaux, formulaires, etc.).
3.2.5. Rpertoire des informations publiques

La loi n78-753 du 17 juillet 1978 portant diverses mesures damlioration des relations entre ladministration et le public et diverses dispositions dordre administratif, social et fiscal prvoit que les administrations qui produisent ou dtiennent des informations publiques tiennent la disposition des usagers un rpertoire des principaux documents dans lesquels ces informations figurent. Lorsque ladministration dispose dun site Internet, elle rend le rpertoire accessible en ligne.
Recommand
Chaque document figurant dans le rpertoire des informations publiques est accompagn des renseignements suivants : son titre exact ; son objet (descriptif des informations) ; la date de sa cration ; les conditions de sa rutilisation ;
Page 99/115
le cas chant, la date et lobjet de ses mises jour. Recommand Le rpertoire pourra galement contenir dautres renseignements, facultatifs, mais trs 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 laccs aux documents administratifs et des questions relatives aux informations publiques afin de faciliter son utilisation et le traitement des demandes de rutilisation par les demandeurs. Dans le cas o la rutilisation des informations contenues dans le rpertoire est conditionne par le paiement dune redevance et la dlivrance dune licence, un lien Internet pourra donner accs la licence-type et aux informations concernant le montant de la redevance. Recommand Dans un premier temps, il est recommand de prsenter 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 lobjet du document reste bref. De mme, il est recommand que le descriptif des modifications apportes lissue des mises jour soit court. Dans le mme souci, il est aussi recommand d'organiser le rpertoire en fonction de grandes thmatiques et den limiter le nombre.
3.3. CAS DES DEMARCHES EN LIGNE
3.3.1. Prsentation des dmarches en ligne

Avant mme le dmarrage dune procdure, le site metteur doit faciliter laccs aux dmarches en ligne et promouvoir les autres dmarches en ligne prsente sur le site.
Recommand Recommand
Un site proposant plusieurs dmarches en ligne en fournit la liste globale avec une description synthtique pour chaque dmarche. Toute nouvelle dmarche en ligne offerte sur un site public doit tre signale la Documentation Franaise au minimum une semaine avant sa mise en ligne pour mise jour du site service-public.fr. Il convient galement de signaler si la dmarche est accessible via mon.service-public.fr. Le signalement est ralis via ce lien : http://interactif.service-public.fr/cgibin/posez_question/akio.cgi?page=posez_question/site.html La dmarche sera alors rfrence dans les pages du portail et annonce dans la lettre hebdomadaire de service-public.fr.
Page 100/115
Utile
Tout site proposant un ou des dmarches en ligne fournit un lien vers vers la rubrique Dmarches en ligne de service-public.fr (http://www.servicepublic.fr/demarches24h24/). Cette rubrique rfrence lensemble des dmarches en ligne offertes aux particuliers dans la sphre publique.
3.3.2. Navigation dans la dmarche

Etapes de la dmarche Une dmarche en ligne est toujours structure en tapes prsentant le cheminement de la procdure. Exemple de prsentation des tapes : le cas du changement dadresse en ligne
Recommand
Le site doit afficher la liste des tapes de la dmarche. Un traitement graphique appropri permet de distinguer les tapes ralises, ltape en cours et les tapes venir. Une barre de progression indiquant lutilisateur le chemin ralis et le chemin restant constitue un indicateur apprci afin daider lutilisateur optimiser la gestion de son temps. Exemple de barre de progression :
Utile
Rcapitulatif de la dmarche Dans certains cas, la dmarche en ligne est propose au sein dun site disposant dj de son propre systme de navigation. Linteraction entre la navigation dans le site et la navigation dans la procdure doit alors faire lobjet dune attention particulire. Dans dautres cas, la dmarche fait lobjet dun site ddi qui dispose donc dun seul systme de navigation.
Page 101/115
Utile
Pour la prsentation (page daccueil) dune dmarche en ligne, il convient dutiliser la structure de navigation du site global. Cela permet lutilisateur daccder aux autres types de contenu. Mais une fois la dmarche initie, la barre dtapes de la dmarche constitue lunique systme de navigation actif. Les menus de navigation autres que ceux de la procdure ne sont plus accessibles ou sont provisoirement dsactivs pour viter les conflits de navigation.
A la fin de la dmarche, il faut fournir une page de rcapitulatif permettant lutilisateur de vrifier lexactitude des donnes renseignes. Elle lui permet de transmettre sa demande ou bien de modifier les donnes ou tapes renseignes.
Recommand Recommand
Le rcapitulatif constitue la dernire tape de la dmarche. Elle doit donc figurer dans la barre dtapes et nest accessible quune fois les tapes prcdentes renseignes. La page rcapitulative reprend les donnes prcdemment saisies dans la page, en mode consultation (non saisissables directement). Il faut alors fournir un bouton daction Modifier permettant de retourner la page de formulaire correspondante en mode saisie. Dans le cas de dmarches comportant plusieurs tapes, il faut rpter ce bouton autant de fois que dtapes.
Recommand
La dmarche se conclut toujours par un bouton daction Valider et terminer pour envoyer le questionnaire rempli.
Que disent les rfrentiels gnraux ? RGAA 13.9 : Faciliter la navigation sur des groupes de pages
3.3.3. Assistance lutilisateur dans la dmarche
3.3.3.1. Aide gnrale de la dmarche et aides contextuelles

En plus des rgles prsentes pour la construction de formulaires, lutilisateur se voit proposer divers lments dassistance visant le guider au mieux dans la dmarche et lui viter les erreurs.
Recommand
Toute dmarche en ligne comporte une page daide. Celle-ci doit tre accessible depuis toutes les pages de la dmarche, et souvre dans une nouvelle fentre (ou onglet) de navigateur (de sorte conserver la procdure en cours) et est disponible en
Page 102/115
version imprimable. Cette aide doit tre organise selon la succession des tapes de la procdure. Voir ce sujet le chapitre 3.4.1 - Aide gnrale. Utile Des aides contextuelles permettent utilement dassister lutilisateur dans la saisie des champs de formulaire. Voir ce sujet le chapitre 3.4.2 - Aides contextuelles.
3.3.3.2. Questions frquentes relatives la dmarche

Recommand Une dmarche en ligne comporte obligatoirement une page de questions frquentes (FAQ) fournissant des rponses aux questions susceptibles dempcher les utilisateurs de dmarrer la procdure ou de la raliser correctement. La page questions frquentes contient : au minimum les informations suivantes : qui sadresse la dmarche en ligne ; les pr-requis techniques ; les pr-requis administratifs ; le responsable technique de la dmarche en ligne ; de faon facultative les informations suivantes : les dlais de rponse ; le service traitant.
3.3.3.3. Visite guide

La visite guide (ou dmonstration) reprsente un mode dassistance spcifique aux sites proposant des services en ligne (notamment les dmarches en ligne). Elle vise prsenter lutilisateur tous les lments avec lesquels il va devoir interagir de faon autonome lors la ralisation de la dmarche en ligne. Ce dernier peut ainsi se familiariser avec la prsentation des informations, le vocabulaire employ, les actions raliser. Son caractre pdagogique permet de minimiser les efforts dapprentissage lors de la ralisation effective de la dmarche.
Recommand Recommand Recommand Utile
Si le site propose une visite guide, celle-ci souvre dans une nouvelle fentre de navigateur (pour conserver la procdure active). Si le site propose une visite guide, celle-ci est accessible en page daccueil de la dmarche. Si le site propose une visite guide en flash ou un tutoriel anim, il faut galement proposer une alternative au format texte ou HTML. Les dmarches en ligne de plus dune tape proposent une dmonstration au minimum faite dcrans HTML simulant le droulement des crans en cours de remplissage.
Page 103/115
Utile
Il est conseill de faire apparatre les lments dcrits dans la visite guide de manire distinctive (par exemple en surbrillance) dans un souci de pdagogie.
3.3.4. Confirmation de la dmarche et accus de rception

En fin de procdure, aprs validation de sa dmarche ou certaines tapes cls, il faut rassurer lusager, linformer et lui faire dcouvrir les autres dmarches en ligne, dans une optique de qualit de la relation usager . A minima, une confirmation de la transaction ralise est systmatiquement prsente lusager lissue dune dmarche en ligne.
Recommand
Il faut informer lutilisateur de la russite de la transmission et lui fournir un rcapitulatif (non modifiable et imprimable) des donnes envoyes disponible en version imprimable. Sur la page de confirmation, il faut permettre lutilisateur de poursuivre sa navigation par des liens (exemples : retour laccueil , retour la liste des dmarches en ligne ) ou par le systme de navigation. Afin damliorer la qualit du service rendu, il est possible de proposer le remplissage dun questionnaire de satisfaction la fin de la dmarche.
Recommand
Utile
Si lusager est identifi et conformment aux dispositions du rfrentiel gnral de Scurit (RGS) un accus de rception est produit lintention de lusager pour tout change engag avec ladministration par voie lectronique. En fonction du canal dmission retenu (courriel, courrier, SMS, etc.), laccus de rception peut revtir des formes distinctes. Par ailleurs, son contenu dpend du niveau de criticit de la transaction engage entre lusager et ladministration. Dans certains cas, laccus de rception peut tre prcd dun accus denregistrement qui atteste la bonne rception de la demande mais nengage pas ladministration sur un dlai de traitement. La confirmation de transaction et laccus de rception sont des documents non ditables soumis aux mmes rgles dergonomie et daccessibilit que les autres formulaires. Les mentions obligatoires portes par ces documents seront dtailles dans le dcret du RGS relatif lordonnance 2005-1516. Les principes gnraux suivants peuvent sappliquer ces documents : la confirmation est prsente en ligne, via le navigateur ; laccus de rception (respectivement denregistrement) est affich lcran et peuttre envoy lusager par le canal retenu (courriel, courrier, SMS, etc.) et ladresse quil aura pralablement fournie ladministration (durant la dmarche en ligne ou lors dune prcdente dmarche).
Recommand
Suivant la nature de la dmarche, un accus de rception (ou denregistrement) est envoy lutilisateur ladresse quil aura pralablement fournie).
Page 104/115
Que disent les rfrentiels gnraux ? RGS Chapitre 4 : Accus denregistrement et de rception
3.4. ASSISTANCE A LUTILISATEUR
3.4.1. Aide gnrale

Certains sites, notamment ceux proposant des services en ligne, ncessitent la mise disposition dune aide gnrale afin de renseigner au mieux lutilisateur sur lutilisation du site.
Recommand
Lorsquelle existe, laide gnrale est accessible depuis toute page, et souvre dans une fentre ddie. Lobjectif est de permettre lutilisateur de continuer sa navigation dans le site tout en ayant ponctuellement recours laide. Laide gnrale est rdige dans un langage clair, non technique. Les aides de plus dune page cran sont segmentes en sections dont une liste est prsente en dbut daide. Cette liste fournit galement un accs direct chacune des sections (ancres ou liens inter-pages selon le volume dinformation). A chaque section, un lien permet de revenir vers laccueil de laide. Il est conseill de fournir une version imprimable de laide gnrale. De faon facultative, cette aide est galement tlchargeable. Il est conseill de fournir dans laide gnrale un accs direct aux ventuels autres lments dassistance du site (questions frquentes, visite guide, etc.).
Recommand Recommand
Utile Utile
3.4.2. Aides contextuelles

Lobjectif des aides contextuelles est dapporter des rponses prcises des problmes locaux lis une tape de la procdure et la saisie dinformations. On distingue deux types daides contextuelles : les informations de guidage affiches dans un formulaire et apposes aux champs de saisie ; les renvois ponctuels un endroit prcis de laide gnrale.
Page 105/115
Recommand
Dans le cas des informations de guidage, celles-ci doivent tre affiches directement prs du champ, sans clic supplmentaire pour lutilisateur ou sous forme dinfo-bulle apparaissant lors du survol de la zone par la souris. Dans ce dernier cas, un signalement visuel permet dinciter lutilisateur survoler la zone. Exemple dinformation de guidage situe droite des champs de saisie
Informations relatives l'identit de la personne pour laquelle la copie d'acte d'tat civil est demande . Nom de famille, obligatoire ( gras) : C'est votre nom de famille ; ou votre nom de jeune fille, dans le cas d'une femme marie. . Prnom : Prnom(s) . Seul le premier prnom dans l'ordre de l'tat civil est obligatoire . Le trait d'union ne doit tre utilis que pour un prnom compos exemple : JeanPierre
Exemple dinformation de guidage affiche dans une info-bulle lors du passage de la souris
Vous pouvez saisir Vous pouvez saisir plusieurs lments en plusieurs lments en les dplaant de la les dplaant de la gauche vers la droite gauche vers la droite grce aux flches. grce aux flches.
Recommand
Dans le cas des renvois ponctuels laide gnrale, ceux-ci doivent tre signals par une icne spcifique et constante sur tout le site chaque fois que cela est ncessaire. Cette icne cliquable renvoie automatiquement la partie correspondante de laide gnrale. Exemple dicne de renvoi ponctuel laide gnrale
3.4.3. Foire aux questions (FAQ)

La prsence dune foire aux questions (FAQ, questions frquentes, etc.) est utile pour prsenter une vision synthtique du contenu du site et rduire 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 danalyse des besoins des utilisateurs permet notamment damliorer la pertinence du contenu de la FAQ.
Page 106/115
Recommand
La FAQ doit proposer en haut de page un sommaire des questions ou des thmes renvoyant vers la liste des rponses ou des thmes. A la fin de la rponse, un lien permet de renvoyer vers le sommaire. Dans la liste des rponses, il faut rpter la question avant la rponse. La question et la rponse sont distingues visuellement par lemploi de styles distincts. Il est conseill de fournir une version imprimable de la FAQ. La FAQ offre la possibilit aux utilisateurs dajouter une question la liste des questions rfrences. Un lien vers le formulaire de contact (avec idalement le renseignement automatique de lobjet de la question) permet de faire remonter progressivement les questions pour lesquelles les utilisateurs ne trouvent pas de rponse dans la FAQ.
Recommand Utile Utile
3.4.4. Assistance tlphonique

Certains sites proposant des services en ligne disposent dune assistance tlphonique destine guider tlphoniquement lutilisateur dans lutilisation du service.
Recommand
Si le site propose une assistance tlphonique, il faut veiller bien faire figurer le prix de lappel pour lusager et les horaires douverture du service d'assistance par des rpondants. Si le site propose une assistance tlphonique, il est conseill de faire apparatre le numro de contact tlphonique sur les seules pages daide gnrale et de questions frquentes (FAQ). En matire d'assistance dans l'utilisation d'un service en ligne, le canal tlphonique est une assistance accessible en second recours, aprs les modes d'assistance en ligne. Compte tenu du cot de traitement des appels tlphoniques pour ladministration, il faut favoriser en priorit le renseignement de lutilisateur via les systmes daide en ligne et de questions frquentes.
Utile
Exemple de prsentation pour lassistance tlphonique
Si vous navez pas trouv la rponse, vous pouvez contacter lassistance par tlphone au 0800 123 456 (cot dun appel local depuis un poste fixe), tous les jours, de 8h minuit.
Page 107/115
3.5. TERMINOLOGIE
Terminologie - Paragraphe en cours de construction Afin de renforcer le sentiment de confiance de lusager lorsquil navigue sur un site Internet de service public, il convient dharmoniser les pratiques en matire de smantique. Les metteurs de sites publics doivent veiller adopter un terme commun pour les lments suivants (liste en cours de recensement ; arbitrage raliser en runion inter-administrations).
3.6. CONTENUS 2.0

Les sites Internet ont subi de profondes mutations ces dernires annes sous leffet des volutions technologiques. Lusage de lInternet en a par ailleurs t profondment modifi. Ces volutions sont couramment regroupes sous lappellation 2.0 (par opposition la premire gnration de sites, dsormais appele Web 1.0). Concrtement, le concept du Web 2.0 regroupe trois notions fondamentales : lvolution des usages et des modes de consultation dInternet (offre de services accrue, participation la participation active des utilisateurs la production de contenucf. lencyclopdie libre et collaborative Wikipedia) ; lvolution des interfaces Web grce lmergence de nouvelles technologies (ces interfaces se rapprochent progressivement des standards du client lourd) ; la capacit mlanger des services issus de sites distincts sur une mme page. Lvolution des usages est de loin linnovation la plus marquante du 2.0. Dune utilisation passive et consumriste de lInternet, linternaute sest transform en producteur de contenus : les outils de wikis, blogs et de partage de contenus multimdias permettent dsormais des millions dutilisateurs de sexprimer, de partager et de devenir acteurs de lInternet. 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 lments dinterface 2.0 quand ils ne sont pas entirement conus en mode 2.0. Ceci fait merger de nouvelles pratiques ergonomiques quil faut dsormais intgrer dans la conception des sites Internet publics.
Page 108/115
3.6.1. Flux RSS

Un flux RSS (ou flux dactualits) est un format de syndication de contenus bas sur XML qui permet de mettre disposition tout ou partie des productions ditoriales dun site Internet. Concrtement, un flux RSS permet de rcuprer les nouveaux contenus publis sur un site sans avoir visiter ce site. Ces contenus peuvent alors tre affichs dans un logiciel ddi lagrgation de flux RSS : au mme titre quun outil de messagerie permet de collecter et organiser les courriels, il existe des agrgateurs de flux qui permettent de consolider lensemble des flux RSS slectionns par un utilisateur et de les trier, regrouper, etc. Ces contenus peuvent galement tre raffichs, reformats et actualiss en temps rel sur un autre site Internet.
3.6.1.1. Syndication de flux RSS

La syndication de flux RSS consiste rendre disponible le contenu dun site instantanment disposition dautres sites. Ainsi, ds lors que le contenu syndiqu dun site est mis jour (cration ou modification dun article), le flux RSS est automatiquement mis jour.
Responsabilit sur les flux agrgs Si un site Internet public agrge sur ces pages un flux RSS issu dun site tiers, il peut potentiellement encourir une responsabilit propre un diteur de contenu.
Recommand
Avant dagrger un fil RSS sur un site public, il convient de vrifier sa qualit rdactionnelle et ses conditions gnrales dutilisation. Les contenus de ces fils RSS syndiqus sont rgulirement vrifis.
Ouverture des liens dun flux RSS
Recommand
Louverture des liens dun flux RSS doit tre diffrencie selon la nature du lien : dans le cas dun lien interne (flux des derniers articles ou commentaires publis sur le site par exemple), louverture du lien se fait dans la mme fentre ; dans le cas dun lien externe (flux RSS provenant dun autre site), louverture du lien se fait dans une autre fentre.
Page 109/115
Cas des univers Netvibes Les univers Netvibes sont des pages personnalisables thmatiques qui agrgent des dizaines, parfois des centaines de flux RSS. Ces univers sont ouverts tous et permettent de centraliser les flux RSS de diffrents sites dun mme thme. Il est galement possible de crer un univers regroupant les flux dun mme site. La cration dun tel univers ncessite galement la dfinition dun thme graphique propre lunivers. Par exemple, la Documentation franaise propose une page qui regroupe lensemble des flux RSS mis disposition sur les diffrents 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 dunivers Netvibes : lunivers de la Documentation franaise
3.6.1.2. Production de flux RSS

Pour les sites fort contenu ditorial, la mise disposition dun ou de plusieurs flux RSS contribue : la fidlisation 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 ; llargissement de laudience du site en offrant la possibilit dagrger ses contenus sur dautres sites tiers.
Page 110/115
Recommand
Les sites fort contenu ditorial mettent disposition un ou plusieurs flux RSS. Le recours aux flux doit tre rserv aux rubriques pour lesquels les contenus sont rgulirement mis jour. Un flux RSS non actualis est en effet progressivement abandonn et dessert la frquentation du site. Il est conseill de proposer plusieurs flux RSS par catgories ou rubriques de contenus pour les sites dont la production ditoriale alimente plusieurs rubriques. Ceci permet aux utilisateurs avertis damliorer le suivi des contenus en fonction de leurs centres dintrts.
Utile
Format des flux RSS
Recommand
Les formats de flux RSS mis disposition doivent tre conformes aux prconisations du volet technique du RGI.
Que disent les rfrentiels gnraux ? RGI Volet technique chapitre 5.5 : Syndication de contenu.
Aide concernant lutilisation des flux RSS
Recommand
La mise disposition de flux RSS ncessite un accompagnement des utilisateurs pour faciliter lutilisation de ces flux. Cette aide peut se prsenter sous forme dune aide contextuelle prsente sur la page proposant labonnement aux flux ou faire lobjet dun paragraphe dans laide gnrale du site.
3.6.2. Widgets
Les widgets dsignent un composant dun site (assemblage d'HTML, de CSS et de JavaScript et occasionnellement un langage compil), permettant d'obtenir de l'information (calculatrice, post-it, agrgateur RSS).
Utile Utile
Un widget doit tre intgr dans les espaces rservs au contenu principal et secondaire. Les lments des systmes de navigation du site doivent tre conservs. Afin de ne pas ralentir le chargement des pages du site par le rapatriement de donnes externes au site, il est conseill de ne pas multiplier le nombre de widgets par page.
Page 111/115
3.6.3. Mashups
Un mashup dsigne la combinaison de plusieurs applications Web au sein d'une application unique afin de crer 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 puisquils sont, dans les deux cas, intgrer dans une zone dfinie dans une page existante. Lintgration dun mashup reste aussi simple que lintgration dun widget puisquil suffit souvent de copier du code XHTML et du Javascript dans la page hte. Un mashup peut tre ainsi intgr aussi bien dans un site dvelopp en Java, .NET ou PHP. Lintgration dun mashup dans un site ncessite au pralable de prendre en compte certains aspects de scurit tels que lauthentification du producteur des contenus repris dans le mashup et la protection des canaux de communication (usage de protocoles cryptographis, etc.).
Utile
Un widget doit tre intgr dans les espaces rservs au contenu principal et secondaire. Les lments des systmes de navigation du site doivent tre conservs.
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 systme ou rseau de partage de signets, les utilisateurs enregistrent des listes de ressources Internet quils trouvent utiles (pages, vidos, etc.) sur des plateformes de rseaux sociaux Facebook, Digg, del.icio.us, Technorati, etc. Dautres utilisateurs ayant les mmes centres dintrt peuvent consulter les liens par sujet, catgorie, tiquette, etc. Les sites fort contenu ditorial peuvent mettre disposition une fonctionnalit de partage communautaire de contenus tout ou partie des articles dun site.
Utile
Si un site propose une fonctionnalit de partage communautaire, celle-ci sera place dans la zone de fonctions associes larticle (Voir ce sujet le chapitre 3.6.4.1 Fonctions associes larticle).
Exemple dun article du quotidien Le Monde proposant des fonctionnalits de partage communautaire de contenus via 6 rseaux
Page 112/115
GLOSSAIRE
Accessibilit : Un site Web accessible est consultable et utilisable par tout le monde, quel que soit son matriel ou le logiciel utilis pour naviguer sur le site. Accesskeys : Lattribut HTML accesskey , permet dimplmenter des raccourcis claviers sur les liens dune page Web. Le raccourci ainsi dfini est accessible par une combinaison de touches. Agrgateur : Logiciel ou service Web permettant laffichage de plusieurs sources de contenus dInternet (Flux RSS), en temps rel, en une seule application qui sera avant tout un outil de gestion de linformation. Ajax : Technique de dveloppement dapplications Web interactives qui permet damliorer laffichage des sites Internet en ne chargeant que certaines donnes avec un serveur au lieu de rafrachir la globalit de la page du site Internet. Arborescence : La conception de larborescence permet, de figer les grandes rubriques, sections, sous-sections et pages visualises. On peut profiter de la rflexion sur larborescence pour diffrencier visuellement les liens regroupant une thmatique (regroupant des pages) des pages elles-mmes, visualises par linternaute. Les popup, les pages par dfaut, celles rserves certaines catgories dinternautes (aprs identification par exemple) sont spcifies. Balise ou attribut : les balises sont des marqueurs (< >) permettant de structurer le langage HTML dune page Web. Cookies : Ces fichiers textes, stocks par le navigateur sur le disque dur de lutilisateur, permettent denregistrer les informations ou le parcours de ce dernier sur les diffrents sites visits. Cadres (frames) : Les frames permettent de diviser une page HTML en plusieurs fentres. Cette fonction permet dafficher des documents diffrents dans chacune des fentres (affichage permanent dinformations de faon statique ou dynamique, affichage simultan des requtes et des rponses dans une mme page mais dans des espaces diffrents). Cinmatique : La cinmatique explicite lenchanement des crans dun site Internet, ventuellement les traitements lorsque ces derniers restent simples. Cas d'utilisation (use cases) : Les cas dutilisation permettent de formaliser le comportement dun utilisateur dans une interface. En fonction des profils de lutilisateur, les cas dutilisation permettent de prsenter diffrents scnarii. 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 dsigne aussi l'extension des fichiers qui renferment une CSS. Les styles permettent de dfinir des rgles appliques un ou plusieurs documents HTML. Ces rgles portent sur le positionnement des lments, l'alignement, les polices de caractres, les couleurs, les marges et espacements, les bordures, les images de fond, etc. Favicne (de FAVorite ICON) : Icne associe une URL facilitant visuellement la gestion des favoris.
Page 113/115
HTML (HyperText Markup Language) : Le langage HTML, est le format de donnes conu pour reprsenter les pages Web. Il permet notamment d'implanter de l'hypertexte dans le contenu des pages et repose sur un langage de balisage, do son nom. HTML permet aussi de structurer smantiquement et de mettre en forme le contenu des pages, dinclure des ressources multimdias dont des images, des formulaires de saisie, et des lments programmables tels que des applets. Il permet de crer des documents interoprables avec des quipements trs varis de manire conforme aux exigences de laccessibilit du web. Il est souvent utilis conjointement avec des langages de programmation (JavaScript) et des formats de prsentation (feuilles de style en cascade). HTML est initialement driv du Standard Generalized Markup Language (SGML). Infobulle : Message apparaissant lors du passage de la souris sur certains lments. Elle tire son nom de sa proximit avec les bulles des bandes dessines. Liens hypertextes : Moyen trs 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) : Reprsentations statiques d'une page d'un site ou d'une application. On doit y formaliser les lments prsents, leur taille approximative, leur localisation, leur appellation. Ces gabarits de pages peuvent intgrer des notions de zoning (division de la page en espaces d'information). Ils mentionnent alors la taille relative des lments en nombre de pixels. Ils visent harmoniser la construction des pages dun site. Mashup : Une application composite est une application qui combine du contenu provenant de plusieurs applications plus ou moins htrognes. On parle de mashup artistique ou de mashup technologiques. Le principe d'un mashup est donc d'agrger du contenu provenant d'autres sites, afin de crer un site nouveau. Navigateur : application permettant de consulter des sites web ou des applications multimdia partir de son ordinateur. Pied de page : Le pied de page est une zone de liens secondaires situe en bas de linterface. Il comporte souvent des informations de crdits, mentions lgales, et/ou des liens redondants avec la navigation principale, afin den faciliter laccs si le dfilement de la page est ncessaire pour y accder. Podcast (ballado-diffusion) : Technique de diffusion de fichiers sonores ou vidos permettant linternaute de le tlcharger ou de sy 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 (fentre surgissante) : Fentre apparaissant subitement lors de la slection d'une option ou d'une fonction cl spciale. Habituellement, les fentres pop up contiennent des menus de commandes. Elles restent l'cran jusqu' la slectionne de l'une de ces commandes. Psychologie cognitive : La psychologie cognitive est une dmarche scientifique qui vise dcrire et expliquer les mcanismes par lesquels un organisme acquiert de linformation, la traite, la conserve et lexploite. Ainsi, elle concerne notamment la mmoire, le langage, le raisonnement, la rsolution de problmes, la perception et lattention. Roll-over : Action consistant bouger le curseur de la souris pour provoquer des vnements, simplement en passant sur un objet, sans avoir cliquer.
Page 114/115
RSS - Flux RSS (Really Simple Syndication). : Procd simple de mise jour dun fils dinformation, dun site ou blogs, permettant un internaute dtre alert en temps rel sur son agrgateur de flux RSS. Signets (favoris, bookmarks) : les signets permettent son utilisateur de mettre en mmoire une adresse URL sous forme de marque-page afin de pouvoir y revenir ultrieurement. SIG (Service dinformation du gouvernement) : Le service dinformation du gouvernement est un service plac sous lautorit du Premier ministre et charg de : d'analyser l'volution de l'opinion publique et le contenu des mdias ; de diffuser aux lus, la presse et au public des informations sur l'action gouvernementale ; d'entreprendre des actions d'information d'intrt gnral caractre interministriel sur le plan national et, en liaison avec les prfets et les ambassadeurs, sur le plan des services dconcentrs de l'tat ; d'apporter une assistance technique aux administrations publiques et de coordonner la politique de communication de celles-ci, en particulier en matire de campagnes d'information et d'tudes d'opinion. Streaming (diffusion en continu) : Emission dun contenu audio ou vido par Internet vers un lecteur client, qui peut en commencer la lecture sans attendre la fin du tlchargement. Tri de cartes : Le tri de cartes consiste prsenter l'utilisateur un paquet de cartes , correspondant aux contenus rubriquer, et lui demander de faire des groupes de cartes puis de les nommer. Les rsultats d'un tri de cartes sont des sources d'informations trs riches pour construire un rubriquage pertinent. Utilisabilit : Notion proche de lergonomie dont le but est de rpondre trois critres qui dtermineront la facilit avec laquelle les internautes naviguent sur un site : efficacit, efficience et satisfaction. efficacit, pour le rsultat final. Si lutilisateur est arriv ses fins ; efficience, pour le temps coul par lutilisateur pour arriver son objectif ; satisfaction, pour le confort et limpression finale de lutilisateur face la navigation sur le site. Widget / portlet : Un widget est un objet graphique pouvant ragir avec lutilisateur sur des systmes dexploitation, sur des sites web. Exemple : des boutons, des zones de saisies, des cases cocher. XHTML (Extensible HyperText Markup Language) : Version d'HTML reformule pour se conformer aux rgles syntaxiques d'XML. XML (Extensible Markup Language) : Langage de balisage ressemblant HTML, mais qui permet l'auteur de dcrire des donnes en dfinissant des balises personnalises. Zoning : Le zoning permet de dfinir les grands espaces dactions sur lesquels lutilisateur devra interagir. Ce document doit rester assez gnrique et na pas besoin dtre trop dtaill, ceci afin de garder une bonne lisibilit.
Page 115/115

Charte Ergonomique D'un Site Internet. Rédigé Par Le Gouvernement Français Et Mis À Dispositon Des Collectivités Locales

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Charte Ergonomique D'un Site Internet. Rédigé Par Le Gouvernement Français Et Mis À Dispositon Des Collectivités Locales

Uploaded by

Copyright:

Available Formats

Ministre du Budget, des Comptes publics et de la Fonction publique

Charte ergonomique des sites Internet publics

19 dcembre 2008 Nombre de pages DGME Projets dadministration lectronique Version

FICHE DE CONTROLE DU DOCUMENT

TABLE DES MATIERES

Autres lments dorientation et de navigation................................................................................... 17

Positionnement des systmes de navigation (zoning) ......................................................................... 20

Rsolutions dcran ............................................................................................................................ 37

Langages et normes de dveloppement............................................................................................... 39

3.2.2. 3.2.3. 3.2.4.

3.3.1. 3.3.2. 3.3.3.

3.6.2. 3.6.3. 3.6.4.

Pourquoi une charte ergonomique unique des sites publics ?

Quel est le champ dapplication de cette charte ?

Que contient cette charte ?

Comment utiliser cette charte ?

Comment se mettre en conformit

1. REGLES DORDRE GENERAL

1.1. ARCHITECTURE DE LINFORMATION

1.1.1. Dfinition de larchitecture de linformation

La dfinition de larchitecture de linformation dun site se fait en trois tapes :

1.1.2. Largeur et profondeur dun site

Exemple darchitecture de linformation (largeur du premier niveau : 4 ; profondeur = 3)

1.2. SYSTEMES DE NAVIGATION

1.2.1. Systme de navigation principal et secondaire

1.2.1.1. Systme de navigation horizontal

Item 3 Sous Item 1 Sous Item 2 Sous Item 3

Sous Item 4 Sous Item 5 Sous Item 6

1.2.1.2. Systme de navigation vertical

Exemple de systme de navigation vertical 4 niveaux

1.2.1.3. Systme de navigation par onglets

Exemple de systme de navigation par onglets deux niveaux

| Item 22 n-3 Item n-3

1.2.1.4. Combinaison des diffrents systmes de navigation

Item 3.3 Item 3.4

1.2.2. Autres lments dorientation et de navigation

1.2.2.1. Fil dAriane (chemin de navigation)

1.2.2.2. Adresse du site (URL)

URL pour les appareils mobiles - Paragraphe en cours de construction

1.2.2.3. Zone de fonctions transverses (liens utilitaires)

1.2.2.4. Pied de page

1.2.3. Positionnement des systmes de navigation (zoning)

1.2.3.1. Exemple 1 de zoning

Premier niveau de navigation (exemple 1)

2 Systme de navigation principale

Niveau de navigation secondaire (exemple 1)

2 Systme de navigation principale

1.2.3.2. Exemple 2 de zoning

Premier niveau de navigation (exemple 2)

2 Systme de navigation principale

Espace contenu contextuel (divisible)

Premier niveau de navigation (exemple 2)

2 Systme de navigation principale

Systme de navigation Secondaire

Espace contenu contextuel (divisible)

1.2.4. Cas particulier de la navigation guide

Recommand Recommand Recommand

Affichage des tapes avec retour visuel

Possibilit de revenir la page prcdente

1.3.1. Polices de caractres

1.3.2. Utilisation des styles

1.3.4. Pictogrammes et icnes

Recommand Recommand Utile