Rédiger un cahier des charges

Temps de lecture :
30 minutes

Dans cet article, je vais pour expliquer les choses à ne pas oublier de mentionner dans un cahier des charges. Je vais également vous faire part d’un type de présentation lisible.

Sur quel outil rédiger son cahier des charges

Vous pouvez aussi bien rédiger un cahier des charges sur un document Word que sur un PowerPoint. Personnellement, je préfère de loin, mettre en page mon document sur Power Point. Sur ce dernier outil, je trouve que le document est bien plus lisible :

1 slide = 1 contenu / 1 sujet
Apparence du document qui semble moins fat, moins lourde à la lecture

Quels sont les informations à renseigner dans un cahier des charges ?

Découvrez la façon dont je construits mes cahier des charges dans le cadre d’un projet de refonte de site web…

Partie Contexte

Slide 1 : Rappel du contexte de l’entreprise :

Qui sont ils ? Secteur d’activité ? Nombre d’employé ? Problématiques actuelles ? Leurs valeurs ?

Slide 2 :

Rappel des objectifs de cette refonte, les KPI / Indicateurs de succès de la refonte. Il peut être interessant ici de détailler les objectifs pour chaque pôle de l’entreprise selon les fonctionnalités développées (RH, commerciaux, marketing…)

Exemple :

Permettre l’intégration de service tiers type emailing ou autre
Représenter les challenges de l’entreprise
Augmentation du nombre de leads / abonnés newsletter
Augmentation des durées de session…

Partie Périmètre Technique

Ensuite, l’important est de détailler les points suivant répartie en plusieurs slides :

Slide 1 : Solution technique

Préciser la technologie (CMS / Framework / Langage)
Préciser les langues : Français / Anglais… Mise en place d’un module multilingue (WPML ?)
Préciser l’intégration de système tiers / API (Mail Jet, Agence Plus…)
Préciser si doit intégrer des outils marketing type Google Analytics, GTM ou autres…
Un plan de migration des URLS est-il prévu ? Si oui, un crawl du site est à prévoir (SEO Spider)

Slide 2 : Navigateurs cibles

Par défaut, voici les navigateurs cibles à prévoir sur :

– Desktop
Firefox dernière version (Mac et PC)
Chrome dernière version (Mac et PC)
Microsoft Edge dernière version (Mac et PC)
Safari dernière version (Mac et PC)

– Mobile
IOS (navigateur par défaut : Safari)
Android (navigateur par défaut : Chrome et Firefox)

Slide 3 : Noms de domaines

Nom de domaine principal
Nom(s) de domaine(s) secondaire(s) si nous devons gérer les redirections

Slide 4 : Serveurs de pré production ou développement mise en place

Détails des accès FTP, SSH, BDD, URL, user name, Mot de passe, IP. Il peut y avoir des accès HT PassWord à donner parfois (user name et mot de passe)
Préciser qui doit les mettre en place : le client ou le prestataire ?
Préciser que le client devra valider la totalité du site sur l’espace de développement avant de pouvoir demander la mise en production

Slide 5 : Serveurs de production mis en place

Slide 6 : Explication du déroulement de la mise en production.

Les mises en production sont à faire de préférence du lundi matin au mercredi uniquement.

Slide 7 : Recette

Une fois le site livré au client, celui-ci s’engage à effectuer tous les tests fonctionnels
Tous les correctifs qui auront lieu dans le respect du cahier des charges et du périmètre ne feront pas l’objet d’une facturation additionnelle. Toute demande d’évolution ou changement de maquette sera facturé
Les retours sont à répertorié dans l’outil de suivi de projet : généralement Trello ou Jira. (1 carte = 1 demande)

Slide 8 : Contenus

Préciser si un import de données est prévu
Généralement l’intégration des contenus est à la charge du client (produits, textes, images…). Seuls le contenu des maquettes validées est intégré par les prestataires.

Slide 9 : Après Mise en prod

Généralement les clients ont 2 mois pour faire des retours de BUGS qui pourraient être corrigés et inclus dans la prestation (hors évolution)
Ce délais dépasse, les corrections ou évolutions passent dans le cadre d’une maintenance ou TMA (Tierce Maintenance Applicative)

Slide 10 : Formation

Réalisation d’un document d’administration
Formation à l’utilisation du Back Office du site

Partie Organisation

Slide 1 : Arborescence

Présentation de l’arborescence du site / app

Slide 2 : Planning prévisionnel

Présentation du planning prévisionnel
Ne pas oublier de préciser les sorties des différents lots s’il y en a

Slide 3 : Détails des lots

Préciser le contenu / fonctionnalités / pages qui incombent à chaque lot
Préciser si chaque lot est prévu ou non dans le scope / périmètre / devis

Slide 4 : Outil de suivi de projet

Préciser l’outil utilisé pour recetter / suivre l’avancement d’un projet (Trello, Jira, Asana…)

Partie Éléments graphiques

Idéalement des maquettes UI bien travaillées auront leur VARIABLES et COMPONENT bien réalisés et ordonnés (ex : Figma). De cette façon, les développeurs pourront repérer en un coup d’oeil les blocs similaires et optimiser leurs codes.

Slide 1 : Détails des couleurs

Mentionner le code hexadécimal des couleurs
Si besoin préciser la tonalité / transparence / opacité de la couleur

Slide 2 : Roll over & Boutons

Décrire les roll over sur les boutons (liens réseaux sociaux, liens hypertexte, etc…)

Slide 3 : Hiérarchie de la typographie

H1 > H2 > H3 > Liens > Paragraphes > Span

Slide 4 : Infos générales

Préciser des informations globales au nouveau site type :

Fonctionnalités web design fluides et modernes ;
Chaque photo / vidéo sera publiables sur les réseaux sociaux ;
Si des champs en back sont vides : ne pas les afficher en front…

Partie Descriptif Fonctionnel

Généralement, j’aime scinder le détails des fonctionnalités en 3 catégories

Règles d’affichage : détails des spécificités Front Office concernant l’affiche (animation, changement de couleurs, effets au clic ou hover…)
Règles d’administration : détails des spécificités Back Office concernant les champs personnalisées en back, les données stockées ou les onglets administrables disponibles
Règles de gestion : détails des spécificités Full Stack nécessitant un contrôle des rôles administrateur sur certaines pages, la restrictions d’accès des internautes à certains contenus ou les changement d’état sur un site (Header qui change si je suis connecté)

Navigation

Slide 1 : Header & Footer

Accompagné cette slide d’une maquette UX ou UI de la navigation
Présenter le header du site (mettre une image du header ouvert et/ou fermé)
Si le header change d’une page à une autre, ne pas oublier de le préciser (ex : 1 header pour la Home Page et 1 autre pour les autres pages)
Expliquer le descriptif fonctionnel

- du Header :
  - Règles d’affichage : détails des items et sous items du menu, champ téléphone qui au clic sur mobile ouvre la boîte d’appel, switch langue…
  - Règles d’administration : détails du menu ouvert / fermé, entièrement administrable, préciser si liens qui ouvrent des pages ou ancres…
  - Règles de gestion : Est ce que des éléments du menu changent selon certaines situation ? Bouton connexion qui devient espace membre si connecté…
- du Footer :
  - Règles d’affichage : Site Map ? Navigation identique au Header ? Animation ? Liens vers les pages légales ?

Slides 2 à n : Pages principales

Décrire section après section toutes les pages principales : Home Page, Liste produit, Fiche produit, Services, Contact, FAQ…
L’idéal est de décrire chaque page, section après section, histoire de bien voir toutes les fonctionnalités à détailler et bien comprendre le rôle de chaque fonctionnalité caché dans la page.
Chaque section devra être accompagné d’une maquette

Slide n+1 : Pages secondaires

Décrire rapidement le concept des pages secondaires : Page 404, Pages légales, Site Map

Slide n+2 : Les mails

Détails des mails automatiques générés sur le site : Les données renseignées sont elles stockées en base ? sur le Back Office ? Quelle sera l’adresse d’expédition ? L’objet du mail ? Le contenu texte et design du mail ? 1 email est-il envoyé à l’internaute et à l’administrateur ? Quelles différences ?…

Slide n+3 : Pages légales & Cookie

Mentionner les CGU, Gestion des cookies (Installation d’un plugin type Axeptio ? Complianz ?), Bannière cookies (pas d’administration, 3 CTAs : accepter, refuser & personnaliser, bouton fixe sur site)

Slide n+4 : Recap des champs personnalisées / page

Pour les projets les plus complexes avec plus de 15 pages et style e-commerce, il peut être intéressant de synthétiser tous les champs personnalisés attendus pour chaque page du site. Cela permet de clarifier les champs attendus et éviter tout problèmes en fin de projet.

Slide n+5 : Responsive Design

Le plus souvent, les développeurs envisageront de mettre en place un affichage adaptatif plutôt que de mettre en place du responsive mobile complètement différent du Desktop. Préciser ici s’il y a des spécificités techniques à notifier. Accompagner les explications de visuels / maquettes mobiles.

Slide n+6 : SEO

Installation d’un module de gestion des balises méta (titre, description) : Yoast SEO ou All in SEO

Slide n+7 : Contenus (textes, photos) & Documentation

Selon l’ampleur du site, fournir les contenus textes et photos dans un lien de partage Google Drive ou directement intégré au Power Point. Ne pas oublier d’envoyer les photos, vidéos, textes, pictogrammes, etc…

Slide n+8 : Explication des lots suivants

Comme pour la partie détails fonctionnel, mais pour les lots / features à venir.