maquettage

Maquettage d’application, conseils et méthode

Tous les professionnels amenés à faire de la conception (web ou autre) seront un jour confrontés au maquettage. Cet article recense les étapes clés de cette opération.

Qu’est-ce que le maquettage ?

Le dictionnaire Larousse définit le maquettage comme une « représentation (…), le plus souvent à échelle réduite, mais fidèle dans ses proportions, d’une construction, d’un appareil, d’un décor, d’un objet quelconque ». Il prendra différentes formes en fonction du secteur d’activité, notre réflexion portera ici essentiellement sur la conception d’interfaces web.

Dans un objectif de simplification de l’information, la structure du site doit être pensée jusqu’à la hiérarchisation des contenus. N’hésitez pas à regarder ce qui se fait de mieux chez la concurrence ou les plateformes similaires, vous pouvez tout à fait créer un site avec un concept innovant en vous inspirant de quelques éléments d’une interface éprouvée.

Le maquettage est l’occasion de présenter le projet aux équipes afin de recueillir leurs impressions et remarques. Ces feedbacks sont essentiels pour faire évoluer le concept avant le développement de l’interface (modifier une plateforme existante est beaucoup plus compliqué et onéreux).

maquettage.png

Exemple de maquettage rapide en papier

Cinq étapes à respecter

Comme nous venons de le voir, l’analyse de l’existant doit être le point de départ de votre réflexion.

N’hésitez pas à solliciter votre entourage pour brainstormer, tous les avis sont bons à prendre !

Intervient ensuite la définition du contenu et des objectifs (contexte, fonctionnalités, aspects techniques, etc.) qui peut s’apparenter à une feuille de route. Elle permettra d’imaginer un scénario de navigation. 

Exemple : 

  • Je me connecte
  • Je choisis le type de vêtement recherché parmi les différentes catégories disponibles
  • Je parcours les modèles et en ajoute un au panier en choisissant la taille et la couleur
  • Je paie 

C’est le moment de commencer la conception de votre interface via un maquettage papier. Cette opération est ludique, rapide et permet de recueillit rapidement beaucoup d’idées.

Vous êtes désormais prêts pour le maquettage numérique.

Certains préfèrent le maquettage ou le prototypage sur papier. Lire cet article du blog UX sur les avantages du prototypage papier comparés au prototypage numérique

Quel logiciel de maquettage utilser ?

Le prototypage papier possède beaucoup d’avantages mais il peut s’avérer compliqué de le présenter à un client. Même si le projet est très avancé, la forme est laissée de côté. Les premières esquisses de l’interface ont lieu sur des outils dédiés.

Avant de vous présenter trois logiciels intéressants, sachez que Photoshop n’est pas fait pour le prototypage. L’aspect graphique n’interviendra qu’à la toute fin du projet.

Le premier logiciel que nous avons testé pour vous est Balsamiq. C’est l’une des plateformes les plus connues, elle s’avère très pratique pour réaliser le squelette d’une application. Le logiciel est simple à prendre en main mais l’emplacement des formes est peu intuitif, on regrettera aussi le manque d’interactions et transitions.

maquettage_balsamiq.png

Mockingbot est un outil collaboratif basé sur le glisser-déposer. Les interactions se structurent rapidement à l’aide de liens visibles à connecter à des pages. On aurait apprécié la présence d’un clic gauche (l’habitude sans doute) et une meilleure fonctionnalité d’alignement.

maquettage_mockingbot.png

Axure est ce qui se fait de mieux en termes de maquettage d’interface, c’est un peu le logiciel de référence chez les professionnels. Son prix est lui aussi très au-dessus de la moyenne, à réserver aux projets les plus complexes.

maquettage_axure.jpg

Plus d’informations, nous vous recommandons la lecture de cet article de l’agence UX Usabilis  sur le maquettage d’interface Web ou d’applications.