Les termes de zoning, wireframe, mockup et prototype ont trait à l’ergonomie et la conception d’interface, on les retrouve dans la plupart des projets digitaux. Ils ne sont pas synonymes (contrairement aux idées reçues) mais correspondent à des étapes distinctes. Point sur la terminologie !
Qu’est-ce que le Zoning ?
Le zoning est une schématisation grossière de ce que sera la future page web. On utilise des blocs pour déterminer où se trouveront les contenus et fonctionnalités. Cette étape a généralement lieu après la création d’une arborescence, il arrive quelquefois qu’elle soit réalisée en parallèle.
Définir l’organisation générale des pages est l’occasion de présenter une première approche au client ou décisionnaire. Celui-ci pourra alors valider ou réajuster les grands axes avant la réalisation des wireframes.
Les grandes zones de contenus et autres éléments doivent être cohérents sur la page. Il n’est pas rare que les souhaits initiaux soient inadaptés, par exemple une page d’accueil surchargée d’informations. C’est lors du zoning qu’est effectué ce premier débroussaillage.
Qu’est-ce qu’un Wireframe ?
Le wireframe (on parle de « maquette fil de fer » en français) est la suite logique du zoning. Chaque bloc réalisé lors de l’étape précédente se voit doté d’image(s), de texte(s) ou de vidéo(s). Ce contenu peut être fictif car les informations finales ne sont pas toujours connues à ce stade du projet. L’objectif est de définir l’organisation des éléments et des formes sans travailler l’aspect visuel, le graphisme n’interviendra que plus tard. On se base davantage sur les standards et souhaits ergonomiques pour orienter la réflexion.
Là encore, un échange avec le client est nécessaire pour valider les avancées. Le wireframe, en bon outil de communication, l’aide à se projeter. Il évite surtout la rédaction d’un cahier des charges fonctionnel où les besoins peuvent être incomplets ou mal définis, ce qui entrainerait une refonte coûteuse de la plateforme finale. Les wireframes jouent le même rôle en présentant chaque fonctionnalité et spécification associée.
Lire à ce sujet la définition de ce qu’est un Wireframe : Qu’est-ce qu’un Wireframe ?
Les wireframes validés servent de base aux web designers pour la conception des maquettes. L’organisation des éléments et le système de navigation imaginés ne sont pas immuables mais les « créatifs » doivent respecter les fonctionnalités souhaitées et validées par le client ainsi que le budget alloué au projet.
Quels sont les outils pour réaliser des Wireframe ? Aperçu de 16 outils pour créer des Wireframe.
Qu’est-ce qu’un Mockup ?
Un mockup est une image d’interface qui a été transformée en page HTML dynamique et navigable (opération réalisée via des logiciels de conception d’interfaces). Ce nouveau format autorise l’insertion de liens vers des pages notamment. Il permet aussi de rendre un formulaire fonctionnel afin d’effectuer des simulations. Grâce à l’intégration des exigences techniques, les messages de confirmation ou d’erreur apparaissent. Autant d’actions, qui, même si elles restent sommaires, sont utiles au client pour se projeter davantage.
Lire à ce sujet la définition de ce qu’est un mockup : Qu’est-ce qu’un mockup ?
Réaliser des mockups via l’outil Balsamiq Mockups
Voir aussi cette vidéo : Créer rapidement des mockups pour vos applications web et mobiles.
Vous avez besoin de faire valider l’apparence graphique d’un site ou d’une appli ? Découvrez un outil dédié efficace et facile à utiliser pour réaliser votre zoning, wireframe, mockup et prototype. Moqups est composé d’une bibliothèque d’éléments et d’icônes. Un mode “Preview” est également disponible pour naviguer à travers vos pages.
La frontière entre wireframe et mockup est donc mince. Un wireframe au format HTML sera un mockup dès lors que son interface sera interactive. La vidéo ci-dessous vous offrira des informations complémentaires pour mieux cerner cette distinction, elle présente les différentes étapes du zoning au mockup.
https://www.youtube.com/watch?v=hfJZU2r0AUY
Qu’est-ce qu’un Prototype ?
Un prototype vient valider les technologies en rendant les interfaces fonctionnelles, tout est testé pour détecter d’éventuels problèmes. Ce concept remonte à bien avant internet, un inventeur devant s’assurer que son objet fonctionne correctement avant de le commercialiser. Le but n’est pas d’inciter le testeur à acheter le produit, il doit seulement le rendre meilleur. Un prototype permet également d’aller démarcher d’éventuels investisseurs.
Création d’un prototype, via l’outil InVision
Création d’un prototype, via l’outil UxPin
Contrairement aux maquettes et schémas qui sont statiques, le prototype est interactif. Il ne sera utile qu’à partir du moment où quelqu’un devra montrer comment quelque chose doit fonctionner ou à quoi il doit ressembler. Cela peut rapidement être le cas pour un site web ou une application mobile vu le grand nombre de fonctionnalités présentes.
Le prototype peut avoir un but uniquement expérimental sans réutilisation dans le projet réel ou être réalisé comme une première version du projet en cours de production.
Lire aussi :
- Figma vs Adobe XD vs Sketch vs Axure RP : lequel choisir ?
- Sketch vs Photoshop : le duel
- InVision, outil maquettage en ligne, de la maquette à l’intégration
- Axure, l’outil de prototypage de référence des UX designers
- Tutoriel Invision : réaliser un mockup avec Invision
- Faut-il choisir entre le prototypage papier et le prototypage digital ?
- Quels sont les meilleurs logiciels 3D ?
Lire aussi cet article de l’agence UX Usabilis :
Prototypage ou réalisation de prototypes d’une application
