Outils de prototypage d'interface
Par Thierry Bouillot le 8 septembre 2009 - Conception des interfaces - Lien permanent
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 |
 |
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)
4 - Et aussi...un sondage twitter qui peut-être permet de voir une évolution des pratiques : http://twtpoll.com/r/tsx6bw
Commentaires
Tu peux rajouter Gliffy (outil online) et Protoshare dont je vais parler bientôt.
http://www.gliffy.com/
http://www.protoshare.com/
J'ai également rédigé une série de billets sur les outils de prototypage :
1. les outils online
Gliffy, Jumpchart, Balsamiq... ici :
http://www.superfiction.net/blog/in...
2. les outils offline :
- powerpoint : http://www.superfiction.net/blog/in...
- visio et ses pencils spécifiques : http://www.superfiction.net/blog/in...
- axure et son module de rédaction des spécifications :http://www.superfiction.net/blog/in...
Je ne connaissais pas 2 ou 3 outils, merci pour ce billet !
Tes articles sont plutôt bien détaillés, c'est très utile!
J'ai donc ajouté Gliffy et Protoshare dans cette liste, puisque ce blog a une vocation collaborative.
J'en ai profité pour proposer des notes à chaque, pour rendre compte du nombre et de la qualité des patterns à disposition, la capacité de maquettage fonctionnel/dynamique, la rapidité de prise en main et de création, et le niveau de prix.
Merci pour cette liste d'outils, afin de pouvoir y piocher en fonction de nos besoins :) Après, ce qui me plait beaucoup dans le papier crayon, c'est la possibilité de le modifier en instantané, peu importe les compétences réunies autour de la table... et on peut avoir une mémoire "graphique" du cheminement des idées à coups de traits (j'évite de gommer ou faire gommer: je fais plutôt plusieurs photocop' d'une même idée, qui va se transformer sous les coups de crayons, parfois rageurs ^^ , des participants: quand c'est trop plein, on peut passer à une version propre!)
Bonjour,
Merci pour ce post et les précisions d'Eric.
Si je comprends bien, l'outil le plus recommandable est AXURE ?
Vous confirmez ?
Personnellement, je recommanderais Axure pour la qualité des prototypes fonctionnels que l'on peut réaliser (à la fois graphiques et utilisables). Ce qui peut servir pour des tests utilisateurs, mais également pour vérifier la faisabilité du design avant un maquettage html (proportions, tailles, agencement, etc.)
Bien entendu, comme le commentait Céline, tout dépend du besoin. Car les échanges avec les clients sont aussi très fructueux sur papier (avec ciseau et colle si nécessaire) lorsque l'on réfléchit ensemble à l'agencement de l'interface et son contenu.
Si vous avez aimés Balsamiq or MockupScreens vous pouvez aussi jeter un œil sur WireframeSketcher. C'est un plugin Eclipse pour créer des wireframes:
http://wireframesketcher.com
Un billet complémentaire vient d'être publié sur le blog Adaptive Path (en anglais) :
http://www.adaptivepath.com/blog/20...
On retrouve les mêmes outils, mais aussi des outils de développement comme Dreamweaver, Flash ou Flex, qui à mon avis sont mal adaptés au prototypage car ils demandent plus de temps pour réaliser un prototype.
Bonjour,
pour compléter Axure, on a développé une solution qui permet de palier à certains manques comme le partage du prototype en ligne et l'ajout de commentaires aux pages, code google analytics...
http://www.axure-users.net/ax-admin...
sinon, très bon article, depuis y'a justinmind qui est sortie
http://www.justinmind.com/
et d'autres en prévisions comme http://wireframesketcher.com/
Et Omnigraffle alors ?
http://www.superfiction.net/blog/in...