habillage
Une femme devant un ordinateur

Comment rédiger des spécifications fonctionnelles pour un site web

Eurelis
Le 14 juin 2021

Que ce soit pour un site web existant ou en devenir, ce document essentiel à la réalisation de votre projet et au bon suivi de votre site doit permettre d’en décrire toutes les fonctionnalités.

Considérez ce document comme la bible de votre projet : il définit son périmètre fonctionnel et sera lu par tous les acteurs de votre projet. Il permet également, post-projet, de conserver une trace des choix et des arbitrages réalisés.

L’équipe Eurelis vous livre les bases pour établir ce document indispensable à la réussite de votre projet.

Attention : soyez attentifs à bien répertorier l’ensemble des éléments dans ce document, car il constitue le “contrat” que vous passez avec l’équipe de développement. Tout élément oublié risque alors de ne pas pouvoir être pris en compte lors de la réalisation et devra probablement faire l’objet d’une évolution.

1.   Présenter le document et le périmètre du projet

Présentez rapidement l’objectif du document, le plan, les différents sujets abordés, ainsi que le périmètre du projet, notamment les principales orientations fonctionnelles.

2.  Définir un langage commun

API, Back-office, Front-office… Tous ces termes ne sont pas forcément compréhensibles par tous. Prévoyez donc un lexique dans lequel vous listerez l’ensemble des termes spécifiques qui seront employés tout au long du projet et/ou dans le produit final.

Il est également très utile d’établir un vocabulaire “métier” spécifique au projet afin de faciliter les échanges entre les parties prenantes.

Présentez enfin les structures de contenus et les éléments de classification éventuellement utilisés.

3.  Prévoir les spécifications graphiques

Cette partie n’est pas obligatoire mais vivement recommandée : vous y décrivez dans les grandes lignes les différentes tailles d’écran envisagées et les points de ruptures associés. Identifiez également les différentes tailles d’images utilisées dans les différents gabarits. Ce travail doit permettre de rationaliser les formats, faciliter la production et l'intégration des contenus.

Lister les polices et les couleurs de référence facilitera enfin le travail de l’équipe front-end.

4. Présenter l’arborescence et la navigation

Présentez l’arborescence prévue pour votre site. Celle-ci doit permettre d’identifier rapidement les rubriques et les pages ainsi que les différents gabarits utilisés.

Le système de navigation est un élément clef de l’expérience d’utilisation de votre site : afin qu’il soit bien conçu et implémenté, il doit être décrit avec précision dans les spécifications.

On s’attachera notamment à présenter les menus généralement présents dans le header et dans le footer. Décrivez leur affichage et leur mode de fonctionnement (survol, clic, accès aux rubriques et sous-rubriques…) et n’oubliez pas de préciser s’ils sont contribuables ou si une intervention technique est requise pour chaque ajout ou suppression de page.

Portez un soin particulier à la version mobile.

Enfin, prévoyez une partie réservée au fil d’ariane de votre site, cette fameuse petite ligne en haut du contenu de chaque page précisant à l’utilisateur dans quelle rubrique et sous-rubrique il est actuellement en train de naviguer.

5.  Décrire les éléments généraux

Quelles seront les fonctionnalités communes à tout ou partie de vos pages ?

On traitera par exemple de la recherche si celle-ci se situe dans le header ou le footer, des call-to-actions....

Chez Eurelis, nous décrivons également dans cette section des éléments tels que les flèches de remontées en haut de page, les boutons figés (sticky) ainsi que les règles de gestion liées aux pages d’erreur.

6. Lister les gabarits de page…

Cette section est la partie la plus importante de ce document, elle nécessite donc une attention bien particulière car elle doit décrire avec précision les fonctionnalités du site et le détail de chaque gabarit de page.

Dans les fonctionnalités, nous allons retrouver par exemple la page de résultats de recherche ou les services proposés aux internautes: abonnements aux news alertes, personnalisation des contenus, espaces privés, captation de lead, formulaire de contacts,  fonctionnalités en lien avec votre business.

Côté gabarits, il faut identifier tous les modèles de page et décrire précisément les comportements attendus des blocs d’informations.

Dans tous les cas, il faudra présenter les maquettes graphiques desktop et mobile afin de ne laisser aucune ambiguïté quant aux éléments de présentation.

...Et les blocs transversaux

Afin de faciliter le travail de l’équipe de développement et plus tard la maintenance technique et éditorial du site, il faut arriver à identifier des blocs communs qui peuvent remonter sur différents gabarits. Pour chacun d’eux, il faudra déterminer les besoins d’administration et/ou de contribution par l’équipe de webmastering.

N’oubliez pas de  lister l’ensemble des blocs et leurs fonctionnalités.

Par exemple, un bloc de texte avec ou sans média (image/vidéo) est souvent défini comme “bloc de contenu” ou “bloc de texte+média”, indiquez alors dans cette section tous les comportements possibles pour ce bloc ainsi que les pages dans lesquelles ce bloc peut être retrouvé.

Pour tous ces éléments, des maquettes graphiques présenteront la disposition visuelle des éléments dans les formats cibles.

7.  Aborder les exigences techniques

Bien que la conception technique fasse l’objet d’un document à part, il est recommandé d’intégrer les exigences techniques en lien avec l’expérience utilisateur.

On précisera notamment :

  • les exigences SEO
  • la compatibilité avec les navigateurs et leurs versions
  • le niveau d’accessibilité web attendu
  • les modules de statistiques du site et on fera référence à un plan de tracking éventuel
  • l’impact RGPD à prendre en compte
  • le ou les noms de domaines
  • les règles de construction des URLS
  • la gestion des rôles et les droits prévus pour l’administration et l’exploitation du site

Il n’est pas nécessaire de rentrer dans les détails, seulement d’indiquer dans les grandes lignes le périmètre ou les modules prévus pour répondre à vos exigences.

La rédaction des spécifications fonctionnelles est une étape importante lors de la conception du projet : ce document permet à toutes les équipes projets d’avoir une vision globale et commune du produit web à développer. Une fois le site en ligne, et si des évolutions sont apportées, pensez à maintenir à jour ce document afin qu’il puisse être consulté à tout moment par l’ensemble des intervenants  projet ou post-projet de votre site.


Pour en savoir plus sur Eurelis, cliquez-ici

Eurelis - Le 14 juin 2021
À lire aussi
premium2
premium2