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
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);
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
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-Mise à jour suite au commentaire de Eris-superfiction: Ajout de Gliffy et Protoshare, et ajout de notations détaillées