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 :

PowerpointPrototypeToolkit

 

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) :

ExProtoPPT

 

Et vous : Avec quoi travaillez-vous ? Jusqu’où allez-vous dans le réalisme / niveau de détails ? (via Frédéric via Christophe)

25 réflexions sur “Des gabarits de création de prototypes avec Powerpoint

  1. 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 » ?

    J'aime

  2. 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.

    J'aime

  3. 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é ?)

    J'aime

  4. 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.

    J'aime

  5. 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.

    J'aime

  6. 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 ;)

    J'aime

  7. 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.

    J'aime

  8. 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.

    J'aime

  9. 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?).

    J'aime

  10. 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.

    J'aime

  11. 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.

    J'aime

  12. 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.

    J'aime

  13. 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.

    J'aime

  14. 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.

    J'aime

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s