Des gabarits de création de prototypes avec Powerpoint
Malgrè tout ce que l’on peut en penser, Powerpoint est l’outil sur lequel je travaille au quotidien, notamment pour réaliser mes prototypes de sites web. Prototype, wireframe, storyboard… appelez-ça comme vous voulez, toujours est-il que je n’ai pas encore trouvé mieux pour faire du prototypage rapide et réaliste.
Pour celles et ceux que ça intéresse, je vous propose la lecture d’un billet publié sur le blog SuperFiction (Création de wireframes (article 1/3) : utiliser Microsoft Powerpoint) qui décortique les avantages et inconvénients de cet outil. Tiens d’ailleurs Éric va même organiser un workshop avec les Designers Interactifs sur ce sujet.
Bon bref, tout ça pour dire que j’avais publié il y a quelques temps (plus de 3 ans) mes gabarits de wireframes dans le cadre de l’Information Architecture Institute : CavazzaWireframe.ppt. Il fut un temps où il existait une version en français mais impossible de remettre la main sur le fichier…
Et bien figurez-vous que l’on vient de me faire découvrir des gabarits tout à fait au goût du jour : PowerPoint Prototyping Toolkit (release 0.2). Ces modèles servent à réaliser des prototypes d’applications avec un look & feel à la Vista tout à fait réalistes :
Et comme ils sont sympas, ils expliquent même comment ajouter de l’interactivité : Microsoft Design prototyping with PowerPoint. Bon par contre ça ne fonctionne qu’avec Powerpoint 2007 (et donc Windows Vista).
Autant je suis convaincu de l’intérêt de faire du prototypage rapide avec PPT, autant je me demande si pousser le niveau de détail aussi loin ne brouille pas la fonction première de cet outil de travail… Regardez par exemple ce prototype réalisé pour le site SplitGames (le souci du détail est avant tout porté sur le contenu de la page et non sur les fenêtres en elles-mêmes) :
Et vous : Avec quoi travaillez-vous ? Jusqu’où allez-vous dans le réalisme / niveau de détails ? (via Frédéric via Christophe)
Sly a dit:
Personnellement j’utilise Inkscape qui a le bon goût d’être vectoriel, puissant et libre. Mais on ne joue pas dans la même cour ^^
Je voulais surtout noter que PowerPoint 2007 fonctionne très bien sous XP.
Pourquoi ce “donc sous Vista” ?
Xavier a dit:
Pour ma part, j’utilise illustrator, il me permet vraiment de travailler aisément. Après, je ne suis pas un habitué de Powerpoint. L’avantage d’illustrator, c’est finalement qu’une fois que j’ai réalisé mon gabarit, je vais pouvoir reprendre les images facilement pour la construction réelle, qui s’en trouve ainsi extrêmement facilitée.
Question d’habitude certainement avant tout. Chaque méthode a ses avantages et inconvénients.
Eric - SuperFiction a dit:
Merci pour ce nouvel outil.
Niveau interactivité, je suis quasiment sûr qu’il n’y aura pas mieux qu’Axure avec lequel je travaille. Personnellement, j’ai un peu délaissé Visio et laissé tomber Powerpoint mais cela dépend de la finalité de ton wireframe (fait pour l’écran ? fait pour être imprimé ?)
buh31 a dit:
Oui, Powerpoint a beaucoup de ressources, et d’ailleurs, dans le domaine de l’eao, c’est encore le chouchou chez certains client, qui font developper dessus des leçons. Surtout que les dernières versions de Powerpoint ont intégré une timeline, qui permet, à l’image de ce qui se fait avec Flash, de mettre en oeuvre des scénarios assez complexe.
A titre personnel, je n’ai jamais trop aimé ce logiciel à cause d’un détail qui peut sembler minime : il y a toujours un petit effet de flou appliqué à l’image, un flou que l’on ne peut pas enlever.
Petite précision sur ton billet : La suite Office 2007 fonctionne aussi sur Windows XP, pas seulement sur Vista.
lyrix a dit:
coucou, je tiens juste a précissé qu’on peut aussi avoir office 2007 sur xp, et non uniquement sur vista…
University Update - Windows Vista - Des gabarits de création de prototypes avec Powerpoint a dit:
[…] Des gabarits de création de prototypes avec Powerpoint » This Summary is from an article posted at FredCavazza.net on Wednesday, October 24, 2007 […]
lejoe a dit:
J’utilise depuis pas très longtemps Omnigraffle, qui est au départ un outil pour faire des diagrammes, mais qui s’avère assez efficace pour faire des prototypes fonctionnels de sites.
J’ai commencé à l’utilser suite à la lecture de cet article/video qui le démontre: “Creating prototypes with OmniGraffle“
JC-QualityStreet a dit:
Pour ma part, j’utilise Visio, et pour répondre à ta seconde question, avec des niveaux de granularité différents selon les contextes:
du plus simple et basique dans des contextes Agiles (courtes itérations de 3 à 5 semaines, pour du dév…) …
au plus évolué, en mode Demo pour de l’avant vente ou des validations spécifiques. J’effectue dans ces cas là un vrai travail graphique et gros travail d’interaction. ça prend du temps mais le résultat est bluffant !
J’en parle dans ce billet :
http://www.qualitystreet.fr/?2007/05/03/31-visio-et-les-wireframes
A nous d’ajuster nos wireframes en fonction de nos objectifs, du temps dont nous disposons pour les réaliser et des destinataires de celles-ci. Je commence à tester le mode “Whiteboard + Photo numérique” … parfois, il faut faire évoluer nos pratiques.
jdo a dit:
tiens, question bête, est ce que le terme “prototype” est approprié ? pour moi, un prototype de voiture, par exemple, c’est un exemplaire pas beau, mais en état de marche et destiné à vérifier le bon fonctionnement des technologies utilisées ainsi que la démarche d’industrialisation. si l’on veut avoir une idée de l’aspect “visuel” d’une voiture, sans se préoccuper de ce qu’il y a en interne (le moteur, etc…) on fait plutôt une “maquette”, non ?
personnellement, lorsque je fais ce que tu présentes ici (merci d’ailleurs pour les infos sur ces outils !), je parle en général de “maquette fonctionnelle”, mais ça serait intéressant d’utiliser un vocabulaire vraiment adéquat, et j’avoue ne pas trop savoir quoi dire, en fait
Julien a dit:
Je suis un fan de Fireworks (Adobe), ce logiciel est malheureusement méconnu des concepteurs. Mais il permet entre autre la création de gabarits.
Le design orienté “objet” et le système de pages me permet un gain de temps que je n’ai pas réussi à retrouver avec PPT, Omnigraffle ou encore Visio. De plus, placer une couche d’interaction est d’une facilité déconcertante. Et l’export en .html permet de simuler une navigation au sein d’un navigateur.
Oncle Tom a dit:
Tutut, Powerpoint 2007 fonctionne aussi sous Windows XP (avec Service Pack 2 fort probablement)
Pour l’instant la majorité des maquettes que je vois c’est du Photoshop voire un peu de Gimp. C’est la première fois que j’entends “Powerpoint” mais le résultat est probant. Merci pour l’astuce.
bprod a dit:
En effet je suis étonné du résultat! Comme Oncle Tom pour moi les maquettes c’est plutôt du photoshop ou dérivé…
Mais c’est vrai qu’au niveau interactivité et présentation au client c’est mieux d’avoir du powerpoint, sauf peut être au niveau taille (sur photoshop on le fait en taille réelle alors que sur powerpoint tout dépend de la taille de l’écran où on le visionne, non?).
Raphael a dit:
+1 pour Powerpoint qui est un outil rapide et simple (surtout dans sa version 2007)
Stéphane Bordage a dit:
Salut Fred,
C’est marrant, c’est exactement le même propos que je tiens à mes étudiants de l’Hetic depuis quelques années !
En 10 ans de cinématiques / storyboard / Wireframes… j’ai testé Visio, PPT et récemment sur les conseils d’Eric, AxurePro… je reviens toujours à PPT qui apporte moins d’automatisme mais beaucoup plus de souplesse.
Et quand il faut être hyper réaliste, je préfère la démarche Getting Real => créer directement l’interface HTML via un éditeur.
artgordon a dit:
Pourquoi pas… Pour ma part je n’ai jamais eu PowerPoint et ça fait des années que j’utilise Flash, non pas pour faire le site, mais pour le maquetter (tout simplement parce que les outils de dessins sont simples et intuitifs), et pour rendre la maquette fonctionnelle à l’aide de boutons, rollover, menus etc… Lorsque le BAT est signé, je n’ai plus ensuite qu’à exporter mes éléments graphiques en png ou en illustrator pour passer au dev… Flash ou Powerpoint ? là c’est juste une question d’habitudes de travail. Mais c’est vrai que le client apprécie ce côté “maquette-bac à sable” où il peut cliquer et voir son site fonctionner.
Arnaud a dit:
Axure reste le meilleur compromis.
Tout d’abord l’équipe des designers/concepteurs peut montrer un prototype HTML semi-fonctionel au client final pour lui permettre de mieux comprendre le fonctionnement de son application/site. Ceci évite des modifications post-production par manque de compréhenssion initial.
Ensuite l’équipe de production a en main les spécifications détaillées ainsi que le prototype fonctionnel.(il est très facile également d’intégrer une déclinaison multi-langage à votre prototype.)
Avec deux-trois shcémas UML et les risques d’erreurs sont fortement diminués.
» Créez vos gabarits d’applications avec Powerpoint :: BPM Bulletin a dit:
[…] FredCavazza.net » Des gabarits de création de prototypes avec Powerpoint […]
switcher a dit:
Salut,
Perso j’utilise flash comme “artgordon”, faut dire que je développe des outils professionels de production en flash et que le fait de faire la maquettage avec l’outil de conception final permet d’accélérer le cycle de développement.
En plus, le développement de RIA sort souvent de la classique navigation page par page mais pour un site web classique, je dis pas.
J’attaque flex, à voir s’il est aussi souple que flash pour le maquettage …
Merci pour tes articles.
Olivier D. ze kat a dit:
Perso, j’utilise Flash même si le site définitif n’est pas en Flash et/ou n’en utilise pas, essentiellement pour ces raisons :
- Effet d’aliasing agréable… Correct en PNG, acceptable en JPEG, excellent en SWF notamment pour des logos.
- Quelques fonctions de retouche/détourage d’image/photo… Pratique quand on brouillonne.
- Et les éléments animés qui nécessiterait du SWF sont déjà commençés… Notamment les logos et menus avec effet de survol :o)
Les puristes se feraient une collection d’objets et controles. Mais dans mon cas j’aime pas faire du recyclage, et mes clients payent pour avoir du sur-mesure.
Robi a dit:
Moi je suis sous Illustrator. Voir mon article récent pour plus d’info : http://www.ergonline.net/blog/wireframes-avec-illustrator
Vazkor a dit:
Je préfère les maquettes qui donnent un vrai sens de l’interactivité : elles permettent souvent de détecter des dysfonctionnements “fonctionnels” rien qu’en jouant avec. Je fais donc ça en HTML avec Dreamweaver (+ Photoshop pour les images).
Autre avantage : les développeurs se retrouvent avec des interfaces relativement réalistes, et des cinématiques complètes qu’ils peuvent reprendre sans trop de poser de questions.
PPT est bcp plus simple, mais frustrant coté cinématique, je trouve
Baillet a dit:
Bonjour Fred, c’est mon premier post sur ton blog que je lis depuis très lontemps…
Bravo pour ton expertise, tes engagements… et merci Fred de nous faire découvrir cette nouvelle extension PPT. Celle ci est fort interessante même si je trouve qu’Axure va un peu plus loin quand même.
Power Point est un logiciel souple et accessible que nous utilisons encore à l’Agence mais nous testons Axure depuis un an et ça marche très très bien. De plus j’ai remarqué que les clients visualisent mieux le projet interactif (principes de navigation, répartition de l’information).
Mais je compte bien tester l’extension que tu proposes car quelques chefs de projet sont accrochés à Power Point (Formation Hetic, quand tu nous tiens;)
Sinon concernant les projets animés & interactifs il est un fait que le mieux est d’utiliser des logiciels comme Fireworks, Illustrator et Flash bien sûr.
Merci encore pour tes articles et m—e pour la Grande journée que tu prépares.
Xav
Niala a dit:
Et pourquoi pas Mockup Screens tant qu’on reste à faire des maquettes simples?
Le soft est payant et simpliste, certes, mais il permet de réaliser un premier jet de ce à quoi pourrait ressembler une interface, web ou riche.
http://www.mockupscreens.com/
C’était ma modeste contribution pour mon 1er post.
Merci pour ce blog Fred!
Prototyping Toolkit at NuTIC a dit:
[…] I think it’s a good one, but I wanted to make it even more efficient. Then, I discovered Frederic Cavazza’s file but it was not precise enough and a bit old-school to do what I wanted. Indeed, one of […]
Créer ses cinématiques simplement Synerg´heBlog - Le blog de la Junior-Entreprise Synerg’heTiC a dit:
[…] bon outil de départ bien que ce dernier soit perfectible. J’ai par la suite découvert celui de Fred Cavazza, moins précis et un peu plus ancien. Il ne correspondait pas non plus à ce que je souhaitais […]