Un wireframe, maquette fonctionnelle ou maquette “fil de fer,” est un schéma permettant de définir les zones et composants qu’une interface doit contenir.
L’utilisation de wireframes est particulièrement fréquente dans le développement logiciel et le développement de sites et applications web. Ils définissent la structure globale de chaque page, la position de chaque élément, et donnent un aperçu du rendu final. Volontairement simplifiées et sans couleurs, ces maquettes fonctionnelles sont un point de départ dans la recherche d’ergonomie.
Les wireframes servent d’appui pour la conception des maquettes par les graphistes. Ils font apparaître sous forme de blocs les zones de texte, l’emplacement des images, des vidéos, des liens, ainsi que les menus.
Un wireframe est comparable à un plan d’architecte : les formes sont simples et schématisées mais chaque zone et aspect fonctionnel est mis en avant. Il formalise les attentes, les besoins et les objectifs du projet, sans tenir compte des aspects graphiques et visuels, mais uniquement de l’aspect purement fonctionnel. L’utilisation de wireframes apparaît aujourd’hui comme essentielle dans l’optimisation de l’expérience utilisateur.
Quels sont les avantages à utiliser des wireframes ?
Avant de se concentrer sur l’aspect graphique et visuel d’un site, il est indispensable d’en passer en revue les aspects fondamentaux à l’aide de wireframes. Un plan simple et fonctionnel permet de vérifier que toutes les fonctionnalités sont présentes, sans être perturbé par différentes couleurs et polices d’écriture par exemple.
Les wireframes, de par leur minimalisme, sont rapides et simples à modifier, ce qui constitue un outil plus que pratique pour tester de nombreuses possibilités et tendre vers une expérience utilisateur optimale. De plus, leur utilisation simplifie la communication entre toutes les parties du projet puisque leur design simple et fonctionnel est compréhensible par tous. Enfin, ils sont un indicateur de l’envergure du projet, de sa faisabilité, des moyens à mettre en oeuvre, de son coût.
Outils de wireframe : Adobe Fireworks, Keynote, Balsamiq, Moqups ou encore InVision.