1

Site ABC.com

Exemple de cahier des charges fonctionnel et technique

Version 1.0

Date de mise à jour : JJ/MM/AAAA

Contacts Groupe Projet : Coordonnées chef de projet fonctionnel : Coordonnées chef de projet technique :

Votre logo

2

SOMMAIRE

Table des matières A. Partie technique ...................................................................................................................... 4

A.1 Description de l’existant ...................................................................................................... 4

A.2 Description des besoins techniques .................................................................................... 4

A.2.1 Choix techniques ......................................................................................................... 4

A.2.2 Base de données .......................................................................................................... 5

A.2.3 Mise en place des Marqueurs (tous les marqueurs sont fournis en annexe). ............ 6

A.2.3.1 Marqueurs de publicité : ....................................................................................... 6

A.2.3.2 Marqueurs Google Analytics : ............................................................................... 6

A.3 Stratégie SEO – Référencement naturel .............................................................................. 6

A.3.1.1 Introduction ........................................................................................................... 6

A.3.1.2 Nos attentes en matière de SEO............................................................................ 6

B. Partie fonctionnelle du Front Office ........................................................................................ 7

B.1 Fonctions de Recherche ...................................................................................................... 7

B.1.1 Rôle et emplacement du moteur ................................................................................ 7

B.1.2 Indexation et type de résultats attendus .................................................................... 7

B.1.3 Hiérarchie des résultats ............................................................................................... 8

B.1.4 Choix technique du moteur ......................................................................................... 8

B.2 Bloc « s’identifier » .............................................................................................................. 8

B.2.1 Description du fonctionnement. ................................................................................. 8

B.2.2 Contenu du Formulaire d’inscription .......................................................................... 9

B.2.3 Affichage et gestion du menu « Mon Compte » : ...................................................... 9

B.2.4 Gestion des droits utilisateurs (gestion par basique authentification) ..................... 10

B.3 Arborescence : de l’accueil à l’acte d’achat exemple ........................................................ 10

B.4 Page d’accueil .................................................................................................................... 11

B.4.1 Ecran .......................................................................................................................... 11

B.4.2 Règles de gestion (RG) de la page d’accueil : exemple ............................................. 13

C. Description fonctionnelle du Back Office éditorial ............................................................... 14

C.1.1 Accès par login / mot de passe .................................................................................. 14

C.1.2 Composition d’une page de contenu type article ..................................................... 14

C.1.3 Composition d’une page statique ............................................................................. 14

3

C.2 Gestion de la page d’accueil .............................................................................................. 14

D. Description fonctionnelle du Back office e-commerce ......................................................... 14

D.1 Fonction de création de produits .................................................................................. 14

D.1.1 Création ..................................................................................................................... 14

D.2 Statistiques de ventes ................................................................................................... 14

D.3 Choix des moyens de paiements ................................................................................... 15

D.3.1 Choix de l’offre 1 ....................................................................................................... 15

D.3.2 Choix de l’offre 2 ....................................................................................................... 15

D.4 Description scenarii de mails automatiques ................................................................. 15

D.4.1 E-mailing aux nouveaux clients ................................................................................ 15

D.4.2 E-mailing aux clients fidèles ...................................................................................... 15

4

Contexte du projet Décrire le contexte en 1 page maximum Définition des objectifs et de la cible

L’objectif principal de ce nouveau site est de …

Les services proposés seront les suivants : …..

L’offre de services :

Services payants : Décrire les services envisagés sur 1 page maximum

Services gratuits :

Décrire les services envisagés sur 1 page maximum

Planning indicatif du projet - Maquettes graphiques livrées : JJ/MM/AAAA - CSS / intégration HTML : JJ/MM/AAAA - Développement du … au - Recette N°1 JJ/MM/AAAA - Recette N°2 JJ/MM/AAAA - Mise en production : JJ/MM/AAAA

A. Partie technique

A.1 Description de l’existant

Si une reprise d’un site existant doit être faite, le préciser en détail.

A.2 Description des besoins techniques

A.2.1 Choix techniques

5

Il appartiendra au prestataire en charge du développement de recommander les solutions les plus adaptées. A titre d’exemple :

Langage : HTML 5 / CSS Bases de données : My SQL Responsive design : 3 résolutions préconisées : Largeur 320px (smartphone / portrait), 768px (tablette / portrait) et 980px (tablette / paysage) Framework intégration : bootstrap Serveurs / hébergement : à préciser CMS Open Source : WordPress Moteur de recherche interne : à définir. Brique de paiement : PayBox

Navigateurs cibles pour l’intégration :

IE8+ (PC et Mac) Firefox (PC et Mac) Chrome (PC et Mac) Safari (PC et Mac)

A.2.2 Base de données

Description des tables et des champs de la base de données à préciser par un interlocuteur technique.

6

A.2.3 Mise en place des Marqueurs (tous les marqueurs sont fournis en annexe).

A.2.3.1 Marqueurs de publicité :

Si oui, préciser les formats et les marqueurs en annexe.

A.2.3.2 Marqueurs Google Analytics :

Préciser le code des marqueurs en annexe. Prévoir dans le devis l’installation des marqueurs e-commerce et des marqueurs de conversion si besoin.

A.3 Stratégie SEO – Référencement naturel

A.3.1.1 Introduction

Comme dans tous projets Internet, le référencement est central. Cette préoccupation sera le fil conducteur de l’ensemble du projet. Une attention particulière sera portée sur la réécriture des URLs et la performance d’affichage des pages côté client et côté serveur.

A.3.1.2 Nos attentes en matière de SEO

- Une gestion de la réécriture des URLs prise en amont du projet.

- Gestion du robots.txt

- Génération du sitemap xml

- Déclarer le charset dans les pages et utiliser utf-8

- Utiliser les microdatas : http://schema.org/docs/full.html

- Utiliser les rich snippets - Utilisation metas open graph - Chasser toute sorte de duplicate macro ou micro

- Accessibilité / compatibilité navigateurs optimisée (normes W3C) - Arborescence de site claire et structurée par niveaux - Structure pensée pour l’indexation optimale de toutes les pages du site

7

- Temps de chargement des pages (élément clé) incluant :

Optimisation des images (regroupement en sprite CSS) Mise en cache du navigateur Optimisation du Javascript (limier les JS, appel en fin de page). Paramètres serveur optimisés

- Aucune duplication de contenus - Balises Title et description éditables

- Architecture de page explicite :

balise H1 / page (titre principal) balise H2 / page (sous-titre) balise H3 (chapitres) balise strong pour mettre l’accent sur certains mots clés stratégiques.

- Contenu texte le plus possible en haut des pages HTML - Ratio texte / code adapté (minimiser les éléments html et texte récurrent). - Moins de 100 liens par page (éviter au maximum la pagination) - Concentration des mots clés dans les premières lignes du code source - Balise canonical - Intégration des boutons de partage réseaux sociaux (à voir – en bas de page)

B. Partie fonctionnelle du Front Office

B.1 Fonctions de Recherche

Cette partie décrit le fonctionnement du moteur de recherche interne.

B.1.1 Rôle et emplacement du moteur

Le rôle du moteur de recherche est déterminant pour ce site. C’est un facteur clé de succès.

Sa mission est de trouver… à préciser.

B.1.2 Indexation et type de résultats attendus

Les pages à indexer sont … La recherche sera de type « alphanumérique » : texte et/ou nombres. Les résultats proposés par le moteur afficheront des propositions sous forme de liste.

8

Sur la forme, les requêtes doivent afficher des résultats clairs, structurés et incitatifs. En cas de non réponse, une alternative doit être proposée par exemple une recherche par mot clé ou une recherche alpha si la recherche n’a pas donné de résultat. Les recherches les plus populaires pourront également être suggérées.

B.1.3 Hiérarchie des résultats

Les résultats affichés devront par défaut respecter une hiérarchie établie selon une pondération à tester.

B.1.4 Choix technique du moteur

A préciser avec le prestataire technique.

B.2 Bloc « s’identifier »

B.2.1 Description du fonctionnement.

Exemple : Au roll-over sur le bouton « s’identifier » : Déjà client ?

- Identifiant de connexion (adresse @) - Mot de passe (6 caractères mini)

o Mot de passe oublié Nouveau Client ?

- Créer un compte

1) Si l’utilisateur est déjà client. o Champ à saisir :

Login = adresse e-mail Mot de passe

o Validation

Vérification du couple : login / mot de passe

Si OK message de confirmation « vous êtes connecté »

Le bouton « s’identifier» devient « Mon Compte » Bonjour M. XXX est affiché en front

Si KO affichage d’un message d’erreur o Identification incorrecte

o Mot de passe oublié?

Récupération du mot de passe par e-mail à l’adresse d’inscription Procédure similaire

2) L’utilisateur n’est pas encore client création d’un nouveau compte

9

o Champ à saisir à définir

B.2.2 Contenu du Formulaire d’inscription

Description des champs du formulaire d’inscription (exemple)

Adresse e-mail* : (identifiant de connexion) Civilité : [bouton radio : M / Mme] Nom* : Prénom* : Mot de passe* : (6 caractères minimum) Profession : [liste déroulante] Raison sociale : Adresse* : Code postal* : Ville* : Pays* : [France par défaut]

Captcha* [anti-spam]

Valider / Terminer mon inscription

B.2.3 Affichage et gestion du menu « Mon Compte » :

Une fois l’identification validée, l’internaute revient sur la home en mode connecté. Le bouton « Mon compte » et Bonjour M ou Mme XXX sont affichés dans le header. A partir du clic sur « Mon Compte », plusieurs actions sont possibles :

Mes données personnelles Consulter / Mettre à jour mon profil o Affiche le formulaire d’inscription et permet d’enregistrer des modifications ou

des mises à jour sur l’ensemble des champs du formulaire (adresse e-mail, adresse postale, etc.).

Ma commande : à préciser

Mes factures La facture est téléchargeable au format PDF.

Date d’achat |Libellé de l’offre| Format |Téléchargement

10

…

B.2.4 Gestion des droits utilisateurs (gestion par basique authentification)

Admin : peut intervenir en back office sur tous les aspects du site :

- Accès aux stat. de ventes - Accès aux produits en création / modification - Accès aux contenus éditoriaux en création / modification - Accès aux pages statiques idem - Accès aux utilisateurs (notamment la possibilité de « login as »…) - Accès aux paramétrages des « plug in » et aux mises à jour de versions - Accès aux créations des comptes utilisateurs et aux droits attachés

User : peut accéder en back office à des fonctions plus limitées

- Accès aux stat. de ventes - Accès aux produits en création / modification - Accès aux contenus éditoriaux en création / modification - Accès aux pages statiques idem

Client : peut accéder à son compte (modification des paramètres d’inscription), à ses achats, ses alertes, ses factures.

…

B.3 Arborescence : de l’accueil à l’acte d’achat exemple

11

Ecrans

Conditi

on

Action

Légendes :

Page d’accueil

S1

Parc

oursCliquer sur une

convention

Fiche produit

Convention

S2

Cliquer sur « Je

m’abonne » /

« J’achète »

Tunnel de

vente

Page Mon compte

?

S3

B.4 Page d’accueil

B.4.1 Ecran

Voir maquette ci-dessous (exemple). La réalisation d’un zoning ou d’une maquette préalable à la rédaction définitive du cahier des

charges est utile pour mieux décrire les fonctions souhaitées aux équipes techniques en charge du développement du site.

12

A reproduire pour chaque page du site afin d’éviter toute incomprehension avec les développeurs.

Recherche par code NAF, IDCC, N°JO

13

B.4.2 Règles de gestion (RG) de la page d’accueil : exemple

ID Zone Nom du bloc Description & Fonctionnalités prévues Règles de gestion associée Comments

P1.S1.1 1 Header Cette zone contient le logo du site – RG1

Note : Cette zone est présente sur toutes les pages du site.

RG1 : Au clic sur le logo, l’internaute est redirigé dans la même fenêtre (_self) vers la page d’accueil du site.

P1.S1.2 2 Identification / Panier

Cette zone contient : Un picto d’identification

accompagné d’un lien « S’identifier » - RG1

Un picto d’identification accompagné d’un lien « Mon compte » - RG2

Un picto panier accompagné d’un lien – RG3, RG4

RG1 : N’apparaît que si la personne n’est pas loggée sur le site. Au clic sur le lien / picto, l’internaute est redirigé vers une page d’authentification

RG2 : N’apparaît que si la personne est loggée sur le site. Au clic sur le lien / picto, l’internaute est redirigé vers la page « Mon compte »

RG3 : Le libellé du lien est contextualisé en fonction du contenu du panier de l’internaute. Le libellé contient le nombre d’article contenu dans le panier. Par défaut, étant donné que le panier est vide, le libellé est le suivant « 0 article ».

RG4 : Au clic sur le picto / lien, l’internaute est redirigé vers la page « Panier »

Affichage de « Bienvenue M. ou Mme Nom Prénom » sous le panier.

P1.S1.3 3 Recherche conventions

Cette zone contient : Un titre – RG1 Un champ de saisie “Recherche

par mots clés” avec un bouton de validation – RG2, RG3

Un champ de saisie « Recherche par code NAF, IDCC ou N°JO » avec un bouton de validation – RG2, RG3

Un lien « Recherche par ordre alphabétique » - RG4, RG5

RG1 : Cf. proposition de texte au niveau de la maquette.

RG2 : Par défaut, le champ contient un exemple (cf. maquette). Au clic dans le champ, ce texte par défaut disparaît. Si l’internaute n’a pas renseigné de texte au niveau de ce champ et qu’il le quitte, alors le texte par défaut s’affiche à nouveau.

RG3 : Au clic sur le bouton de validation, la page de liste de résultats associée à la requête (mots clés / codes) s’affiche dans la même page (en _self).

RG4 : Au clic sur ce lien, l’internaute est redirigé par ancre au niveau de la zone 9 (Conventions par ordre alphabétique).

RG5 : Ce lien ne s’affiche que sur la page d’accueil.

P1.S1.4 4 Bloc Convention

Cette zone contient des images et du texte – RG1, RG2

RG1 : Cf. proposition de texte au niveau de la maquette.

RG2 : Dans le texte, on retrouve la date de dernière mise à jour. Cette date doit s’incrémenter chaque jour et présenter la date du jour.

Texte intégralement modifiable en back-office

P1.S1.5 5 B.A.B.A des Conventions Collectives

Cette zone contient : Du texte – RG1 L’aperçu d’un article – RG2,

RG3 Un lien vers l’article précédent

–RG4 Un lien vers l’article suivant –

RG4

RG1 : Cf. proposition de texte au niveau de la maquette.

RG2 : Un aperçu d’article contient : Un titre Une référence vers un texte de loi Un chapeau Un lien vers l’intégralité de l’article

Au clic sur un élément de l’article (titre, référence, chapeau, lien), l’internaute est redirigé vers la page « Article » avec une ancre sur l’article associé. Note : La page article contient tous les articles.

RG3 : Il faut prévoir un défilement automatique et en dynamique des différents articles contenus dans le site. L’aperçu changera d’article toutes les 5 secondes.

RG4 : Au clic sur le lien :

l’aperçu se met à jour en dynamique et présente l’article sélectionné

les liens vers l’article précédent et suivant se mettent à jour en dynamique (libellés des articles précédent et suivant).

Exemple

14

C. Description fonctionnelle du Back Office éditorial

L’idée est de disposer d’un back office permettant une administration simple du site…. Définir les besoins.

C.1.1 Accès par login / mot de passe

La connexion à l’admin est classiquement liée à la saisie d’un login et d’un mot de passe utilisateur. L’affichage des menus varie selon les droits attachés à l’identification.

C.1.2 Composition d’une page de contenu type article

Fonctions attendues pour la création d’un article : exemple

- Titre - Bloc de saisie WYSIWYG - Gestion de la publication (brouillon, immédiate, programmée) - Gestion des catégories de rattchement

o Upload Image / vidéo o Signature o Date de mise à jour o Tags/mots clés…

C.1.3 Composition d’une page statique

Même chose, à savoir que nous souhaitons une gestion des pages statiques permettant les mêmes caractéristiques d’affichage qu’une fiche conseil standard.

C.2 Gestion de la page d’accueil

Nous aimerions une gestion centralisée de la page d’accueil qui regrouperait l’admin des différents blocs ci-dessous : à préciser

D. Description fonctionnelle du Back office e-commerce

D.1 Fonction de création de produits

D.1.1 Création

A définir

D.2 Statistiques de ventes

15

Les statistiques de ventes doivent permettre de suivre en temps réel le détail des transactions réalisées sur le site…

D.3 Choix des moyens de paiements

D.3.1 Choix de l’offre 1

Préciser les moyens de paiements souhaités (CB, chèque, Paypal, ….)

D.3.2 Choix de l’offre 2

D.4 Description scenarii de mails automatiques

Un certain nombre de messages récurrents peuvent être programmés et envoyés de façon automatiques. Voici les scénarii les plus courants à mettre en place dans le cadre du projet :

D.4.1 E-mailing aux nouveaux clients

A préciser.

D.4.2 E-mailing aux clients fidèles

…