Forme et fonction - Un guide des meilleurs outils filaires

En 1487, Léonard de Vinci a dessiné un schéma appelé le "véhicule de combat", conçu alors qu'il était sous le patronage de Ludovico Sforza, duc de Milan. Bien que la machine ait été délibérément conçue pour ne pas fonctionner correctement, un groupe d'ingénieurs l'a recréée en 2010. Le schéma de Da Vinci est l'un des premiers exemples d'une structure filaire de base.

Le terme wireframe est utilisé depuis des décennies, bien avant qu'il ne soit adopté par le monde de la conception Web. Les wireframes étaient à l'origine utilisés dans les logiciels de conception assistée par ordinateur (CAO) pour illustrer la conception d'un objet sans avoir besoin de détails. Le résultat était un plan qui semblait être fait de fils, par conséquent, nous nous sommes retrouvés avec des wireframes.

Mais qu'est-ce qu'un wireframe dans la conception et à quoi sert-il d'en avoir un ?

Une structure filaire dans la conception numérique est un guide visuel ou un schéma de page dépourvu de style typographique, de couleurs, de graphiques et d'éléments interactifs, et représente un point spécifique du processus de conception. Son but est de montrer des idées de mise en page au niveau de la page qui décrivent la fonctionnalité, le comportement et la priorité du contenu.

Les concepteurs utilisent des wireframes pour connecter les structures conceptuelles sous-jacentes à la conception visuelle d'un écran de site ou d'application. Il existe trois types de wireframes différents :

• Basse-fidélité - un dessin au stade précoce sans beaucoup de détails. Les wireframes basse fidélité sont souvent des croquis dessinés à la main, ou des lignes et des formes représentant une idée.
• Moyenne-fidélité - wireframes qui commencent à afficher plus de détails sur les composants et se concentrent sur la mise en page du contenu et la structure globale de la page.
• Haute fidélité - dessins d'étape ultérieure (post-itératifs) qui décrivent des rendus plus détaillés et de niveau supérieur des composants, avec des caractéristiques comportementales et un accent sur la mise en page du contenu.

Une évolution des wireframes dans la conception numérique est un autre artefact et livrable UX : le wireflow. Les wireflows sont une combinaison de wireframes et d'organigrammes, deux artefacts que les concepteurs UX ont lentement fusionnés dans un autre but : illustrer et suivre les interactions qui représentent les flux de tâches dans un produit tel qu'une application Web.

Un problème rencontré par les concepteurs avec les wireframes est la communication du parcours de l'utilisateur. Bien qu'il existe des moyens plus complexes de montrer les parcours des utilisateurs, il existe une tendance à les inclure dans la simplicité d'un wireframe. Un outil utile pour cela est une carte filaire.

Une carte filaire combine des structures filaires avec des parcours d'utilisateurs (ou flux d'utilisateurs) pour illustrer le parcours de l'utilisateur à travers un produit à l'aide de structures filaires.

Les meilleurs outils de wireframing

Les concepteurs ont beaucoup de choix lorsqu'ils décident quel(s) outil(s) de wireframing utiliser. De nouveaux outils arrivent continuellement sur le marché, il peut donc être difficile de suivre le rythme. Voici quelques caractéristiques des excellents outils de wireframing à rechercher :

• La capacité de produire une variété de fidélités (faible à élevée)
• Logiciel stable, facile à utiliser et fréquemment mis à jour
• Modèles, symboles et composants d'interface utilisateur standard intégrés avec des fonctionnalités complémentaires

Certains des outils de ce guide se concentrent davantage sur le wireframing, tandis que d'autres tentent de trouver un équilibre entre le wireframing et le prototypage, et la fonctionnalité de maquette. Choisir d'utiliser un outil plutôt qu'un autre (ou plusieurs ensemble) dépend de la préférence du concepteur.

Balsamiq

Balsamiq est un outil de wireframing basse fidélité et simple à utiliser, apprécié pour sa facilité d'utilisation et son aspect emblématique "dessiné à la main". Il est livré avec un ensemble de modèles prédéfinis qui peuvent être utilisés rapidement et facilement avec un éditeur par glisser-déposer. Les concepteurs peuvent ajouter leurs propres ressources et personnaliser la mise en page.

Le prototypage de base peut être réalisé en liant des maquettes pour créer des expériences de clic simples pour les tests d'utilisabilité lors de l'affichage du projet en mode de présentation plein écran ou sous forme de PDF exporté.

Balsamiq est proposé en version de bureau (Windows et Mac), en service cloud ou en plug-in pour Google Drive, Confluence et JIRA.

Moqups

Moqups est un autre outil de collaboration créative qui se concentre sur le wireframing mais peut également être utilisé pour le prototypage. Contrairement à Balsamiq, il est purement basé sur le Web et est destiné à créer des wireframes pour les applications Web et mobiles.

La principale différence entre Moqups et Balsamiq est la fidélité des wireframes. Alors que Balsamiq produit un look « dessiné à la main », Moqups fournit des pochoirs et des kits en couleur pour la conception d'applications mobiles et Web, y compris iOS, Android et Bootstrap.

Moqups se distingue de Balsamiq de quelques autres manières. Le logiciel permet l'édition d'objets finis et la gestion des pages, donnant aux concepteurs la possibilité de définir des objets «maîtres», ce qui peut faire gagner beaucoup de temps lors de la modification des structures filaires pendant le processus d'itération.

Par exemple, un concepteur crée un objet bouton principal avec une taille, une forme et une couleur spécifiques. Ce bouton est utilisé plusieurs fois dans le wireframe. Plus tard, dans le processus d'itération, si le concepteur a besoin de changer la couleur du bouton, au lieu de changer chaque objet bouton, il peut le changer une fois, et tous les objets bouton enfant sont immédiatement affectés.

Pidoco

Pidoco est un outil de wireframing de premier plan axé sur les livrables de faible fidélité avec une certaine interactivité de base. Également basé sur le cloud, il utilise des composants réutilisables et se distingue de Balsamiq et Moqups par une expérience filaire de clic plus robuste.

Pidoco est utile pour la conception d'applications mobiles et de sites Web, car il intègre des vues mobiles permettant aux concepteurs de voir à quoi ressembleront les pages de leurs applications sur différentes tailles d'écran. Une autre fonctionnalité intégrée est la fonction d'exportation et de spécifications . Cela aide les concepteurs à passer du wireframe au prototype/maquette sans avoir besoin d'un plug-in ou d'une extension.

Picoco a l'air et se sent peu fidèle, mais comprend plusieurs fonctionnalités que l'on trouve généralement dans des outils de conception plus complexes. Cela fonctionne bien pour les concepteurs qui font de l'UX lean et qui ont besoin d'itérer rapidement avec des cycles de rétroaction plus courts.

Gliffy

Gliffy est un outil de wireframing de moyenne fidélité avec quelques caractéristiques uniques qui le différencient de Balsamiq et des maquettes. Une caractéristique unique est la possibilité de créer des wireflows. Gliffy possède des capacités intégrées d'organigramme et de création de diagrammes avec des gabarits, des cartes mentales et une modélisation des processus métier inclus.

Comme les autres outils de wireframing, Gliffy fournit une bibliothèque de formes, d'icônes et la possibilité de partager nativement des wireframes avec Confluence, Slack, Basecamp, Trello et WordPress d'Atlassian.

Il s'agit d'un outil de conception filaire UX relativement nouveau, cependant, il dispose d'une large base d'abonnés de concepteurs professionnels qui recherchent des intégrations simples et des capacités au-delà d'une structure filaire statique.

Filaire.cc

Wireframe.cc est un outil de wireframing de base un peu comme Balsamiq. Il a une interface propre sans beaucoup de barres d'outils et d'icônes gênantes. Contrairement à beaucoup d'autres outils, il vous permet de "esquisser" des wireframes avec une souris.

Wireframe.cc fournit une bibliothèque de gabarits et une manipulation propre et simple des objets. Un élément utile que Wireframe.cc offre lorsque vous travaillez avec lean UX, est une URL pour chaque page filaire afin qu'elle puisse être partagée pour des commentaires rapidement et facilement.

Il n'y a pas de prototypage ou d'interactivité intégrée car il se concentre uniquement sur le wireframing basse fidélité.

Capricieux

Appelé "Google Docs" pour les wireframes, Whimsical imite les outils de création de diagrammes tels que OmniGraffle et Visio. Il ne se concentre pas sur le prototypage/les maquettes, car il se concentre principalement sur le wireframing et les organigrammes, ce qui en fait un excellent candidat pour la production de wireflows.

Comme Gliffy, Whimsical est un outil de wireframing de moyenne fidélité et comprend une grande bibliothèque d'éléments configurables (boutons, entrées, cases à cocher, etc.).

La collaboration illimitée sur le même document filaire en même temps est une excellente fonctionnalité intégrée pour les équipes de conception à distance.

AdobeXD

Adobe XD a récemment attiré l'attention des concepteurs en raison de son interface simple, de ses liens étroits avec d'autres produits Adobe, de sa facilité d'utilisation et de ses fonctionnalités intégrées qui réduisent le besoin de s'appuyer sur des plug-ins et des extensions.

Il existe deux manières de créer des wireframes dans Adobe XD. Ils peuvent être construits à l'aide de lignes et de formes pour créer des objets et des éléments, ou ils peuvent être construits à l'aide de kits d'interface utilisateur prédéfinis à partir de sources telles que les ressources behance.net et XD.

L'une des fonctionnalités permettant de gagner du temps dans Adobe XD est la possibilité de créer des composants "maîtres" (appelés symboles dans Sketch), qui sont utiles lors des modifications, car tous les composants instanciés à partir du maître hériteront des modifications.

Un autre avantage de l'utilisation de XD comme outil de wireframing est la possibilité de passer en mode prototypage d'un simple clic de souris. Le mode de prototypage est intégré à XD et fonctionne en arrière-plan afin que les concepteurs ne perdent pas de temps lors du passage des wireframes aux prototypes.

Esquisser

Sketch, un outil de conception populaire pour les concepteurs UX/UI, fournit une plate-forme pour l'édition vectorielle, le prototypage et la collaboration, et dispose d'une bibliothèque croissante de centaines de plugins qui étendent ses fonctionnalités.

Le wireframing dans Sketch ressemble beaucoup à Adobe XD avec son utilisation de kits/modèles et d'outils de dessin. Sketch utilise largement les symboles qui sont des composants réutilisables qui peuvent être définis une fois et utilisés plusieurs fois (boutons, etc.). Les symboles instanciés prennent également en charge toutes les modifications apportées au symbole « maître ». Ceci est avantageux pour les concepteurs car il y a souvent de nombreux changements qui doivent être apportés tout au long du processus de wireframing.

Sketch permet aux concepteurs de créer des structures filaires, des prototypes et des maquettes haute fidélité. Ce n'est pas une application basée sur le cloud, et l'un des inconvénients potentiels est qu'elle ne fonctionne qu'avec macOS.

UXPin

UXPin est un outil filaire de premier plan qui prend en charge les états interactifs, la logique et les composants programmatiques, donnant aux concepteurs la possibilité de coder des interactions, des variables et des expressions conditionnelles.

UXPin va bien au-delà du wireframing, se concentrant principalement sur le prototypage avec des bibliothèques de composants d'interface utilisateur, des symboles, des outils de dessin vectoriel et la co-édition.

Il existe une version Windows, macOS et cloud/navigateur. Pour le wireframing haute fidélité, UXPin fonctionne un peu comme Sketch et Adobe XD. Ce n'est pas du glisser-déposer comme Balsamiq, mais cela fait passer le prototypage et les maquettes au niveau supérieur pour les concepteurs qui cherchent à rester dans un seul écosystème.

merveille

Marvel, un autre outil de conception populaire qui facilite le wireframing et le prototypage, offre aux concepteurs une interface glisser-déposer familière pour créer des wireframes de faible à haute fidélité.

Marvel ne nécessite aucun module complémentaire ou extension car tous les actifs sont inclus. La plate-forme est entièrement basée sur le cloud, ce qui permet de partager rapidement et facilement des wireframes avec d'autres membres de l'équipe de conception ou des clients.

L'une des raisons pour lesquelles les concepteurs choisissent Marvel pour le wireframing est son intégration avec d'autres plates-formes telles que Jira, Sketch, Confluence, Dropbox, Slack et bien d'autres. Pour la collaboration avec les développeurs, les équipes de conception à distance et les clients, cette fonctionnalité fait gagner beaucoup de temps aux concepteurs.

Marvel propose également un produit appelé Pop qui permet de transformer des croquis filaires au stylo et au papier en prototypes interactifs pour iPhone et Android. Pop permet aux concepteurs de prendre une photo de leurs croquis et de les transformer en wireframes interactifs.

Axure RP

Axure RP existe depuis longtemps et est un excellent outil pour créer des wireframes statiques (ainsi que des prototypes hautement interactifs). Il n'est pas basé sur le cloud, bien qu'il fonctionne à la fois sur Windows et macOS.

Le wireframing peut être réalisé à l'aide de sa vaste bibliothèque de composants de glisser-déposer, cependant, Axure RP est un outil complexe qui va bien au-delà du wireframing. En utilisant les fonctionnalités programmatiques d'Axure RP, les concepteurs peuvent créer des prototypes avancés avec des fonctionnalités qui reflètent une application entièrement fonctionnelle.

Compte tenu de la courbe d'apprentissage élevée d'Axure, il n'aurait pas de sens de l'utiliser uniquement pour les wireframes statiques. Cependant, si l'objectif est de produire des prototypes hautement polis et fonctionnels, ce serait l'outil parfait pour les concepteurs de produits.

Outils filaires préférés des concepteurs de Toptal

Nous avons contacté certains concepteurs de Toptal pour savoir quels outils de wireframing les concepteurs professionnels utilisent et pourquoi. Voici ce qu'ils avaient à dire.

« Mes favoris sont Adobe XD et UXPin. Je commence à choisir XD comme favori parce qu'il est facile de créer des wireframes rapides et de tester des idées, et à partir de là, je peux réellement commencer la conception et même le prototype sur la même plate-forme. -Michael Craig

« Ma préférée est la pop parce que c'est tellement rapide. De toute façon, je dessine toujours mes wireframes sur papier, donc ça marche très bien et je n'ai pas à gérer quoi que ce soit. Je trouve aussi que c'est bon pour l'ensemble "ne tombez pas amoureux de la solution" parce que c'est si clairement lo-fi. - Nicola Rushton

"J'utilise Axure presque tout le temps pour mon travail de conception. C'est un outil très sous-estimé pour un travail de conception complet, avec une très grande complexité » - Andi Omtvedt

"Je ne fais plus de wireframe en soi - car je pense que les outils sont suffisamment puissants pour produire des prototypes de faible fidélité, combinant ainsi presque le wireframe initial avec un meilleur visuel. J'ai adopté Framer X depuis janvier de cette année, et j'adore ça. -Charlie Williams

Sommaire

Compte tenu de la capacité à produire des prototypes sophistiqués, le wireframing est-il toujours d'actualité ? Certains concepteurs professionnels diront que les wireframes sont une relique du passé, tandis que d'autres défendent ardemment leur importance continue dans le processus de conception.

Aujourd'hui, il existe une abondance d'outils filaires qui facilitent le processus de conception. Certains continuent de se concentrer uniquement sur le wireframing, même si la tendance s'oriente vers des produits hybrides qui commencent par le wireframing mais incluent également la possibilité de prototyper et, dans de nombreux cas, de produire des maquettes entièrement fonctionnelles.

Bien qu'il ait évolué d'un livrable basse fidélité à un livrable moyenne ou haute fidélité, le Wireframing ne va certainement pas disparaître.

Pour en savoir plus sur le blog Toptal Design :

• Cartographie filaire : comment éviter le fluage de la portée
• Mort au Wireframe. Directement en Haute-Fidélité !
• Confrontation de l'outil de conception - Adobe XD contre Sketch (2019)
• Maîtrisez votre métier avec ces meilleurs outils UX
• Les 10 livrables UX utilisés par les meilleurs designers