Zoning, Wireframe, Maquette ?
Zoning, Wireframe, Maquette … KEZAKO ?
Vous avez rédigé votre cahier des charges et vous voulez que votre agence de communication digitale produise une maquette ?
Oui mais patience, tout est question d’étape et surtout de méthode ! Lors de la phase de conception d’un projet digital, et passée la phase de définition de l’arborescence (organisation des contenus et de la structure), vous entendrez parler de Zoning, de Wireframe, de Prototype et de Maquette.
Bien que parfois utilisés indifféremment à tort par certains chefs de projet digitaux lors de la phase de conception des interfaces utilisateurs, ces termes correspondent à des outils de conception distincts et complémentaires lors des phases de design des interfaces.
- La définition de l’arborescence ou squelette du site : organisation et hiérarchisation de l’information, des contenus et des fonctionnalités ;
- La conception de la navigation (ex. Menu principal, système de navigation secondaire, navigation contextuelle) ;
- La conception de l’interface utilisateur : sélection et disposition des éléments d’interface qui permettent aux utilisateurs d’interagir avec les contenus et fonctionnalités (menus, boutons d’actions, champs de saisie, menu déroulant, boutons radios, …) ;
- La conception graphique de l’interface traduite par une maquette (identité visuelle, polices, choix des visuels, …).
Lors des ces différentes phases, la définition préalable des objectifs du site et des personas nous aident à définir les interfaces et les parcours utilisateurs.
Zoning, Wireframes, Mockup, quelles sont les différences ? À quoi servent-il ? Quels outils privilégier pour votre projet et à quel stade ? Tentons de répondre à ces quelques questions et commençons par quelques petites définitions. Petit point donc sur la terminologie !
Qu’est-ce qu’un zoning ?
Le zoning est une représentation globale d’une page permet de schématiser “grossièrement” une page web grâce à l’utilisation de blocs. L’objectif est de présenter l’emplacement des zones de contenu et des grandes fonctionnalités.
C’est une première étape déterminante pour définir l’organisation générale des pages d’un projet. Elle arrive juste après la création d’une arborescence.
Le zoning permet de présenter une première approche d’une page web afin d’en valider les grands axes (zones de contenu, fonctionnalités, hiérarchie, …).
La validation des zonings constitue une étape déterminante, préalable à la définition des Wireframes. Les zonings permettent par exemple d’identifier une surcharge d’information sur la page d’accueil d’un site web.
Qu’est-ce qu’un Wireframe ?
Les wireframes exploitent les zoning réalisés lors de la phase précédente pour préciser chaque bloc en introduisant les contenus présents. Un wireframe est équivalent au squelette ou à la structure simple d’une page web ou de l’écran d’une application mobile. Il est beaucoup plus détaillé que le zoning.
Le wireframe 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 (ex. Lorem Ipsum) car les informations finales ne sont pas toujours connues à ce stade du projet. De plus l’étape de “wireframing” se concentre sur l’ergonomie, et utiliser de vrais textes lors de cette étape détournerait l’attention de cet objectif principal. Le wireframe n’est pas une maquette !
Un wireframe, aussi appelé “maquette fil de fer” en français, est donc une représentation filaire d’un site internet en noir et blanc, et dépourvus de couleurs, de choix de polices, de logos qui décrit la taille, l’organisation et l’emplacement précis des éléments de la page, les fonctionnalités du site, moteur de recherche, les boutons d’action (CTA) et les éléments de navigation de votre site Web sans aucune notion graphique. L’aspect visuel ne sera traité que lors de la phase suivante de maquettage.
Cette étape est d’autant plus importante lors de la définition d’une page produit sur un site e-commerce.
Lors d’un atelier de conception web, le Wireframe place l’ergonomie au premier plan (simplicité de navigation, lisibilité, …). Les wireframes permettent aux différents membres du groupe projet de se projeter et de valider définitivement les fonctionnalités attendues.
Les Wireframes sont aussi parfois utilisés dans le cadre de la rédaction de spécifications fonctionnelles pour mieux présenter chaque fonctionnalité.
Créer des wireframes permet de rendre le processus de conception itératif. Il permet de gagner du temps lors de la phase de maquettage et de design graphique. Il permet ensuite d’en gagner également lors de la phase de réalisation car les équipes de développement comprendront plus facilement le résultat final attendu.
Construiriez-vous une maison sans les plans en commençant par la décoration ? Probablement, non. Et bien c’est la même chose pour une site web. C’est assez logique et l’expérience montre que cela fonctionne !
Qu’est-ce qu’un mockup ?
Un Mockup permet de transformer une wireframe en page web ou écran interactif. Il est alors possible d’ajouter des liens afin de présenter les principes de navigation du projet. Il est même possible de rendre un formulaire fonctionnel afin de faire des simulations, en intégrant les exigences techniques et donc, l’affichage de messages d’erreur ou de confirmation en fonction des informations saisies.
La frontière entre wireframe et mockup est mince. Un wireframe est donc un mockup lorsque l’interface est interactive. Le mockup n’est pas une étape systématique, ni toujours nécessaire.
