Yuna Orsini
Designer stratégique senior
Dans notre pratique quotidienne de développement Web, nous prenons pour acquis un certain nombre de fonctionnements et de points de vue sur les étapes nécessaires à la création d’un bon site Web, utile, utilisable et utilisé. La création d’Osuny nous a amené·es à remettre en cause certains fonctionnements habituels, par exemple le fait de réaliser la création graphique avant le développement. Au contraire, notre expérience nous montre la nécessité d’un bon cadrage stratégique. Cet article tente de faire le point, et de guider les personnes amenées à créer ou refondre un site Web.
La première étape, évidente mais souvent négligée, consiste à définir le cadre stratégique de l’intervention : pourquoi (re)faire le site ? Anthony Ferretti, avec qui nous travaillons souvent, a mis en place une excellente méthode : le brief VRAP.
Acronyme de Vision, Relation, Action et Perception, le VRAP est un modèle de design stratégique que nous avons créé pour travailler avec cohérence toutes les dimensions importantes d’un projet. Enseigné en école de design et à l’université, adopté par de nombreuses startups, expérimenté au sein de grandes entreprises, le VRAP s’applique à de nombreuses situations. De la conception d’un service à la transformation d’une organisation, il structure et optimise le développement d’un projet, de A à Z. Le VRAP couvre les dimensions stratégiques (la vision), organisationnelles (la relation), opérationnelles (l’action) et sensorielles (la perception) d’un projet. Le VRAP est une méthode créée au sein du Collectif Bam, basée sur les travaux de plusieurs chercheurs et chercheuses en design et en sciences de gestion, dont Brigitte Borja De Motta, Stéphane Vial, Alain Findeli et Rabah Bousbaci.
Alain Findeli et Rabah Bousbaci, “L’éclipse de l’objet dans les théories du projet en design”, in The Design Journal - An international refereed journal for all aspects of design, Volume 8, Issue 3, Edition Ashgate, 2005.
Il existe de nombreuses méthodes de cadrage stratégique, dont la mise en œuvre peut varier d’un simple temps d’écriture jusqu’à une vaste enquête terrain avec des interviews et des scénarios. Il arrive que l’on se passe de cette étape lors de la création du site, parce que l’on se concentre sur une explication simple et directe, en se préoccupant peu du contexte. Si vous voulez acheter cette prestation, il faut prévoir quelques jours de travail pour un site très simple, ou plusieurs mois pour un site ou un service complexe avec des enjeux multiples. Comptez entre 1.500 €HT et 50.000 €HT.
Si je n’ai pas écrit de brief, j’en ai besoin. Si mon brief fixe des objectifs comme “moderniser”, “simplifier” ou utilise des adjectifs comme “esthétique”, “ergonomique”, “intuitif”, il est probable que j’en aie besoin. Mon brief doit donner une compréhension claire de ma situation, mon contexte et mes enjeux. Si je n’ai pas fait d’entretiens avec des parties prenantes, idem, j’ai besoin d’une meilleure compréhension de mes cibles de communication et des personnes utilisatrices. Si je m’appuie uniquement sur ma bonne connaissance du contexte, il est très probable que j’aie besoin d’un cadrage stratégique. Si c’est mon premier site, le cadrage stratégique est nécessaire.
Il s’agit de ranger les choses afin d’apporter une réponse aux besoins identifiés dans le cadrage stratégique. Cela implique le choix des bons mots, la création de l’arborescence, les wireframes permettant de structurer l’information, parfois le découpage entre plusieurs sites Web. C’est à la fois une réflexion sur ce que vous êtes, et un travail d’empathie avec les personnes à qui vous vous adressez.
Dans certains cas, le cadrage stratégique permet d’arriver à une structure claire en un jour ou deux de travail. Dans d’autres cas, il faut élaborer plusieurs hypothèses, les tester, et les affiner jusqu’à pouvoir choisir la solution la plus juste. Comptez entre 500 €HT et 15.000 €HT.
Si le menu de mon site comprend plus de 5 entrées de premier niveau ou si les sous-menus contiennent parfois 15 éléments et parfois 2, j’en ai besoin. Si les différents niveaux ne s’opposent pas clairement, générant des questions comme “mais où est rangé ce contenu ?”, j’en ai besoin. Si j’ai des pages immenses, ou au contraire, vides, j’en ai besoin. Si j’entends régulièrement le retour “on ne comprend rien à votre site”, ou “c’est trop touffu”, j’en ai besoin. Si je ne sais pas expliquer pourquoi un contenu est rangé à tel endroit, j’en ai besoin. Si je ne sais pas ce que je dois changer dans l’arborescence de votre site actuel, j’en ai besoin. Si mon site est multicible, j’en ai probablement besoin.
Cette partie est la plus importante. Toutes les autres étapes de travail sont au service du contenu : que dites-vous ? À qui ? Pourquoi ? Le plus gros du travail peut être fait dans un logiciel de traitement de texte. Chaque page doit être d’une longueur pertinente, et servir un objectif précis. Il s’agit de produire les textes des pages, et éventuellement de sélectionner ou créer les visuels pour les illustrer en suivant la direction artistique. Il peut s’agir également de gérer les traductions. La question de l’intégration des contenus dans l’espace d’administration du site peut être séparée, c’est ce qu’on appelle le webmastering. En résumé : écriture, iconographie, traductions, webmastering.
L’estimation du travail est très variable en fonction du volume de contenus. Pour un journaliste, le tarif minimum est de 60 € le feuillet (1.500 signes). Les prix de traduction et de webmastering sont variables, mais dépendent directement du volume de texte.
Si la création ou la refonte de l’ensemble des textes vous semble représenter un énorme travail, vous avez probablement besoin d’externaliser l’écriture. Si vous ne souhaitez pas faire le travail de copier-coller dans le back-office, vous devez externaliser cette prestation. Si la sélection iconographique ou le brief créatif pour une production de visuels sur-mesure vous semble difficile, peut-être souhaiterez-vous l’externaliser aussi. Enfin, si vous n’êtes pas en capacité de traduire par vous-même, il faut probablement l’externaliser aussi.
Là, nous parlons de la marque et de son mode d’expression : logotype, typographie, couleurs, iconographie… Il s’agit de définir la personnalité visuelle de la marque, et tous ses marqueurs graphiques. Certaines organisations ne se considèrent pas comme des marques (associations, services publics). Même si c’est compréhensible sur le plan éthique ou politique, d’un point de vue communication, il faut faire l’effort de se penser comme une marque.
Un travail extrêmement rapide sera réalisé en quelques jours, un travail fin et riche en quelques dizaines de jours, une création typographique complète prendra des mois. Comptez de 2.000 €HT à 50.000 €HT, mais, à vrai dire, il n’y a pas de limite haute : certaines identités graphiques ont coûté des millions d’euros (lien externe).
Guide d'usage de la très belle charte
Si je n’ai pas de charte graphique, j’en ai besoin. Si j’ai une charte qui se résume à un logo, quelques couleurs et des typographies, ou si ma charte ne traite pas spécifiquement des usages numériques, il est probable que j’en aie besoin. Si j’ai la charte graphique d’un autre organisme (par exemple de tutelle), j’en ai besoin. Si mon logo est si compliqué qu’on ne peut pas le rétrécir sans perdre la lisibilité, j’en ai besoin. Si personne ne s’est posé la question de l’accessibilité et des taux de contraste de ma charte, j’en ai besoin.
Si j’ai une charte graphique, le design est fini, non ? Eh bien non ! Parce que la direction artistique ne se préoccupe pas d’ergonomie ou d’interface, ça c’est le travail nommé UI design, pour User Interface. Le design interactif prend, d’un côté, le contenu (arborescence et discours), de l’autre, la marque (direction artistique), et produit des écrans responsive (qui s’adaptent du téléphone mobile au grand écran). En général, on travaille sur des pages types, on ne produit pas toutes les pages. La personne responsable du design interactif va dessiner les éléments clés du site : header (en-tête), footer (pied de page), menus, fil d’ariane, hiérarchie de titres, colonnages, gestion des images…
Takumi Kobayashi
Ctrl S et Entrelacs
Violenn Simon
Alias Sandi en DA, Violenn Simon en UI
Si je n’ai pas de maquette de pages Web responsives, j’en ai besoin. Si la charte propose un seul exemple de page Web avec du faux texte, j’en ai besoin. Si les personnes qui ont produit la charte graphique se sont concentrées sur le papier, j’en ai besoin. Si personne en interne ne sait produire de design interactif, il faudra impérativement acheter la prestation à l’extérieur.
Dans un processus classique, le ou la designer part d’une page blanche, et doit tout dessiner. Avec Osuny, au contraire, on part d’un site parfaitement fonctionnel : accessible, responsive, ergonomique. Tous les fonctionnements ont été pensés et soignés pour être, par défaut, aussi proche que possible de la perfection. Mais ce site a très peu de personnalité, et c’est là que le ou la designer peut intervenir. Nous prenons soin, avec Anthony Ferretti, d’un document Figma libre permettant de partir de la base existante et de la personnaliser.
C’est un bien grand mot, mais en général c’est une petite prestation. D’abord, au début du chantier, il faut mettre en place un environnement de travail, dit aussi “préproduction” ou “staging”. Enfin, à la fin de la production, quand le site est prêt, il est nécessaire de le mettre en ligne en modifiant les entrées DNS, afin que l’URL du site pointe sur le nouveau et plus sur l’ancien.
Peu de temps, nous comptons en général 1 jour de travail (800 €HT) pour les deux. Dans un contexte plus compliqué, évidemment, ça peut être davantage. En général, on ne sépare pas ce poste du reste du développement, sans quoi on rend les choses plus compliquées inutilement.
Il s’agit du développement HTML, CSS et JS. L’HTML est le code des pages, le CSS définit l’apparence, et le JavaScript permet de créer des interactions sophistiquées. On parle aussi de développement front, abrégé dev front. Il s’agit de prendre les maquettes produites pendant la phase de design interactif, et de les transformer en code.
En général, nous comptons le même temps de dev front que de design interactif. Un site nécessitant 5 jours de design interactif sera donc codé en 5 jours. Pour un développement très simple, comptez 2 jours de travail (1.500 €HT). Un développement sophistiqué peut coûter des centaines de milliers d’euros. Avec Osuny, on n’atteint pas ces montants ; un site au design très subtil coûtera rarement plus de 30.000 €HT de développement.
Dans Osuny, tout est déjà codé par défaut, on ne part pas d’une feuille blanche. Le travail d’intégration consiste à s’appuyer sur le thème Osuny, et à ajouter des couches de configurations et de modifications de plus en plus fines. Cela permet d’améliorer la stabilité du site sur le long terme, en facilitant la maintenance.
Si je n’ai pas de développeur ou de développeuse en interne, j’en ai besoin. Si j’ai une équipe interne, mais que les devs ne sont ni certifiés Opquast, ni formés à l’accessibilité numérique et à l’écoconception numérique, j’en ai besoin, au moins en renfort.
Il s’agit du développement de la base de données, et des interfaces permettant de gérer le contenu.
Dans Osuny, il n’y a pas de développement back, tout fonctionne par défaut. Il n’y a donc pas de coût. En revanche, le développement de nouvelles fonctionnalités, qui vont s’ajouter au commun numérique, peuvent ajouter au coût. Là, c’est du devis spécifique, de quelques milliers d’euros à plusieurs centaines de milliers.
Si j’utilise des fonctionnalités natives d’Osuny, je n’en ai pas besoin. Si je veux de nouvelles fonctionnalités, j’en ai besoin. Si je n’utilise pas Osuny, mais Kirby ou WordPress, par exemple, j’en ai besoin.
Il peut y avoir des traitements massifs des anciens contenus, avec deux problématiques différentes : importer les contenus de l’ancien système vers le nouveau, et créer un plan de redirection afin d’indiquer aux moteurs de recherche et aux humains les nouvelles adresses de chaque ressource. Il est possible de ne pas reprendre les archives du tout, auquel cas elles disparaissent à la mise en ligne du nouveau site. Il est possible de reprendre les contenus à la main, avec des copier-coller, auquel cas ça alourdit le poste de production de contenu.
Les étapes de migration et de création de plan de redirection dépendent entièrement du volume et de la complexité des contenus à migrer. Cela peut nécessiter l’écriture de script pour automatiser l’import, du travail de copier-coller, et, souvent, un mélange des deux. Si l’on ne migre rien, ça ne coûte rien. Un plan de redirection de quelques URLs prendra moins d’une demi-journée, une migration de centaines de milliers d’articles prendra des mois de travail.
Si je n’ai pas de développeur·euse en interne, j’en ai besoin.
Il s’agit d’organiser et de suivre le travail de tout le monde ! Chez noesya, nous avons une forte tendance à l’horizontalité : chacun s’occupe de sa partie et se sent responsable de l’ensemble. Pour de petits projets, ça fonctionne très bien, en revanche, dès que le projet grossit, il faut une personne dédiée. Cela consiste à assurer les réunions et la communication entre les parties prenantes, à faire les ordres du jour et les comptes rendus, à lister les choses à faire par chaque personne, à relancer quand les dates définies s’approchent ou sont dépassées.
Une gestion de projet informelle, sans compte-rendus ni relances, coûtera 1 ou 2 jours de travail. Une gestion formelle nécessitera autour de 20% du coût du projet : pour un projet à 20.000 €HT, prévoir 4.000 €HT de gestion de projet, soit 24.000 €HT.
Si l’informel ne me convient pas, j’en ai besoin. Si je ne veux pas faire les compte-rendus moi-même, j’en ai besoin. Si mon organisation a des problématiques de délais incompressibles, j’en ai besoin. Si j’ai peur, ou que je n’ai pas confiance, j’en ai besoin. À vrai dire, si j’ai peur ou que je n’ai pas confiance, il faudrait régler ce problème avant de commencer le travail, sans quoi on risque de se retrouver dans une situation de conflit, ce qui n’est agréable pour personne.
Cette étape est fondamentale, il s’agit de prendre soin du site, sur la durée. On l’appelle tierce maintenance applicative, abrégée TMA.
Dans un site développé avec Osuny, il y a 2 choses différentes à maintenir : le commun, et le site. La maintenance du commun se finance grâce à une contribution annuelle, qui permet de payer toutes les briques techniques qui constituent Osuny as a Service. Concrètement, cette contribution assure que l’outil d’administration fonctionne et est sécurisé. La maintenance du site couvre uniquement les développements réalisés pour le site lui-même.
Chez noesya, nous facturons annuellement un forfait de TMA correspondant à 15% du devis de développement initial. Cela couvre les mises à jour du stack technique, les évolutions liées à la sortie de nouveaux matériels (nouvel iPhone par exemple) ou de nouveaux logiciels (nouvelle version de Chrome, création d’un nouveau navigateur…), réparation des bugs techniques identifiés. Le fonctionnement au forfait est une espèce de prime à la qualité : si le projet que nous livrons est de bonne qualité il y a peu de travail de réparation à faire et nous passons peu de temps à cette TMA. Au contraire, si le travail est mal fait, nous pouvons passer beaucoup de temps en réparation. Qu’on y passe peu ou beaucoup de temps, nous facturons la même chose : 15% annuel. Ce forfait de TMA ne couvre pas la maintenance évolutive. À chaque nouvelle fonctionnalité demandée nous devisons au cas par cas, comme un nouveau projet, puis nous ajoutons 15% de ce nouveau développement au forfait de TMA initial (à l’échéance de paiement suivante).
J’en ai toujours besoin.
Designer stratégique senior
Co-fondateur de noesya, maître de conférences associé à l'IUT Bordeaux Montaigne
Informations
Crédits
Transcription