Wireframe

Livrable Design

Maquetter les expériences digitales en wireframes

On ne choisit pas la couleur du papier peint avant d’avoir tracé un plan d’architecte. Pour une interface, c’est exactement le rôle du wireframe (ou maquette en « fil de fer »). Cette étape permet de structurer l’écran pour amener la bonne information, au bon endroit et au bon moment à l’utilisateur. On pose l’ossature sans aucun habillage graphique pour ne pas se laisser distraire, afin de se concentrer uniquement sur la mécanique et l’information. On dessine les parcours d’un produit rapidement pour pouvoir les faire tester tout de suite aux utilisateurs. Et s’ils bloquent sur une étape, c’est infiniment plus simple d’itérer sur ces maquettes basse fidélité pour corriger, plutôt que d’attendre la phase de conception graphique, voire pire la phase de développement.

À quoi sert un wireframe ?

  • Hiérarchiser l’information à intégrer dans les interfaces
  • Avoir une vision d’ensemble des écrans (screenflow)
  • Avoir une base de travail solide sur laquelle itérer, annoter et faire évoluer
  • Obtenir rapidement de premiers retours utilisateurs lors de tests ou de guérilla tests

Pourquoi faire un wireframe ?

  • Consolider les pistes de réflexion après un atelier de conception ou de premiers sketchs
  • Tester rapidement les parcours et la structure des écrans auprès des utilisateurs
  • Avoir une base de travail assez poussée permettant d’itérer sur les aspects fonctionnels et informationnels de l’interface

Les outils pour faire des wireframes

Il existe plusieurs outils à disposition pour concevoir des maquettes : Figma (le leader), Sketch, Penpot, Adobe XD (tant qu’il existe encore) ou Balsamiq. On utilise ces outils pour aller plus vite, pour concevoir à plusieurs sur un même fichier, pour livrer une structure propre et faciliter la passation avec les UI designers et les équipes de développement. Mais une interface idéalement pensée reposera sur l’expertise du designer et celle de l’équipe projet, pas sur le choix de l’outil.

Hiérarchie de l’information et ergonomie de vos interfaces digitales

Les wireframes permettent de structurer et d’optimiser l’ergonomie d’une interface.

01

Hiérarchiser l’information

Amener la bonne information, au bon endroit et au bon moment à l’utilisateur : c’est pour ça qu’on conçoit des wireframes. On structure les gabarits en niveaux de gris pour hiérarchiser le contenu, fluidifier les parcours et permettre à l’utilisateur d’accéder facilement à ce qu’il cherche.

02

Faciliter la navigation

On organise le contenu dans chaque interface tout en gardant un œil sur le parcours global entre ces différents écrans. Les wireframes permettent justement cette prise de recul pour penser une navigation cohérente et les différentes interactions entre chaque écran.

03

Faire tester les maquettes par les utilisateurs

Pour savoir si ça marche vraiment, on conçoit un prototype interactif à partir de ces wireframes et on le fait tester auprès des utilisateurs, en observant comment ils se débrouillent face à des scénarios précis. L’avantage, c’est que modifier la structure d’un écran à cette étape est très rapide : on recueille ces retours terrain au plus tôt pour corriger le tir facilement.

04

Donner une vue d’ensemble aux clients

Les wireframes permettent également d’itérer rapidement avec l’équipe projet et d’améliorer les interfaces avant de passer à l’étape de conception graphique. Un vrai gain de temps lorsque des modifications concernant la structures des écrans doivent être effectuées.

Une conception en 4 temps

1/ Nous concevons les interfaces en niveau de gris (sans graphisme) pour travailler le placement de l’information (maquettes basse fidélité) : wireframes

2/ Nous menons des tests utilisateurs dans la rue grâce à la réalisation d’un prototype

3/ Un atelier d’itération est organisé pour recueillir vos retours.

4/ Nous consolidons les écrans suite aux retours

Questions fréquentes

Quelques exemples de réalisations

Zoning

Il s'agit de la représentation visuelle d'une interface par l'emplacement des différents blocs de contenu simples et sans détails tels que des textes ou des images

En savoir plus sur Zoning

Arborescence

L’arborescence d’un site ou d’une application représente l’organisation hiérarchique et logique de ses pages et fonctionnalités.

En savoir plus sur Arborescence

Architecture de l'information

L'architecture de l'information organise contenu et navigation pour que les utilisateurs trouvent ce qu'ils cherchent. Elle guide le design d'interface

En savoir plus sur Architecture de l'information

Prototype

Mise en animation plus ou moins poussée des écrans pour présenter un parcours dynamique à des utilisateurs et obtenir des retours

En savoir plus sur Prototype

Maquettes graphiques

Conception des futurs écrans en ajoutant la dimension graphique de manière à produire la représentation finale de l'interface

En savoir plus sur Maquettes graphiques

Sketching

Le sketching est une technique de création d'interfaces sous forme de croquis, le plus souvent à main levée. On les utilise souvent en atelier de co-conception.

En savoir plus sur Sketching

Vous souhaitez en savoir plus sur nous ?

Tout le monde parle experience utilisateur, design de service, ergonomie...
C'est pas très clair, mais vous aimeriez bien découvrir tout ca ou progresser.

Parlons-en