Mon idée sera un excellent projet web #2 : le cahier des charges

Suite de notre série de "Mon idée sera un excellent projet web" qui propose une explication étape par étape de la réalisation d'un projet technique depuis une idée jusqu'à sa mise en production. Dans cet article, nous traiterons de la rédaction d'un cahier des charges efficace et utile !

• Etape 1 : définir son prototype
• Etape 2 : le cahier des charges

Concevoir son cahier des charges

Vous avez votre idée de MVP : les fonctionnalités principales, nécessaires et suffisantes pour démarrer votre projet. Il faut maintenant le coucher sur papier sous la forme d'un cahier des charges. Ce document sera le fil conducteur pendant la phase de développement.

Un bon cahier des charges est un compromis entre le très (trop) complet, qui peut vous piéger si vous souhaitez rectifier certaines fonctionnalités en cours de projet et le trop léger qui laissera trop de place aux interprétations.

Même si nous ne pouvons pas définir une taille parfaite, sans spécifications précises ou workflows complexes, ce document doit contenir environ une trentaine de pages. Dans certain cas, il vous sera nécessaire d'être très précis dans vos demandes. Vous demanderez donc à votre prestataire un résultat 100 % conforme à vos instructions mais perdrez de la flexibilité face aux imprévus ou aux changements fonctionnels.

En revanche, si c'est votre premier projet, il y a peu de chance que vous soyez dans cette situation. Laissez donc assez de liberté dans vos spécifications pour bénéficier des conseils de votre prestataire et faciliter les recalages en cours de développement.

Dans le cadre d'un MVP, la rédaction du cahier des charges devra être claire être concise. Pour commencer, nous vous conseillons de suivre la structure de rédaction suivante :

• Contexte du projet et objectifs ;
• Méthode de développement et qualité ;
• Charte graphique et webdesign ;
• Scénarios et fonctionnalités ;
• Préconisations techniques ;
• Hébergement ;
• Délais et budget.

^ Un cahier des charges doit détailler ce que devra contenir votre projet. Mais ajoutez-y aussi ce que votre projet NE DEVRA PAS contenir. C'est une excellente façon de cadrer les futurs travaux.

Contexte du projet et objectifs

Il est important de faire comprendre le concept de votre projet au futur prestataire technique.

En effet, la bonne compréhension du contexte et des objectifs permettront aux intervenants de ne pas se tromper dans les phases de décisions et lors des arbitrages.

Vous éviterez ainsi de nombreux quiproquos et gagnerez de précieux conseils avisés. Vous devrez préciser quels utilisateurs sont ciblés par le projet, les objectifs, le business model, l'état d'avancement et vos prévisions de trafic.

N'oubliez pas de parler de l'histoire du projet, elle doit être la plus complète possible.

Méthode de développement et qualité

Développement TDD ? Besoin de performance ? Criticité des données ?

Vous devrez dès le départ indiquer votre niveau d'exigence et les méthodes de développement que vous souhaitez utiliser. Pour cela, déterminez vos besoins grâce à ces différents questions :

• Quelles recommandations sur les résultats de benchmarking ou de tests (page speed, Yslow,...) ?
• Souhaitez-vous que les développements soient validés par des standards (Jshint, insights...) ?
• Faut-il privilégier la flexibilité à la stabilité ?
• Mon site doit-il privilégier la rapidité ?
• Sera t-il nécessaire de gérer une grosse volumétrie de données ?
• Mon projet doit-il garantir une haute-disponibilité aux défaillances ?
• Des données sensibles seront-elles manipulées ?

Ces précisions seront nécessaires pour que les prestataires consultés proposent des solutions adaptées et pragmatiques. Vous éviterez ainsi de payer soit de la sur-qualité soit un projet lowcost et faible techniquement.

Charte graphique et web design (si besoin)

Déterminez maintenant si votre prestataire devra organiser la phase de création graphique ou si vous souhaitez gérer plus finement cette partie.

L'univers graphique de votre site est un élément primordial que vous devrez maîtriser parfaitement. Une sous-traitance peut parfois s'avérer compliqué et rajouter des intermédiaires entraînera obligatoirement des échanges moins fluides.

Pour garantir une cohérence, créez une charte graphique complète et non des éléments graphiques isolés. Cette charte vous permettra ensuite de créer les multiples déclinaisons possible en fonction des supports (cartes de visite, site, ...).

Indiquez dans cette rubrique si votre site sera responsive tablette et/ou mobile (c'est à dire que votre site d'adapte automatiquement aux terminaux utilisés par les internautes).

Si c'est le cas, vous devrez prévoir les maquettes pour les différentes résolutions. Ce dernier point est souvent le parent pauvre du webdesign car étant rarement présent dans les cahiers des charges, il demande une interprétation libre de l'intégrateur avec le risque que le rendu final ne corresponde pas à vos attentes.

@ Nous conseillons de trouver un freelance ou une société spécialisée qui vous offrira surement plus de déclinaisons graphiques et donc un meilleur choix. Intégrez dès le départ les développeurs au processus de création pour que le livrable graphique soit compatible avec les méthodes d'intégration HTML/CSS, et même, dans une moindre mesure, à la stratégie de référencement de la plateforme. Un designer print n'est pas obligatoirement un bon web designer et réciproquement. Vérifiez bien ces références !

Si vous souhaitez utiliser un thème trouvé sur une des multiples boutiques spécialisées, vous aurez généralement la possibilité de télécharger une version Intégrée (HTML) ou graphique (PSD). Dans le cas d'une version intégrée, il est fortement conseillé de regarder la qualité du thème et surtout son poids.

Généralement, nous constatons que ces thèmes embarquent beaucoup trop de fichiers js et css. Ils nécessitent donc un gros nettoyage avant de pouvoir réellement l'utiliser en production.

Scénarios et fonctionnalités

Dans cette partie, vous allez décrire les fonctionnalités de votre site. Utilisez au maximum des schématisations pour expliquer les différentes interactions et process.

@ Aidez-vous de mockups (maquettes) pour donner votre vision des interfaces de votre projet.

Il est plus facile de décrire les fonctionnalités en les classant dans 3 catégories :

• Frontoffice (visible par vos utilisateurs)
• Backoffice (permet l’administration du projet)
• Fonctionnalités transversales (envois des emails, traitement d'image, utilisation d'APIs)

Très souvent, la description de chaque fonctionnalité n'est pas suffisante pour préciser les détails des interactions utilisateurs. Les scénarios vont justement vous aider à clarifier ça.

Identifiez pour cela les différents profils d'utilisateurs (administrateur, utilisateur connecté, client, professionnel, internaute non connecté…) et leurs interactions (créer un compte, lire des messages, publier du contenu…).

D'autres éléments sont à prendre en compte, comme les échanges de votre site avec des services tiers. Il peut s'agir d'outils de tracking (Google Universal, Adwords, Piwik…), d'APIs d'authentification (Facebook connect, Linkedin…) ou d'APIs spécifiques (Mailchimp, Mailjet, Google Map…).

Dans ces cas-là, ciblez bien vos besoins pour que le prestataire ou les développeurs étudient correctement la faisabilité d'implantation.

^ Une API est une structure technique permettant la communication en deux systèmes informatique.

Créez des chemins d'utilisations types. Quels choix pour vos utilisateurs à tel moment, à tel endroit ?

Exemple :

1. L'utilisateur arrive sur la page d'accueil
2. Il s'inscrit en renseignant son email et son mot de passe
3. Il valide son compte après avoir reçu un mail d'activation
4. Il peut créer une publication
5. Il peut commenter sa publication

Ou bien :

1. Un utilisateur peut rechercher un terme dans la barre de recherche
2. Il peut accéder à un article d'un autre membre
3. Il souhaite commenter un article
4. Il est redirigé vers une page d'inscription
5. Après inscription, il peut valider son commentaire

Préconisations techniques

Du Node ? du PHP ? du Python ? et pourquoi pas du Ruby ?

Pour un non-technicien, la différence entre ces langages n'est pas évidente et demandera une grande confiance dans les recommandations de votre prestataire.

Même si vous avez quelques pistes de "technos" à utiliser, proposez aux développeurs de s'impliquer dans ce choix ce qui vous évitera peut-être de partir dans une impasse technique. Pour ne pas vous laisser démuni avec ces langages, nous vous proposons une revue rapide des solutions du marché :

Au niveau des langages  :

Le PHP, c'est le langage couteau suisse du web le plus utilisé sur internet. Il bénéficie d'une très grosse communauté de développeurs. Couplé à un Framework du type Symfony ou Laravel, vous pourrez réaliser un projet performant, stable et facile à maintenir. La dernière version (PHP7) a mis la barre très haut avec des optimisations de 30% sur les temps d’exécution. PHP reste l'un des leaders sur le marché même après 20 ans d'existence.

Ruby,et Python sont aussi des très bons langages, mais vous aurez un peu plus de difficulté à trouver des prestataires/développeurs spécialisés. Efficace pour développer des applications web robustes, Python est d'abord orienté scripting avant d'être une solution applicative web. Ruby lui, est reconnu pour sa stabilité et sa capacité à traiter des flux de données.

NodeJS est un langage relativement nouveau dans l'univers du web. Son gros point fort ? Principalement sa rapidité ! Pas encore assez structurant, il nécessite, dans le cadre d'un développement complet de site, l'utilisation de framework comme Express ou Sails. Si votre problématique est de la réactivité et travailler sur des interactions frontend, NodeJS est une solution pertinente. Vous verrez, c'est rapide et facile à utiliser (au moins pour vos développeurs) !

ASP, JAVA ne font plus partie, de notre point de vue, des solutions cohérentes pour un nouveau projet. Lourds à mettre en place et peu innovants, ces langages sont en perte de vitesse dans les environnements web. Malgré leurs solidités, l'inertie de mise en place et de maintenance sera un frein à la réactivité de votre projet.

La base de données :

Mysql/Mariadb : Efficace et facile à mettre en place, c’est LA solution proposée par défaut sur un projet web. Si votre projet est de taille moyenne et ne draine pas des millions de données, MySQL est un bon choix.

Postgresql : Puissant et beaucoup plus rigoureux que Mysql, Postgresql est un système de gestion de base de données qui mérite d'être utilisé si votre projet doit manipuler beaucoup de données ou pour faire des utilisations spécifiques (cartographie, recherche...)

Vous entendrez sûrement aussi parler d’autres technologies telles que Redis, ElasticSearch, MongoDb, Kafka… Chacune d'elles sont utilisées pour des besoins spécifiques et ne seront pas nécessaires dans un premier temps pour votre MVP.

Solutions dédiées :

CMS E-commerce : Beaucoup de solutions existent sur le marché pour gérer une boutique en ligne. Pour ne retenir que les plus connues, citons Prestashop (rapide et léger à installer), Magento (lourde et très complète) et enfin Woocommerce (plugin de wordpress idéale pour les micros boutiques).

CMS : les Content Management Systèm permettent de concevoir un site internet tout en gardant une grande maîtrise des contenus. Les solutions disponibles sont très nombreuses en passant par Wordpress (à l'origine pour créer des blogs, il représente 70% des sites dans le monde), Drupal ou encore Joomla.

Cette liste est bien sûr loin d'être exhaustive et de nombreuses autres solutions ou langages apparaissent tous les jours.

^ Dans cette profusion, le choix technique devra être dans tous les cas, argumenté vis à vis de la durée de vie de votre projet, des enjeux de performance, de la sécurité, la complexité et aussi de votre budget.

Hébergement et maintenance

Il est nécessaire de réfléchir en amont à l'hébergement de votre futur projet.

Dans vos recherches, plusieurs solutions s’offriront à vous avec pour chacune des atouts et des contraintes différentes.

Pour une application critique, à fort trafic ou stockant des données sensibles, nous vous recommandons de passer, sans hésitation, par des professionnels de l’infogérance.

Dans ce cas, vous devrez préciser dans le cahier des charges que l'hébergement sera externalisé. Vérifiez toutefois que votre prestataire vous propose à minima un serveur de staging (pour tester les développements), c'est ce que nous faisons, en tout cas !

Dans les autres cas, il peut être intéressant de demander à votre prestataire technique de d'héberger lui même (si il le propose) le site. Vous gagnerez en efficacité lors de l'installation de votre projet et en rapidité d'intervention en cas de panne ou de bugs.

Vérifiez bien-sûr le sérieux de celui-ci en lui demandant de préciser son infrastructure serveur, sa stratégie de mise à jour, des outils et pratiques de sécurité ainsi que les systèmes de sauvegarde.

Dans 80% des cas, votre prestataire n'hébergera pas physiquement les serveurs mais passera par un tiers. Il est donc dans une position d’infogérance. Demandez lui de préciser son prestataire datacenter et par machine (OVH, Online...).

^ Il est important de dissocier la notion d'hébergement (mise à disposition d'un serveur physique dans un datacenter) de l'infogérance (installation, paramétrage et maintenance).

Pour votre maintenance applicative, demandez si une garantie est incluse dans le projet et quel est sa durée.

Délais et budget

Informer votre prestataire des délais de mise en place du projet est important pour une estimation juste. En effet, sur des temps plus serrés, l'augmentation du nombre d'intervenants fera forcément gonfler la facture finale.

De plus, le temps de développement ne peux pas indéfiniment être divisé en fonction du nombre de développeur. La multiplication des intervenants est plus difficile à coordonner et surtout peut-être contre productive si les fonctionnalités ne peuvent pas être scindées.

Même très simple, un site qui nécessite une solution personnalisée (sans passer par un CMS par exemple) pourra difficilement passer sous les 15 jours facturés (en prenant en compte les étapes suivantes : analyse, initialisation, paramétrage, templating, recette...).

Parlons maintenant du budget !

Pour avoir des repères sur le coût journalier, sachez qu'il oscille entre 400 € HT à 600 € HT. Attention toutefois, en fonction des compétences et de la localisation, les coûts peuvent varier considérablement. Un freelance pourra par exemple demander entre 300 et 450 € HT alors qu'un expert pourra dépasser les 800 € HT /jour.

Finalisation du cahier des charges

Votre document est prêt et avoisine les 20 pages. C’est bon signe ! Vous avez réussi à réaliser une bonne synthèse de votre MVP. Il est temps pour vous de chercher qui et comment vous allez faire développer votre projet. C’est l’objet de notre prochain article.

^ Pour alléger et garder de la lisibilité à cet article, nous avons délibérément survolé certaines notions techniques. Nous renterons dans le détail plus tard.