Avant même d'attaquer pleinement la conception graphique d'une interface, il est nécessaire de poser le tout sur papier... mais cela dépend du coup de vos compétences en la matière! Passez plutôt au numérique, c'est plus propre et y'a pas besoin de gomme!

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. C'est d'ailleurs ce que proclame Jean-François Nogier: "Le prototypage est la clé de voûte du développement itératif".

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 à m'en suggérer d'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
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));	Patterns Fonctionnel Rapidité Prix
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
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
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)	Patterns Fonctionnel Rapidité Prix
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);	Patterns Fonctionnel Rapidité Prix
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
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
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 toutefois 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);	Patterns Fonctionnel Rapidité Prix

Certes, d'autres logiciels comme Dreamweaver, Flash ou Visio permettent de faire des prototypes bien plus puissants et fonctionnels... mais leur maniabilité demande davantage de temps et 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 - Prochaine mise à jour concernant: Jumpchart, Omnigraffle, wireframesketcher, irise, mockupscreens, Sketchflow, flairbuilder, FluidIA (cf. http://c2.com/cgi/wiki?GuiPrototypingTools)