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

Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

Embed Size (px)

Citation preview

Page 1: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

Le cahier des charges

--Emilie CONFORT

Chef de projet fonctionnel

Page 2: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEPlan type d’un cahier des charges

I- Fiche d'identification du projetII- Présentation générale du projet

II.1 Origine et Contexte du projetII.2 Présentation du commanditaireIII- Bénéfices attendus et objectifs du projetIII.1 Bénéfices attendus du projetIII.2 Thématiques et ObjectifsIV-Description générale de votre projet web

IV.1 Contenus informationnels et ligne éditoriale généraleIV.2 Typologie des publics-cibles, utilisateurs et droits d’accès

V- Fonctionnalités du portail d’informationsV.1 Liste des fonctionnalitésV.2 Principes ergonomiques et principes graphiques

Page 3: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEPlan type d’un cahier des charges

VI- Éléments du cahier des charges technique pour le site webVI.1 Plan et navigation

VI.1.1 Arborescence schématiqueVI.1.2 Tableau éditorial du siteVI.1.3 Principes généraux de la navigationVI.1.4 Ergonomie et lisibilité: principes ergonomiques du site

VI.2 Charte éditorialeVI.2.1 Rappel de la ligne éditoriale: positionnement du site, objectifs informationnels, publicVI.2.2 Règles éditoriales et recommandationsVI.2.3 Règles rédactionnelles généralesVI.2.4 Formats rédactionnels spécifiques par type de contenu: exemplesVI.2.5 Règles rédaction pour optimiser le référencement: choix des titres et mots-clésVI.2.6 Gestion du circuit éditorial

Page 4: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEPlan type d’un cahier des charges

VI.3 Charte graphiqueVI.3.1 Principes généraux :VI.3.2 Présentation du logo :VI.3.3 Zone BandeauVI.3.4 CouleursVI.3.5 Bas de pageVI.3.6 Illustrations :VI.3.7 Typographie :VI.4 Zoning et GabaritsVI.4.1 ZoningVI.4.2 Gabarits simpleVI.4.3 Gabarits fonctionnelsVI.5 Gestion des droits du contenu éditorial du site

Page 5: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEPlan 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 LivraisonVIII.1 Modalités de livraisonVIII.2 Protocole de validationVIII.3 Livraison définitive du projet et finalisation du schéma organisationnel pour la prise en charge de la gestion couranteVIII.4 LivrablesIX Planning de réalisationX AnnexesX.1 Inventaire des médias et récapitulatif des éléments graphiquesX.2 Exemples des formats rédactionnels selon le type de contenu

Page 6: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEPlan

1. L’inventaire des médias – Structuration des contenus2. Arborescence (ou le plan du site)3. La navigation4. Les modalités de recherche et traitement de contenus5. L’ergonomie et la lisibilité6. La charte graphique7. La maintenance et sécurité du projet

Page 7: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEDé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.

Page 8: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEStructuration 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

Page 9: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEStructuration des contenus : Enumérer

Lister toutes les informations que vous souhaitez proposer à vos visiteurs de manière exhaustive et les classer par typeGénérateur de mots-clés : https://ubersuggest.io/

Page 10: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEStructuration 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 vierges2- Définition des contenus : validation, utilité, appellation3- Groupements des cartes qui leur semblent pertinents – possibilité de dupliquer certaines cartes si elles semblent appartenir à plusieurs groupes4- 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!

Page 11: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEStructuration 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

Page 12: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEStructuration 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’accueilNiveau 2 : Tête de rubriques, pages d’accueil spécifiques avec texte introductif et sommaire interne à la rubriqueNiveau 3 : Développé des rubriques. Pages d’infos puresNiveau 4 : Les sous-rubriques

Page 13: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEArborescence 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.

Page 14: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEArborescence ou Plan du site

Source : http://www.lafabriquedunet.fr/conseils/conception-site-web/arborescence-site-web/

Page 15: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEArborescence ou Plan du site

Attention ne confondez pas l’arborescence avec la rubrique de plan du site!

Page 16: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDELa 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

Page 17: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEModalités de recherche et Traitement des contenusLe 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

Page 18: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEModalités de recherche et Traitement des contenus

Page 19: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEErgonomie 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.

Page 20: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEErgonomie 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).

Page 21: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDE Charte graphique

CHARTE GRAPHIQUE REGLES A APPLIQUERLa 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 contenusCONTRASTE 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écimalRose "#FF00FF"Vert "#00FF00"Bleu "#00FFFF"

Orange "#FF7600"Gris "#808080"

Gris Clair "#C0C0C0"Gris fonçé "#870047"

Noir "#000000"Blanc "#FFFFFF"

Page 22: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEMaintenance 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éantModalité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 momentPortabilité 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’autruiContrevenir 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

Page 23: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEMaintenance 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

Page 24: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

Partie pratique

Page 25: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

TITRE DE LA SLIDEExercice 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-itsEtape 3 : Groupez vos post-itsEtape 4 : Labellisez-les

Vos sites web : http://enfant-different.org/www.oasis-damour.comwww.boulangerieduprado.org/www.cevied.orgwww.visiondumonde.org

Page 26: Cahier des charges (2/2) - Webassoc Lyon, le 24 mai 2016

24 mai 2016 – Lyon

MERCI

Emilie [email protected]