Aller directement au contenu

Outils de prototypage d’interface

24/02/2010

Pour élaborer rapidement et concrètement l’agencement de l’information (et le zoning) et des fonctionnalités d’une future interface, le maquettage en fil de fer (wireframe) est souvent un passage obligé de l’approche ergonomique. Comme le dit Jean-François Nogier dans son ouvrage : “Le prototypage est la clé de voûte du développement itératif“.

Voir notre formation Adobe XD pour concevoir des maquettes UX/UI

Que l’on soit à l’aise ou non avec un crayon à papier, quand un client veut pouvoir se représenter concrètement sa future interface, l’esthétique du wireframe a tout de même son importance. De nombreux outils sont à portée de souris et tout dépend de ce que l’on veut en faire. Je vous en propose donc quelques uns, du plus basique au plus étoffé, du plus statique au plus fonctionnel (n’hésitez pas à nous en suggérer d’autres!).

Les plus populaires

Axure, assurément le meilleur compromis en termes de possibilités de prototypage statique ou fonctionnel et d’architecture de l’information, sans connaissance en programmation. Il génère même du javascript en toute transparence (rendu au format html). Un module supplémentaire permet le partage de prototype en ligne et l’ajout de commentaires aux pages, de code Google Analytics, etc. (module ax-admin). Un dernier argument pour être convaincu est la génération automatique de spécifications fonctionnelles de belle facture.

Voir à ce sujet notre formation Axure

Patterns
****
Fonctionnel
*****
Rapidité
***
Prix
**
Le site officiel
Omnigraffle, une application mac très populaire, orientée plutôt à l’origine pour concevoir de jolis diagrammes et des graphismes vectoriels. Elle tire son épingle du jeu par la possibilité d’échanges avec Visio certes uniquement sur PC, mais également par une très riche bibliothèque d’icônes et de patterns sur Graffletopia. Superfiction le vend très bien sur ce post!
Patterns
*****
Fonctionnel
*
Rapidité
***
Prix
***
Le site officiel
Balsamiq Mockup, utilisable facilement en ligne (Flex) ou en logiciel, le rendu ressemble à du dessin bien qu’il reste très efficace (exportable au format png (et xml avec le logiciel)), question de goût.
Patterns
****
Fonctionnel
***
Rapidité
***
Prix
**
Le site officiel

Les valeurs montantes

FlairBuilder, une application AIR plutôt efficace, avec de nombreux patterns personnalisables et configurables. Pour l’instant, il ne peut exporter qu’en image, mais ils promettent d’autres formats (html, flex) et il semble déjà possible d’importer des maquettes réalisées avec Balsamiq Mockups.
Patterns
****
Fonctionnel
**
Rapidité
***
Prix
****
Le site officiel
Justinmind, un autre très bon compromis en termes de possibilités de prototypage statique ou fonctionnel sans connaissance de la programmation,… comme son grand frère Axure ! il a par contre quelques fonctionnalités supplémentaires tels que l’aide au positionnement des objets ou la possibilité de collaboration avec les clients (serveur dédié et ajout de commentaires en ligne).Un point fort qui le démarque également est l’interactivité avec des données sous forme de tableaux par exemple (ex: ajout, modification, suppression).
Patterns
****
Fonctionnel
*****
Rapidité
***
Prix
**
Le site officiel
WireframeSketcher, un plugin de l’environnement Eclipse (environnement de développement multilangage et libre), dédié à la création de prototypes. Malgré une liste de patterns assez basiques, il offre un gain de temps sans conteste pour l’intégration et le développement d’application.

 

 

 

 

Patterns
***
Fonctionnel
***
Rapidité
***
Prix
****
Le site officiel

Encore quelques autres

Pencil Sketching, une extension de Firefox contenant l’essentiel des éléments fonctionnels de tout interface (bouton, liste déroulante, zone de texte, etc.). Vraiment très basique et assez configurable (rendu exportable simplement au format png).
Patterns
***
Fonctionnel
*
Rapidité
****
Prix
*****
Le site officiel
MockupScreens, un logiciel de wireframe plutôt basique et facile d’utilisation, générant une maquette fonctionnelle (rendu au format html).
Patterns
***
Fonctionnel
**
Rapidité
***
Prix
**
Le site officiel
Oversite, un logiciel de wireframe assez basique, permettant en particulier de définir l’architecture d’un site web et les liens entre pages, et donc une maquette fonctionnelle (rendu exportable au format html).
Patterns
***
Fonctionnel
***
Rapidité
***
Prix
***
Le site officiel
Gliffy, plutôt généraliste dans la manipulation d’objets, il permet néanmoins un maquettage efficace bien que basique (rendu au format html).
Patterns
***
Fonctionnel
***
Rapidité
****
Prix
****
Le site officiel
Protoshare, uniquement en ligne, ce logiciel permet de créer des maquettes très riches dans un espace collaboratif où les différents intervenants pourront apporter leurs contributions au projet.
Patterns
****
Fonctionnel
****
Rapidité
****
Prix
**
Le site officiel
Prototype Composer de Serena, un logiciel complet de la définition de l’architecture de l’information à l’interface finale (rendu exportable simplement au format Visio). Toutefois, la richesse des fonctionnalités ne fait pas forcément l’efficacité des maquettes.
Patterns
****
Fonctionnel
***
Rapidité
**
Prix
****
Le site officiel

Il existe encore un bon petit nombre d’applications susceptibles de vous convaincre de l’utilité du maquettage dans une phase de conception, citons notamment :FluidIA, Foreui, Microsoft Expression – Sketchflow. Certes, d’autres logiciels comme Dreamweaver, Flash, iRise ou Visio permettent de faire des prototypes bien plus puissants et fonctionnels… mais leur maniabilité demande davantage de temps et/ou de connaissances (programmation, interaction avec des bases de données, etc.).

Touche d’humour:
Si vous avez la possibilité d’amener votre porte de frigo en réunion, je vous conseille également guimagnets… une autre manière de faire du maquettage un jeu?!

1ère publication (3/12/2008)

1 – Mise à jour suite au commentaire de Eric-superfiction: Ajout de Gliffy et Protoshare, et ajout de notations détaillées (3/6/2009)

2 – Mise à jour suite aux commentaires de Régis sur de nouvelles fonctionnalités d’Axure et l’arrivée à maturité de Justinmind (8/9/2009)

3 – Mise à jour face à la percée de FlairBuilder et WireframeSketcher, et l’omission volontaire mais temporaire d’Omnigraffle, ainsi que quelques petits ajustements de détails (24/02/2010)

 

Lire aussi :

 

 

 

17 Commentaires

Commentaire