Longtemps considéré comme un incontournable dans le design d’interface web, le wireframe est maintenant de plus en plus délaissé pour la création de prototypes interactifs et plus concrets.
Voyons ensemble dans quelles mesures se soustraire des wireframes et pourquoi.
Sommaire
- Le wireframe, une maquette simpliste pour la mise en place de l’interface utilisateur
- Les avantages du wireframing dans le design d’interface web
- Les limites du wireframing dans le design d’interface web
- Le prototypage : un outil de design d’interface précis et dynamique
- Conclusion
- Nos études de cas autour de l'optimisation UX
Le wireframe est une maquette très simple à utiliser en début de projet pour représenter simplement la structure d’une page.
Il permet au designer de placer rapidement les fonctionnalités d’un site internet ou d’une application sans se soucier du reste. Le design est volontairement épuré afin de focaliser le regard sur l’aspect fonctionnel.
Les images, cards, boutons et autres blocs de contenu sont représentés par des formes sans fioriture.
Les textes quant à eux sont composés de Lorem ipsum. Le but n’est pas de retranscrire tout de suite le véritable contenu, mais de réfléchir à la structure et la hiérarchie de l’information.
Pour cette même raison, les designers ne s’attardent pas à mettre en place la charte graphique sur ces éléments.
Ils préfèrent utiliser des nuances de gris qui permettront de se concentrer sur les problématiques soulevés par un wireframe telles que l’organisation de l’interface, et éviter les débats sur le style à mettre en place.
Le choix des couleurs, des formes, de la typographie … seront réalisés plus tard lors de la création d’un design system dans le cadre du maquettage et prototypage du projet.
Comme nous l’avons vu précédemment, le wireframe permet au designer de se concentrer sur la création de la hiérarchie de l’interface.
La création d’un wireframe est rapide par la simplicité de son design. Il peut être réalisé directement avec papier et crayon ou via des logiciels de wireframing.
Les designers ne perdent ainsi pas de temps sur les choix graphiques et peuvent se consacrer entièrement à la réflexion qu’induit la création d’une interface.
Enfin, réaliser un wireframe peut s’avérer utile dans la réalisation d’un projet complexe qui nécessite d’être schématisé pour que clients et développeurs se comprennent bien.
Il permettra ainsi à la fois au client et au designer de s’approprier le projet et soulever des problématiques importantes qui doivent être identifiées dès le début du projet.
Un wireframe ne contient généralement pas de contenu réel (notamment textuel). Il est alors compliqué d’être proche de la réalité et cela peut entrainer le risque d’un résultat inattendu.
Imaginez, dans votre wireframe vous avez prévu une image et un texte de 3 lignes centré à droite de l’image, mais au moment de l’intégration, le texte final ne fait plus 3 lignes, mais 10. Cela peut changer drastiquement le rendu d’un élément et donner un sentiment de déséquilibre dans le design.
C’est tout le problème du Lorem Ipsum. Il est rapide à utiliser, mais peut entrainer des réorganisations imprévues lors de la phase d’intégration.
Dans un milieu toujours plus concurrentiel, les webdesigners se doivent d’être toujours plus performants et productifs, quitte à se soustraire de certains supports comme les wireframes en l’occurrence.
Certes, la réalisation d’un wireframe ne prend pas beaucoup de temps comparé à un prototype, mais s’il on ajoute le temps nécessaire à la présentation, à l’explication et à la validation de ces supports, cela représente un temps conséquent qui ne sera plus disponible pour le reste du projet.
En fonctionnant en mode Agile, il devient plus facile de fonctionner directement avec des prototypes, plutôt que de passer par une validation par étapes strictes. Nous faisons ainsi évoluer les maquettes au fur et à mesure des retours clients.
Il est compliqué pour un client de se projeter au travers d’un wireframe. La palette de couleurs utilisée ne l’aide pas à imaginer et si son entreprise est bien représentée à travers le site. C’est la même chose pour les formes géométriques censées représenter des images, icônes ou vidéo.
Vous me direz : « Oui, mais c’est le propre d’un wirefame, il doit être simple et axer la réflexion sur la structure. ».
Nous sommes d’accord, seulement aujourd’hui un prospect veut avoir une vision plus concrète de son projet.
Maintenant, nous enclenchons le processus de création directement par la phase de prototypage en commençant par établir la structure du contenu dans la page.
Vous voulez revoir le design de votre site internet ou de votre application ?
Contactez notre équipe de développeurs et designers et étudions ensemble votre projet.
Le prototype d’un site web ou d’une application est la projection réaliste du projet.
Il doit donc être le plus fidèle et détaillé en proposant un parcours utilisateur logique et une expérience utilisateur optimisée.
En liant les écrans entre eux pour établir une véritable maquette fonctionnelle, nous permettons à nos clients une expérience interactive proche de la réalité. L’utilisateur n’a plus à imaginer les fonctionnements et la navigation sur le site, il peut tout simplement tester et éprouver l’interface.
Nous pouvons également imaginer et mettre en place les micro-interactions. L’outil Figma a la particularité de rendre un grand nombre d’éléments dynamiques en permettant la gestion du survol ou du clic sur un objet, idéal pour mettre en forme des boutons dans différents états par exemple.
Figma est un outil de prototypage qui dispose de nombreuses options ainsi qu’un système de collaboration, pratique pour travailler à plusieurs sur un même projet.
Le niveau de détail d’un prototype rend ce support plus sensible aux critiques. Et c’est d’ailleurs ce que l’on souhaite : proposer un design au risque de se tromper, mais obtenir des retours et adapter l’interface pour qu’elle convienne parfaitement à la demande du client.
Avec un prototype, nous testons à la fois la structure et le contenu. Alors qu’avec un wireframe, la structure seule est testée et risque d’être revue si le contenu final ne donne pas un résultat concluant.
Aujourd’hui, les prototypes ont pris le pas sur les wireframes dans le design d’interface, devenu trop peu précis pour des intégrateurs comme pour le client. La phase de wireframing est alors directement intégrée au processus de prototypage.
Les wireframes ne sont pas non plus à bannir. Nous pouvons en faire usage si le projet est complexe ou pour une utilisation en interne en guise de représentation simpliste de l’organisation de l’information. Cela peut suffire aux développeur pour établir la structure d’une page.
