Wireframes 101: Guide du débutant

Par Meghna Hazarani, analyste UX chez Red Blue Blur Ideas (RBBi)

Comprenez les bases et le processus de câblage en fil de fer et apprenez-en davantage sur l'importance d'un bon fil de fer pour une expérience utilisateur transparente.

Avant de commencer à me promener sur un sujet dont beaucoup ne sont peut-être pas au courant, prenez du recul et dites-moi: combien de sites Web avez-vous visités avant de publier cet article? Vous venez de vérifier les mises à jour sur Facebook? Avez-vous visionné des vidéos amusantes sur les chats sur YouTube alors que vous êtes censé travailler? Supposons maintenant que Facebook n’a pas de fil d’accueil et que vous deviez cliquer manuellement sur le nom de tous vos amis pour voir leurs mises à jour. Ou bien, la vidéo YouTube que vous regardez ne montre aucune suggestion de vidéos similaires. Vous devez donc parcourir toutes les pages des résultats de la recherche, en espérant que l’une des vignettes contienne une vidéo de chat similaire. Cela semble fastidieux hein? Ne vous inquiétez pas, les super-héros numériques sont là pour vous sauver de ce destin. Je fais référence aux professionnels UX (User Experience): des personnes qui suivent un processus spécifique pour créer des sites Web conviviaux. Si je devais expliquer en termes simples, ces professionnels de l'UX suivent le processus de conception de l'UX pour assurer la performance optimale d'un site Web en étant convivial, intuitif et utile, tout en améliorant les conversions ou en fidélisant davantage les clients. En bref, il devrait être «facile à utiliser». Le processus de conception UX comprend plusieurs phases, mais pour cet article, je vais me concentrer sur une seule de ces phases, à savoir la configuration en mode filaire.

Alors, quel est un fil de fer?

Une structure filaire peut être définie comme «une image ou un ensemble d’images affichant les éléments fonctionnels d’un site Web ou d’une page, généralement utilisé pour planifier la structure et les fonctionnalités d’un site» - Oxford Dictionary

Pour le dire simplement, une structure filaire fonctionne comme un plan et montre comment la structure d’un site Web est dictée: quel contenu est placé, où il est placé et comment l’utilisateur interagira avec la page. Créés en près de cinquante nuances de gris, les structures filaires pour sites Web sont conçues à partir de toutes les informations recueillies au cours de la phase de recherche et de découverte. La structure filaire peut être une simple esquisse ou une structure haute fidélité, mais doit respecter certaines consignes pour garantir leur convivialité, telle que Heurability Facilities for User Interface de Nielson. Soutenues par des données réelles et créées spécifiquement en gardant à l'esprit l'utilisateur, ces images en gris et blanc peuvent créer ou briser le produit finalisé. Voici le processus de réflexion derrière la création de ces images squelettiques que nous appelons des structures filaires.

1. Décider des modules de contenu et de la hiérarchie

Tout d'abord, nous créons les modules de contenu, qui constituent une liste d'informations et les fonctionnalités que le filaire doit inclure. Les informations contenues dans le module de contenu dépendent de la nature de la page, de son objectif principal et incluent également des informations cruciales acquises au cours de la phase de recherche. Nous examinons simultanément la hiérarchie du contenu: déterminer quelle information est primaire ou secondaire. Cela implique essentiellement de s’assurer que le contenu le plus important est d’emblée pour l’utilisateur. Mais avant de nous lancer dans la création de modules de contenu bénéficiant de l’expérience UX, il est toujours utile d’enlever le chapeau à UX et d’être simplement un utilisateur. Bien que, certains experts puissent ne pas être d'accord avec un commentaire - j'aime bien incorporer une expérience personnelle dans le processus. Par exemple, imaginons que nous créons une structure en fil d’accueil pour un site Web de compagnie aérienne. Je pense à mon expérience personnelle - par exemple, "réserver un billet". Comme beaucoup, j’ai déjà visité des sites Web de compagnies aériennes. Quelles sont les fonctionnalités qui me facilitent la tâche? Quel contenu a attiré mon attention? Qu'est-ce qui m'a fait décider de réserver sur ce site, ou pas si c'est le cas? Notez «tout» en bas - toute information est une bonne information. En gardant à l’esprit ces informations personnelles, il est temps de remettre le chapeau de l’expérience utilisateur et d’intégrer toutes les informations que vous avez apprises pendant la phase de découverte.

2. Incorporer la recherche dans les modules de contenu

Supposons que nous avons établi que le but principal de la page d’accueil est la conversion de réservation - un widget de réservation bien en vue est donc indispensable. Notre étude des groupes de discussion a révélé que les utilisateurs souhaitaient connaître dès le départ les offres de vol (n'oubliez pas qu'il est extrêmement important d'impliquer l'utilisateur dès le début, que ce soit par le biais de groupes de discussion ou d'entretiens individuels). Les personas et les parcours utilisateurs que nous avons créés sur la base de nos recherches nous ont également aidés à comprendre les besoins des utilisateurs et à créer un flux allant du point d’interaction à la réalisation. Notre recherche a également indiqué le comportement des utilisateurs et les attentes en termes de contenu que le public cible rechercherait et comment ils le découvriraient. Par exemple, un utilisateur de la classe affaires voudrait voir les tarifs de la classe affaires à l’avant, tandis que le voyageur avec une famille voudra peut-être voir les destinations à l’avant. En guise de validation supplémentaire, l’analyse de référence a également montré que de nombreux sites Web de compagnies aériennes avaient généralement leur widget de réservation au-dessus du pli de la page. Ainsi, en combinant toutes vos informations, vous créez le module de contenu de formule gagnant pour la page.

3. Tendances, étiquettes et interactions de la recherche.

Il est maintenant temps de voir comment toutes ces informations peuvent être traduites en une structure visuelle? C’est là que l’analyse de référence est également utile - comment les sites Web de référence ont-ils affiché leurs informations sur la page d’accueil? La plupart des sites Web ont-ils utilisé la même structure? Par exemple, un en-tête de navigation collant - il y a une raison pour laquelle les gens ont opté pour les menus collants et que d'autres ont suivi - cela fonctionne. De la même manière, vous pouvez rechercher des inspirations de tendance: comment les autres sites Web ont-ils représenté leur contenu - et que vous n'êtes pas limité aux sites Web du même secteur, l'inspiration peut provenir de plusieurs sources. Vos tendances identifiées peuvent également être fusionnées, par exemple, si un site Web affiche des offres de vols sous forme de vignettes avec des informations de base, tandis qu'un autre site Web affiche les offres avec des informations plus complètes. Y a-t-il un moyen de les fusionner pour une combinaison gagnante?

Semblable aux tendances - les étiquettes et les interactions peuvent être recherchées. Quelles étiquettes ont été utilisées pour séparer les différentes sections. Quelle langue est utilisée? Est-ce conversationnel ou droit au but? Par exemple, alors qu'un site Web dirait «Dernières offres de vols», l'autre aura le label «Offres pour vous». Qu'est-ce qui a plus de sens en gardant à l'esprit la région et les utilisateurs potentiels? De plus, quelles sont les interactions utilisées - survol, cartes glissantes, menus déroulants? L'introduction d'interactions menant à la découverte de contenu, ainsi que la validation et l'achèvement de tâches peuvent aider à maintenir l'engagement de l'utilisateur et, ultimement, à transformer une piste en conversion.

4. Faites un croquis, un croquis et un croquis avant d'utiliser «Esquisse»

Il est temps de prendre un crayon et de libérer votre artiste intérieur. Je connais le sentiment tentant de passer directement à un programme numérique, mais restez fort, vous perdrez probablement du temps autrement. C’est un sentiment formidable que de transformer une esquisse épouvantable de deux minutes en art numérique. Mais la résistance et la persistance sont les clés. Votre esquisse n’a pas besoin d’être parfaite, il s’agit de bien comprendre le concept de base et d’y penser: modifiez-le rapidement, modifiez-le en cours de route et obtenez des contributions collaboratives pour vous assurer que votre interface est correcte. Le raffinement et le perfectionnement peuvent se produire lorsque vous finalisez votre structure filaire dans un programme numérique. De plus, les itérations collaboratives en mode croquis aident à réduire les modifications lors de la conversion en une image filaire haute fidélité et à l'étape de conception suivante.

5. Testez vos wireframes

Testez-le auprès d'utilisateurs réels, que ce soit pendant le processus d'esquisse au moyen de prototypes en papier ou lors de la conversion en structures filaires de clic haute fidélité. Il est tout aussi important d’impliquer l’utilisateur avant de commencer le fil de fer par le biais de groupes de discussion ou d’entrevues individuelles. Il est tout aussi important de faire de même avant de finaliser le fil de fer. Il n’est pas nécessaire que ce soit une session de test utilisateur appropriée - saisissez votre famille ou vos amis - testez-les avec eux. Bien sûr, assurez-vous qu’ils sont l’utilisateur idéal. Ne vous contentez pas de saisir votre neveu de cinq ans et de lui demander de réserver un vol. Idéalement, chaque fil de fer devrait être minutieusement testé pour voir quelles améliorations devraient être apportées.

6. Gardez-le cohérent

Toutes vos structures filaires doivent être cohérentes en ce qui concerne les modules utilisés, la conception de l’appel à l’action (CTA) et les libellés: la cohérence est essentielle pour vous assurer de ne pas trop laisser penser à l’utilisateur lorsqu’il s’acquitte de sa tâche. Par exemple, supposons qu'un CTA tel que Book Now soit affiché sous forme de bouton sur une page, tandis que sur une autre, il est affiché sous forme de lien texte. C’est déroutant pour l’utilisateur. Aux yeux de l'utilisateur, Book Now a été associé à une certaine représentation visuelle. L’objectif est de faire en sorte que l’utilisateur n’hésite pas lorsqu’il voit l’OTC. La cohérence entre ces éléments traduit également l'attention portée aux détails, la qualité et contribue à instaurer la confiance lorsqu'elle est traduite en réalité.

7. Faites un mini-audit

Une fois que vos structures sont terminées, vérifiez vous-même votre santé mentale. Retournez aux dix heuristiques et testez votre structure filaire. Faites un mini-audit, il n’a pas besoin d’être détaillé; vous corrigez essentiellement les petites choses qui ont été négligées. Mieux encore, donnez les structures filaires à un coéquipier. En tant qu’experts UX, nous devons nous assurer que certaines choses sont contenues dans nos structures finales. Cependant, nous devenons tous des artistes quand il s’agit de notre travail. Il est difficile de trouver la faute si vous avez travaillé sans relâche à quelque chose. En montrant votre travail à quelqu'un d'autre, il sera en mesure de vous fournir une critique impartiale et aurait des commentaires supplémentaires que vous pourrez incorporer avant le résultat final.

Le wireframing est vraiment un aspect intégral du processus UX. Que vous vous mettiez à la place des utilisateurs ou que vous utilisiez votre connaissance de l'expérience utilisateur, vous vous assurez que la fusion des deux mondes se traduira par quelque chose qui fonctionnera non seulement, mais dont on se souviendra également. Le processus vous permet non seulement de vous assurer que les clients et l'équipe sont sur la même page, mais il vous permet également de le tester avec le public cible avant de plonger profondément dans la conception visuelle. La fonctionnalité, l'interaction et la hiérarchie du contenu sont tous des éléments filaires importants qui doivent être déterminés dès le début. Wireframing vous laisse le temps de négliger l'esthétique visuelle et le jargon, et se concentre sur la création d'un plan directeur de site Web axé sur la convivialité. Alors allez-y et commencez à utiliser des wireframing!