Aller directement au contenu

Qu’est-ce qu’un Wireframe ?

20/04/2021
0

Qu’est-ce qu’un Wireframe ?

Le Wireframe est la maquette « fil-de-fer » de l’interface. C’est un schéma de la structure et des fonctionnalités de l’application mobile ou du site. Ces maquettes, dessinées sur du papier ou digitales, présentent un degré d’interactivité variable. Lors de la conception d’interfaces, les wireframes sont des outils de design UX incontournables.

C’est quoi un wireframe ? Définition

L’anglicisme Wireframe signifie littéralement structure, cadre, ou modèle en fil de fer. Dans les dictionnaires, wireframe est souvent traduit par « maquette fonctionnelle », c’est une traduction courante. En design d’interface, on utilise l’expression « maquette fil-de-fer ». C’est le squelette de la future interface des applications mobiles, sites web et logiciels. Quelle qu’en soit la définition, le Wireframe est toujours une maquette au graphisme simplifié. Contrairement au mockup ou mock up, l’esthétique est secondaire.

Pour comprendre la définition du Wireframe, faisons une analogie avec les plans d’un bâtiment, le « Blueprint » de l’architecte. Dans tout projet de construction, il faut commencer par dessiner la structure. Les maquettes fil-de-fer sont l’équivalent pour les produits numériques. Elles se présentent sous la forme d’un diagramme (ou plus) avec des lignes et des annotations. Cette représentation évolue au fur et à mesure des itérations.

Plan architecte - pexels

Le Wireframe est l’équivalent d’un plan d’architecte (Blueprint)

Un bon Wireframe aide à visualiser l’agencement de la page, l’architecture de l’information, les parcours utilisateurs, et les fonctionnalités essentielles. L’objectif est de valider les concepts, en termes d’interface et d’expérience utilisateur, avant de transmettre le projet aux développeurs.

Prototyping ou Wireframing UX ? Différences et ressemblances

Dans son ouvrage Usability Engineering (1993), Jakob Nielsen explique que le maquettage Wireframe, tout comme le Mockup, est un « prototype horizontal ». C’est une maquette statique pour représenter la partie graphique, visible et en quelque sorte superficielle, de l’interface utilisateur. Le prototype devient « vertical » lorsque certaines fonctionnalités ont été implémentées. On peut alors mener des tests utilisateurs à partir d’un ou de plusieurs scénarios.

rototypage horizontal vertical UX ergonomie

Lire à ce sujet : Le Prototypage / Maquettage selon Usabilis

Les notions de prototypage et de maquettage sont souvent confondues. Entre prototypes papier et maquettes digitales, il devient difficile de s’y retrouver. Alita Joyce, du NNGroup, affirme qu’un Wireframe est toujours un prototype basse-fidélité. En revanche, tous les prototypes ne sont pas des Wireframes.

En fait, le Wireframing et le Prototyping ne répondent pas aux mêmes objectifs. Faire des maquettes « filaires » présente plusieurs avantages :

  • Optimiser la conception d’une interface avec les spécifications fonctionnelles, sans être distrait par les éléments visuels (couleurs, logos, etc.)
  • Montrer la future interface de l’outil, à l’échelle réelle, aux parties prenantes et s’accorder ainsi sur le projet web ou mobile avant le développement
  • Repérer les erreurs ou les problèmes – UX Design et ergonomie – pour faire des itérations rapides, sans code ni programmation
  • Gagner du temps et de l’argent: le Wireframe est rapide à réaliser, peu coûteux en ressources, flexible, et permet de réduire les révisions en phase de développement

À l’inverse, le prototype en haute-fidélité est censé être une première version du produit final. Les idées essentielles ont été validées et il peut y avoir eu implémentation. On veut désormais tester l’efficacité et l’utilisabilité avant la sortie de l’application web / mobile. Ces livrables sont donc produits à des phases différentes du projet UX UI Design.

La création de maquettes dans le processus de conception

Pour concevoir le design d’une interface en optimisant la qualité de l’expérience utilisateur, il faut respecter un certain nombre d’étapes. En résumé :

  • Réaliser une Recherche utilisateur: comprendre les besoins des utilisateurs finaux
  • Maquetter les écrans de l’interface:
    • Sketch (dessin) et/ou Zoning (blocs d’informations à faire figurer sur la page)
    • Wireframe : idées de base et concepts affinés sans design graphique. Les wireframes peuvent aussi servir à créer un storyboard.
    • Mockup : maquette graphique haute-fidélité et outil de communication (Wireframe mockup)
    • Prototype d’application, de logiciel, etc. : fonctionnel et réalisé en collaboration avec le développeur
  • Évaluation ergonomique entre les itérations des maquettes: audit ergonomique, test de perception, test utilisateur.

Ce tunnel montre l’évolution du processus de conception, itératif et collaboratif, de la phase d’idéation au design de l’application.

Sketch Wireframe Prototype Design

Source : UXMatters

En conception centrée utilisateur, les méthodologies ne sont pas rigides. Tout dépend du projet – première réalisation de l’interface de l’application, refonte d’interface web, etc. – du budget… Néanmoins, il est toujours nécessaire de concevoir des maquettes, faire des prototypes et évaluer l’ergonomie de l’interface. En revanche, le nombre de maquettes intermédiaires et leurs caractéristiques (statiques, interactives…) peuvent varier.

William Evans, expert Agile, UX Design et Design Thinking montre bien l’importance du wireframing dans la présentation Right Way to Wireframe : https://www.slideshare.net/willevans/rwtw-presentationwill-evanssxsw/27-Wireframing

Elle date un peu mais elle a très bien vieilli.

Exemples de wireframe, ou comment réaliser des maquettes wireframe

Les wireframes représentent une interface sobre. Les designers intègrent généralement les éléments graphiques et contenus suivants :

  • En tête et pied de page
  • Barre de navigation
  • Boutons call-to-action
  • Fil d’Ariane
  • Éléments de formulaire
  • Zones pour les images ou médias

On peut réaliser une maquette avec un bloc-notes et un crayon ou concevoir une maquette interactive. Voici quelques exemples de Wireframes :

Wireframe Sketch à la main

Exemple de Wireframe Sketch à la main : Speckyboy – Wireframe d’un site web

Sketchy Wireframe avec Axure RT

« Sketchy Wireframe » avec Axure RT : Humane Interface  – Wireframe site web

Exemple de Wireframe Balsamiq

Exemple de Wireframe en Responsive Design – Wireframe gratuit avec Balsamiq

Chez Usabilis, nous réalisons une maquette interactive avec Axure RP, souvent associée à une charte ergonomique. Et si vous souhaitez apprendre à créer des maquettes, nous proposons également des formations au maquettage d’interface :

Formation Ergonomie des interfaces

Formation UX Design ergonomie IHM

Public concerné : Destinée aux personnes intervenant dans la conception d’interface.

Durée : 5 jours (soit 35 heures)

Prix : 1 938 €

Prochaines dates :

Formation UX web et e-commerce

Public concerné : Destinée aux personnes intervenant dans la conception de sites Web e-commerce.

Durée : 3 jours

Prix : 1 230 €

Prochaines dates :

Formation UX Mobile & Tactile

Public concerné : Destinée aux concepteurs, webdesigners, webmasters, développeurs, chefs de projet, responsables marketing, équipes R&D …

Durée : 3 jours (soit 21 heures)

Prix : 1 230 €

Prochaines dates : 6-7-8 septembre 2021 (à distance)

Conclusion

Le Wireframe représente une interface utilisateur simple. Cette maquette dite fil-de-fer est un support de conception et de communication. Les besoins fonctionnels préalablement définis y sont exprimés (arborescence, système de navigation…). Cette esquisse peut donc être validée, jetée, améliorée avec les équipes impliquées dans le projet. Le wireframing UX est une phase importante pour concevoir une bonne interface et une expérience utilisateur réussie.

À lire sur le blog

Bibliographie et sources

Livre “UX Design et Ergonomie des interfaces”Notre manuel de référence afin d’appliquer les meilleures pratiques UX.

UX Design et Ergonomie des Interfaces, de Jean-François Nogier – 7ème édition – Dunod

Le livre “UX Design et Ergonomie des Interfaces” s’adresse à tous les professionnels impliqués dans la conception et le développement des applications digitales. Qu’il s’agisse d’applications mobiles ou tactiles, de logiciels ou de sites web, cet ouvrage sur l’UX design et l’ergonomie des interfaces est utilisé quotidiennement par les éditeurs de logiciels, responsables R&D, directeurs marketing, chefs de produit, designers et, bien sûr, les ergonomes UX ou UI.

“…Ouvrage est très structuré … il est lui-même bien illustré, avec une maquette remarquable de clarté mettant parfaitement en valeur les différents niveaux de texte….” Le Monde informatique.fr

 

 

 

Crédit image à la Une : Sridhara A (Dribble)

Commentaire