Il était une fois... Un site internet réussi, qui reflétait parfaitement ton identité de marque.
Et si ce n'était pas juste UNE histoire, mais TON histoire ? Mais avant d'en arriver là, avant de passer du rêve à la réalité, il faut écrire quelques chapitres.
Laisse-moi te conter les étapes indispensables du processus de création du design d'un site internet qui attire les visiteurs (et les garde). Le travail de maquettage fourni par l'UX designer n'aura bientôt plus de secrets pour toi !
Vous l’avez sûrement remarqué, le monde du web marketing est rempli d’anglicismes. Le thème du jour ne fait pas exception. L’UX design désigne (sans mauvais jeu de mots) l’Expérience Utilisateur, ou User eXperience. Autrement dit, c’est ce tout ce qui contribue à offrir à un utilisateur d’un produit, d'un service, ou d'une interface, une expérience agréable, fluide, et efficace.
Concrètement, c’est ce qui fait que toi, internaute qui visite mon site, bénéficie d’une expérience de navigation agréable (n’est-ce pas ?) grâce aux choix que j’ai faits en matière de web design pour que visuellement tu n’aies aucun effort à faire. Tu commences à comprendre l’enjeu pour un site internet que ce travail soit bien réalisé ?
Évidemment, il y a une méthodologie à suivre pour mener à bien le processus de création qui va nous guider jusqu’à la version finale du site. Voyons ensemble les étapes clés de ce maquettage bien particulier.
Avant de se précipiter sur le choix des couleurs ou de la police de ton site, car “Tout vient à point à qui sait attendre”, disait Jean de La Fontaine. Un peu comme un enquêteur, il faut d’abord regrouper un maximum d’indices pour mener à bien ton enquête, euh, ton projet.
Quelle est, ou quelles sont les cibles du site internet ? Quels sont leurs besoins ? Que recherchent-ils en allant sur le site de l’entreprise X ou l’association Y ? Place au brainstorming !
Maintenant, tu connais tes besoins, enfin ceux de ta cible, pour ton site. Mais ça ne suffit pas. Sois un peu curieux et prends le temps de faire une analyse concurrentielle. Si tu veux te démarquer dans ce monde de brutes, il faut comprendre ce qui marche chez les autres. Non pas pour copier, mais pour s'inspirer des codes, comparer, et arbitrer.
Je sais, c'est du boulot. Mais tu veux un site qui déchire, grâce à une super interaction avec les utilisateurs ? Alors ne passe pas à côté de cette étape. Elle permet de déterminer les fonctionnalités nécessaires au futur site pour créer un parcours utilisateur ergonomique et percutant. Sans analyse des besoins, impossible de créer une arborescence pratique qui guide et chouchoute le visiteur.
Ce mot barbare est tout simplement une sorte de brouillon du site, qui sert de point de départ à tout le reste. Un peu comme quand tu faisais celui de tes dissertations, à l'école, tu vois ? Pour savoir quelle partie tu allais mettre en premier, puis celles d'après... C'est la charrue avant de mettre les bœufs. On structure le site, avant même de le créer.
On peut créer son wireframe à la main, en dessinant les blocs où tu vas faire apparaître les différents éléments de textes, les informations, les boutons, etc... On appelle ça le zoning. Il s’appuie sur les éléments concrets que l’on a définis précédemment.
Il existe aussi la version digitalisée, selon les préférences, avec des outils comme Adobe XD, InVision, ou Sketch. Moi, je préfère travailler avec Figma, un logiciel en ligne assez complet pour créer toutes les étapes de mes maquettes UX.
Une fois cette étape réalisée, je valide l'architecture de son site avec mon client pour pouvoir passer à la suite.
Là, on commence à ajouter des éléments d'identité visuelle : couleurs, typographies, images. Pas au hasard, malheureux ! Je m'appuie sur la charte graphique qui a été élaborée en amont. Elle me sert de trame pour respecter l'univers de mon client. Et si on a réalisé un brand board,ce qui est souvent très pratique, c'est un élément de plus qui m'inspire.
C'est souvent une étape très attendue et appréciée puisque, même si le site est encore statique, les éléments graphiques concrétisent le projet qui semble toujours un peu abstrait à l'étape des wireframes.
Là encore, il y a plusieurs possibilités, selon les préférences. On retrouve Sketch, Adobe XD, et bien sûr Figma, mon préféré !
À toi de choisir le bon outil de maquettage en fonction de tes besoins : logiciel bureau ou en ligne, versions gratuites ou payantes, ou fonctionnalités plus développées pour certaines étapes du process...
Je te vois trépigner, et je te comprends ! La création du prototype permet d'ajouter une dimension interactive à notre maquette. On touche vraiment au but car on se rend compte "grandeur nature" de la façon dont les internautes vont pouvoir utiliser le site et ses fonctionnalités.
C'est une étape qui permet de valider l'UI (ou Interface Utilisateur) et l'UX dans son ensemble. Un peu comme la projection 3D réalisée par un architecte, qui permet à son client de se projeter complètement dans son futur appartement.
Parmi les différentes solutions numériques pour le prototypage, on retrouve InVision, Marvel, ou Balsamiq. Comme tu l'auras sûrement compris, mon coeur ne balance pas puisqu'il a choisi Figma, pour son approche complète et son niveau de fidélité assez élevé. Immersion dans ton futur site garantie !
Parce que c'est là tout l'intérêt de cette dernière phase. Te plonger dans la peau de tes visiteurs, les imaginer en train de découvrir ton environnement, tester les fonctionnalités du site, et t'assurer que l'ergonomie imaginée répond à tous les besoins identifiés au préalable.
Enfin, avant de crier victoire, même si tu en es tout proche, il reste une phase incontournable. Le test, grandeur nature. Oui parce que tes yeux et les miens sont bien au fait du rendu souhaité, mais les futurs clients, les utilisateurs du site, restent les juges de paix. Ils sont, eux aussi, parties prenantes dans le projet. Alors pour prendre du recul sur le travail accompli, rien de plus efficace que de mettre le prototype choisi en situation.
Je te conseille donc de mettre en place des méthodes comme les tests de convivialité, plutôt qualitatifs, ou l'A/B testing, disons plus quantitatifs. Tu vas pouvoir recueillir les impressions et t'en servir pour peaufiner l'interface, jusqu'à en valider la version finale.
Les données récupérées peuvent te permettre de vérifier que tout fonctionne comme pensé au départ en matière d'ergonomie web, et si une version est mieux accueillie qu'une autre (en cas d'A/B test). Une vraie mise à l'épreuve, en somme, avant le saut dans le grand bain. Mieux vaut s'assurer qu'il ne persiste pas de problèmes d'usabilité à cette étape, non ?
Une fois que tu as apporté les améliorations basées sur les feedbacks obtenus, c'est la dernière ligne droite. Il est temps de franchir la ligne d'arrivée avec l’intégration de cette fameuse maquette ! Pour ça, je collabore avec des développeurs de confiance. Et sous les yeux ébahis du client, le site internet prend vie !
Serrage de mains, sourires radieux, verre levé (même en visio, c'est possible), la collaboration touche à sa fin. Enfin, presque. Quand on lance un projet, même bien ficelé, il peut y avoir des noeuds à resserrer, si tu vois ce que je veux dire.
Alors on reste en contact, et on surveiller les performances du site pour s'assurer qu'il est fonctionnel dans le temps, histoire de ne pas se reposer sur nos lauriers. Maquette UX au top ou pas, hors de question de faire les choses à moitié ! Ni même aux trois quarts.
Le design UX est donc un vrai enjeu lors de la construction d'un site internet. Non, les interfaces super agréables sur lesquelles tu surfes n'ont pas été conçues par hasard. Elles sont le fruit d'un travail en étroite collaboration entre l'UI designer et son client.
Créer des maquettes de site grâce à des compétences solides en design d'interfaces est une réelle aventure. Elle comprend des étapes aussi passionnantes que complexes. Mais c'est le prix pour créer un parcours utilisateur intuitif incomparable. La qualité du maquettage et prototypage sont garantes d'un site web efficace, et donc d'un investissement rentabilisé.
Tu as un projet de création ou refonte de ton site ? Si tu es prêt à embarquer pour le chouette voyage vers les différentes phases de conception de ton site, j'ai déjà enfilé ma casquette de capitaine du bateau ! On travaille ensemble ?
La newsletter qui explore comment l’image de marque aide à communiquer efficacement la mission des entreprises.
