Si vous ne savez pas ce que vous faites, donner un retour sur le design d’un site web — et garder tout le processus sous contrôle — peut devenir un véritable cauchemar pour toutes les personnes impliquées.

Obtenir le bon design pour votre site est absolument essentiel pour donner la bonne impression. Un bon design web renvoie une image de crédibilité et inspire confiance, tandis qu’un design médiocre et une mauvaise UX font fuir les utilisateurs avant même que votre site n’ait fini de se charger (surtout si le chargement prend plus de 2 à 3 secondes). Et en parlant de confiance, saviez-vous qu’en évaluant la crédibilité d’un site, 46 % des consommateurs prêtent plus d’attention aux éléments visuels qu’au contenu lui‑même ? Si vous recherchez des services de design de niveau expert, pensez à explorer les capacités de l’agence de design web ARCC.

La triste vérité, c’est que les gens jugent bien un livre — hum, un site web — à sa couverture. Et ils le font vite. Des études ont montré qu’il ne faut que 50 millisecondes (ou 0,05 seconde) aux utilisateurs pour se faire une opinion de votre site web.

Si l’on considère le nombre de plateformes qui nous incitent à évaluer et à décider en un clin d’œil uniquement sur la base de l’esthétique (c’est à toi que je parle, Tinder et TikTok), il est probable que la marge de manœuvre pour faire cette première impression cruciale devienne encore plus réduite.

Qu’est‑ce que tout cela signifie pour vous ?

En bref, vous avez tout intérêt à vous assurer vraiment que votre site web a fière allure et offre de bonnes performances.‍

Des feuilles de calcul avec code couleur aux commentaires de retour longs comme des dissertations, en passant par les e‑mails sans fin, les captures d’écran couvertes d’annotations, les multiples ressources de contenu appelées Real_Final_FINAL_version et les notifications Slack incessantes à toute heure — il doit bien exister une meilleure façon de faire.

Elle existe.

Dans ce guide, vous apprendrez à faciliter et à fournir un retour efficace sur le design d’un site web, que vous soyez un parfait débutant donnant un retour inter‑équipes, un designer qui relit le travail d’un autre designer, ou un dirigeant qui a besoin d’aide pour donner un retour sur le design.

Poursuivez votre lecture pour découvrir comment créer un produit final de qualité sans traumatiser votre ou vos designers, ni vous faire mettre sur liste noire par l’agence de design web à laquelle vous avez externalisé le projet.

Voici ce que nous allons aborder :

• La place du retour sur le design dans le processus global de design web,
• Pourquoi il est important de donner un bon retour sur le design web
• Les bonnes pratiques pour fournir un retour sur le design d’un site web, et
• Comment donner un retour sur le design web de manière efficace. 

Entrons dans le vif du sujet !

Le processus de design web

Avant d’entrer dans les détails de la façon de donner un retour efficace sur le design d’un site web, prenons un peu de recul pour comprendre le contexte et voir où ce retour s’inscrit dans le processus global de design web.

Comme vous pouvez le voir sur l’illustration ci‑dessus, il y a beaucoup d’étapes dans la création d’un site web, et certaines — comme la recherche utilisateur, le retour sur le design, la création de contenu et les tests utilisateurs — peuvent se répéter plusieurs fois avant que le site ne soit finalisé.

Avant de commencer à distribuer les commentaires, il est utile de comprendre ce que recouvrent les autres étapes, afin de pouvoir donner des indications éclairées et d’éviter de vous retrouver dans une situation embarrassante.

Ci‑dessous, nous donnons un bref aperçu de chaque étape du processus de design web. 

1. Brief, recherche et idéation

Avant de concevoir un site (ou une application), il y a une phase d’idéation et de recherche au cours de laquelle les parties prenantes définissent la « grande idée » du site et formulent le brief ou le problème de design.

Au cours de cette phase, l’équipe décrit les fonctions prévues du site et son public cible. Ensuite, elle mène des recherches utilisateurs pour comprendre comment l’interface utilisateur (UI) et l’expérience utilisateur (UX) du site peuvent répondre au mieux aux besoins des utilisateurs visés.

Pour plus d’informations à ce sujet, consultez ce guide pratique de la recherche en UX design proposé par Think with Google.

2. Création du sitemap et wireframing

L’étape suivante consiste à créer un sitemap — en gros, le plan des principales pages du site, de ses fonctionnalités et de sa navigation — ainsi qu’un wireframe.

Le wireframe sert de base sur laquelle les designers peuvent structurer les éléments visuels du site, y compris la mise en page des pages et des sections, ainsi que des éléments comme les en‑têtes et pieds de page.

Comme le montre l’illustration ci‑dessous, les wireframes peuvent être low‑fidelity ou high‑fidelity, selon leur niveau de détail ou de « fini ».

3. Maquettes de design et création de contenu

Une fois les wireframes en place, votre ou vos designers peuvent commencer à concevoir, et les créateurs de contenu peuvent se mettre à façonner avec soin les textes de votre site et à produire les belles photos, illustrations, animations, vidéos et autres ressources numériques qui y figureront.

Votre designer mettra à profit son expertise pour décider comment appliquer au mieux votre identité visuelle et votre style au contenu du site, en jouant sur des éléments comme les logos, les palettes de couleurs, la typographie (polices, tailles, interlignage, marges internes, etc.), les espacements, les visuels et autres éléments graphiques.

Son premier objectif est de définir l’apparence générale et l’ambiance du site. Une fois cela validé, il ou elle peaufinera et affinera les détails. 

Le designer utilise souvent des espaces réservés pour les sections qui seront créées par d’autres membres de l’équipe, par exemple du texte lorem ipsum là où le rédacteur devra faire sa magie, et des photos de stock là où iront les photos de la marque (une fois que ce satané photographe aura enfin envoyé les images retouchées !).

Comme pour les wireframes, les maquettes de design peuvent être de faible ou de haute fidélité, comme on le voit ci‑dessous.

Si vous utilisez une plateforme CMS — comme WordPress, Wix, Squarespace ou Shopify — le designer de votre site peut mettre en scène vos maquettes directement dans le CMS plutôt que d’utiliser un outil comme Sketch, Figma, Photoshop ou InVision. Mais ne vous inquiétez pas, personne ne pourra voir le site tant qu’il ne sera pas publié.

4. Revue du design et du contenu, et retour

C’est l’étape où les parties prenantes (dont vous !) ont l’occasion de donner leur avis et de fournir un retour constructif sur l’apparence et le ressenti du site, ainsi que d’aider à affiner le contenu qui l’alimentera.

La plupart des designs de sites web et des contenus passent par plusieurs cycles de retours et de révisions, qui (on l’espère) les améliorent à chaque itération et les rapprochent de la validation finale.

5. Prototypage, tests et redésign

L’étape de prototypage consiste à transformer la maquette et le contenu en un modèle interactif et haute fidélité du site web.

Même s’il ne s’agit généralement pas du site final, le prototype montre autant que possible l’apparence et le comportement du site avant la phase de code personnalisé définitif.

Le prototype sert à réaliser des tests utilisateurs et à recueillir des données et du feedback sur l’ergonomie du site à l’aide d’outils comme les cartes de chaleur d’attention et les enquêtes.

Parfois, les tests d’ergonomie conduisent à des redésigns partiels et à des cycles supplémentaires de revue et de test afin de s’assurer que l’expérience utilisateur est la meilleure possible.

Il existe de nombreux outils pour recruter des testeurs d’ergonomie.

Une fois le prototype validé, le design du site est enfin transmis à une équipe de développement web qui programme le site et le prépare pour le lancement. Bien sûr, si vous utilisez un système de gestion de contenu (CMS) doté d’un éditeur visuel avec fonction glisser‑déposer, vous pouvez avoir besoin de très peu de code (voire pas du tout).

6. Lancement du site

Si vous êtes arrivé jusqu’ici, félicitations !

Votre site est prêt à être mis en ligne, ce qui signifie qu’il est temps de faire la fête. Ou de lancer votre campagne de lancement, ou autre chose. Ou les deux ?

Assurément les deux. 

Qu’est‑ce qui peut mal tourner ? Pourquoi un bon retour sur le design web est important

Un retour efficace sur le design d’un site web, ça compte. Vous n’êtes pas convaincu ? Voici à quoi peut ressembler un mauvais processus — donner un retour pourri, ou donner un excellent retour mais de façon catastrophique :

• Votre retour se « perd » et n’est jamais pris en compte
• Votre retour est flou et le designer ne vous comprend pas, ce qui le fait partir dans la mauvaise direction et se tromper complètement
• Il y a alors beaucoup d’allers‑retours 
• Tout le monde est frustré, à travailler jusqu’au bout de la nuit en pleurant 
• Quelqu’un menace de démissionner
• Votre date de lancement est repoussée (avec un coût d’opportunité impossible à chiffrer)

Conseils et bonnes pratiques pour le retour sur le design d’un site web

Suivez ces conseils pour donner un meilleur retour sur le design web.

1. Préparez‑vous bien

Familiarisez‑vous avec les bases du design UI et UX. Lire ce blog est un bon premier pas.

Vous n’avez évidemment pas besoin de devenir un expert du design web, mais comprendre les bases et maîtriser le langage du design web rendra la formulation de vos retours beaucoup plus simple.

Avoir une compréhension de base des principaux principes du design vous aidera à distinguer ce qui constitue, dès le départ, un bon design web. Ces principes de design sont un ensemble de lignes directrices ou de points de vigilance que les designers modernes gardent à l’esprit pour créer des produits à la fois utilisables et esthétiques.

Les lignes directrices de Material Design de Google sont une excellente ressource si vous voulez plonger en profondeur dans ce sujet et découvrir les dernières bonnes pratiques du secteur.

2. Soyez curieux et posez des questions

Intéressez‑vous au point de vue et aux choix du designer pour comprendre pourquoi il ou elle a pris ces décisions. Il y a probablement de bonnes raisons derrière chaque choix de design, même si elles ne vous paraissent pas évidentes au premier abord.

Demandez à votre designer d’expliquer son raisonnement et de discuter des mérites des décisions de design que vous n’adorez pas. Cela devrait vous aider à déterminer si ce qui vous dérange relève d’un goût subjectif ou d’un problème réel qui doit être corrigé.

3. Commencez par regarder le tableau d’ensemble avant d’entrer dans les détails

Avant de commencer à donner un retour détaillé sur chaque ligne, chaque couleur et chaque ombre, prenez du recul et observez le tableau d’ensemble. Il s’agit de la structure et de l’apparence générale, ainsi que de l’ambiance globale. Cela ne sert à rien de corriger les petits détails si le tableau d’ensemble est encore susceptible de changer.

Le contenu spécifique comme les textes et les photos peut être remplacé ultérieurement (et beaucoup sont en fait des espaces réservés à ce stade), commencez donc par vous concentrer sur l’emplacement des mots et des images sur la page et sur la façon dont ils fonctionnent ensemble dans leur globalité.

4. Expliquez le problème, mais ne dictez pas la solution

Faites confiance à l’expertise de votre designer. Expliquez le problème, mais ne lui dites pas comment faire son travail. À moins que vous ne soyez vous‑même un designer web chevronné, il y a de fortes chances que votre designer soit le mieux placé pour décider.

Si vous avez du mal à mettre précisément le doigt sur ce qui ne va pas, décrivez ce que vous ressentez afin de donner au designer une idée de ce qui doit changer. Au bout du compte, le design vise à provoquer une réaction émotionnelle chez l’utilisateur ; si le design ne suscite pas le bon état d’esprit, le designer doit pouvoir ajuster cela en modifiant, par exemple, les polices, les couleurs, les photos ou en ajoutant davantage d’espace blanc.

Si le design ne répond vraiment pas à vos attentes, il peut être utile de donner un retour visuel au designer en lui montrant des exemples de l’effet ou du style que vous aviez en tête. Behance, Awwwards, Dribbble et Pinterest sont d’excellentes sources d’inspiration, et n’oubliez pas d’examiner d’autres sites — dans votre secteur et au‑delà — pour vous faire une idée de ce que vous aimez ou non.

5. Soyez clair, concis et précis

Plus vous exprimerez votre retour de façon claire, plus votre designer sera en mesure de le comprendre et de mettre en œuvre les changements que vous imaginez.

Réfléchissez à ce que vous cherchez à exprimer avec votre retour avant de commencer, afin de rester aussi concis et direct que possible. Évitez les commentaires fleuves dignes d’un essai.

Dans la mesure du possible, donnez votre retour dans le contexte, en l’annotant directement sur l’élément de design auquel vous faites référence. Cela vous permet d’être clair et précis, et d’atteindre un alignement au pixel près.

Beaucoup d’organisations s’appuient encore sur Google Sheets pour gérer les retours, mais cela peut créer un véritable chaos si chaque membre de l’équipe utilise des conventions de nommage ou même des versions de documents différentes. En plus, le retour est très éloigné de son contexte, ce qui complique la clarté et la concision et entraîne de nombreux allers‑retours.

6. Enregistrez votre retour au bon endroit

Utiliser les bons outils rend le fait de donner un bon retour sur le design web bien plus facile.

Pour un designer, il peut être difficile de suivre quel retour concerne quel aspect de quelle partie de quel design, surtout lorsque le retour est fourni dans un support complètement déconnecté du design lui‑même.

Les retours donnés en réunion se perdent facilement dans la traduction. Recevoir des retours via des dizaines (ou des centaines) d’e‑mails, d’appels et de messages Slack exige un gros travail de détective pour recouper les informations. Sans parler du fait que ce va‑et‑vient permanent entre les tâches n’aide pas vraiment à produire un travail créatif profond et concentré.

Pour éviter ces frustrations, rattachez votre retour directement au design afin qu’il soit immédiatement clair de quoi vous parlez. Faites une capture d’écran et ajoutez‑y vos annotations.

De cette façon, tout est regroupé au même endroit et, si quelque chose n’est pas clair, vos collaborateurs peuvent ajouter leurs commentaires ou questions dans le même fil. Voilà ce qu’est un retour contextualisé.

Comment donner un retour sur le design web de manière efficace : utilisez Bubbles

Avec un outil comme Bubbles, vous pouvez faire du processus de retour une expérience bien plus efficace et agréable pour toutes les personnes concernées.

La plupart des outils actuels de revue de design web reposent sur la capture de captures d’écran et l’ajout d’annotations. Même si cela représente un énorme progrès par rapport au fait de donner un retour de design dans Google Sheets, il reste encore beaucoup à désirer, surtout pour les équipes à distance et asynchrones.

Lorsque chaque relecteur fait ses propres captures d’écran et donne son retour de son côté, le designer reçoit souvent le même commentaire plusieurs fois — ou pire, des retours contradictoires sur le même point — et doit ensuite passer son temps à faire des allers‑retours pour mettre tout le monde d’accord. Ce n’est pas une méthode très efficace et cela gaspille beaucoup du temps précieux du designer.

Même les outils de revue de design web spécialisés comme InVision sont très limités en matière de collaboration.

La meilleure façon de donner un retour sur le design web est d’utiliser un outil de feedback sur site web qui combine le potentiel collaboratif d’une réunion en personne avec la commodité de la communication asynchrone, tout en regroupant les retours de tout le monde au même endroit. 

‍

Ci‑dessous, nous avons décrit comment utiliser Bubbles pour rationaliser vos flux de travail de retour sur le design web en quatre étapes simples.

Étape 1 : faites une capture d’écran et annotez votre retour

Pour ce faire, rendez‑vous simplement sur le site de Bubbles et cliquez sur « Get bubbles », ou installez l’extension Chrome gratuite puis cliquez sur l’icône de bulle pour ouvrir une nouvelle bulle. 

L’interface simple de Bubbles permet de démarrer rapidement et facilement.

Ensuite, sélectionnez « Screenshot » et choisissez si vous voulez créer une nouvelle capture d’écran ou sélectionner un fichier à annoter avec Bubbles. Vous pouvez aussi activer l’option « scroll to select the full page » (notez que cette fonctionnalité est actuellement disponible uniquement via l’extension).

Avec Bubbles, vous pouvez capturer des captures d’écran statiques ou faire défiler la page pour capturer des pages entières, puis annoter des retours sur des éléments de design précis.

Et voilà ! Capture d’écran réalisée. Vous pouvez maintenant cliquer n’importe où sur la capture pour créer un point rouge (ou une bulle) et laisser un retour contextualisé qui montre exactement ce que vous voulez dire.

Vous pouvez commenter avec du texte, de la vidéo ou en joignant une image. Ou, si vous voulez partager une référence à quelque chose que vous avez aimé sur un autre site, vous pouvez laisser un commentaire en partageant votre écran.

Bubbles vous permet de donner un retour contextuel de la manière qui vous aide le plus à faire passer votre message clairement.

Étape 2 : partagez votre capture annotée 

Pour partager votre capture avec le designer (et/ou avec le reste de l’équipe pour rassembler leurs retours au même endroit), il vous suffit de partager le lien vers la bulle avec toutes les parties prenantes concernées afin qu’elles puissent la consulter. 

Avec le fil de commentaires et les @mentions, Bubbles fait du retour au pixel près sur le design d’un site web un véritable processus collaboratif.

Étape 3 : les autres relecteurs ajoutent leur retour

Chaque relecteur accède à la bulle en cliquant sur le lien (il n’a même pas besoin de créer un compte au préalable !) et donne son avis en annotant ses commentaires directement sur la capture d’écran.

Les autres relecteurs peuvent ajouter leurs propres retours sur la même capture, interagir avec les vôtres en cliquant sur les points, ou parcourir et cliquer vos annotations pour voir à quel point correspond chaque commentaire.

Cela permet aux équipes projet d’avoir des discussions asynchrones et de résoudre les problèmes dans leur contexte, où qu’elles se trouvent et quel que soit leur fuseau horaire.

Étape 4 : le designer répond aux retours et traite les actions à mener

Le designer peut consulter tous les retours au même endroit et répondre aux commentaires et aux questions. Une fois le consensus atteint sur les points sensibles, il ou elle peut appliquer les modifications au design.

Il ou elle peut aussi basculer entre les commentaires « Active » et « Resolved », les marquer comme résolus au fur et à mesure, ou @mentionner des collaborateurs pour demander des précisions.

Grâce à l’outil gratuit d’enregistrement d’écran de Bubbles, le designer peut aussi faciliter une revue de design du site. 

L’outil de retour sur le design qui les remplace tous

Bubbles est un outil indispensable pour un retour collaboratif, contextualisé et bidirectionnel.

Que vous travailliez dans un bureau ou au sein d’une équipe distante répartie sur plusieurs zones géographiques, le travail asynchrone est préférable pour limiter les interruptions et accomplir un travail approfondi et concentré — et Bubbles est l’outil de collaboration asynchrone dont vous ne soupçonniez même pas l’absence.

Dans ce GIF, vous pouvez voir Bubbles utilisé pour mener une revue de design de site web. Remarquez les petites icônes de bulle sur la barre de lecture qui signalent les commentaires annotés. 

Fini les silos d’information, les retours en double et les fiascos de gestion des versions de documents.

Fini les réunions où la moitié des véritables décideurs ne peuvent pas être présents. 

Fini de se demander « De quoi diable parlent‑ils ? »

Fini les retours bâclés et mal réfléchis.

Rien que de la vraie collaboration créative.

Inscrivez‑vous à Bubbles en quelques secondes et commencez à donner à votre équipe des retours sur le design web plus efficaces et plus pertinents.

‍