Cela faisait un long moment que Todd Zaki Warfel préparait, chez Rosenfeld Medias, un livre sur les wireframes.

C’est maintenant chose faite, "Prototyping : a practitioner’s guide to prototyping" est enfin sorti et il est disponible en version papier et/ou en PDF.

Dans ce livre, Todd Zaki Warfel présente la valeur du prototypage et explique l’intérêt d’utiliser des wireframes.

Egalement, il liste différents usages du même outil, ce qui ouvre le champ d’utilisation des wireframes. Il précise que l’on peut s’en servir pour répondre à différents objectifs (désolé pour la traduction) :

• shared communication
• working through a design
• selling your idea internally
• usability testing
• gauging technical feasibility and value

Enfin, la seconde partie du livre est plus pratique car il a testé pas mal d’outils (Powerpoint, Keynote, Visio, Axure RP Pro, Fireworks, les maquettes HTML…) et il détaille chacun d’entre eux avec ses avantages / inconvénients.

Vous pourrez donc comparer ses conclusions avec les miennes via mes différents billets (entre les outils de wireframing offline et les outils online, j’ai testé plus d’outils que lui mais la comparaison est intéressante)

Il a d’ailleurs synthétisé cela dans une matrice que voici :

Cliquez sur l'image pour l'agrandir

Bref, c’est un livre qui a l’air vraiment bien fait car il propose une partie théorique sur les wireframes ET une partie pratique avec des démos de certains outils. Et comme il y a peu de livres à propos des wireframes, celui-ci est, à coup sûr, à lire.

Pour ceux qui sont intéressés :

• le sommaire détaillé
• un extrait d’un chapitre
• les illustrations du livre

Comme vous le savez, le prototypage est un sujet qui m’intéresse ;-) Après mes billets sur certains outils offline (Powerpoint, Visio, Axure, Omnigraffle, Acrobat, Fireworks) et sur d’autres outils online (Gliffy, Jumpchart, Balsamiq, Protoshare et Pencil), j’ai testé tout récemment JustInMind Prototyper, et je n’ai pas été déçu.

PRÉSENTATION

JustInMind est une société basée à Barcelone (Espagne) qui a développé JustInMind Prototyper, un outil qui permet de faire du prototypage et de la simulation d’applications online.

JustInMind Prototyper est disponible sur Mac (OS X / Leopard) et PC (Windows XP / Vista). Pour ma part, j’ai testé JustInMind Prototyper pour PC en version 2.6 (elle n’est pas encore sortie et la version actuelle est la 2.5) Il y a avait encore quelques bugs mais l’application était globalement stable.

Voici une vidéo de présentation qui vous donne une overview des possibilités qu’offre l’outil.

PRÉSENTATION DE L’INTERFACE

L’interface de JustInMind Prototyper est assez complète car elle permet de travailler sur 4 types d’éléments, chacun faisant l’objet d’un onglet dans la barre de navigation principale :

• onglet "User Interface" pour les wireframes ;
• onglet "Functional scenarios" pour les process ;
• onglet "Comments" pour les commentaires ;
• onglet "Requirements" pour spécifier, entre autres, les Business Rules de l’application.

L'interface de JustInMind Prototyper rappelle un peu celle d'Axure

Si vous avez déjà utilisé Axure RP Pro, alors le contenu de l’onglet "User Interface" de JustInMind Prototyper vous semblera un peu familier car l’interface se présente un peu de la même façon :

• sur la gauche, composants HTML et Masters ;
• dans la zone centrale, création / édition des éléments ;
• à droite, écrans ("screens") et notes / remarques.

Enfin, le moteur de recherche placé en haut à droite est assez pratique et permet de retrouver un élément parmi toutes vos pages.

JUSTINMIND PROTOTYPER, UN OUTSIDER TRÈS SÉRIEUX A AXURE RP PRO

Tout comme Axure, JustInMind Prototyper permet de réaliser des wireframes et de générer des spécifications fonctionnelles au format Word. Il possède une bonne bibliothèque de composants HTML prédéfinis et utilise aussi le principe très utile des Masters et des Templates.

Mais sur d’autres points, il va plus loin qu’Axure.

JustInMind Prototyper permet notamment de définir les process en lien avec les pages, de préciser les requirements et d’utiliser des données réelles en se connectant par exemple à une BDD.

Les functional scenarios

Contrairement à Axure, la définition des process n’est pas décorrélée des interfaces, elle est en lien direct avec vos pages. Exemple avec la modélisation d’un module de login :

• dans l’onglet "User interface", on crée les pages "identification" (login), "erreur lors de l’identification" (login error) et "identification réussie" (login ok)
• et dans l’onglet "functional scenarios", on crée le process "login process", on fait glisser ses 3 pages sur la zone centrale en ajoutant les actions et les décisions correspondantes.
• ensuite, on connecte le process avec les pages correspondantes et on obtient une gestion des cas (login correct / login incorrect) qui permet de simuler le comportement de l’application au plus juste.

Voir la vidéo sur les functional scenarios

Les requirements

Parce que les wireframes ne peuvent à eux seuls décrire l’intégralité du comportement de l’application, des Business Requirements (ou "Business Rules") sont ajoutés aux spécifications fonctionnelles. Contrairement à Axure, JustInMind Prototyper intègre la rédaction de ces requirements (onglet "Requirements")

On peut saisir les requirements un par un au fur et à mesure de son prototypage, ou bien les saisir d’un seul coup à la fin, en les reliant avec les éléments HTML par un simple drag’n’drop. L’outil prévoit un système de versioning avec historisation des modifications, on peut également définir des test cases et insérer des commentaires. Evidemment, lors de l’export de vos spécifications au format Word, vous pourrez choisir de faire figurer ces éléments dans le document final.

Voir la vidéo sur les requirements

L'onglet "Requirements" permet de définir toutes les Business Rules que le wireframe ne peut contenir et/ou expiquer.

Les data masters

C’est un ensemble de données que vous définissez et qui peuvent être crées, lues, modifiées, effacées ou recherchées.

Avec les data masters, vous pouvez par exemple créer une fiche produit de façon "dynamique". Après avoir défini ce qui constitue une fiche produit (le nom du produit, sa référence, son prix, sa marque...), JustInMind Prototyper génère automatiquement les écrans permettant de faire du CRUD (Create / Read / Update / Delete) sur cette fiche.

Vous pouvez ainsi simuler la création / modification / suppression / recherche de vos produits grâce aux "data grids" et ce, avec les données que vous avez saisies ! Il ne vous reste plus qu’à trouver la mise en page qui vous convient et le tour est joué. Vous pouvez même faire un import / export en .CSV de ces données.

Une vidéo vaut mieux qu’un long discours.

Justinmind Server

Aussi appelé "Factory Server", JustInMind Server est un repository unique sur lequel vos prototypes sont publiés, commentés et partagés avec vos clients via votre navigateur Internet.

Outre le faire de pouvoir partager et annoter vos wireframes, l’intérêt de JustInMind Server est de pouvoir se connecter à une BDD pour utiliser ainsi des données réelles ! Sauf erreur, on pourrait donc, si je reprends l’exemple précédent de ma fiche produit, aller piocher les vrais datas dans une BDD pour les afficher dans ses wireframes et voir le "vrai" résultat !

JustInMind Server permet également de gérer une liste d’utilisateurs et de leur donner des droits d’accès différents. Enfin, il permet de mettre en ligne des versions différentes de ses prototypes (gestion automatique du versioning) et de faire des roll back si nécessaire.

Voir la vidéo de Factory Server

Factory Server permet de se connecter sur une BDD pour en utiliser les datas dans ses wireframes.

Et d’autres bonnes surprises...

• génération automatique du sitemap qui est relié aux pages qui ont été crées ;
• gestion visuelle des statuts des pages (terminée, en cours...) ;
• prise en compte des raccourcis clavier ;
• possibilité d’importer et de lire des fichiers PDF ou SWF au sein même de ses wireframes ;
• etc…

Pour avoir plus de détails sur ses fonctionnalités, je vous invite à regarder les 12 vidéos disponibles.

QUELQUES PETITS REPROCHES TOUT DE MÊME...

Bien qu’Axure soit très puissant, son interface est relativement simple. Une partie de l’interface d’Axure se retrouve dans cette de JustInMind Prototyper, mais comme l’application permet de faire plus de choses, l’interface se complexifie : onglet supplémentaires, panneaux contextuels additionnels, pas facile de s’y retrouver parfois entre les pages. Et la logique est parfois pas facile à comprendre (passage d’un onglet à l’autre pour finaliser une même action...)

Le panneau de gestion des événements n’est pas très intuitif selon moi, il est moins "parlant" que celui d’Axure. Pour utiliser à fond les possibilités qu’il offre, il est nécessaire de passer un certain temps pour bien l’utiliser. D’ailleurs, je n’ai pas encore compris comment faire pour passer des variables entre des pages ou comment créer un élément en différents états (les "states" dans Axure s’appellent "Layered box" sous JustInMind Prototyper)

LES CRITÈRES D’ÉVALUATION

1. Prise en main et Utilisation

JustInMind Prototyper n’est pas simple à prendre en main pour un néophyte. Certes vous retrouverez dans JustInMind Prototyper certains automatismes que vous aviez avec Axure, mais si l’on veut s’en servir de façon complète, l’outil est assez hardu. La courbe d’apprentissage peut être longue, notamment le temps de tester les possibilités offertes (et elles sont nombreuses) et de le paramétrer notamment pour le format des spécifications fonctionnelles.

2. Prototypage rapide

Aller vite avec JustInMind Prototyper, c’est possible. Créer des pages et des liens se fait simplement avec les éléments HTML. C’est donc possible, mais c’est dommage, car vous passez à côté des possibilités qu’il offre. Utiliser les Masters et/ou les Templates, créer ses process pour simuler au mieux les différents scenarii, renseigner les requirements... Tout ceci vous échappera, ce qui est bien dommage.

3. Partage des fichiers / Travail collaboratif

Cette fonctionnalité n’est pas géré nativement par JustInMind Prototyper, il faut utiliser Factory server. Ce dernier permet de partager son document avec les utilisateurs inscrits et laisse la possibilité de le commenter. Pour une utilisation optimale des commentaires donnant lieu à des évolutions, la gestion des versions (versioning) est également prise en compte.

4. Options d’export

JustInMind Prototyper ne permet pas d’exporter ses wireframes en HTML et nécessite l’installation (gratuite) d’un viewer. On peut détourner cela en utilisant Factory Server. Une fois installé, les utilisateurs peuvent consulter les wireframes avec leur browser sans module supplémentaire.

Mais les deux possibilités (le viewer gratuit et le mode Server) sont, je trouve, un frein au développement de cette application. En tant qu’application payante, il est dommage je trouve de ne pas avoir d’export qui soit lisible directement par un browser.

5. Interactivité des éléments

Aucun problème à ce niveau là : hyperliens, conditions, image map, formulaires que l’on peut renseigner... L’interactivité est au rendez-vous ! Pour pinailler, je dirai que je ne sais pas si l’on peut associer un lien différent à chaque élément d’une droplist mais bon... l’essentiel au niveau interactivité est présent ;-)

6. Wireframes adaptés à l’écran / au print

La seule chose qui soit adaptée au print, ce sont les spécifications au format Word. Tout le reste est fait pour de l’écran. Voici le format définitif (.doc)

7. Coût

A peine plus cher qu’Axure pour une licence unique ($690 pour JustInMind Prototyper vs. $589 pour Axure RP Pro), le prix n’est pas le même quand on passe à 5 licences ($ 4 290). Voir les tarifs.

Si le prix est un critère discriminant et que vous souhaitez acheter plusieurs licences, alors ça risque de coincer... Par contre, si vous recherchez un outil spécialisé et de qualité, le prix les vaut largement.

CONCLUSION

JustInMind Prototyper est une très belle surprise ! C’est un logiciel complet qui a su tirer certains avantages de son "grand frère" Axure et qui a, en plus, complété sa palette de fonctionnalités.

La prise en main pourra en rebuter certains et on regrette un peu l’efficacité d’Axure. Mais la complexité de JustInMind Prototyper va de pair avec les fantastiques possibilités qu’offre l’outil. Débutants dans le prototypage, passez votre chemin ! JustInMind Prototyper est fait pour des Architectes de l’Information désireux de produire des wireframes ultra complets pouvant faire pâlir un Business Analyst. Celui qui saura l’apprivoiser aura entre les mains un formidable outil de simulation fonctionnelle d’applications interactives.

Ce billet est le 4ème d’une série commencée il y a un petit moment déjà, et consacrée aux outils online de conception de wireframes

La quatrième application online que je présente s’appelle Protoshare.

PRÉSENTATION

Protoshare est une application online développée par Site9, une société spécialisée dans le software design.

Protoshare est un outil de wireframing qui est censé s’adresser à différents profils (chef de projet, DA, IA...) ainsi qu’aux clients. Protoshare est utilisé par des agences interactives telles que Ogilvy Interactive ou Avenue A. Razorfish, et un témoignage de Wikinomics.com affiché en home page affiche clairement les ambitions de Protoshare :
"Protoshare has the potential to revolutionize the process of webdesign"

C’est donc prometteur, et la vidéo de démo est plus qu’alléchante :

Alors, effet d’annonce ou réelle révolution ? Voici mon humble avis...

PRÉSENTATION DE L’INTERFACE

L’interface, toute en Ajax, est composée d’onglets :

• 1 pour visualiser le sitemap ;
• 1 pour éditer les pages ;
• 1 pour les composants et les templates ;
• 1 pour les styles CSS (oui oui, vous avez bien lu ;-)
• 1 pour l’export des spécifications et les options correspondantes ;
• 1 pour la recherche de remarques / annotations ou questions posées à propos du projet et de certaines pages ;
• Et enfin 1 onglet consacré à l’aide.

Cliquez sur l'image pour l'agrandir.

Chaque onglet comporte sa propre sous-navigation contextuelle avec également 1 ou plusieurs autres onglets. Bref, il y a des menus et des options partout et c’est parfois à la limite du digeste niveau utilisation.

LES ÉLÉMENTS POSITIFS DE PROTOSHARE...

Ils sont nombreux et certains sont vraiment intéressants :

• L’utilisation de templates, très pratique dans la production de sites volumineux ;
• La présence d’une fonctionnalité qui permet de poster des questions, remarques et/ou annotations pour que les autres utilisateurs puissent y répondre ;
• La génération de contenus liés au SEO : balises title, url de la page et balises meta description et keywords (c’est une des rares applications qui propose cela) ;
• La génération automatique de certains éléments en fonction du sitemap du projet : un breadcrumb et une barre de menu sont, par exemple, générés automatiquement en fonction des pages de votre sitemap ;
• La possibilité d’utiliser des feuilles de styles CSS ;
• Les éléments de formulaires sont interactifs ;
• Protoshare propose pas mal d’éléments HTML dont certains qui sont originaux, comme un (vrai) flux RSS ;
• Travail collaboratif en temps réel avec possibilité d’ajouter des users qui ont accès au projet ;
• L’upload d’images et de SWF est possible ;
• L’export des spécifications fonctionnelles au format Word ;

LES ASPECTS DÉCEVANTS DE PROTOSHARE...

• J’avoue avoir eu du mal à m’adapter à l’interface et l’utilisation de l’application m’a semblée, du coup, compliquée ;
• pas mal d’actions sont laborieuses à cause du manque d’intuitivité de l’interface. De plus, cette dernière ne répond pas forcément de suite aux actions souhaitées ;
• il est impossible de faire un copier / coller d’une page à l’autre, ce qui est très très très embêtant pour réutiliser certains éléments d’une page à l’autre ;
• le clic droit est utilisé de façon assez maladroite : dès fois il est présent et inutile, et parfois il est absent alors qu’il serait nécessaire...
• l’édition des propriétés des éléments n’est pas évidente à faire (ex : les textes) ou à comprendre (ex : certaines propriétés des éléments de formulaire) ;
• je n’ai pas compris comment faire un bouton avec 2 états, rollover et rollout, ce qui est une chose assez simple avec d’autres outils :-(

LES CRITÈRES D’ÉVALUATION

1. Prise en main et Utilisation

Pas évidente, surtout la première fois. A titre de comparaison, je trouve Axure RP Pro (qui permet de faire des choses beaucoup plus complexes) plus facile à prendre en main que Protoshare.

De plus, l’utilisation clavier / clic droit de la souris n’est pas optimisée : quelques raccourcis clavier sont utilisés, quelques éléments contextuels à la souris, mais on sent que cela n’a pas été poussé jusqu’au bout dans les 2 solutions.

J’ai tout de même réussi à reproduire la page qui me sert d’exemple :

Cliquez sur l'image pour l'agrandir.

2. Prototypage rapide

Il faut une certaine habitude pour jeter rapidement les premières versions d’un wireframe. Protoshare n’est pas, à mon avis, l’outil idéal pour la personne qui voudrait se lancer dans du prototypage rapide : son interface n’est pas adaptée et elle nécessite de renseigner parfois trop d’informations.

3. Partage des fichiers / Travail collaboratif

Protoshare permet d’avoir un seul repository unique et online, accessible à tous les utilisateurs. Egalement, les fonctionnalités de discussions et de d’annotation sont très bien pensées et parfaitement au point.

4. Options d’export

L’export des pages se fait en HTML mais ne regardez pas le code source, vous allez avoir une crise cardiaque. Egalement, les pages sont visibles uniquement pour les personnes qui sont identifiées : impossible donc de générer des pages qui fonctionnent en local. Dommage.

5. Interactivité des éléments

Les liens sont faciles à mettre en place, qu’ils soient internes ou externes, mais je n’ai pas vu comment simuler des popup. Les éléments de formulaire sont cliquables mais il est assez compliqué d’associer des actions à certains états (rollover / rollout) ou des éléments. Néanmoins, c’est toujours mieux que ce que propose Visio.

6. Wireframes adaptés à l’écran / au print

Protoshare est 100% pensé pour l’écran. La fonction d’impression n’existe pas, seule la fonction d’export des spécifications concerne le print.

7. Coût

Il varie de 26 $ par mois pour une utilisation personnelle et bridée, à 129 $ / mois pour une utilisation en réseau avec des capacités plus importantes (espace de stockage, nombre de pages actives...) Pour les entreprises, il faut les contacter car le prix sera adapté à votre utilisation et vos besoins. C’est donc somme toute très abordable même si Gliffy propose des tarifs plus intéressants.

Tous les tarifs de Protoshare sur cette page.

CONCLUSION

L’application était très prometteuse et j’étais ravi d’avoir (enfin) le temps de la tester. La vidéo de démo m’avait convaincu, j’étais persuadé que Protoshare allait me faire oublier toutes les autres solutions

Et bien non, je suis un peu déçu malgré les bonnes surprises que propose cette application... J’ai vraiment beaucoup de mal avec l’interface, ce qui fait que l’utilisation laborieuse de l'appli me fait oublier les très bonnes fonctionnalités (templating, SEO, export des specs...) A titre de comparaison, la prise en main de Gliffy est beaucoup plus aisée et son utilisation est beaucoup plus souple. Mais avec un peu de persévérance et de bonne volonté, les bons côté de Protoshare devraient me permettre d’oublier l’interface.

Mon avis est donc assez mitigé. Pour vous faire votre propre idée, je vous conseille de l’essayer : il est gratuit pendant 30 jours et si vous ne restez pas bloqué comme moi sur l’interface, Protoshare est certainement l’outil qu’il vous faut pour la conception de vos wireframes.

Cinquième billet de la série : "Les outils online de conception de wireframes (5/5) : Pencil Project."

Dans ma 1ère série de billets concernant la création de wireframes, j’avais présenté différents outils : Powerpoint, Visio (et un article complémentaire), Axure RP Pro, Acrobat, la présentation du workshop que j'avais animé avec les *Designers Interactifs* ainsi que des stencils pour Omnigraffle.

Et Omnigraffle, justement, je n’avais pas pu le tester car je ne travaille pas sous Mac. Alexis AMET m’a contacté via mon blog et s’est proposé d’écrire un article sur Omnigraffle car il travaille, lui, sous Mac. Pour compléter la série (et parce que le feeling est bien passé ;-) j’ai accepté sa proposition.

Voici donc son billet.

Tout comme il existe des designers interactifs sous Mac, il existe des logiciels 100% Mac. Omnigraffle de l’éditeur américain OMNI Groupe est de ceux là. A y regarder de plus près, Omnigraffle occupe en fait une place laissée vacante (pour combien de temps ?), par Microsoft. Car oui, la firme de Richmond n’est pas omniprésente sur tous les ordinateurs !

Tout ça pour vous dire que Omnigraffle est au Mac ce qu’est Visio au PC. Un outil très complet permettant de faire pas mal de choses dont de jolis dessins qui feront toujours leur petit effet en réunion entre deux Powerpoint de 150 slides.

POUR ALLER A L’ESSENTIEL

Disons le tout de site, Omni (j’utilise le diminutif pour faire plus sympa) est nettement plus convivial que Visio.

Pour résumer et vous éviter la lecture intégrale de mon billet :

• Interface utilisateur très complète et (assez) facile à prendre en main,
• Possibilités étendues de dessin avec du vectoriel,
• Gestion de pages linéaire,
• Gestion de calques,
• Supporte l’interactivité (liens entre les pages, URL…)
• Communauté de passionnés mettant à disposition des Patrons (Formes sous Visio) parfois hyperréalistes,
• Capacité à importer et exporter en format Visio (version XML pour les versions antérieurs à 5.0),
• Prix de la licence très raisonnable (199,95 US $ pour la version Pro 5.1).

Par contre :

• Pas d’exportation en HTML structurée,
• Gestion un peu complexe du multi-format de page dans un document lors des impressions / exportations,
• Pas de version PC… vous allez devoir réclamer des Mac Intel !

DÉTAILLONS UN PEU L’EXPÉRIENCE OMNI

Avant toute chose, je dois confesser ici que je suis un néo-utilisateur de Mac. Et qu’en entreprise / agence, j’utilise des PC. Je risque donc de m’émerveiller de fonctionnalités qui semblent aller de soi à tout Macophile.

La version testée est une Ominigraffle Professionnal 4.2.3 sous Mac OS 10.4 ; la dernière version, la 5.1, nécessite Mac OS 10.5. Une fois ouvert, Omni, comme de nombreux logiciels de bureautique et de graphisme sous Mac, propose une interface avec des palettes d’outils flottantes.

L’interface Omnigraffle 4.2

Autant vous le dire tout de suite, travailler avec un Macbook 13" n’est pas très facile. On est vite débordé par les palettes et les "inspecteurs" sans parler des "patrons"... Je résous ce problème de surpopulation en utilisant un deuxième écran (en attendant de passer à un 15" pour le travail nomade). Mais on rencontre le même genre de problème avec la suite Office et Photoshop CS3 par exemple.

Les palettes flottantes sont pratiques car elles permettent d’avoir à sa disposition de nombreuses fonctionnalités qui sont souvent noyées dans les menus / barres sous Visio. Alors ne nous plaignons pas trop...

LES PATRONS, LES CANEVAS ET LES INSPECTEURS

Tout comme Visio, Omni offre la possibilité de créer des formes. Soit à partir de formes standards rectangle, ellipse, etc. ou par cliqué-déposé à partir de "patrons" (stencils en VO)

La création d’arborescence, "structures", est aussi possible et est même beaucoup plus aboutie. On y trouve la possibilité d’administrer les relations père-fils entre éléments. Et les liens magnétiques entre les éléments sont capables de gérer pas mal de manipulations. Il n’y pas par contre de relation possible dans un document entre une arborescence et des pages (à par des liens dynamiques que vous auriez insérés). C’est un outil généraliste, il est difficile de lui demander de tout savoir faire non ?

Bon, revenons à nos outils... Les patrons sont donc des formes prédéfinies. Vous pouvez en récupérer de nouvelles, souvent très sophistiquées, grâce à une communauté active. Le site plus complet est Graffletoppia. Vous y trouverez des gabarits d’écrans, pour Iphone, pour Facebook, pour des fiches de personas... Ces patrons regroupent alors des formes modifiables (en les dégroupant pour la plupart) ou de vraies copies d’éléments (comme pour le Iphone)

Exemple de patron récupéré sur Graffletopia

Le mieux étant souvent l’ennemi du bien, à vouloir être hyperréalistes, ces gabarits peuvent nous éloigner de l’essentiel du prototypage (wireframing). Heureusement, il existe des équivalents à l’excellent "GUUI Prototyping Tool" créé par Henrik OLSEN pour Visio. Ainsi on peut aller à l’essentiel avec des formes minimalistes. Il est bien entendu possible de créer son propre patron en agrégeant les formes qui ont votre préférence ou en créant les vôtres. Tout ceci doit être destiné à vous faire gagner du temps et pas l’inverse.

L’écran principal d’un document Omni propose une barre d’outil détachable en haut et une barre fixe regroupant des fonctionnalités liées au document.

Signalons dans la barre flottante la présence d’un tampon, permettant de copier des formes, et l’outil plume, pour réaliser des tracés vectoriels (courbes de Béziers possible dans la version 5.1)

L’icône "utilitaires" à gauche permet d’afficher les contenus du document. On y découvre alors les deux entités d’un document : la structure et le canevas.

Le premier sert à créer des arborescences, soit des éléments reliés entre eux. Comme un plan de site. Le deuxième permet de créer des pages. Chaque page est constitué d’un canevas (la feuille blanche). On peut ajouter plusieurs calques par canevas et appliquer un modèle, soit un calque générique qui sert d’arrière-plan.

En bas du panneau on dispose d’outils permettant d’administrer chaque élément. Par exemple de gérer les relations hiérarchiques entre éléments d’une arborescence ou les liens entre un canevas et un modèle. On applique un modèle à un canevas en réalisant un cliquer-déposer, tout simplement.

Utilitaires : modèles, canevas et structures

De l’autre côté de la barre fixe, on trouve l’appel aux patrons et aux inspecteurs.

Les inspecteurs sont tous les outils permettant de modifier une forme : couleurs, contours, textes, alignement, liens... On y trouve quelques fonctionnalités que je pense être spécifiques Omni. Par exemple, l’inspecteur de style, qui permet de voir tous les styles utilisés sur une page et permet de réaliser leur modification (qui s’appliquera à toutes les formes concernées) ou par cliquer-déposer l’application à une forme. C’est plus rapide que la brosse de style (qui existe aussi)

Il est possible de créer des liens dans le document, entre différents canevas ou vers des url ou applescript. De même, l’insertion de notes masquées est très facile (voir une démo vidéo pour la version 5.1)

PARTAGER LE DOCUMENT

Ca y est vous avez un bô document sexy qui fait envie ;-) Vous n’avez qu’une hâte, le faire savoir à la face du monde. A commencer par vos collègues ou votre maman. Hélas, trois fois hélas, ils ont le mauvais goût d’être sur PC...

Que faire ? Je vais vous le dire moi, je vais vous le dire : exporter votre document .graffle en PDF, JPEG, PNG, EPS, Visio XML ou image HTML... Excusez du peu...

La version 5.1 améliore la compatibilité avec Visio (plus besoin de passer par une version XML). Mais ne semble toujours pas proposer une exportation HTML complète comme Visio. Pour compenser il est proposé un mode "présentation".

CONCLUSION

Omnigraffle est un excellent outil de prototypage pour Mac. A vrai dire il n’a guère de concurrent sur cette plate-forme… Loin de se reposer sur son monopole, Omni Group améliore régulièrement son logiciel. Il est vrai que l’apparition des Mac Intel, permettant d’installer les deux OS, doit leur donner de bonnes raisons pour cela.

Quoiqu’il en soit, cet outil est très agréable à l’usage et performant. Il permet de réaliser des wireframes de manière plus efficace que sous Visio grâce aux patrons et aux inspecteurs qui permettent de travailler plus rapidement. Sans oublier les calques et les différents outils à disposition.

En terme de partage, je regrette l’absence d’une vraie exportation HTML avec arborescence de page comme Visio sait le faire. Car la réalisation de prototype "interactifs" est un vrai plus pour la présentation au client.

Mais en attendant une version Mac d’AXURE RP, Omnigraffle est l’outil qu’il me faut.

Merci à Alexis pour sa contribution sur SuperFiction.net ! Il est d'ailleurs disponible en ce moment, donc si vous recherchez un Architecte d'Information, n'hésitez pas à le contacter.

Et si les wireframes vous intéressent, je vous conseille de lire aussi :

• une série de billets sur les outils online de conception de wireframes,
• les articles qui se trouvent dans la rubrique Conception – Outils.

Ce billet est le 1er d’une série consacrée aux outils online de conception de wireframes. La première application que je présente s’appelle Gliffy.

PRÉSENTATION

Gliffy est une application online qui a été fondée (en 2006 ?) par Chris Kohlhardt et Clint Dickson à San Francisco, en Californie.

L’application a été construite en Flash et nécessite le plugin en version 7. Gliffy existe en 2 versions, Basique et Premium, et peut également s’utiliser en tant que plugin pour Confluence. Dans le cadre de ce billet, je parlerai uniquement de la version Basique.

Le site de Gliffy dispose d’une vidéo de démonstration. En complément de cette démo (et pour ceux qui ne parlent pas anglais ;-) voici mon analyse construite autour de 7 critères d’évaluations :

1. prise en main et utilisation,
2. prototypage rapide,
3. partage des fichiers / travail collaboratif,
4. options d’export,
5. interactivité des éléments,
6. wireframes adaptés à l’écran / au print,
7. coût.

PRÉSENTATION DE L’INTERFACE

L'interface est claire et très simple, on distingue bien les différentes zones. La zone supérieure accueille les menus traditionnels (File, Edit...), les options d’enregistrement, d’impression, de création de formes et de textes, plus les fonctions de publication et de partage. La scène est au centre de la page, sur la gauche se trouvent les palettes avec les différent groupes de symboles et de formes (UML, Flow Chart, User Interface...) et la palette des propriétés ("Properties") se trouve sur la droite. La taille de la zone de travail peut varier car les zones de droite et gauche sont élastiques.

LES CRITÈRES D’ÉVALUATION

1. Prise en main et Utilisation

Le temps d’apprentissage est minimum car le fonctionnement de l’application est très simple : il suffit de sélectionner la palette qui contient les symboles et les formes qui nous intéressent ("User Interface" pour les wireframes), et après ça fonctionne par un simple drag’n’drop. Après avoir déposé un élément sur la scène, on peut, grâce à la palette "Properties", éditer ses propriétés (dimensions, position, rotation...)

Gliffy propose un certain nombre d’éléments HTML classiques (boutons et bouton radio, checkbox, menu déroulant, champ de saisie, scrollbars...) plus quelques uns plus complexes : slider, calendrier et sélecteur de couleur notamment. La palette de symbole permet donc de couvrir quasiment tous les besoins en terme de composition HTML. Les fonctions d’édition varient en fonction de chaque élément : une checkbox pourra être cochée ou décochée, on peut renseigner le label d’un champ de saisie, un bouton radio peut être sélectionné ou désélectionné...

Evidemment, Gliffy propose les options de formatage (texte et couleur) et les fonctions d’alignement des éléments sont très utiles, tout comme les raccourcis clavier. Comme dans une application de bureau, un certain nombre d’entre-eux fonctionnent (couper-copier-coller, sélection multiple avec la touche Ctrl + la souris, le Ctrl + Z...) ce qui facilite grandement la tâche quand on travaille sur des wireframes.

Enfin, on peut uploader des images et les positionner dans nos storyboards au lieu d’utiliser les placeholders.

Quelques points négatifs cependant...

Par exemple, la sélection des éléments est parfois délicate, surtout lorsque ceux-ci sont proches les uns des autres. Egalement, la "sélection rectangulaire à la souris" de plusieurs éléments n’est pas possible. De même, c’est parfois assez compliqué de sélectionner un mot sur lequel se trouve un lien HTML car comme ce dernier est cliquable, Gliffy ouvre la page que l’on avait indiquée en tant qu’URL au lieu de le sélectionner... C’est vite très énervant !

Enfin, un gros problème qui ne doit pas être très compliqué à régler : créer des liens entre différentes maquettes est totalement injouable car il n’y a pas de menu contextuel permettant de sélectionner la page vers laquelle on veut pointer. Il faut en connaître l’URL et la taper directement dans la boite de dialogue !

A noter qu’il n’y a pas eu de bugs ou de ralentissements pendant la création de mon wireframe, ce qui est un très bon point au niveau du confort d’utilisation.

2. Prototypage rapide

Pas facile d’aller vite et de mettre en place un wireframe en quelques clics (notamment avec les problèmes de sélection des éléments et de liens entre les pages) Mieux vaut donc avoir le temps pour créer son wireframe. Si vous êtes pressés, préférez un autre outil ou tout simplement un papier et un feutre !

3. Partage des fichiers / Travail collaboratif

Gliffy n’offre pas la possibilité de faire du "real-time editing" à plusieurs mais vous pouvez travailler à plusieurs sur le même document de façon désynchronisée. Pour cela, il suffit d’entrer les adresses emails de vos collaborateurs et ils recevront un email avec leurs identifiants. Ainsi, ils pourront de modifier les fichiers que vous avez crées. Un historique des enregistrements est conservé, ce qui permet de revenir à une version antérieure si besoin.

4. Options d’export

Les wireframes peuvent être exportés en JPG, en PNG et en SVG. Avec ce dernier format, le document peut être ouvert et édité avec Visio mais des bugs subsistent notamment sur certains éléments (menus déroulants ou barres de scroll) Comme vous le voyez, l’export en HTML n’est pas prévu mais ce n’est pas très grave car Gliffy vous fournit une URL pour chaque page, et les éléments qui possèdent des liens sont cliquables : vous pouvez donc naviguer de page en page.

Vous pouvez embeder vos wireframes dans un wiki ou au sein d’une page web ou de votre blog, grâce à l’insertion d’un code javascript. Mais vous pouvez aussi les publier. Dans ce cas là, vos pages sont publiques (tout le monde y a accès) ou privées (l’accès est restreint et réservé uniquement à certaines personnes). Vous pouvez d’ailleurs voir le wireframe que j’ai réalisé car la page est publique.

5. Interactivité des éléments

Gliffy propose le strict minimum, c'est-à-dire uniquement... les liens HTML ! On oublie donc tout le reste : cocher / décocher des cases ou des boutons radio, saisir du texte dans un champ, utiliser un menu déroulant... et encore mettre en place des cases (cf. "cases" dans Visio ou Axure RP Pro) Et on ne peut pas paramétrer les liens (nouvelle page ou popup par exemple)

6. Wireframes adaptés à l’écran / au print

Vous pouvez imprimer vos pages mais peu de réglage concernant l’impression sont proposés. Par contre, les pages et les éléments peuvent être dimensionnés et positionnés au pixel près. Avantage donc à une utilisation sur écran (d'ailleurs l'unité est le pixel)

7. Coût

L’option Basique est gratuite, elle vous permet donc de vous familiariser avec l’application et de vous faire une idée des possibilités de l’outil. Les fonctionnalités sont identiques à la version Premium mais la version basique est bridée au niveau de l’espace disque et du nombre de fichiers. Il vous faudra donc passer rapidement à la version Premium pour une utilisation régulière.

• version Basique : pas de support online, création maximum de 5 fichiers, upload d’images limité à 2Mo et présence de publicité dans les exports.
• version Premium : support online, pas de limitation du nombre de fichiers, espace illimité pour l’upload d’images et pas de publicité.

Le coût de la version Premium démarre à 5 US $ par mois pour 1 licence, puis passe à 25 US $ pour 10 postes (voir le détail de tous les tarifs)

CONCLUSION

L’application pêche par son manque d’interaction entre les éléments et surtout parce que certaines actions récurrentes et toutes simples (créer un lien entre 2 pages) sont assez fastidieuses à réaliser.

Mais Gliffy est une application facile à prendre en main qui permet de réaliser très simplement des wireframes d’assez bonne qualité. De plus, un des avantages de Gliffy est qu’il permet aussi de réaliser autre chose que des Interfaces Utilisateurs : diagrammes de flux, schémas UML, arborescences... Cette polyvalence est donc très intéressante pour les Chefs de Projet ou les Architecte d'Information qui vont l'utiliser.

Prochain billet de la série : "Les outils online de conception de wireframes (2/5) : Jumpchart"

Après avoir consacré quelques posts à la création de wireframes / storyboards avec Powerpoint, Visio, Axure RP Pro ou encore Acrobat, je prépare une série de billets qui concerne les outils online de conception de wireframes.

Je vais donc tester et présenter :

• Gliffy
• Jumpchart
• Balsamiq Mockups
• Protoshare
• Pencil Project

Contrairement aux précédents posts sur les logiciels de conception de wireframes, je vais essayer cette fois-ci de mettre en place des critères d’évaluation pour les outils online (ex : travail collaboratif, interactivité des éléments, formats d’export...)

Ainsi, ces différents articles fourniront un panorama non exhaustif mais déjà conséquent des différents outils disponibles pour les concepteurs multimédia.

Premier billet de la série : "Les outils online de conception de storyboards (1/5) : Gliffy"

J'ai rédigé une série de billets sur la conception de wireframes / storyboards au travers de différents logiciels. Ne travaillant pas sur Mac, je n'ai pas pu utiliser Omnigraffle et je n'ai donc pas fait de billet sur ce logiciel.

Pour me faire pardonner, voici Graffletopia, un site tenu par Patrick Crowley qui propose gratuitement des tonnes de stencils pour Omnigraffle. Vous trouverez toutes sortes de stencils, et notamment des stencils qui sont "stylés" façon Mac OS X, Windows XP, Widget, iPhone...

De quoi frimer devant vos collègues Architectes d'Information ;-)

Pour rappel, voici mes principaux billets relatifs à la conception de wireframes :

• avec PowerPoint
• avec Visio (+ complément)
• avec Axure RP Pro
• avec Acrobat
• et la présentation du workshop que j'ai animé avec les Designers Interactifs et les fichiers sources à télécharger

L'origine de ce billet est simple : les 4 mots-clés qui forment l'essentiel du trafic de mon blog et qui sont recherchés par les utilisateurs sont : storyboard, zoning, visio et axure.

Du coup, je me suis dit que ces liens pourraient vous intéresser ;-)

• tout d'abord, voici un tutoriel intéressant sur Visio réalisé par Agnes Misiurny, Information Architect chez Blastradius.
• ensuite, sachez qu'Axure RP 5 est disponible en version bêta. (et voici quelques infos sur les nouveautés

Pour ceux qui ne connaissent pas ces outils ou qui hésitent encore à quitter PowerPoint ;-) je vous conseille de jeter un oeil aux 22 23 billets regroupés au sein de la catégorie "Méthodologie - Conception". Cela peut vous aider concernant le choix de votre outil de storyboarding.

Le rythme de publication étant très ralenti durant cette période de l'année (faut bien se reposer un peu de temps en temps ;-), je vais faire comme les chaînes de TV et vous proposer, par catégories, une espèce de "récapitulatif-bestOf-zapping-résumé" des articles de 2007 parus sur SuperFiction.net :

STRATEGIE - MARKETING

• Lancement du nouveau site e-commerce de Fauchon
• Connaissez-vous l’e-paper ?
• Habitat se lance dans le e-commerce

EXPERIENCE UTILISATEUR - ERGO

• Le design sonore, parent pauvre du design interactif ?
• Rôle et place du design sonore : résultats et entretien avec l'agence Sculpture Son
• Le nouveau Fnac.com a débarqué
• Sites fullflash : le bon exemple du Coq Sportif
• Scénariser et adapter son outil de recherche : l’exemple de Bluenile.com
• Astuce intéressante pour les longs formulaires

MARQUES

• Ikea au pays des merveilles
• Comment faire du Neuf.fr avec du vieux

CREATION

• Apple ou l'ingéniosité créative au service de la publicité
• Culture Pub renait sur le web
• Campagne LG : les idées les plus simples...

MARKETING MOBILE

• L’Oreal Paris et Nurun créent un site mobile pour iPhone
• Affichage et téléphone mobile : vous êtes plutôt bluetooth ou mobile tag ?

BUZZ MARKETING

• Vous et Nous : le site des blogueurs qui parlent aux agences
• Vidéo collaborative Gmail : je dis M !

METHODOLOGIE DE CONCEPTION

• Création de wireframes :
• avec PowerPoint
• avec Visio (+ un article complémentaire)
• avec Axure RP Pro
• Workshop sur la conception de Storyboard : les fichiers sources sont dispos
• Refonte graphique totale : bonne ou mauvaise idée ?

WEB 2.0

• La BBC lance une home page customisable en version bêta
• "Go Run Easy" de Reebok : le plaisir avant tout

A LIRE - A VOIR

• A lire : Ergonomie web, d'Amelie Boucher
• L'EBG édite la V4 de son Petit Livre Rouge du Marketing Interactif
• Mobile Web Design, le nouveau livre de Cameron Moll
• Des podcasts sur l'utilisabilité
• Les bannières et pubs contextuelles sur les blogs : l’avis de Fred Cavazza et Aziz Haddad

DIVERS

• 72 sur 100
• Connaissez-vous le projet ELMER ?
• Violence et jeux vidéo : le duo infernal ?
• Les blogs marketing de l’ADETEM

Et pour la suite du programme, rendez-vous en 2008 ! D'ici là, bonne fin d'année à tous !!!

Suite à mon intervention lors du workshop "Conception de storyboard" avec les Designers Interactifs le 30/10/2007, les fichiers sont disponibles en téléchargement :

• la présentation au format Powerpoint,
• les exemples réalisés sous PowerPoint, Visio et Axure (comprend les fichiers sources + les exports HTML),
• des ressources pour PowerPoint et Visio.

PS 1 : Concernant Visio, les stencils (fichiers *.VSS) sont à copier dans le répertoire "Mes documents/Mes formes".
PS 2 : Les blogs et les livres à lire sur le sujet, ainsi que les liens concernant les différentes ressources sont listés dans la présentation PPT.

Le workshop d'hier soir concernant la "conception de storyboards" se voulait opérationnel et placé sous le signe de l'échange. Ce sont mes retours d'expérience que j'ai souhaité partager avec vous, ce qui nous a permis d'échanger nos points de vue et de confronter nos différentes méthodes de travail.

Merci à Benoit, Fabienne et à toute l'équipe des Designers Interactifs de m'avoir proposé d'intervenir sur ce workshop. C'était une première expérience pour moi, j'en suis ravi, et j'espère vous avoir apporté un point de vue intéressant sur le potentiel des différents outils.

D'ici quelques jours, je mettrai en téléchargement les fichiers présentés lors de la soirée : la présentation, les fichiers sources + les exports HTML pour chacun des logiciels (Powerpoint, Visio et Axure), ainsi que les différents stencils pour Visio. Ils seront également disponibles dans la bibliothèque de livrables pour les membres de l'association.

Merci à tous ceux qui sont venus !

Suite à mes billets sur la conception de wireframes (avec Powerpoint, avec Visio, avec Axure, avec Acrobat), Benoit Drouillat m'a proposé d'organiser un workshop dans le cadre des Designers Interactifs sur les "méthodes et outils de conception web".

Le workshop se déroulera le 30 octobre prochain au Café Dune (18 avenue Claude Vellefaux - 75010 Paris) de 20h à 21h30. Si vous souhaitez participer, dépêchez vous car c'est limité à 20 places.

Le workshop s'adresse aux personnes qui souhaitent découvrir / améliorer / partager sur les pratiques de la conception. C'est une première pour moi, et j'espère qu'il y aura des retours d'expérience et beaucoup d'échanges. Et si vous avez des wireframes sur lesquels vous souhaitez échanger, apportez-les !

Pour compléter mes billets sur la réalisation de wireframes (avec PowerPoint, avec Visio et avec Axure RP Pro), voici un article très intéressant de "Boxes and Arrows" sur la création de prototypes avec Adobe Acrobat : "PDF Prototypes: Mistakenly Disregarded and Underutilized".

L’article démonte un certain nombre de préjugés sur les possibilités qu’offre Acrobat . Il précise que, en plus de créer des liens hypertextes, on peut créer des rollovers, simuler des effets dynamiques d’apparition / disparition d’éléments, intégrer de l’audio et de la vidéo...

Un article intéressant et didactique qui m’a donné envie de tester cette nouvelle méthode de prototypage. A priori, je ne dirai pas qu’Acrobat soit LE logiciel à utiliser pour ce genre d’exercice, mais c’est un outil supplémentaire qu’il est bon de connaître.

Quelqu'un aurait-il un retour d'expérience sur la réalisation de prototypes avec ce logiciel ?

Et oui, un an déjà... C’est l’occasion de repenser à toutes ces soirées passées à noter des idées, à rédiger des posts pendant la nuit, à angoisser devant ma feuille blanche ou à lire d’autres blogs.

Et c’est également l’occasion de vous proposer une sélection d’articles parmi les 137 que j’ai rédigés jusqu’à présent. J’espère que vous me pardonnerez pour le style hésitant et maladroit des premiers posts, mais il faut bien se lancer ;-)

Mai 2006

• Blogs pour les pros (mon tout 1er post)

Juin 2006

• Batashop VS Let’s Buy Shoes
• Plan media 100% pur web
• Réussir sa campagne de marketing mobile – Compte rendu

Juillet 2006

• Le zoning : contrainte ou aide précieuse ?
• De la mise en valeur des fonctionnalités

Août 2006

• La fiche produit sur Amazon.com
• L'histoire du bouton
• Concours musicaux en ligne (1/2) : le "OK Go Dance Contest"
• Mobile tag : l’avenir du marketing mobile
• Darty VS Pixmania : 2 visions de l’e-commerce co-blogué avec E. Fraysse

Septembre 2006

• Bus 1 – Voiture 0
• Blogueurs influents : l’interview de Kylia

Octobre 20006

• Toys’R’Us : la v2 est en ligne !
• Les résultats de la campagne "Le syndrome du bélier"

Novembre 2006

• Quand les agences font leur propre buzz
• Styler un formulaire : oui, mais...

Décembre 2006

• Function findJob (developpeur)
• Focus sur le New York Times.com
• 30 ans de jeux videos
• Communicating Design, LE livre de Dan Brown

Janvier 2007

• Lecture en F: oui, mais...
• Refonte graphique : bonne ou mauvaise idée ?
• L’ajout du panier : petit tour d’horizon
• Amazon se lance dans la chaussure avec Endless.com

Février 2007

• Astuce intéressante pour les longs formulaires
• Le guide d’achat interactif de Fnac.com : oui, mais…
• Meetic : les règles du jeu ont changé, le site aussi
• Affichage et téléphone mobile : vous êtes plutôt bluetooth ou mobile tag ?

Mars 2007

• Création de wireframes
• utiliser Microsoft Powerpoint (article 1/3)
• utiliser Microsoft Visio (article 2/3)
• utiliser Axure RP Pro (article 3/3)
• My Timelines, ou comment visualiser les billets archivés de manière plus attractive
• Press Play On Tape : the Commodore 64 Revival Band
• Les bannières et pubs contextuelles sur les blogs : l’avis de Fred Cavazza et Aziz Haddad

Avril 2007

• "Go Run Easy" de Reebok : le plaisir avant tout
• Après les mobile tags, voici les ploggcodes

Mai 2007

• Scénariser et adapter son outil de recherche : l’exemple de Bluenile.com

Happy birthday to me, happy birthday...;-)

GUUI, The Interaction Designer’s Coffee Break, avec l’aide de Pål Eirik Paulsen, vient de mettre à disposition une nouvelle version de son "Web Prototyping Tool" pour Visio.

Dans mon précédent article sur Visio, j’indiquais que l’un des inconvénients du logiciel, c’était qu’il ne gérait pas le scroll dans les exports en HTML (pour simuler un scroll, on était obligé de "bricoler" avec 2 pages différentes).

Grâce à cette nouvelle version du "Web Prototyping Tool", le scroll est géré par le logiciel, ce qui permet de se rapprocher encore plus de la navigation finale (cf. exemple)

L’autre nouveauté (assez gadget), c’est la possibilité d’avoir les éléments HTML dans un style de trait "dessin au crayon" pour coller un peu plus au prototypage papier.

Allez, encore quelques développements et l’on pourra bientôt interagir avec les éléments de formulaire comme le propose Axure RP Pro

;-)

Ce billet est le troisième de la série dont l’objet est la création de wireframes. Pour ceux qui ont raté les épisodes précédents, j’avais parlé des avantages / inconvénients de PowerPoint et Visio à travers 2 billets :

• création de wireframes avec PowerPoint
• création de wireframes avec Visio

Aujourd’hui, je vais vous présenter Axure RP Pro, qui permet de créer des wireframes, des diagrammes de flux, des prototypes... et qui facilite énormément la rédaction des spécifications (oui oui, vous avez bien lu… ;-)

L’interface n’est pas très complexe et sa prise en main est très facile si on connaît un peu Visio.

BEAUCOUP DE PETITS PLUS...

Axure possède nativement les bibliothèques d’éléments HTML (bouton, éléments de formulaire, tableaux, image...) Ces éléments sont évidemment éditables et paramétrables. Là encore, plus de bidouille : on drag’n’drop, on édite, on met en place des liens ou des comportements.

On peut utiliser des "masters" pour tous les éléments persistants (navigation, boutons récurrents…) Les propriétés attribuées aux masters sont répercutés sur toutes les pages sur lesquelles le master est placé. Là encore, on gagne un temps précieux quand il faut rajouter une sous-rubrique ou déplacer un menu qui est repris sur 15 pages...

La conception de wireframes est avant tout conçue pour une utilisation sur écran :

• le document n’a pas de taille prédéfinie : ainsi, lorsqu’on doit faire la home d’un gros portail (donc avec beaucoup de contenu), on n’est pas limité par la taille du document. Si on a besoin de 1200 pixels de hauteur, la page va s’adapter au contenu que l’on place et le scroll se fera automatiquement lors de l’export de la page en HTML
• et l’unité de mesure est le pixel, pas le centimètre, ce qui permet de créer ses éléments à l’échelle 1 et de les positionner au pixel près.

Lors des exports, ce sont de "vrais" éléments HTML qui sont utilisés : des menus déroulants, des boutons, des cases à cocher... Cela facilite encore plus la compréhension et la lisibilité de la page, car les éléments sont reconnaissables de suite.

Lorsqu’on crée des pages, elles s’ajoutent automatiquement au site map : on peut les positionner les unes par rapport aux autres et créer ainsi des groupes de pages et des niveaux de profondeur pour avoir son arborescence qui est générée en parallèle.

ET DEUX GROS AVANTAGES !

1- La gestion des interactions

Axure est très souple avec les interactions et permet de faire pas mal de choses :

• On peut réellement utiliser les éléments de formulaire (cocher les cases, afficher le contenu des menus déroulants...) ce qui permet de se rapprocher énormément de l’utilisation finale des pages.
• Il gère aussi les différents cas de figure (ex : cas n°1, je fais telle action, cas n°2, je fais telle autre action…)
• Axure possède un gestionnaire d’évènements pour la souris : on peut ainsi attribuer des actions sur le clic, le roll over, le roll out…
• L’affichage des popup est entièrement paramétrable : taille, position, attributs... (Axure affiche une vraie popup, pas l’image d’une popup)

Et tout ça, sans aucune ligne de code s’il vous plait !

2- La rédaction (d'une bonne partie) des specs

Cette fenêtre (cf. screenshot ci-dessous) permet de renseigner toutes les informations qui sont nécessaires à la rédaction (laborieuse) des spécifications. Et quand on clique sur le bouton "Générate Specification", tout est édité sous la forme d’un document Word qui contient :

• l’arborescence du site
• un screenshot de chaque page avec les annotations correspondantes
• les différents états de chaque élément (les roll overs...)
• tous les détails concernant ces éléments (nom, type, actions, paramètres, commentaires...) sont renseignés dans un tableau
• et si l’on a crée des workflow, il les exporte aussi évidemment ;-)

Enfin, on peut même modifier les informations qui sont proposées par défaut et mettre en place les informations dont on a réellement besoin pour ses propres specs (si je n’ai pas besoin de l’information "Risk", je la supprime et la remplace par l’information "Size" par exemple). Voici un exemple des specs générés par Axure (format word)

COTÉ INCONVÉNIENTS...?

Franchement, je dois me forcer pour en trouver. Je pourrais dire qu’il n’est pas très connu comparativement à Powerpoint ou Visio (mais est-ce un inconvénient après tout ?)

Le seul réel inconvénient que je vois pour le moment, c’est lorsque l’on exporte les maquettes en HTML : pour chaque page, Axure génère 1 page HTML + 1 répertoire correspondant. Ce qui fait qu’on se retrouve rapidement avec beaucoup de fichiers pour seulement une dizaine de page.

ET CA RESSEMBLE A QUOI UN WIREFRAME RÉALISÉ AVEC AXURE ?

Voici un wireframe de test dont les points intéressants sont :

• les roll over sur le menu
• les 2 cas placés sur le bouton submit de la home page (inscription à la newsletter)
• le menu déroulant de la page "Articles"

Voici un fichier ZIP qui comprend : le fichier source d’Axure, les exports HTMl et les specs au format Word.

CONCLUSION

Axure est relativement récent (2002) et ne fait pas encore le poids face à des géants comme Powerpoint ou Visio. Cependant, je trouve qu'il est beaucoup plus puissant concernant les wireframes. La rédaction des specs et la bonne gestion des interactions sont deux gros avantages qui font que ce logiciel est, selon moi, un "incontournable".

Ce billet est le second d’une série de 3 dont l’objet est la création de wireframes. Après vous avoir présenté mon point de vue sur Microsoft Powerpoint, je vous propose aujourd’hui de parler de Microsoft Visio.

Avant de commencer

Tout d’abord, il est important de noter que les outils pour le web qui sont disponibles par défaut dans Visio ne sont pas complets : on peut faire des process, une arbo... mais pas de wireframe. Je vous propose donc d’installer 2 fichiers :

1/ Le "Web Prototyping Tool" (ZIP) proposé par GUUI (l'installation est expliquée ici)

2/ Le "Wireframe Stencil 2003" (ZIP - 1.3 Mo) (dont je ne trouve plus la source, si quelqu’un la connaît...)

Chaque composant a ses avantages et ses inconvénients (voir ce rapide comparatif), mais avec ça, vous avez tout ce qu’il faut pour faire des wireframes. On peut donc commencer ;-)

Les avantages de Visio

Sa simplicité d'utilisation : après avoir chargé les composants installés, il suffit de prendre les éléments HTML maintenant disponibles et de les faire glisser sur la scène pour composer sa page.

Tout (ou presque) est présent et paramétrable : bouton, image, liens HTML, faux texte, boutons radio, scrollbars, champs de saisie... Un double clic permet de les éditer (pour modifier l’intitulé d’un bouton, le contenu d’un menu déroulant...) Plus besoin de "bidouiller" pour modifier la taille d’un menu déroulant ou un élément de formulaire, c’est donc ultra simple et beaucoup plus souple!

En plus de faire des liens HTML, on peut aussi mettre en place différents "use cases" pour simuler différents cas de figure. Exemple avec la validation d'un formulaire :

• cas n°1 : un champ n'est pas renseigné (on affiche une alerte JS)
• cas n°2 : tout est bien renseigné (on affiche donc la page de validation du formulaire)
• cas n°3 : il y a une erreur dans la BDD (on affiche donc une page d’erreur)

Une petite tooltip apparait lorsqu'on clique sur le bouton "ok" et on peut ainsi tester toutes les possibilités (on peut mettre le nombre de scénarios que l'on souhaite.)

On peut définir le placement et les options d’éléments répétitifs grâce aux arrière-plans (très utile pour mettre en place la navigation persistante par exemple) On peut ainsi mettre en place son menu de navigation avec 10 liens et l’appliquer à toutes les pages de son site. Si un lien change, il suffit de le changer uniquement sur l’élément d’arrière plan, et la modification sera impactée sur toutes les autres pages contenant le menu.

On peut exporter ses maquettes sous forme de page HTML, ce qui permet de pouvoir les lire et les tester partout (on peut aussi naviguer directement dans le fichier Visio sans être obligé de faire un export). Par défaut, on a l’arborescence du site sur la gauche, ce qui permet de naviguer même si l’on a oublié certains liens dans les pages. On peut également choisir la taille de la fenêtre de sortie et faire ses wireframes à l’échelle 1 pour avoir un wireframe plus fidèle. Enfin, les boutons "Suivant / Précédent" du navigateur fonctionnent.

Les inconvénients de Visio

Malheureusement, Visio n’est pas parfait et souffre de petits inconvénients. Tout d‘abord, on ne peut pas scroller dans les exports HTML. Pour faire comprendre qu’il y a du contenu en bas de page, il faut utiliser l’élément "Page split", placer des scrollbars et mettre un lien sur ces scrollbars...

On ne peut pas interagir avec les éléments de formulaire : on ne peut pas cocher les cases ni les boutons radio, et on ne peut pas voir le contenu d’un menu déroulant par exemple.

Il n'y a pas de fonction "coller en place". Ca à l’air d’être un détail, mais quand on doit créer des pages presque identiques, il faut recaler tous les éléments à la main et c’est très très pénible...

Enfin, la pagination à l’intérieur de Visio est un enfer : on ne peut pas scroller et passer de page en page (comme dans avec Powerpoint), on doit cliquer sur des onglets. Et comme la place est limitée, on ne peut pas en afficher beaucoup à la fois...

Et ça ressemble à quoi un wireframe réalisé avec Visio ?

Voici un wireframe de test réalisé avec Visio dont les points intéressants sont :

• l’inscription à la newsletter sur la "Home page" et la page "About", avec 2 cas possibles à chaque fois (fonctionne seulement sur IE)
• la page "Articles" avec une simulation de scroll

Et voici le fichier source pour ceux que ça intéresse.

Conclusion

Visio permet de réaliser des documents qui sont utilisables dans beaucoup d’autres métiers que ceux du web (le bâtiment, le génie logiciel, la mécanique...) Ses possibilités sont donc immenses, mais avec les 2 composants cités en début d’article, je pense que vous avez tout ce qu’il faut pour faire des wireframes impeccables. Leur réalisation est selon moi beaucoup plus simple et souple qu’avec Powerpoint et elle offre des possibilités supérieures.

Prochain billet : "Création de wireframes (article 3/3) : utiliser Axure".

UPDATE 26/03 :
j'avais trouvé le ZIP du "Wireframe Stencil 2003" sur le blog de Garret Dimon.

Je vais consacrer 3 articles à la création de wireframes, vue au travers de 3 logiciels : Powerpoint, Visio et Axure. Ce billet est le premier de la série et concerne donc Microsoft Powerpoint.

Vous connaissez tous Powerpoint : il est essentiellement utilisé pour des présentations de toute sorte (recos, schémas, process…) mais également pour créer des wireframes et des maquettes fonctionnelles. Je vous propose donc un petit tour d’horizon des possibilités et des limites de Powerpoint...

Les avantages de Powerpoint

Tout d’abord, Powerpoint est très simple d’utilisation. Si l'on connaît les logiciels du Pack Office (Word, Excel...), sa prise en main est très rapide et ne nécessite pas (ou très peu) d’apprentissage car l’interface et le fonctionnement du logiciel sont très familiers.

Powerpoint permet de créer des documents différents : présentation, schémas, slideshows, maquettes... On peut ainsi facilement alterner ou combiner des maquettes d’interfaces avec des spécifications, ou bien encore splitter l’écran en 2 (une partie maquette + une partie annotations).

En publication, les liens HTML sont cliquables, ce qui permet de naviguer de page en page comme si l’on était sur le site.

Les inconvénients de Powerpoint

Malheureusement, il n’y a pas de composants pour créer rapidement des éléments HTML (ex : un menu déroulant, un bouton, une case à cocher... ) Il faut donc tout "bricoler" soi même, et c’est là que ça se gâte, car modifier la taille d’un menu déroulant, ça n’a l’air de rien, mais comme il est composé d'éléments imbriqués, il faut les dégrouper, modifier le menu déroulant, regrouper les éléments... bref, c’est assez contraignant au final !

Mis à part les liens simples (de type hyperlien ou bouton), on ne peut pas véritablement simuler une navigation : impossible sans bidouiller de simuler le déroulement d'un menu ou la validation d’un formulaire.

On est limité à la hauteur du document : pour présenter une page qui contient beaucoup de contenu, on devra couper la maquette et l’étaler sur plusieurs pages.

Enfin, il n’est pas forcément très simple de concevoir une interface à l’échelle 1 : il n’y a aucune indication de taille concernant la fenêtre du document (ni en centimètres ni en pixels)

Conclusion

La force de Powerpoint, c’est le fait qu’il soit "généraliste" dans le sens où il propose des outils permettant de faire beaucoup de documents différents. Mais je pense que c’est aussi sa faiblesse : je le trouve "trop simple", il n’offre selon moi pas assez de possibilités concernant la création de maquettes pour l’écran. Il est plus adapté pour des wireframes en version print. C’est cependant l’outil idéal si vous ne souhaitez pas passer du temps à apprendre un autre logiciel.

Cependant, certains spécialistes s’en servent formidablement bien et avaient même mis à disposition les éléments HTML qu’ils ont faits eux-même...

PS : n’étant pas un spécialiste de PowerPoint, j’attends des commentaires de votre part pour m’éclairer, me corriger, ou appuyer mon propos !

---

Prochain billet : "Création de wireframes (article 2/3) : utiliser Microsoft Visio"