Sorte de couteau-suisse ultra moderne du web, le cahier des charges est votre meilleur ami lorsque vous démarrez un projet numérique. Pour cette deuxième séance, nous regarderons les points essentiels de la partie technique du cahier des charges : - le plan et la navigation - l'ergonomie et la lisibilité - la charte graphique - l'inventaire des médias - la maintenance et sécurité du projet

1. 24 mai 2016 – Lyon
Le cahier des charges
--
Emilie CONFORT
Chef de projet fonctionnel

2. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Plan type d’un cahier des charges
I- Fiche d'identification du projet
II- Présentation générale du projet
II.1 Origine et Contexte du projet
II.2 Présentation du commanditaire
III- Bénéfices attendus et objectifs du projet
III.1 Bénéfices attendus du projet
III.2 Thématiques et Objectifs
IV-Description générale de votre projet web
IV.1 Contenus informationnels et ligne éditoriale générale
IV.2 Typologie des publics-cibles, utilisateurs et droits d’accès
V- Fonctionnalités du portail d’informations
V.1 Liste des fonctionnalités
V.2 Principes ergonomiques et principes graphiques

3. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Plan type d’un cahier des charges
VI- Éléments du cahier des charges technique pour le site web
VI.1 Plan et navigation
VI.1.1 Arborescence schématique
VI.1.2 Tableau éditorial du site
VI.1.3 Principes généraux de la navigation
VI.1.4 Ergonomie et lisibilité: principes ergonomiques du site
VI.2 Charte éditoriale
VI.2.1 Rappel de la ligne éditoriale: positionnement du site, objectifs
informationnels, public
VI.2.2 Règles éditoriales et recommandations
VI.2.3 Règles rédactionnelles générales
VI.2.4 Formats rédactionnels spécifiques par type de contenu:
exemples
VI.2.5 Règles rédaction pour optimiser le référencement: choix des
titres et mots-clés
VI.2.6 Gestion du circuit éditorial

4. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Plan type d’un cahier des charges
VI.3 Charte graphique
VI.3.1 Principes généraux :
VI.3.2 Présentation du logo :
VI.3.3 Zone Bandeau
VI.3.4 Couleurs
VI.3.5 Bas de page
VI.3.6 Illustrations :
VI.3.7 Typographie :
VI.4 Zoning et Gabarits
VI.4.1 Zoning
VI.4.2 Gabarits simple
VI.4.3 Gabarits fonctionnels
VI.5 Gestion des droits du contenu éditorial du site

5. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Plan type d’un cahier des charges
VII Procédures d’évaluation
VII.1 Modalités de tests et validation : organisation du contrôle des
réalisations et recette
VII.2 Garantie de bon fonctionnement et maintenance du système
VIII Livraison
VIII.1 Modalités de livraison
VIII.2 Protocole de validation
VIII.3 Livraison définitive du projet et finalisation du schéma
organisationnel pour la prise en charge de la gestion courante
VIII.4 Livrables
IX Planning de réalisation
X Annexes
X.1 Inventaire des médias et récapitulatif des éléments graphiques
X.2 Exemples des formats rédactionnels selon le type de contenu

6. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Plan
1. L’inventaire des médias – Structuration des contenus
2. Arborescence (ou le plan du site)
3. La navigation
4. Les modalités de recherche et traitement de contenus
5. L’ergonomie et la lisibilité
6. La charte graphique
7. La maintenance et sécurité du projet

7. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Définition du cahier des charges – partie technique
C’est un document élaboré par un maître
d’œuvre constituant la description de la
manière dont on veut effectuer le site web.

8. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Structuration des contenus
Méthode à suivre :
• Enumérer :
Lister de manière exhaustive tous les éléments du contenu, toutes les
fonctionnalités nécessaires
• Catégoriser :
C’est définir des segments de plus en plus étroits puis les organiser par
catégories
• Structurer:
C’est hiérarchiser les contenus pour les regrouper sous forme de rubriques

9. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Structuration des contenus : Enumérer
Lister toutes les informations que vous souhaitez proposer à vos visiteurs de manière exhaustive
et les classer par type
Générateur de mots-clés : https://ubersuggest.io/

10. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Structuration du contenu : catégoriser
Principe de catégorie :
1 fiche = 1 information = 1 idée = 1 page web
Utiliser la méthode du tri des cartes : http://www.ergolab.net/articles/tri-
cartes-ergonomie-web.php
1- Utilisation de cartes vierges
2- Définition des contenus : validation, utilité, appellation
3- Groupements des cartes qui leur semblent pertinents – possibilité de
dupliquer certaines cartes si elles semblent appartenir à plusieurs groupes
4- Labellisation – trouver un nom au groupe
-> extraire le dénominateur commun à chacune des cartes composant la
catégorie
Le système de rangement doit être compréhensible par tous!

11. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Structuration du contenu : catégoriser
Quelques typologies d’organisation du contenu :
- Organisation alphabétique : http://www.unicef.org/french/unlinks.html
- Organisation chronologique : http://www.inaglobal.fr/chronologie-embed/6701
- Organisation par thème : http://guerre1418.fr/grande-guerre-14-18-batailles
- Organisation par actions utilisateur : http://centenaire.org/fr

12. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Structuration des contenus : structurer
Regrouper en fonction des affinités ou de l’importance des contenus en rubriques et sous-rubriques
Exemples de niveaux des contenus :
Niveau 1 : page d’accueil
Niveau 2 : Tête de rubriques, pages d’accueil spécifiques avec texte introductif et sommaire interne à
la rubrique
Niveau 3 : Développé des rubriques. Pages d’infos pures
Niveau 4 : Les sous-rubriques

13. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Arborescence ou Plan du site
Deux sortes de représentations de l’arborescence :
-représentation schématique
-représentation éditoriale
L’arborescence schématique doit :
-répertorier toutes les pages de chaque section en respectant l’organisation
logique des infos
-distinguer les différents types de documents
-distinguer les principaux liens
L’arborescence éditoriale permet d’établir une convention de nommage des
fichiers et répertoires et d’organiser les principales sections du site.

14. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Arborescence ou Plan du site
Source : http://www.lafabriquedunet.fr/conseils/conception-site-web/arborescence-site-web/

15. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Arborescence ou Plan du site
Attention ne confondez pas l’arborescence avec la rubrique de plan du site!

16. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
La navigation
Plusieurs systèmes de navigation coexistant doivent permettre aux
utilisateurs une expérience optimale sur le site :
La navigation principale :
Navigation par clic sur les onglets/menus: les utilisateurs savent plus
où moins ce qu'ils cherchent, ou cherchent des idées via l'arborescence
du site.
Les navigations secondaires :
Recherche via le moteur de recherche : l'utilisateur cherche un sujet
ou un thème précis et souhaite avoir accès à toutes les ressources
existantes sur ce sujet.
Navigation par recommandation : l'utilisateur se promène sur le site
par sérendipité et suit les recommandations des administrateurs du site
(“En savoir plus”, “Articles liés”, articles du même expert, etc.)
Navigation par mots clés : l'utilisateur peut accéder à des ressources
en cliquant sur les nuages de tags présents sur chaque page.
Infos complémentaires : https://msdn.microsoft.com/fr-fr/library/aa970446(v=vs.110).aspx#Structured_Navigation_Topologies

17. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Modalités de recherche et Traitement des contenus
Le portail d’informations contient :
-une recherche par navigation arborescente : l’utilisateur recherche grâce à la barre de navigation principale ou
dans la rubrique « plan du site » ou grâce à la recherche par facettes.
-une recherche par navigation hypertextuelle : navigation dans un réseau de nœuds et de liens créés par des
associations entre des mots et des documents. L’accès à l’information se fait par des liens existants. (nuage de
tags, liens hypertexte, indexation)
-une recherche par requête : saisie de la requête utilisateur au sein d’un moteur de recherche.
Le portail d’informations contiendra un moteur de recherche sur l’intégralité des données produites et
contenues en son sein. Les contenus devront être indexés par le moteur de recherche plein texte de la solution
proposée.
La recherche à facettes sera déterminée par les critères suivants (liste des facettes) :
->par type d’auteurs : community managers / entreprises
->par type de contenus : articles de fonds/ actualités (réponses des flux rss) / retours d’expériences / interview
et témoignages
->par type d’évènements : salons/ conférences/ webinar/ forum professionnel

18. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Modalités de recherche et Traitement des contenus

19. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Ergonomie et Lisibilité
Critère Sous-critère Description
SOBRIETE Simplicité Un fond blanc, avec une organisation en maximum 3 colonnes par page, avec un style épuré.
Peu chargé Design épuré avec uniquement les informations nécessaires.
PERTINENCE Pertinence du contenu Outre la pertinence des sources citées, la présentation des documents primaires doit être claire et précise à la saisie.
LISIBILITE Clarté et concision Un texte aéré avec des champs en liste, des paragraphes et des phrases courts. Les produits documentaires doivent être
concis, aérés et bien structurés (paragraphes, puces, alinéas)
Structuration Les interfaces seront structurées de telle manière qu’il n’y aura pas d’ambiguïté sur le contenu. Colonnes, lignes, puces,
zones de délimitation…
Organisation Les éléments les plus importants figureront en haut de page. Les informations seront toujours présentées dans le même
ordre et de la même manière.
UTILISABILITE Facilité de navigation Défilement vertical des pages. Pas de défilement horizontal.
Un minimum de clic et d’ouverture de nouvelles interfaces.
Repérage Logo présent sur toutes les pages en haut à gauche, avec le nom du site. Charte graphique uniforme appliquée à l'ensemble
des pages afin d’avoir une unité visuelle qui ne trouble pas la lecture.
Accès dans le pied de page au plan du site.
Unité de style pour les icônes (Cf annexe ? ?)
Liberté de navigation Possibilité de revenir à la page d'accueil en cliquant sur le nom du site.
Accès aux différents menus en permanence via le bandeau de navigation.
Champs de recherche simple présent en permanence (sauf dans la recherche elle-même).
Tangibilité de l'information Les informations présentes sur le site sont valides et de qualité, avec la date de mise à jour des pages. La date de dernière
mise à jour du site est indiquée en pied de page sur la page d’accueil.
Homogénéité,
Cohérence de la structure
Les éléments de navigation sont situés au même endroit sur toutes les pages, avec une présentation uniforme d'une page à
une autre.
Respect de la charte graphique (voir II.3).
RAPIDITE Temps de chargement Le temps d'affichage d'une page doit être inférieur à 8 secondes, donc éviter les pages lourdes.

20. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Ergonomie et Lisibilité
INTERACTIVITE Liens hypertextes Les sources externes (texte, audio, vidéo) ainsi que les sites proposés seront consultables via des liens URL
directement cliquables. Le clic ouvrira un nouvel onglet pour éviter de quitter le site.
Les sources internes seront consultables via des liens GED qui ouvriront un nouvel onglet pour lecture du
fichier (PDF, son, vidéo).
Facilitation des échanges « Contact » en pied de page, ouvre un formulaire qui propose différent sujets : proposer une ressource,
signaler un problème, demande de renseignement, commentaire sur le site.
ACCESSIBILITE Universalité de l'accès Accès libre et gratuit sans inscription.
Prévoir l’accessibilité pour les publics en situation de handicap.
Deux boutons sur chaque page pour agrandir et diminuer les caractères, clavier virtuel, traduction sonore.
Interopérabilité Respect des standards, en particulier les recommandations d'accessibilité du W3C (informer sur la version
Xhtml ou html utilisée, feuille de style CSS), pour garantir un bon niveau d'interopérabilité (capacité du site
web à être consultable par différents clients logiciels).
Responsivité Prévoir l'optimisation de l'affichage sur tous les navigateurs ainsi que sur tous les supports informatiques
(smartphone, tablette, fablette...)
Transparence des formats Les formats utilisés seront transparents, c'est-à-dire consultable en mode texte. Ainsi le HTML sera utilisé
préférentiellement au Flash.
Choix des couleurs et contraste
adapté
Contraste marqué avec une écriture noire sur un fond clair laissant ainsi l'information lisible aux personnes ne
distinguant pas les couleurs correctement (daltoniens) et aux personnes malvoyantes. Palette de couleur
limitée et harmonieuse répétée sur l'ensemble du site.
Usage sain des feuilles de style L'information sera accessible, y compris sans feuille de style.
Taille des polices Une police de taille moyenne pour être lisible et ne pas fatiguer la vue des lecteurs (à tester dans la
maquette).

21. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Charte graphique
CHARTE GRAPHIQUE REGLES A APPLIQUER
La charte graphique est basée sur la reprise du graphisme du logo de l’Institut français des community managers.
ECRAN Le portail d’informations doit être optimisé pour une résolution 1024 x 768.
REPETITION Sur chaque page web du portail d’information sera répété de la même manière pour chaque élément structurel et fonctionnel :
 Le même type de boutons de navigation
 La même mise en page
 La même mise en forme
 Les boutons de navigation, les couleurs et le style
ALIGNEMENT Alignement justifié pour l’intégralité des contenus
CONTRASTE Pour favoriser la lisibilité des informations du portail, la couleur de l’arrière-plan sera le blanc alors que les contenus textuels seront signifiés
en fonction de leur typologie du noir au gris foncé pour aller jusqu’au gris clair.
PROXIMITE Regroupements les éléments éditoriaux en fonction de leur utilité intellectuelle (titre et sous-titre ; légende et illustration)
TYPOGRAPHIE Calibri pour le corps de texte
Calibri Light pour les en-têtes
LOGO Le logo représente les valeurs essentielles de l’association.
Le logo comporte une forte stylisation des éléments graphiques : les
personnages sont présents pour représenter les community
managers et la notion de partage incluse dans la pratique de leur
métier.
Le logo est fonctionnel et utilisable dans différents contextes tout en
conservant son intégrité. Il est déclinable en noir et blanc.
Le logo est reproductible en grand et petit format.
CHARTE DES COULEURS Couleur Code hexadécimal
Rose "#FF00FF"
Vert "#00FF00"
Bleu "#00FFFF"
Orange "#FF7600"
Gris "#808080"
Gris Clair "#C0C0C0"
Gris fonçé "#870047"
Noir "#000000"
Blanc "#FFFFFF"

22. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Maintenance et sécurité du projet
Gestion du cycle de vie de la base de
données et du portail d’informations
→Contrôle de péremption des informations se fera de façon hebdomadaire
→Modalités de suppression des informations avec ou pas processus d’archivage se fera sous l’égide de l’administrateur
Sauvegarde
→ Procédures de sauvegarde : Automatique
→ Périodicité : quotidienne (apports, modifications suppressions) / semestrielle sur un serveur de backup)/ opération effectuée durant la fenêtre de
maintenance choisie
→ Responsabilités : la sauvegarde sera sous la responsabilité du prestataire désigné par l’ICMF
Evolution de la structure de la base de
données
→ La base sera conçue pour accepter des éventuelles évolutions et rajouts d’entités documentaires
→ l’ICMF sera responsable des évolutions futures si le cas échéant
Modalités de récupération en cas
d’incident
→ On optera pour un mode de récupération complet (possibilité de récupérer la totalité des données en cas d’incident)
→ possibilité de modifier le mode de récupération de la base à tout moment
Portabilité des données → la portabilité se fera sur la base des standards existants
Contraintes de respect d’une charte
informatique
→ Assurer la protection des libertés individuelles
→ Respecter le droit de propriété
→ Respecter l’intégrité du système informatique
→ Respect du secret de la correspondance
→ Le dépôt légal
→ Usage de la cryptologie
→ Contenu des informations :
les informations diffusées par le biais des réseaux ne doivent pas
Porter atteinte à la vie privée ou à l’image d’autrui
Contrevenir aux lois sur la propriété intellectuelle, littéraire et artistique,
Faire l’apologisme du racisme, de l’antisémitisme et de la xénophobie
Contraintes réglementaires : protection
des droits d’auteurs
→ Le portail sera soumis à la responsabilité éditoriale des médias (loi n°2004-575
→ Un directeur de la publication doit être désigné il sera responsable de tout ce qui transite sur le site.
→ Le cyber-ours doit être pratiqué à travers l’identification du service de communication au public en ligne.
→ Toute publication ou utilisation d’un texte, d’une vidéo, d’une photo nécessitera l’accord préalable de son auteur

23. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Maintenance et sécurité du projet
Outil d’évaluation de
l’alimentation et de l’exploitation
de la base de données
→ nécessité de la mise en place de statistiques permettant d’évaluer :
Le nombre de Community Manager qui s’intéressent à l’une des thématiques évoquées
Le nombre de fois ou une thématique a été abordée (sur toutes les plateformes confondues, webinary etc.)
le temps moyen passé sur les pages du site internet:
comment(quel outils utilisés pour ce genre de statistiques)
le nombre de visiteurs uniques
nombre d’inscrits
nombre de pages vues (au global, par rubrique…)
taux de conversion
montant du panier moyen (site e-commerce)
taux de rebond / taux de rétention
source du trafic (référencement naturel / achat de mots-clés / …)
nombre d’abonnés à une page Facebook- retombées presse (RP)
Manuel et Guide d’utilisation de la
base de données
- Manuel d’administration : fiche technique et descriptive de la structure de la base, procédures de contrôle et d’archivage
- Manuel d’alimentation : méthodologie de la collecte des informations, modalités de saisie et mise à jour des informations
- Manuel d’interrogation

24. 24 mai 2016 – Lyon
Partie pratique

25. 24 mai 2016 – Lyon
TITRE DE LA SLIDE
Exercice sur le tri des cartes – structuration des contenus
Etape 1 : Immersion – Prenez des post-its vierges
Etape 2 : Définissez vos contenus sur les post-its
Etape 3 : Groupez vos post-its
Etape 4 : Labellisez-les
Vos sites web :
http://enfant-different.org/
www.oasis-damour.com
www.boulangerieduprado.org/
www.cevied.org
www.visiondumonde.org

26. 24 mai 2016 – Lyon
MERCI
Emilie CONFORT
emilie@webassoc.fr