Business : Pourquoi en tant que chef de produit, vous avez besoin de filaire

Les wireframes sont un guide visuel de faible fidélité de ce à quoi un écran d’application ou une page Web va ressembler, et ils sont utilisés dans les phases d’idée et de test d’un travail afin de savoir à quoi quelque chose pourrait ressembler ou interagir. Ils sont un excellent outil pour faire passer vos pensées de manière simple.

L’idée est que, comme ils sont bas-fi, ils sont faciles à changer au fur et à mesure que les discussions progressent, et ils permettent aux gens de revoir les écrans sans se laisser entraîner par des éléments de «conception» comme les couleurs, les polices ou le style.

Dans le passé, les conceptions filaires ont généralement été créées par les concepteurs dans un premier temps pour rédiger leur mémoire de conception, mais je pense qu’il existe un argument selon lequel quiconque devrait réfléchir à ce qu’un produit ou une fonctionnalité devrait offrir, avant cela arrive même à un designer.

L’intention d’une structure filaire est de descendre sur papier / de surveiller les éléments qui seront présents sur l’écran final, et cela vous permet de montrer les parcours et les actions de l’utilisateur, c’est-à-dire ce que votre utilisateur veut réaliser.

L’acte physique de créer un filaire vous oblige à réfléchir à une multitude de facteurs que vous ne pourriez pas faire si vous deviez simplement rédiger les exigences.

De quel contenu avons-nous besoin?

Quelles informations vont réellement apparaître sur la page?

Si vous affichez un tableau de données, quelles sont les colonnes réelles qui vont être affichées? Cela vous amène ensuite à la réflexion sur le format de ces données? Les données sont-elles longues ou courtes et comment cela affectera-t-il la mise en page? Aurons-nous accès à ces données ou avez-vous besoin d’écrire une autre exigence pour obtenir ces données?

Si vous affichez un formulaire de saisie, de quels champs de saisie avez-vous vraiment besoin? Cela vous conduit ensuite à la réflexion sur ce qui se passe si ces données ne sont pas saisies correctement? De quelle validation ai-je besoin sur le champ de saisie? La validation a-t-elle lieu à l’entrée ou à la soumission? Qu’advient-il des données si la soumission échoue?

Vous pouvez également commencer à remettre en question la relation entre le contenu, comme l’importance relative ou la fréquence de mise à jour, si le contenu est susceptible de changer à l’avenir et, dans l’affirmative, que pourriez-vous devoir ajouter à l’écran à l’avenir qui pourrait être considéré maintenant . Ce ne sont que quelques exemples.

Comment les utilisateurs interagiront-ils avec la page?

Plusieurs fois, j’ai commencé à travailler sur un filaire et je me suis rendu compte que «Ah! Pour faire l’action X, je vais avoir besoin d’un bouton Y « , ce que je n’ai pas pris en compte lors de l’écriture de mon user story. Cela signifie que je dois maintenant ajuster mon filaire et écrire une nouvelle histoire pour l’action qui se produira lorsque je clique sur le bouton.

Une fois que vous commencez à voir le contour de l’écran sur la page, vous commencez à considérer le nombre d’interactions possibles, qui auront toutes un impact sur les histoires que vous écrivez et le travail que l’équipe devra faire. Le tableau de données sera-t-il consultable? Sera-t-il triable? Avez-vous besoin de pagination si vous dépassez un certain nombre de résultats? Comment les utilisateurs trouveront-ils plus d’informations? Comment va ensuite effectuer les actions principales et secondaires et que se passe-t-il lorsqu’elles le font?

Parfois, le simple fait de voir la mise en page de la page entraînera une série de réflexions qui vous amèneront à revenir auprès de votre public pour en savoir plus, ou du moins vous inciter à écrire avec plus de clarté ce qui doit être livré.

Comment les différents contenus sont-ils liés les uns aux autres?

En ce qui concerne le contenu, une fois que vous commencez à dessiner le filaire, vous commencez à considérer les différents éléments de la page à côté de chacun et à évaluer leur importance les uns à côté des autres.

Vous commencerez à considérer les actions principales et secondaires, ou les informations primaires et secondaires, et une hiérarchie de contenu commencera à apparaître.

Si vous deviez attendre la phase de conception pour commencer à afficher cette hiérarchie, vous pourriez ralentir le processus avec des remaniements et engager des coûts supplémentaires dans le processus.

En plus d’obtenir un travail de meilleure qualité de votre part, il y a d’énormes avantages à traiter bon nombre des questions ci-dessus au stade de la filaire.

Le National Institute of Standard Technology (NIST) a publié une étude en 2002 notant que le coût de la correction d’un bogue détecté au stade de la production de logiciels est de 15 heures, contre cinq heures d’effort si le même bogue était détecté au stade du codage, ce qui pour les besoins de cette discussion, nous pouvons remplacer «bug» par «change».

Si nous identifions le changement tôt, nous éviterons des erreurs très coûteuses en prenant un peu plus de temps au stade des exigences.

La réponse courte est «non», vous n’avez pas besoin de logiciel pour les créer, car vous pouvez simplement les esquisser avec un crayon et du papier et ils feront le même travail, mais vous pourriez trouver cela un peu fastidieux après un certain temps .

La réponse un peu plus longue est que « oui, il est certainement utile d’avoir des logiciels qui peuvent vous aider à créer des wireframes », et il y en a pas mal.

J’ai utilisé ce qui suit:

• Balsamiq – Mon outil de wireframing de choix, car il est très simple à utiliser, n’a pas trop de fonctionnalités et vous permet donc de vous concentrer sur les bases. Après tout, vous recherchez une approche low-fi. Ils fournissent un essai gratuit de 30 jours pour que vous puissiez le tester, il n’a pas besoin de formation et vous pouvez exporter vos fichiers lorsque vous avez terminé.
• Mockflow – Une application simple pour faire glisser et déposer des éléments de page, mais l’expérience utilisateur générale n’était pas très intuitive et avec une limite sur le nombre de pages que vous pouvez avoir dans l’essai gratuit (3) signifiait que je ne voulais pas utiliser ce long terme.
• Wireframe.cc – Celui qui est peut-être plus adapté à la communauté des concepteurs, wireframe.cc permet un placement très précis de quelques éléments génériques qui peuvent donner une bonne sortie, mais cela ne semble pas être un moyen rapide de simuler quelque chose que vous allez puis ajustez un certain nombre de fois.
• Draw.io – Plus un outil de diagramme de flux celui-ci, mais finalement, si votre application ou votre page Web est carrée et assez standard, elle fait un travail OK. Une fois que vous voulez que vos wireframes ressemblent un peu plus à une application et moins à une diapositive Powerpoint, vous serez déçu par Draw.io.

Si nous devons réfléchir à la façon dont nous voulons qu’un produit ou une fonctionnalité fonctionne et transmettre cette idée à quelqu’un d’autre, nous ne devrions pas avoir peur de nous salir les mains et de simuler ce que nous pensons devoir se produire sur la page, si pour aucune autre raison que cela nous aide à former nos pensées et nous incite à poser plus de questions sur ce que nous espérons accomplir et ce que nous devons considérer pour y parvenir.

Si vous souhaitez recevoir davantage de contenu axé sur la gestion des produits comme celui-ci, abonnez-vous à ma newsletter ci-dessous pour le recevoir directement dans votre boîte de réception.

Rob était un joueur de football professionnel et un directeur de cinéma, avant de se lancer dans le développement de logiciels il y a plus de 20 ans. Il était membre fondateur d’une start-up FinTech et est maintenant propriétaire du produit chez le détaillant de montres de luxe Watchfinder.