Zoning, wireframe, maquettage, prototype… les meilleures pratiques

Zoning, wireframe, maquette, prototype, voici des termes qui ne vous sont pas anodins, puisque nous les rencontrons de plus en plus dans le monde du Web, notamment dans les phases d’initialisation des projets. Mais savez-vous réellement ce qui se cache derrière chacun de ces termes, qui désignent l’ensemble des techniques et des outils qui permettent de maquetter graphiquement, fonctionnellement, ergonomiquement un site Web ?

Tout d’abord utilisée dans la création de logiciels lourds avant la phase de développement, cette technique de conception a progressivement été adoptée, et est aujourd’hui conseillée par les professionnels du Web. ceci dit, il arrive encore couramment que l’on fasse l’amalgame entre les différents termes. Parallèlement, le nombre d’applications permettant de réaliser des wireframes ou des prototypes ne cesse d’augmenter, avec à chaque fois de nouvelles spécialisations. Cet article, loin de se vouloir exhaustif, présente les différentes notions de la conception et les outils « phare » du moment.

Les différentes notions derrière ces termes

Un zoning

Le zoning est une technique consistant à schématiser une page Web à l’aide de blocs ou boîtes, dans le but de montrer les grandes fonctionnalités et les zones principales du contenu. Cette étape est cruciale, puisqu’elle permet de décider de l’organisation générale des pages. Ce travail de zoning débouche sur la rédaction d’un livrable qui servira de support de discussion avec le client, et permettra d’apporter les corrections avant validation finale.

Un wireframe

Le wireframe s’appuie sur le zoning réalisé auparavant, et permet d’indiquer le contenu présent dans chaque bloc de la page Web et de structurer l’interface. Aucun design n’est fait sur cette étape de wireframing, son objectif étant avant tout fonctionnel. Ceci dit, on distingue parfois la notion de mockup, légèrement plus orientée « présentation » (positionnement et proportion des éléments, etc.).

Certains outils de wireframing permettent d’associer des fonctionnalités à des éléments des pages réalisées – liens entre différents wireframes, changement d’un texte, etc., mais cela reste généralement assez limité.

Une maquette

Une maquette permet d’intégrer la dimension interactive. Ainsi, des liens peuvent être faits afin de montrer la navigation entre les différentes pages, et il est possible de simuler la connexion à un compte utilisateur, les erreurs lors de la saisie d’un formulaire, des carrousels d’images, etc. Une maquette permet donc d’aboutir à des simulations très puissantes (même si cela dépend du logiciel utilisé), souvent exploitables à partir d’un navigateur Web.

Dans un premier temps, des interactions riches entre l’utilisateur et l’application sont mises en place. Ensuite, le design peut éventuellement être intégré.

Un prototype

Un prototype est une application fonctionnelle, qui se focalise sur le fond, et permet de déterminer avec quelles technologies les informations seront affichées. Le prototype peut servir à tester certaines technologies (prototypes jetables) ou constituer le début de l’application future (prototype évolutif).

un prototype est généralement unique (soit abandonné par la suite, soit fait pour évoluer), contrairement aux wireframes et maquettes qui peuvent être multiples.

Pour conclure sur cette partie : n’oubliez pas qu’une maquette de voiture, c’est peint à la main, c’est joli, et ça s’expose dans une vitrine ! Un prototype de voiture, c’est moche, mais ça roule et donc fonctionnel !

Pourquoi recourir aux outils de maquettage et de prototypage ?

L’usage de ces outils de maquettage ou de prototypage est primordial et sert de base à la phase de conception d’un projet Web ou d’une application. Les avantages sont multiples :

• cela favorise la définition du périmètre fonctionnel,
• cela permet de présenter aux utilisateurs des éléments sur lesquels ils vont pouvoir réagir,
• cela permet de se concentrer sur le fond (fonctionnalités, interactions, contenus), sans se laisser distraire par la forme (design),
• ce facilite l’évolution de l’interface proposée au départ, afin qu’elle corresponde le mieux possible aux attentes et besoins des futurs utilisateurs,
• cela permet, au besoin, de corriger ou valider des choix (techniques, fonctionnels) avant de commencer le développement technique,
• l’intervention d’un ergonome permet d’obtenir des retours d’expérience et des bonnes pratiques ergonomique.

Quel outil choisir pour son projet ?

Le nombre d’applications dédiés aux wireframes et prototypes ne cesse d’augmenter, et il est donc difficile de faire un choix parmi une liste de plus en plus longue de produits. La première question qui vient habituellement porte sur la nature de l’outil : vaut-il mieux commencer avec une application permettant de réaliser des wireframes ou des maquettes ?

La réponse à cette question peut paraître simple : tout dépend de ce que l’on attend de cette phase de maquettage. Pour un petit projet, l’usage des wireframes peut être suffisant afin de déterminer la composition des différentes pages. En revanche, si l’on souhaite réaliser un site complexe, l’usage d’une maquette est primordial, car cela permet de mieux illustrer l’interactivité, la navigation et les fonctionnalités du site.

Une fois ce premier choix fait, il reste à sélectionner le logiciel qui répond le mieux aux attentes, et il y en a une grande quantité : iPlotz, Balsamiq Mockups, Visio, Axure, Gliffy, Pencil, Mockingbird, ProtoShare, Justinmind Prototyper, etc. Nous nous contenterons de présenter les trois logiciels qui nous semblent les plus intéressants dans un contexte projet.

1. Balsamiq Mockups

Balsamiq Mockups permet de réaliser des schémas et des maquettes d’écrans comme s’ils étaient dessinés à la main. L’effet est garanti lorsque vous présentez de tels dessins !

Ce logiciel possède une interface simple et intuitive, les différents composants disponibles sont très variés et classés par type (formulaires, blocs, player vidéo, calendrier, vue arborescente, nuage de tags, etc.). Balsamiq Mockups possède des fonctionnalités basiques, mais très pratiques et bien pensées, comme les raccourcis clavier et la sélection multiples d’objets à la souris.

1.1 Présentation de l’interface

L’interface de Balsamiq Mockups est très simple et permet de prendre en main très rapidement le logiciel. Elle est découpée en 3 parties :

• les menus classiques, que comportent tous logiciels avec la reprise de certaines fonctionnalités sous forme d’icônes sur la droite,
• un cadre qui comporte tous les éléments HTML disponibles classés (All, Big, Buttons, Common, Media,…),
• La feuille de papier, sur laquelle on dispose tous les éléments permettant de construire le wireframe.

1.2 Différents critères d’évaluation

Prise en main et utilisation

La prise en main est très facile : un simple glisser déposer suffit pour positionner les éléments sur la page, un double clic pour éditer les textes des éléments, et un clic sur un élément fait apparaître en une palette de propriétés. Cette dernière propose divers réglages contextuels divers : format du texte (taille, couleur, alignement…), état des éléments (in focus, selected, disabled, etc.), bordure, transparence, gestion des plans.

Les éléments HTML proposés pour créer les wireframes sont très nombreux : player vidéo, accordéon, breadcrumb, tableau, calendrier, nuage de tags, etc. Des aides visuelles pour l’alignement s’affichent automatiquement quand on déplace des éléments et la taille de ces derniers apparaît en surimpression quand on les agrandit / réduit.

Quelques points négatifs :

• Il n’est pas possible de choisir une autre typo : tous les textes utilisent du Comic sans MS,
• Il est parfois difficile de trouver dans quel groupe un élément HTML se trouve, même si le moteur de rechercher permet de les localiser rapidement à partir de leur nom.

Partage des fichiers et travail collaboratif

Contrairement à d’autres logiciels du même genre, il n’est pas possible de partager un wireframe, ou encore de travailler à plusieurs.

Options d’export

Balsamiq Mockups permet l’export de ses wireframes en plusieurs formats : XML, PDF et PNG ce qui permet de pouvoir les exploiter dans n’importe quel document par la suite.

Coût

Balsamiq Mockups existe aujourd’hui en plusieurs versions :

• web (une version de démonstration sera bientôt disponible),
• desktop, la licence est de 79$. Il est possible de l’utiliser sans acheter la licence mais diverses contraintes se présentent comme : l’impossibilité d’exporter, d’enregistrer le fichier et une fenêtre apparaît très régulièrement à l’écran,
• web office, avec des versions intégrées à Confluence, JIRA et XWiki.
• * Plugin pour Confluence, de 300 $ à 4000 $
• *Plugin pour JIRA, de 149 $ à 799 $
• *Plugin pour XWiki, de 450 $ à 6000 $

Le point fort de Balsamiq Mockups est son rendu crayonné et monochrome, qui permet de se détacher du rendu final. Ainsi, le client ne s’attarde pas sur des questions graphiques, qui ne seront vues qu’ultérieurement, au moment de la réalisation graphique.

2. iPlotz

iPlotz est un service en ligne proposant de gérer et de réaliser des wireframes, grâce à une palette de composants.

2.1 Présentation de l’interface

• A gauche, tous les éléments utiles pour construire chacune des pages du projet.
• En haut à droite, les actions classiques : enregistrer, imprimer, etc.
• Le grand rectangle en dessous est la zone où les éléments vont être déposés pour construire la page.

2.2 Les critères d’évaluation

Prise en main et utilisation

Contrairement à Balsamiq Mockups, iPlotz est peu aisé en terme de prise en main et utilisation. En effet, l’accès aux objets de la bibliothèque se fait dans un menu vertical et les pictogrammes sont petits et surtout peu représentatifs du résultat. Pour pallier à ce soucis de lisibilité, il faut se fier aux libellés, et on passe donc beaucoup de temps à essayer de trouver le composant correspondant à ce que l’on souhaite faire.

Partage des fichiers et travail collaboratif

iPlotz dispose de 3 fonctions : « Manage » pour gérer un projet, « Wireframe » pour réaliser les zonings, et « Preview » pour au mode « lecture seule », fans lequel on peut ajouter de commentaires. Après avoir réalisé le wireframe, il est très simple d’inviter un client à apporter ses remarques et, en ce sens, iPlotz permet un vrai travail collaboratif.

Quelques avantages

• Il est multipage. Il est donc possible dans un seul et même projet de réaliser plusieurs wireframes et de faire des liens entre eux,
• Il propose une gestion de modèles (nommés « masters »), qui évitent de refaire la même composition sur les pages utilisant des éléments récurrents,
• Il dispose d’un mode plein écran ,
• Il offre une bibliothèque d’éléments graphiques complète.

Coût

• Gratuit : limité à un projet et 5 wireframes
• Un utilisateur : 15$/mois ou 99$/an
• Plusieurs utilisateurs : 295$/an pour 5 utilisateurs et 495$/an pour 10 utilisateurs
• Version desktop : 75$

iPlotz est un outil plein d’idées intéressantes, mais comportant de sérieuses lacunes en terme d’ergonomie.

3. Axure

Axure est un logiciel qui permet de créer des maquettes HTML fonctionnelles totalement interactives. On peut ainsi donner au client un aperçu total du fonctionnement futur de son site.

3.1 Présentation de l’interface

L’interface d’Axure est très simple, même pour les personnes qui débutent dans le prototypage. Elle se divise en 3 zones bien distinctes :

• La colonne de gauche :
• * L’arborescence du site
• * Les éléments graphiques et widgets
• * Les masters ( modèles qui comportent des éléments récurrents)

• La partie centrale :
• * La page où les éléments sont déposés
• * Zone qui permet de mettre des commentaires sur chaque page

• La colonne de droite :
• * Les interactions que l’on souhaite mettre sur les éléments (évènements liés à la souris mais aussi ceux du formulaire)
• * Les informations sur les éléments (taille et position)

3.2 Les critères d’évaluation

Prise en main et utilisation

Axure est très facile à prendre en main et à utiliser. Très rapidement, il est possible de créer une maquette de site fonctionnel.

La bibliothèque de widgets peut paraître peu fournie, mais elle comporte les éléments essentiels à la réalisation d’un site, et le site officiel de l’éditeur propose de nouveaux widgets qui peuvent enrichir la bibliothèque locale. Un simple « Glisser-déposer » permet de disposer les éléments sur la page.

L’ajout des interactions entre les pages ou éléments est simple. Il suffit de sélectionner l’élément sur lequel on souhaite mettre une action puis choisir l’action à réaliser : changement de page, apparition d’une pop-up, changement d’état, etc.

Le principal inconvénient d’Axure est l’absence de guides, ce qui rend difficile l’alignement des blocs. Nous sommes obligés d’avoir recours très fréquemment au bloc « Location & size »

Partage des fichiers / Travail collaboratif

Axure propose de partager les fichiers entre plusieurs personnes, mais cela comporte quelques inconvénients et, en pratique, le travail en simultané est très compliqué. Contrairement à iPlotz, Axure ne propose pas de fonctionnalité permettant au client de commenter la maquette.

Quelques avantages

• La possibilité de gérer des spécifications fonctionnelles directement via Axure, en exportant la maquette au format word.
• La possibilité de télécharger de nouveaux widgets sur le site d’Axure.
• Axure est un produit assez connu, qui dispose d’une communauté importante et qui évolue à un rythme soutenu

Coût

• Gratuit : pendant 30 jours
• Utilisateur unique :589$
• Plus de 5 utilisateurs : 539$ /licence

Axure est un excellent logiciel de maquettage, facile à prendre main et agréable à utiliser, et permettant de faire des maquettes très complexes.
Le gros reproche qu’on peut lui faire concerne la génération des fichiers HTML, qui n’est pas optimisée pour les gros projets. Au delà de 10 pages comportant des images, l’export HTML devient trop lourd pour être consulté sur internet, ce qui casse évidemment un des intérêts de l’application.

Conclusion

L’erreur classique faite par de nombreuses personnes consiste à se jeter en priorité sur la conception graphique et le design d’un site Internet, sans attacher suffisamment d’importance à son ergonomie. Cette erreur a souvent un coût : en temps, en énergie et bien sûr en argent, un beau design devant généralement être refait s’il ne permet pas de bien présenter tout le contenu.

Les étapes de zoning, de wireframe sont indispensables dans le processus de la réalisation d’un site Internet, et il faut donc y porter une attention particulière. Plus le projet est grand, plus ces outils prennent une place importante, dans la mesure où ils facilitent la conception des projets.