睦勝 Geek
Qui sait quand il faut combattre et quand il faut s'en abstenir sera victorieux.

[METHODOLOGIE] Comment devrait être construit un site web


12/03/2014

Avant de dire que vous savez déjà comment fonctionnent les processus de création de sites web, posez-vous une question : Comment s'est passé votre dernier projet ?
Brillamment ? OK, d'accord, passez votre chemin.
Cela aurait pu être mieux ? Cet article est pour vous.

Lorsque je discute avec des clients, je ne reçois jamais de réponse positive à cette question. Et lorsque je creuse un peu, il en ressort systématiquement que les difficultés rencontrées sont le résultat d'une négligence des processus et non d'un manque d'idées, de créativité ou de connaissances techniques. Les projets web vivent et meurent avec les process et non pas par l'absence ou le mauvais usage des compétences. Et bien que vous ne soyez peut-être pas le chef de projet web, vous devez comprendre comment la gestion du projet participe à son succès. De temps à autre, en fonction de vos attributions dans la réalisation du projet, vous allez être amené à revêtir la toque du chef.

Concevoir et construire un site web est une démarche longue et complexe mais je vais tâcher de vous la vulgariser le plus possible. Pour ce faire, je vais laisser de côté toute la partie technique. Mon but est de vous donner une carte globale du processus. Vous aurez les checkpoints à traverser mais pas les routes à emprunter pour rallier ces checkpoints.

Avant de prendre la route, nous devons nous localiser sur la carte. En gestion de projet, on appelle ça l'organisation.

Organisation

L'organisation n'a, en aucun cas, besoin d'être une tâche compliquée. Tout ce que vous avez à faire, c'est de réunir une équipe pour déterminer ce qui sera fait, qui le fera, quand ce sera fait et combien cela va vous coûter (par le coût, j'entends soit une somme d'argent, soit une somme de temps et de travail ou une combinaison des deux. Après tout, si vous travaillez sur un projet interne ou personnel, il y a des chances que vôtre investissement sera du temps et de la sueur et non pas un capital financier). Vous vous trouvez une jolie petite table ronde près d'un joli tableau blanc (qui n'aime pas les tableaux blancs ?) et vous faites votre cuisine.

Par cuisine, j'entends :

  • Commencez par les objectifs business. Ce sont les finalités du site, ses raisons d'exister (développement de l'audience, vente d'espace publicitaire, vente d'un service à l'internaute, soutenir un plan de communication...).
  • Donnez à tous les membres de l'équipe la possibilité d'exposer une stratégie pour atteindre ces objectifs en mettant à profit leurs expertises respectives.
  • Identifiez votre public et développez une stratégie de contenus qui lui parle.
  • Faites un schéma de flux de données qui place votre site web dans cet écosystème plus vaste constitué de votre Système de Gestion de Contenus (CMS), votre Système de Relations Client (CRM) et de votre suite applicative marchande. N'oubliez pas qu'un site web ne fait pas que diffusez des informations, il en collecte également.
  • Ensuite, recueillez l'avis de chacun sur le temps et le coût nécessaire à la réalisation de tout ce travail.
  • Notez tout ça. Voilà ! Vous avez votre plan d'organisation.

Ce qui est en réalité encore plus important que Comment vous vous y êtes pris pour vous organiser est Est-ce que vous vous êtes organisé (Ce n'est plus un projet si la première étape est de mettre les mains dans le cambouis; c'est comme plonger tête la première dans une pataugeoire pour enfants). Plus le projet est complexe, plus l'organisation demande d'implication de la part de chacun. Dès lors, si vous prenez en compte le temps d'organisation du projet dans son coût global, vous méritez des points supplémentaires. Parce que oui ! Parler du travail, c'est du travail.

Prototypage

On commence à travailler par une autre forme d'organisation, une autre approche qui est beaucoup plus détaillée qu'une discussion entre Chevaliers ou même qu'un très grand tableau blanc.

Un prototype se distingue d'un wireframe (un schéma succinct en fils de fer) papier par le fait qu'il est interactif (oui, clicable !), qu'il décrit l'architecture de l'information d'un site web, ainsi que ses fonctionnalités et les diverses facettes de l'expérience utilisateur - nous parlons ici de facettes car le prototypage doit se détacher autant que possible du visuel -. Le rôle principal du prototype est de combler les trous entre les plans de site imprimés, la liste des exigences techniques et le site final en servant de documentation relative à la structure de l'information et aux fonctionnalités et non pas à l'esthétique. Etant donné que ce document sera passé aux designers et aux développeurs, il est préférable qu'il soit moche et clair plutôt que beau et facteur de confusion.

L'ordre dans lequel vous élaborez un prototype peut, dans certains cas, paraître totalement contre-intuitif mais l'enchaînement est important pour s'assurer que les grandes décisions offrent un socle stable pour les décisions moins cruciales.

Généralement, je découpe le prototypage en 6 étapes :

  1. Déterminer l'architecture générale de l'information du site web ainsi que les pages qu'il contiendra et comment ces pages seront organisées (rangées).
  2. Spécifier et hiérarchiser la structure des contenus des pages critiques pour les objectifs comme les pages produits ou les landing pages (ces pages carrefour qui permettent de passer d'une section à une autre)
  3. Spécifier et hiérarchiser la structure des contenus des pages relatives au marketing comme les articles et les blogs et déterminer les "call-to-action" qui y sont afférents.
  4. Faire une pause pour déterminer les métadonnées (ces données lues par des automates et des robots mais généralement non visibles sur le site) de chaque type de contenu parce que ces informations deviendront l'épine dorsale des outils de filtre et surtout des moteurs de recherche.
  5. Établir le contenu et la structure de la page d'accueil du site.
  6. Prendre en compte l'intégration à des outils tiers comme des CRMs ou des bases de données d'inventaire.

De manière générale, si vous voulez que votre site web propose quelque chose (un contenu spécifique, une fonctionnalité...), votre prototype doit le proposer également.

Design

Le processus de design démarre avec la création de mood boards qui sont une autre forme de prototypage. Un mood board se focalise sur les éléments graphiques et visuels qui forment l'image et le ressenti du site web (imagerie, couleurs, typographie...). Ils permet d'explorer la façon dont ils interagissent les uns avec les autres, indépendamment de la structure du contenu et de la mise en page. Plus ils ressemblent à un collage, plus ils permettent de se focaliser sur l'image que l'internaute aura du site et sur la manière dont l'esthétique du site soutient le message que la marque souhaite véhiculer.

Une fois que le prototype et les mood boards sont faits, le processus de création graphique découle naturellement. Ce n'est alors qu'une simple application du second sur le premier. Comme tous les éléments graphiques ont déjà été choisis, cette étape ressemble en réalité beaucoup plus à un travail de fourmi qu'à un processus créatif. Mais le résultat sera exactement ce que tout le monde attend de la "conception" : un agencement et une mise en page qui reflète exactement ce que l'internaute verra sur son écran.

Production

Beaucoup de choses se passent lors de cette phase... en vrai, avec des larmes (le moins possible) et de la sueur (également le moins possible mais dans la réalité, cela se compte en hectolitres). Du code et plein de trucs dans le même genre (de la mécanique, quoi !). Je vous épargne les détails. La production est l'implémentation de ce que vous avez créé comme prototype et peaufiné dans vos dossiers de composition, en somme, le plan de construction de ce que vos développeurs assembleront.

En fonction de la composition de votre équipe, cette étape peut être une expérience itérative, comprenant de la flexibilité entre ce qui a déjà été décidé et ce qui sera finalement implémenté. Ou alors, ce peut être plus rigide et ne sera implémenté que ce qui a déjà été validé; tout autre chose entrainant la création d'un ticket de changement. Ces dynamiques sont les vôtres, avec leurs avantages et leurs inconvénients, mais elles sont le plus souvent le résultats de circonstances et rarement de préférences.

Cela dit, vous pouvez généralement vous attendre à ce que la phase de production soit une phase plus calme que les phases précédentes ce qui en fait une bonne période pour étudier l'intégration avec des plateformes tierces pendant que vos développeurs ont les mains dans le cambouis. En fait, si votre site doit s'intégrer à un CRM ou à une suite d'outils marketing, vous devez avoir réglé ces questions et déterminer vos stratégies de campagne avant que le code qui permet au site de communiquer avec ces plateformes ne puisse être écrit.

Feedback (retours d'expérience et recettage)

Une fois que la phase de production terminée (posez vos stylos !), ce qui a été produit peut être testé. Vous pouvez qualifier cette phase comme vous préférez, QC (Quality Checking), QA (Quality Assurance), Recettage, Tweak time ou Finetuning mais j'aime bien le terme de feedback qui englobe tout ça à la fois. C'est cette phase où des vrais gens commencent à utiliser ce que vous avez produit, en d'autres termes, c'est le moment où vous découvrez si ce que vous avez fait fonctionne ou pas.

Attention ! Je vous préviens, cette phase est longue et fastidieuse. Armez-vous de patience car vous allez vous sentir nul, démoralisé et bon à rien parce que vous allez naviguer d'échec en échec et de Charybde en Scylla. Même si le plan était génial, même si le design était le plus beau du monde, même si le code était le plus performant de l'univers, il y aura toujours quelque chose à changer. Et une fois ces changements effectués, il y en aura encore et toujours d'autres. Le lancement parfait n'existe tout simplement pas. Une fois que ce que vous avez conçu est réalisé, de meilleures façons de faire ce que vous venez de passer beaucoup de temps à implémenter se révèleront à vous. C'est normal et tout à fait acceptable (on appelle ça l'expérience) et c'est également à ça que sert cette phase de feedback. C'est le Pourquoi du feedback. Le Comment est beaucoup plus simple.

Je ne saurais que trop vous recommander de faire une première passe de recettage avant de dire quoi que ce soit au client. Une bonne et solide statégie doit couvrir les fonctionnalités générales qui seraient pertinentes pour n'importe quel site web (i.e. "est-ce que les boutons de validation des formulaires fonctionnent ?") mais également insister sur toutes les fonctionnalités-clefs et les parcours propres au site que vous avez conçu. En plus de tout cela, il vous faudra mener des tests complets et contextuels, ce qui se résume à cliquer sur tous les boutons de toutes les pages du site sur tous les navigateurs et toutes les plateformes que vous estimez pertinents. Il s'agit là typiquement d'un nombre de variables systématiquement plus important que vous ne le souhaitez. Bien sûr, il ne s'agit que d'un feedback interne. Soyez prêt à recommencer dès que le client aura posé les yeux sur le résultat que vous lui présenterez.

J'insiste sur le ressenti que vous aurez de cette phase pour une raison bien précise. Ce que cette phase fait est très clair mais nous ne sommes généralement pas préparé à subir les retours (les critiques) et la façon dont vous vivrez et traiterez ces commentaires déterminera si le projet est un succès ou un long cauchemar. Lorsque les premières critiques arrivent, on peut facilement se retrouver en panne sèche. C'est le moment où les designers perdent espoir, le moment où les développeurs perdent patience, le moment où le client se sent déçu ou pire, trompé.

Mais le feedback peut aussi être une phase vraiment excitante ! Parce que, lorsqu'on s'attend à l'avance à subir des retours de bâton, on peut non seulement les encaisser plus aisément mais aussi les apprécier à leur juste valeur, comme autant de pas en avant sur le chemin de la perfection. Ce n'est qu'une question de perspective. Sans vouloir vous décourager, gardez en tête qu'en gestion de projet, l'espérance n'est qu'une déception qui n'est pas encore arrivée.

Déploiement (Lancement)

Déployer un site web (l'ouvrir au public) est le point final de tous les efforts que vous avez fournis jusque là. Généralement, cela ne requiert que quelques heures de coordination et de manœuvres techniques. Après quoi, vient encore une phase de tests, juste pour être certain que passer de l'environnement de test à l'environnement de production n'a rien cassé.

Et après ? Bièèèèèèèèèèèèèère ! Ou autre chose, chacun ses goûts. Un gâteau, c'est bien aussi. Mais appréciez bien ce gâteau et ce verre car le déploiment d'un site n'est qu'un petit répit entre deux périodes de dur labeur. Pour n'importe quel site, le lancement n'est que le début de l'aventure. Dès que le public viendra utiliser ce que vous avez conçu, tout change... et très vite !

A propos de Young Sun TAN :

Young Sun TAN est un geek webophile, technophile, bidouilleur et gourmet.

Sur la toile depuis 1995 avec sa première page web (une biographie de Beaumarchais pour le compte du collège Beaumarchais de Paris), il revendique une identité de "digital native". Après une Terminale S au Lycée Louis-le-Grand à Paris et un Master en Informatique option Ingénierie Informatique - Systèmes d'Information, il a entamé une carrière d'analyste web et est désormais Project Leader pour le Groupe Lagardère. Il compte parmi ses réalisations les sites de Celebrity Cruises, Royal Caribbean ainsi que Gulli, Canal J, Tiji et Europe 1.

Menant un veille constante sur les évolutions du web et du développement, son expertise couvre le PHP-MySQL, le framework jQuery ainsi que le CMS eZPublish et Symfony pour lequel il a une affection toute particulière.

Côté détente, il affectionne tout particulièrement les bonnes tables et les bons plans foodista. Bien que la street food occupe une place de premier choix dans son cœur ventre, il n'est pas allergique à une excursion gastronomique ou bistronomique.

Retrouvez Young Sun TAN sur :