Comme tout projet créatif et bien en amont des maquettes graphiques, plusieurs étapes sont indispensables en complément du cahier des charges pour déterminer l’ergonomie d’une interface numérique. Ces étapes de recherche sont nommées par terme barbare ou des anglicismes, souvent mal comprises ou simplement confondues. Nous passerons donc en revue chacun de ces termes en respectant leur ordre d’apparition dans la chaine de conception.
1 / L’arborescence
L’arborescence est une structure hiérarchisée de données dans des répertoires (dossiers) et des sous-répertoires (sous-dossiers). L’image de l’arbre est une métaphore pour décrire l’organisation du chemin d’accès à chaque page par branches et ramifications. C’est le principe que nous utilisons naturellement dans le rangement et le classement des fichiers dans notre ordinateur . Par exemple utilisateur > documents > cours-de-web > sujet-1 > sujet.pdf sera le chemin pour accéder au document sujet.pdf, ce chemin pourra être illustré par un schéma simple ressemblant à une ramification.
Lors de la création d’un site web, il est donc essentiel de définir une arborescence l’arborescence. C’est cette étape qui permettra d’identifier chaque page du site, à quel niveau elles se trouveront et, le cas échéant, quel chemin devra emprunter l’internaute pour s’y rendre.
2 / Le zoning
Une fois l’arborescence définie, il est nécessaire de commencer à hiérarchiser les contenus dans la page. C’est le rôle du zoning, première étape cruciale qui schématise de manière très simple la structure des pages les plus importantes du futur site web. Il délimite les différentes zones (header, footer, navigation, …) et les fonctionnalités définies par le cahier des charges. Il met en avant le premier niveau de lecture et permet de vérifier la cohérence globale du projet.
On utilise des blocs pour déterminer où se trouveront les contenus et fonctionnalités. 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.
3 / Le wireframe
Vient ensuite l’étape du wireframe (on parle de « maquette fil de fer » en français). Il s’appuie sur le zoning et détaille le type de contenu des blocs : images, textes (souvent du faux-texte à ce stade de la conception). Il intègre également les animations et permet de montrer le fonctionnement de la page de façon schématique. Cette étape permet de s’assurer que l’expérience utilisateur (UX) et l’ergonomie seront en adéquation avec les objectifs. Même si aucun design n’est encore appliqué, le wireframe permet de visualiser plus concrètement le projet et ses fonctionnalités.
4 / Le mock-up
Le mock-up, ou maquette graphique, est la version la plus détaillée et la plus fidèle au produit livré. Elle permet de valider l’apparence graphique des différentes pages du site et de mettre d’accord les acteurs du projet avant de passer à sa production. On appelle aussi mock-up les mises en situation du produit, qui permettent aux prestataires et aux commanditaires de voir le site dans une situation “type”.
5 / Le prototype
Le prototype est là pour simuler et valider l’interface utilisateur avant son développement, sa programmation et la mise en production. Il permet donc de simuler la navigation, les interactions, les transitions, les process. Sur cette base, il sera facile de valider ou de modifier ce qu’il y a lieu de l’être.
Pour conclure
Il est important de passer par ces différentes étapes de création. On peut en fusionner la plupart, mais l’erreur à ne pas faire est de se jeter directement sur le design et l’esthétique : le tout, au détriment de l’ergonomie. Les webdesigners se doivent de garder en tête qu’une maquette très esthétique mais pauvre en matière d’ergonomie posera inévitablement un problème au moment de sa réalisation, elle devra donc être reprise et retravaillée. Ce qui engendrera une perte de temps et risquera de mettre en défaut la confiance de vos clients et des différents acteurs du projet. Plus le projet est grand, plus les différentes étapes sont importantes et facilitent la conception.