Les clients doivent comprendre comment une fonctionnalité proposée va fonctionner. Mais décrire simplement verbalement ou par écrit la fonctionnalité cible à construire peut être assez difficile pour leur imagination. Le wireframing peut être extrêmement utile pour résoudre ce dilemme, car il peut servir d’outil visuel de maquette « montrez, ne dites pas » pour confirmer les idées de conception du système avec les clients.
Qu’est-ce qu’un wireframe ?
Les wireframes sont des croquis d’écran d’un système, parfois appelés plan ou squelette. Ils sont créés dans le but de présenter et d’expliquer les idées de conception du système aux clients, ce qui conduit finalement à un consensus sur les idées proposées.
Les wireframes montrent « juste assez » d’informations associées à la fonctionnalité proposée. Chaque wireframe comprend des éléments graphiques de base qui représentent les composants de l’écran, ou les espaces réservés pour ces composants. Un wireframe illustre la mise en page de l’écran et la manière dont le contenu est organisé. Il se concentre sur ce qu’un écran fait et sur la manière dont les utilisateurs interagiront avec le système pour atteindre leurs besoins, plutôt que sur l’apparence réelle de l’écran final.
Avant d’aller plus loin, regardons un wireframe créé à partir de youtube.com
Comme vous pouvez le voir, un wireframe est juste aussi simple et direct. Tout le monde peut le comprendre sans difficulté. Il aide l’équipe de développement à expliquer facilement comment les utilisateurs interagiront avec le site web.
Le wireframe n’est qu’un plan
Un wireframe n’est qu’une version à faible fidélité d’une interface utilisateur et n’est pas censé représenter un écran réel. Les wireframes sont destinés à démontrer les fonctionnalités, les interactions des utilisateurs et les parcours d’écran, sans spécifier explicitement à quoi doivent ressembler les composants d’écran ni comment ces composants doivent se comporter afin d’atteindre la meilleure utilisabilité.
Exemples de wireframes
Voici un exemple de wireframe web pour une page d’accueil :
Voici quelques exemples de wireframes pour des applications Android :
 |
 |
 |
Voici un exemple de wireframe iPad pour une application iPad :
Voici un exemple de wireframe iPhone pour une application iPhone :
Enfin, voici un exemple de wireframe pour une application de bureau :
Avantages de l’utilisation du wireframe
Clarifier l’interface utilisateur
Les clients peuvent ne pas comprendre les termes techniques du design d’écran comme curseur, boîte pivotante, bootstrap, etc. Le wireframe comprend des éléments graphiques de base que tout le monde peut comprendre, aidant ainsi les clients à savoir comment les fonctionnalités fonctionneront et comment ils pourront interagir avec le système pour atteindre leurs objectifs.
Considération précoce de l’utilisabilité
L’expérience utilisateur (UX) est une considération importante dans tous les logiciels actuels. L’utilisation des wireframes dans la capture des exigences amène la considération de l’expérience utilisateur dès le début du projet. Sans développer de prototypes ou dessiner des maquettes réelles, les utilisateurs peuvent déjà expérimenter comment le système fonctionnera.
Économique
Il faut du temps et des compétences pour créer des maquettes d’écran complètes et à haute fidélité, ce qui entraîne finalement des coûts élevés. Le wireframing est une méthode rapide et peu coûteuse pour créer des croquis de base d’écran. Il permet également de modifier ou même de revoir complètement les croquis facilement et à moindre coût.
Plus enclin à apporter des modifications
Les modifications de conception sont inévitables. Le problème avec la validation des idées de conception à l’aide d’une maquette ou d’un prototype complet du système est qu’un travail considérable a déjà été accompli, ce qui implique un travail de reprise important, ce qui signifie du temps, des efforts et des coûts supplémentaires. Dans cette situation, les clients et l’équipe de développement sont plus réticents à exprimer leurs préoccupations ou à demander des modifications. À l’inverse, la production et la révision des wireframes prennent beaucoup moins de temps. Tout le monde sera plus enclin à demander et à apporter des modifications.
Clients impliqués
Parce que les wireframes sont bruts et informels, ils donnent aux clients la liberté de réfléchir et de formuler leurs suggestions. De plus, comme le délai de révision des wireframes est court, les clients sont activement impliqués dans la fourniture de retours, ce qui les rend plus enclins à approuver la conception finale.
Comment utiliser efficacement le wireframe ?
L’utilisation du wireframe peut apporter de nombreux avantages à la fois à l’équipe de développement et aux clients, mais cela ne se produit que si vous l’utilisez judicieusement et correctement. Une utilisation typique erronée du wireframe consiste à le considérer comme un remplacement du design d’écran. Cela rend la production et la révision difficiles et coûteuses, réduisant ainsi l’utilité du wireframing. Dans cette section, nous passerons en revue quelques conseils efficaces pour le wireframing.
- Un wireframe est censé être simple et suffisant. Il est simple pour pouvoir être produit rapidement et facilement, et ne nécessite pas de hésitation à être abandonné ou révisé. La présentation à faible fidélité le rend également plus complète et plus communicative. Par conséquent, il ne faut pas passer trop de temps à embellir le dessin, à aligner les éléments ou à utiliser une typographie élégante, etc.
- Dans un wireframe, au lieu d’afficher un contenu réel, nous pouvons remplacer une grande quantité de texte (le contenu réel) par un espace réservé de texte. Cela permet d’éviter de perdre du temps à préparer inutilement le contenu, et de prévenir les lecteurs de se laisser distraire par le contenu du texte. Mais si l’affichage du texte est nécessaire, vous pouvez envisager de placer du texte factice à la place. Vous pouvez facilement trouver un générateur de texte factice sur internet.
- L’utilisation des annotations vous aide à décrire un élément (par exemple « logo de l’entreprise ») ou à expliquer quelque chose lié à son comportement (par exemple « masquer en 5 secondes »). Utilisez-le si nécessaire. Mais encore une fois, ne cherchez pas à documenter chacun des éléments du wireframe. Vous ne devriez utiliser les annotations que lorsque cela est nécessaire.
- Les wireframes peuvent être dessinés à la main, mais nous créons généralement des wireframes avec des logiciels pour une gestion plus efficace et plus facile de nos travaux. En outre, certains logiciels de wireframing vous offrent des fonctionnalités que le papier et le crayon ne peuvent pas réaliser. Voici trois d’entre elles :
- État – L’outil de wireframing de Visual Paradigm prend en charge le concept d’état, ce qui vous permet de créer un wireframe enfant à partir d’un existant. Cela ne vous permet pas seulement de gagner du temps lors de la création d’un flux d’écran avec une séquence de wireframes enfants similaires, mais rend également les ajustements des wireframes enfants associés bien plus faciles (car lorsque nous apportons des modifications à l’état initial d’un wireframe, ces modifications seront également reflétées dans tous les wireframes enfants associés)
- Storyboard – Un storyboard présente le flux d’écran d’un scénario particulier. Il rend les wireframes plus facilement gérables et la présentation bien plus simple.
- Gestion des wireframes par user story – Une user story est un outil agile pour enregistrer les préoccupations et les besoins des utilisateurs. Inclure les wireframes dans le scénario d’une user story montre comment l’utilisateur utilisera la fonctionnalité dans la partie de son travail décrite dans cette user story. En outre, lorsque le développeur commence à implémenter la user story, il peut consulter le wireframe pour mieux comprendre les attentes de l’utilisateur.
English
Arabic
Chinese (Simplified)
Dutch
French
German
Italian
Japanese
Korean
Portuguese
Russian
Spanish