Si vous êtes déjà versé dans le vocabulaire de l’UX design, vous aurez une idée approximative de ce qu’est un wireframe et de son utilité. La question suivante est de savoir comment s’y prendre pour en créer un. Alors, comment faire un wireframe ? Découvrons-le.
Une introduction au wireframing
1. Qu’est-ce qu’un wireframe ?
Le wireframing est une pratique utilisée par les concepteurs du secteur des technologies de l’information qui leur permet de définir et de planifier la hiérarchie de l’information de leur conception pour un site Web, une appli ou un produit. Ce processus se concentre sur la façon dont le concepteur ou le client souhaite que l’utilisateur traite l’information sur un site, sur la base de la recherche utilisateur déjà effectuée par l’équipe de conception UX.
Lorsque vous concevez pour l’écran, vous devez savoir où toutes les informations vont aller dans des diagrammes en noir et blanc unis avant de construire quoi que ce soit avec du code– que ce soit un développeur qui le code, ou vous le concepteur. Le wireframing est également un excellent moyen de savoir comment un utilisateur interagit avec votre interface, à travers le positionnement des boutons et des menus sur les diagrammes.
Sans les distractions des couleurs, des choix de caractères ou du texte, le wireframing vous permet de planifier la disposition et l’interaction de votre interface. Un argument couramment utilisé pour le wireframing est que si un utilisateur ne sait pas où aller sur un simple diagramme dessiné à la main de la page de votre site, alors peu importe les couleurs ou le texte fantaisiste éventuellement utilisés. Un bouton ou un appel à l’action doit être clair pour l’utilisateur même s’il n’est pas de couleur vive et clignotant.
4 étapes pour faire un wireframe
1. Faites vos recherches
Rappelez-vous : La conception universelle est un processus, et le wireframing n’est pas la première étape de ce processus. Avant même de penser à prendre un stylo et du papier, vous devez avoir couvert les deux premières étapes ; à savoir comprendre qui est votre public au moyen d’une recherche sur les utilisateurs, détailler les exigences, créer des personas d’utilisateurs et définir des cas d’utilisation, et compléter cela avec d’autres recherches sur les concurrents et l’industrie. Cela signifie effectuer une analyse des lignes de produits similaires à la vôtre, creuser les tendances UX dominantes du webdesign et les meilleures pratiques, et, bien sûr, revoir vos propres directives de conception internes.
Et si vous concevez une nouvelle fonctionnalité, n’ayez pas peur de faire des recherches en dehors de votre domaine. Introduire le suivi et la visualisation des données dans le cadre du service de votre entreprise de logistique ? Peut-être cela vaut-il la peine de vérifier certaines applications de fitness ou de nutrition sur Dribbble ou Behance pour trouver quelques idées. La créativité se libère souvent au point où les domaines d’expertise se croisent, après tout.
2. Préparez vos recherches pour une référence rapide
Vous pouvez imaginer la quantité de données quantitatives et qualitatives que ces différentes phases vont produire. Eh bien, c’est ce que vous devez garder à l’esprit en dessinant vos wireframes. Si vous êtes un simple mortel, vous risquez d’avoir du mal à la fois à retenir et à vous souvenir de tout cela, je vous recommande donc de griffonner une antisèche avec vos objectifs commerciaux et d’utilisateur (vos exigences), vos personnages, vos cas d’utilisation, et peut-être quelques rappels des fonctionnalités les plus cool sur lesquelles vous êtes tombé lors de vos recherches sur la concurrence. Quelques citations choisies de votre public pourraient également aider à concentrer votre attention sur l’expérience de l’utilisateur, qui est–ne jamais oublier– ce que vous concevez !
3. Assurez-vous d’avoir votre flux d’utilisateurs cartographié
Votre wireframing va devenir très désordonné très rapidement si vous n’avez pas une idée du nombre d’écrans que vous devrez produire et du flux que vous attendez de l’utilisateur. Il est important d’avoir une idée précise de l’origine de vos utilisateurs (quel canal marketing, par exemple, et sur la base de quel message) et de leur destination finale. Si vous êtes déjà bien familiarisé avec le vocabulaire UX, votre voix interne criera alternativement « flux d’utilisateurs » et « architecture de l’information ».
Une bonne architecture de l’information garantira l’autonomie de vos utilisateurs (moins de messages à votre service client demandant comment faire quelque chose de douloureusement simple), des niveaux de frustration des utilisateurs plus faibles (et finalement plus de satisfaction et de confiance), et donc des taux d’abandon ou de décrochage plus faibles. Ce qui signifie probablement plus de revenus, et probablement des managers heureux– et un travail bien fait.
4. Esquissez, ne dessinez pas. Esquissez, n’illustrez pas
Ok, maintenant nous sommes à l’étape 4 et vous pouvez enfin commencer à mettre un stylo sur le papier. Désolé que cela ait pris autant de temps, mais les étapes précédentes étaient cruciales : le vieil adage selon lequel il faut regarder avant de sauter est 100% pertinent pour l’UX.
En tout cas, mettons des fils sur votre cadre. Rappelez-vous : vous esquissez et représentez des fonctionnalités et des formats, et non pas vous illustrez dans de puissants détails. Il n’y a rien de pire qu’une feuille blanche, vous devez donc commencer à noter vos idées pronto– c’est l’impératif de la troisième étape. Ne pensez pas à l’esthétique, ne pensez pas aux couleurs–le concepteur de l’interface utilisateur peut s’en occuper. Et si vous êtes le seul designer de votre startup naissante… eh bien, faites-le plus tard.
Un bon stylo marqueur épais (un Sharpie, comme disent nos amis américains) est un outil pratique pour cette étape du wireframing. Pourquoi ? Parce qu’il vous évite de vous noyer dans les détails. Vous vous concentrerez sur la délimitation des blocs fonctionnels qui forment le squelette de votre conception.