Outils de prototypage d'interface
Par Thierry Bouillot le 24 février 2010 - 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. Comme le dit Jean-François Nogier dans son ouvrage : "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 à 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; |
||||
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)
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...
Bonjour,
Excellent article! très complet et bien documenté!
Merci d´avoir citer Justinmind! La plupart de nos clients utilisaient Axure avant, mais il ont été seduit par nos fonctionnalités de simulation instantannée, la simulation de données sans aucune programmation (ni DB), et par sa facilité d´utilisation (tout se fait par glisser/déposer). Justinmind permet entre autres, d´associer des commentaires aux élements (par glisser/déposer), créer des modèles de documentation (générés automatiquement en .doc) et tout type de diagrammes (flux de navigation...). De plus, le code HTML géneré permet aussi d´intégrer tout type de codes (GA, clicktale) pour réaliser des tests utiisateurs.
Nous proposons un outil très complet qui fluidifie vraiment les projets IT de A à Z.
Bonjour,
très intéressant mais existe-t'il des outils qui permettent de faire de la spécification d'interface et du prototypage pour périphériques mobiles ?
J'ai consulté plusieurs des outils présentés ici mais n'en ai pas trouvé qui proposait des composants orientés maquettes pour ihm mobiles (ex : composants iphone pour le rendu) ?
La plupart des logiciels de maquettage avancé comme Axure sont tout à fait appropriés pour le prototypage et la génération de spécifications de qualité.
J'ai dernièrement réalisé des prototypes d'interfaces tactiles pour des écrans de différentes dimensions (3,5'', 12'', etc.). L'utilisation et la démonstration de maquettes fonctionnelles en html sur des périphériques mobiles ne pose pas de problèmes particuliers. Un navigateur internet suffit !
Toutefois, il ne faut pas brûler les étapes dans la conception de logiciels, quel qu'il soit. C'est une question de méthode ! http://usabilis.com/services/maquet...
L'intégration de composants graphiques tels que ceux de l'iPhone, doit se faire dans un second temps, une fois que la définition des scénarios d'utilisation a été validée par des utilisateurs notamment.
De nombreuses ressources existent selon les plateformes (http://iphoneized.com/2009/11/21-pr...). Autrement, Apple propose le logiciel adapté pour le développement d'applications dédiées Dashcode (http://developer.apple.com/tools/da...)
Bien entendu, à utiliser dans le cadre d'une méthode de conception centrée utilisateur !