Pourquoi les wireframes sont importants dans le processus de conception
Publié: 2017-01-29Le wireframing est un moyen rapide et efficace d'identifier les problèmes d'utilisabilité dès le début de votre processus de conception.
Si vous êtes un concepteur de sites Web, je suis sûr que vous êtes familier avec le wireframing et si vous êtes un concepteur d'expérience utilisateur (UX), comme moi, vous passez probablement une grande partie de votre temps à créer des wireframes soit à la main avec du papier et un crayon, soit en utilisant un outil numérique comme Proto.io .
Cet article s'adresse à ceux d'entre vous qui ont entendu le terme et qui souhaitent en savoir plus sur les raisons pour lesquelles les wireframes devraient jouer un rôle important dans votre processus de conception. Nous verrons également comment ils peuvent être utilisés au mieux dans les conversations avec les parties prenantes et les clients concernés.
Commençons par répondre à la question "Qu'est-ce qu'un wireframe ?"
J'aime penser à un wireframe comme un squelette de la page. Ce squelette est une représentation en deux dimensions de l'interface d'une page qui montre l'espacement des éléments sur la page, la hiérarchisation du contenu, les fonctionnalités disponibles et la manière dont les utilisateurs interagiront avec le site. Ils jouent également un rôle essentiel dans la connexion de l'architecture de l'information aux aspects visuels de la conception en montrant les chemins entre les différentes pages. Les wireframes sont intentionnellement dépourvus de couleurs, de graphiques et de polices stylisées.
Si nous n'avons pas un squelette solide pour commencer, alors tout ce que nous mettons dessus, comme les fonctionnalités ou le style, n'a vraiment aucune chance.
Pensez au processus de construction d'une nouvelle maison. Si vous concentrez toute votre énergie sur le design intérieur, comme les couleurs des murs et le tissu des canapés, plutôt que sur le plan de la structure de la maison, pensez-vous que cela remplira son rôle ? Probablement pas. Commencer par le design intérieur, plutôt que par la structure fondamentale de la maison, est contre-intuitif.
Qu'est-ce qui ne devrait pas être inclus dans un wireframe ?
Il est vraiment important de garder vos wireframes simples. En effet, le but du wireframing, comme indiqué ci-dessus, est de montrer comment les éléments sont disposés sur la page et comment la navigation sur le site doit fonctionner. Trop de couleurs ou d'images peuvent empêcher le lecteur de se concentrer sur la mise en page et les éléments de navigation. Assurez-vous d'éliminer ou de réduire l'utilisation de couleurs, d'images, de graphiques et de polices stylisées pour atteindre votre objectif de représenter une représentation visuelle simple du squelette.
Gardez ceux-ci à l'esprit :
Recommandé pour vous:
Comment Metaverse va transformer l'industrie automobile indienne
Que signifie la disposition anti-profit pour les startups indiennes ?
Comment les startups Edtech aident la main-d'œuvre indienne à se perfectionner et à se préparer pour l'avenir...
Stocks technologiques de la nouvelle ère cette semaine : les problèmes de Zomato continuent, EaseMyTrip publie des...
Les startups indiennes prennent des raccourcis à la recherche de financement
La plate-forme de marketing numérique Logicserve met en sac un financement INR 80 Cr et se rebaptise LS Dig ...
- Gardez vos couleurs sur les gris, les blancs et les noirs.
- Utilisez une police générique. Cela permet d'éviter que l'utilisateur ne soit distrait par le style de la typographie. L'affichage de la hiérarchie des informations à travers la police est toujours important, cependant, et peut être affiché en changeant simplement la taille de la police et si elle est "normale", " italique " ou "gras".
- Évitez les graphiques et les images très stylisés. Au lieu de cela, je suggère d'utiliser des rectangles et des carrés comme espaces réservés, en ajoutant un "x" au milieu de la boîte pour indiquer où l'image sera placée. Vous pouvez également faire la même chose pour montrer où les vidéos seront positionnées avec un triangle comme bouton de lecture au centre de la boîte.
Les 5 principales raisons d'utiliser les wireframes
Les wireframes sont un excellent outil pour amener vos clients à se concentrer sur ce à quoi vous voulez qu'ils réfléchissent au début du processus de conception.
Les wireframes sont un excellent moyen de guider les clients et les parties prenantes à travers la structure de vos conceptions sans leur donner la possibilité de se laisser distraire par les couleurs et les images. Si le but de votre réunion est d'amener vos clients à réfléchir aux éléments qui devraient figurer sur la page et à la manière dont ces éléments fonctionneront sur le site, le simple fait de supprimer les couleurs, les images et les pages stylisées rend la tâche beaucoup plus simple. Vous pouvez ensuite facilement recueillir les commentaires de votre client et des parties prenantes sur la navigation du site et l'attribution des éléments sur les pages. Plutôt que de se concentrer sur la façon dont la couleur rouge "ne fonctionne tout simplement pas pour eux" en tant que bouton d'appel à l'action. C'est drôle, mais ça arrive souvent !
Les wireframes vous permettent de cartographier les fonctionnalités des pages, de détecter les problèmes plus tôt et de gagner du temps sur les révisions ultérieures.
Il est beaucoup moins pénible d'apporter des modifications à un wireframe qu'à une maquette haute fidélité avec de nombreux éléments de conception. Devoir retravailler une maquette haute fidélité prend beaucoup plus de temps pour apporter des modifications. Si vous investissez du temps dans la réflexion sur la fonctionnalité des pages via le wireframing dès le début de votre processus de conception, vous serez si heureux de l'avoir fait. C'est certainement du temps bien dépensé et très efficace.
En d'autres termes, une cartographie précoce des fonctionnalités réduira la quantité de va-et-vient qui accompagne souvent la phase de développement. Il est certainement plus facile de réécrire la fonction dans un wireframe, par rapport à une application Web.
Le wireframing vous permet de mieux connaître votre client.
Vous commencerez à voir des tendances dans les comportements et les motivations au fur et à mesure que vous passerez du temps avec votre client. Au fil du temps, les connaissances que vous acquérez grâce à leurs commentaires n'auront d'incidence que sur la meilleure façon de travailler avec eux à l'avenir et sur la façon de rendre votre temps avec eux le plus productif possible. Le wireframing est également un excellent moyen d'amener vos clients à se concentrer. Les clients aiment sauter cinq étapes en avant parce qu'il est excitant de commencer à penser au produit final. Mais éliminer les opportunités pour les clients de se laisser distraire de la fonctionnalité et de la structure de la conception sera quelque chose que vous trouverez très gratifiant.
Le wireframing est un excellent outil pour recueillir des commentaires et identifier rapidement les défauts.
Si l'efficacité est votre objectif, ce qui est très probablement le cas, alors le wireframing est le point de départ. Il peut arriver que vous vous sentiez obligé de commencer à concevoir une maquette haute fidélité dès le départ en raison de contraintes de temps ou d'argent. Essayez de vous rappeler que sans recueillir des commentaires de qualité au début, vous pourriez créer un processus de révision plus long et plus long plus tard, rendant tout beaucoup moins efficace.
Les wireframes sont un excellent moyen de hiérarchiser le contenu en aidant à révéler les contraintes d'espace et en concevant la hiérarchie des éléments sur la page.
Avoir la possibilité très tôt de visualiser la hiérarchie de vos pages et de commencer à afficher visuellement les contraintes d'espace vous fera gagner beaucoup de temps plus tard lorsque vous commencerez à styliser les pages et à les remplir de contenu. Vous devriez recueillir des commentaires sur vos structures filaires auprès des parties prenantes, déplacer rapidement les choses sur vos structures filaires en fonction des commentaires que vous recevez, recueillir à nouveau des commentaires et itérer jusqu'à ce que vous atteigniez votre objectif.
Conclusion
Les wireframes mettent la convivialité au premier plan et leur utilisation est un moyen efficace d'illustrer la disposition des pages et la fonctionnalité des éléments de la page.
L'utilisation de wireframes dès le début du processus de conception vous oblige, vous et vos clients, à examiner objectivement la facilité d'utilisation, les chemins de conversion, le placement des éléments et aide à signaler les défauts au plus tôt. Ce sont toutes des choses qui mènent à des produits intuitifs, fonctionnels et agréables.
[Ce message est apparu pour la première fois sur le blog Proto.io et a été reproduit avec autorisation.]