Le maquettage : Wireframe, Mockup et prototype
Nous vous présentons ce qu'est le maquettage d'une interface logicielle ainsi que les différentes étapes qui le compose.
Dans le jargon informatique, on entend souvent parler de "wireframe" de "mockup" et de "prototype".
Tous ces termes désignent des étapes d'un processus de conception d'une interface utilisateur (UI).
1ere étape : Le Wireframe
La base d'une bonne interface graphique est de réaliser des croquis qui serviront de plans aux graphistes qui prendront le relais pour en faire quelque chose de beau et attrayant. Car le wireframe est la version la moins aboutie du processus de maquettage car il consiste en la réalisation d'un squelette d'application souvent représenté par des traits et des rectangles en noir et blanc. C'est une maquette dite de "basse" fidélité.
Il est en effet nécessaire de définir les zones et les composants des futures interfaces qui vont composer une application, un site ou tout autre logiciel possédant une interface graphique avec laquelle l'utilisateur va interagir. D'une part pour s'assurer que l'on n'oublie aucune fonctionnalité, mais aussi pour s'assurer que l'ensemble est cohérent. C'est une étape primordiale pour optimiser l'expérience utilisateur.
Le fait de réaliser des schémas simples permet de recommencer rapidement pour améliorer la disposition des différents éléments car il n'y a pas à se soucier des détails cosmétiques à cette étape.
2e étape : Le mock-up (la maquette)
Le mockup (ou maquette) reprend la structure esquissée dans le wireframe pour en faire quelque chose de plus esthétique. Il permettra de visualiser les premières versions du design graphique. Tout comme le wireframe, le mockup est statique, c'est une image qui n'est pas cliquable.
C'est durant cette étape que des décisions sur les détails graphiques tels que la typographie, les couleurs à utiliser et le style visuel de l'interface seront prises.
La maquette permet d'identifier certains détails manquants ou des incohérences en ce qui concerne l'incompatibilité de certaines couleurs ou typographies.
3e étape : Le prototype
Le prototype est la représentation la plus fidèle du produit final. C'est une étape qui est destinée à simuler l'interface utilisateur (UI). Le prototype est une version cliquable de la maquette dans laquelle il est possible de tester les interactions qu'auront les utilisateurs de votre application et de vérifier en action vos hypothèses d'expérience utilisateur (UX).
Vous pouvez donc vérifier le cheminement et la succession d'écran avant même d'avoir commencé les développements.
Conclusion
Ces différentes étapes sont trop souvent mises de côté car on pense économiser du temps et de l'argent en attaquant tout de suite les développements. Le maquettage est pourtant crucial pour corriger au plus vite des erreurs et des omissions. Il est moins coûteux d'effectuer des ajustements en amont du développement que pendant.
Demander à ce que le maquettage soit préalablement effectué c'est s'assurer dès le départ de la qualité finale de l'interface graphique qui, ne l’oublions pas est un composant essentiel pour interagir avec notre application.