Business : Comment faire un wireframe, et c’est quoi ce bordel?

Éléments essentiels de la gestion des produits

L’objectif est que toutes les personnes impliquées dans le projet soient sur la même page.

Peut-être que vous demandez: « Câble quoi? ». Si vous êtes vide et les yeux écarquillés, je vais vous dire ce que c’est.

Un filaire est une étape préalable indispensable avant de commencer la conception d’un site web ou d’une application. Il consiste à créer un croquis de la structure de votre page / application simplement mais en précisant comment nous allons organiser les informations.

Faire cette approche préalable de la page sans avoir commencé à concevoir nous permettra d’être plus rapides dans le développement du design et éviterons que nous finissions par diffuser les informations à l’aveugle.

The objective is that all those involved in the project are on the same page. This not only involves product designers or programmers but the entire team.

Si nous regardons les entreprises qui préfèrent une méthodologie de développement agile, nous pouvons noter que les schémas Web sont mis en œuvre à un stade précoce de développement et de conception. Et oui, même un simple brouillon papier est considéré comme un filaire, mais nous en discuterons plus loin dans cet article.

Esquisse, filaire et maquette

D’accord, mais attendez, le filaire et la maquette ne sont pas les mêmes? Faux.

La source: mobiledev.biz

Le wireframe consiste principalement à tout faire fonctionner. Comme le montre l’image ci-dessus, sa fidélité varie de moyenne à faible.

Dans le cas d’une application ou d’un site Web, disons, par exemple, dans la navigation, la disposition des boutons, des cases et d’autres éléments tandis qu’un prototype est plus proche d’un résultat possible. Parfois, la modification de détails que vous auriez autrement ignorés, comme le repositionnement des CTA (appel à l’action), peut faire une grande différence dans vos conversions. Comprendre comment les utilisateurs interagissent avec votre site Web peut vous aider à trouver l’endroit parfait pour votre CTA.

Le but est de jeter un œil au produit final. Vous pouvez utiliser un logiciel graphique ou plonger dans le code. Cela dépend de toi. Si ce que vous essayez de faire est de montrer le résultat final dans toute sa splendeur avec autant de détails que possible, alors ce que vous faites est un prototype. En allant un peu plus loin et en tenant compte des fonctionnalités, nous parlerions alors de prototypage, mais c’est une autre question. Si vous le souhaitez, vous pouvez en savoir plus sur les différences ici.

Qui utilise les wireframes?

Répondez simplement, toute personne impliquée dans le produit – à tous les niveaux,

Même si les concepteurs, les développeurs et les chefs de produit développent généralement en utilisant des wireframes généralement dans leur travail quotidien, ils ne sont pas les seuls à pouvoir les utiliser. Beaucoup plus de gens peuvent bénéficier de Wireframes. Il s’agit notamment des analystes commerciaux, des architectes de l’information, des concepteurs d’interaction, des concepteurs de l’expérience utilisateur, des graphistes, des programmeurs et des chefs de produit.

Pourquoi utiliser des wireframes?

Les wireframes sont les plans du design.

En d’autres termes, ils ont pour rôle de relier l’architecture de l’information et la conception visuelle pour représenter graphiquement une interface. L’interface a cinq objectifs principaux:

• Dites comment un site ou une application sera formé.
• Dites comment il sera utilisé.
• Dites comment les informations seront présentées et organisées.
• Dites quel contenu devrait avoir.

Enfin et surtout

• Dites comment l’utilisateur interagit

Plus tôt, j’ai dit que les concepteurs, les développeurs et les chefs de produit fabriquent des wireframes, mais cela ne signifie pas qu’ils sont les mêmes.

La source: Gustavo Zambelli

Les concepteurs UX / graphiques envisagent d’utiliser des wireframes lorsqu’ils souhaitent créer de la modélisation, du prototypage ou une nouvelle interface utilisateur. Donc, pour eux, c’est un processus préliminaire à travailler.

Une autre raison de les utiliser est qu’il est possible de simuler le flux d’utilisateurs. Ils créent les wireframes après avoir développé un «Personnage, » une parcours utilisateur, et un plan du site travailler avec. En d’autres termes, après avoir identifié les activités liées à la découverte.

La source : Vojtech Outulny

Le designer décide de ce qui se passe à chaque endroit et de la façon dont les utilisateurs naviguent dans la maison sans se casser le petit doigt sur la table de la cuisine. En d’autres termes, le flux utilisateur est essentiellement une série d’interactions entre l’utilisateur et l’interface, résultant en un chemin lisse et soyeux. Les organigrammes, l’historique et les schémas fonctionnent ensemble pour atteindre l’objectif.

Développeurs utilisez des wireframes pour obtenir un modèle plus tangible de fonctionnalité du site.

Cela donne au développeur une image plus claire des éléments dont il a besoin pour coder. Il est essentiel de souligner le type de développement dont nous parlons; dans le cas du développement back-end, les wireframes peuvent être de faible fidélité, tandis que le développement frontal nécessite un wireframe de haute fidélité.

Les chefs de produit ont plus que tout besoin de wireframes pour inspecter le projet. De cette façon, ils s’assurent que les exigences sont respectées lors de la conception du projet.

Les éditeurs peuvent également utiliser des wireframes! Par exemple, pour pouvoir visualiser leurs copies vers les clients ou pour aider les designers lors du processus de conception. Il est essentiel de mentionner que les wireframes fournissent non seulement une base solide mais accélèrent également le travail.

Croquis / filaire sur papier

Avantages:

• Rapide: Prenez simplement un stylo et un morceau de papier, et c’est tout, rien de trop compliqué. Commencez par dessiner le produit à n’importe quel niveau; La limite, c’est votre imagination.
• Souplesse: Vous avez la possibilité de basculer entre les concepts haute et basse fidélité. Vous savez donc que vous pourriez commencer par un croquis et terminer par un prototype en cours de route.
• Aucune distraction: Vous vous concentrez sur un morceau de papier devant vous. Pas de couleurs, pas de formes ou de modèles (surtout pour les paresseux)

Les 2 points suivants s’appliquent lorsque vous transformez vos croquis en prototypes:

• Normalisation facile: Cela fait référence à l’aspect flexible de la fidélité. Puisque vous créez plusieurs modèles avec le même design, vous pouvez normaliser très facilement les prototypes.
• Interactif et vivant: Ils sont aussi mobiles que les croquis, et ils ont aussi une vie! Allez, Courez dans le bureau et montrez-le à vos collègues, collez-le sur le mur.

Les inconvénients:

• Travail en double: Une fois que quelque chose est ruiné juste vers la fin du processus, il peut être frustrant de le refaire, mais il est possible d’annuler certaines décisions en effaçant ou en chevauchant des lignes, ce qui entraîne probablement une boule géante de spaghettis à l’encre. Vous ne devriez pas vous débarrasser de tout à la fin du travail et perdre vos modèles. Si nous allons plus loin et que nous voulons créer un prototype papier, vous devez y consacrer du travail et du temps supplémentaire.
• Zéro niveau d’interactivité: oubliez d’animer des choses et ne pensez même pas à faire des liens entre vos croquis. Aucune option avancée ici.
• Difficile à mettre à jour: après quelques centaines de papiers éparpillés sur votre bureau, vous êtes pratiquement sans espoir quand il s’agit de mettre à jour votre travail. Surtout si plusieurs travaillent sur le même projet.
• Incohérence potentielle: à moins que vous ayez beaucoup d’ordre derrière vous ou un grand talent pour le dessin, vous devez être très prudent pendant le processus, sinon vous finirez par être incohérent sur les boutons.

Tableau noir et blanc

Avantages:

• Haute évolutivité: Si vous voulez transformer tout votre bureau en un grand tableau blanc, personne ne vous arrêtera. De cette façon, vous ne serez plus limité à la taille de votre écran et vous aurez la possibilité de vous adapter et d’inspecter à distance, même en marchant.
• Transparence: En plus d’avoir l’air cool, un bâtiment avec des bureaux et des couloirs remplis de tableaux blancs, où les gens peuvent travailler librement sur des projets, on a le sentiment que l’entreprise est ouverte et transparente.

Les inconvénients:

• Manque de mobilité: Si vous avez un grand tableau noir, vous êtes confiné dans un espace fixe. Surtout s’il est fixé au mur. Si elle est située dans un stand, vous aurez l’air stupide, en l’accompagnant partout pour montrer votre chef-d’œuvre.
• Faible niveau de détail: Vous ne pouvez pas entrer dans les détails à moins que vous n’ayez des marqueurs capables de dessiner d’excellentes lignes (et il vaut la peine de préciser que l’image sera perdue au loin)

Modèles

C’est ma façon préférée de créer des wireframes de manière traditionnelle et non numérique. Il s’agit essentiellement d’esquisse mais avec une touche excitante. Rappelez-vous quand je vous ai dit que l’un des inconvénients de l’esquisse est le manque de modèles? Eh bien, avec les modèles physiques, cela est résolu confortablement et avec élégance.

Vous pouvez trouver une tonne de modèles en ligne que vous pouvez imprimer, ou même en obtenir certains prêts à l’emploi. Vous pouvez créer le vôtre et vous aurez immédiatement de la cohérence, vous pourrez vous concentrer sur le projet lui-même et non sur la duplication de boutons et d’éléments d’interface utilisateur.

Wirify

Lorsque j’ai commencé à utiliser des wireframes, j’ai été submergé par la quantité de logiciels disponibles. Il est difficile de dire lequel est meilleur qu’un autre et dans lequel nous devrions dépenser notre argent. Pour être honnête, je ne sais toujours pas lequel est le meilleur, mais je peux vous dire lesquels fonctionnent le mieux pour moi. Tout d’abord, je voudrais parler de celui qui s’appelle Wirify, ce n’est pas quelque chose que vous filmez avec, mais l’idée derrière c’est génial. Choisissez un site Web que vous voulez et vous pouvez la voir nue jusqu’aux os. Jetons un œil au NY Times, par exemple.

Ou CNN.

Donc, si vous manquez d’idées, vous pouvez maintenant inspecter les sites qui fonctionnent, super, non?!

C’est l’un des meilleurs outils en ligne lorsque vous souhaitez concevoir rapidement.

La source : Constructive.co

Si ce que vous voulez, c’est aller plus loin dans les profondeurs du logiciel et que vous n’avez pas peur d’apprendre de nouvelles compétences, je recommande UXPin. Les concepteurs UX l’ont développé pour les concepteurs UX. Il a un joli style de glisser-déposer et une bibliothèque pleine de fonctionnalités intéressantes. En plus de cela, le support de Photoshop est inclus. Ce que je n’aime pas dans cet outil, c’est le prix et sa prise en charge des appareils mobiles, car même s’il est en quelque sorte «ok», mais il manque quelques gestes.

C’est mon outil préféré en matière de wireframes! Il est facile à apprendre et super pratique à utiliser. Il vous offre également la même fonctionnalité de glisser-déposer que UXPin. Je vous recommande fortement de commencer ou prévoyez de le faire bientôt. Vous pouvez créer des wireframes de qualité professionnelle et marketing. Disponible pour Mac et Windows. Voici un exemple de projet sur lequel je travaille actuellement. C’est une boutique en ligne encore en développement pour la vente d’électronique d’occasion et de mobilier de maison.

Projet Balsamiq en cours

Il y a quelques malentendus en ce qui concerne les wireframes. Les wireframes sont utilisés pour générer des projets en concentrant l’attention sur la fonctionnalité. C’est pourquoi la fidélité passe de faible à moyenne. Vous pouvez créer des wireframes et les utiliser, que vous soyez concepteur UX ou non. Cependant, si votre objectif est de créer des wireframes et d’améliorer l’expérience utilisateur, concentrez-vous sur un flux constant d’utilisateurs.

Il existe différentes façons de créer des wireframes; par exemple, vous pouvez emprunter la route traditionnelle et opter pour du papier et un stylo, ou utiliser un logiciel dédié pour cela.

J’aime commencer par le bas et passer progressivement au numérique en utilisant des logiciels comme Balsamiq ou UXpin. Si vous n’avez pas d’idées, vous pouvez toujours vous inspirer en utilisant d’autres sites sympas en utilisant des outils comme Wirify.