Wireframe (design)

Le wireframe ou maquette fonctionnelle est un schéma utilisé lors de la conception d'une interface utilisateur pour définir les zones et composants qu'elle doit contenir. À partir d'un wireframe peut être réalisée l'interface proprement dite par un graphiste. La démarche de recourir à des wireframes s'inscrit dans une recherche d'ergonomie. Elle est surtout utilisée dans le cadre du développement logiciel et des sites et applications Web. Le wireframe consiste concrètement en un croquis, un collage papier ou un schéma numérique.

Exemple de wireframe réalisé à l'aide de l'application Balsamiq. Il correspond à une entrée d'un répertoire proposant le nom, les coordonnées d'une personne, un texte de présentation, une vidéo, une zone pouvant accueillir des photos et des pièces jointes.

Description

Pour Jakob Nielsen, le maquettage wireframe correspond à du prototypage horizontal, c'est-à-dire au développement de la partie graphique de l'interface homme-machine. Il permet :

• la confirmation de la satisfaction des exigences de l'interface utilisateur et des possibilités du site web,
• la simulation du fonctionnement a priori du site web selon les objectifs de départ,
• une première estimation du temps et du coût de développement.

Pour un site web, une première forme de maquette statique consiste à définir le « zoning » des écrans, c’est-à-dire le découpage des pages du site. Pour chaque type de page (ex : page d’accueil, page intérieure, chapeau de rubrique, etc.) le concepteur identifie les différentes zones de la page qu’il schématise à l’aide de blocs ou de boîtes afin de déterminer les grandes fonctionnalités et les zones principales du contenu. Il précise le rôle et la position de chaque zone et définit leur taille relative ainsi que leur importance visuelle. Le concepteur peut par la suite détailler et donner des précisions sur les éléments de la page comme la hiérarchisation des différents textes, les dimensions en pixel des contenus, etc.

Le zoning sert de base au travail du graphiste. Ce dernier habille les différentes zones de l’écran ainsi définies en fonction de l’identité visuelle du produit.

Le wireframe peut servir de support de discussion avec les commanditaires du site web, mais également pour réaliser des tests utilisateurs. Il est possible également d'insérer des liens sur certaines parties de la maquette informatisée afin de permettre de naviguer entre les écrans et donc de vérifier l’ergonomie du système de navigation proposée voire de certaines modalités d'interaction. On parlera dans ce cas plus volontiers de prototype.

Logiciels dédiés

Bien que le passage par le maquettage papier soit encore une technique courante, il devient de plus en plus fréquent d'utiliser des logiciels dédiés ou détournés de leur fonction d'origine :

• Adobe Fireworks - logiciel propriétaire (développement abandonné en 2013)
• Axure (en)
• Balsamiq (en) - logiciel propriétaire
• Dia (logiciel) - logiciel libre
• Draw.io
• Inkscape - logiciel libre
• Justinmind Prototyper (en)
• Keynote
• LibreOffice Présentation - logiciel libre
• Microsoft Powerpoint
• Visio
• OmniGraffle
• Pencil - greffon dans Firefox ou comme logiciel - logiciel libre
• ProtoShare (en)
• WireframeSketcher (en) - logiciel propriétaire
• Figma Concevoir, prototyper et recueillir des commentaires en un seul endroit (en)
• Adobe XD Concevoir et prototyper (en et fr) -
• Lucidchart

Voir aussi

Articles connexes

• Web design
• Prototypage
• Utilisabilité
• Maquettage papier

Liens externes

• Liste d'outils : http://wireframes.linowski.ca/
• Les méthodes de prototypage informatique
• Un article de Deuse sur comment réaliser de bons wireframes