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 5ème d’une série consacrée aux outils online de conception de wireframes. La cinquième application online que je présente s’appelle Pencil Project.

PRÉSENTATION

L’unique mission du projet Pencil est de "construire un outil open source gratuit pour la création de diagrammes et de prototypage que tout le monde peut utiliser." Une mission ambitieuse donc.

Pencil peut fonctionner de 2 manières :

• soit en tant qu’addon de Firefox 3 ;
• soit en mode standalone sous Linux GTK+, Windows XP ou Vista.

Pour ma part, l’addon ne voulant pas fonctionner sous ma version de Firefox, j’ai testé la version standalone (mais je ne pense pas qu’il y ait de grandes différences entre les 2).

PRÉSENTATION DE L’INTERFACE

Pas grand-chose à dire sur l’interface, elle est très basique : les éléments HTML sont sur la gauche et le plan de travail constitue le reste de la page. Le contenu des menus est très léger et tout se fait via la barre d’outils, très simple à utiliser. Les éléments HTML ont le design des interfaces de Windows XP ce qui fera plaisir aux Mac users ;-)

LES CRITÈRES D’ÉVALUATION

1. Prise en main et Utilisation :

Question utilisation et prise en main, Pencil ne réinvente pas la poudre et ça fonctionne bien : drag and drop des éléments, double clic pour les éditer... C’est du basique. Pas mal d’éléments HTML sont présents nativement, les raccourcis clavier de base sont pris en compte (couper / copier / coller, annuler multiple etc...) On peut faire un glisser / déposer d’une image externe (formats .png, .jpg, .gif et .svg) Rien de plus à dire, la prise en main simple permet une utilisation rapide et efficace.

2. Prototypage rapide

La simplicité d’utilisation de Pencil permet de l’utiliser pour créer rapidement des prototypes, d’autant plus que l’on peut utiliser des éléments et/ou des pages en tant qu’arrière plan d’autres pages, ce qui facilite la mise à jour de certains éléments récurrents (ex : un footer...) C'est l'outil parfait pour faire simple et aller vite.

Réaliser cette page a été très simple et n’a pris que quelques minutes.

3. Partage des fichiers / Travail collaboratif

Pencil n’a pas été pensé pour ce genre de chose. Aucune notion liée au partage des fichiers ni au travail collaboratif n’est abordée.

4. Options d’export

L’option qui permet d’exporter soit une page, soit l’intégralité des pages est assez pratique je dois dire. Par contre, les wireframes dessinés sous Pencil sont exportables uniquement en PNG. Le fichier source porte une extension .EP qui, d’après Pencil, est basé sur du XML et permet donc d’être un format ouvert qui n’a pas de restrictions… (je ne sais pas si c’est d’une réelle utilité mais cela va dans le sens d’un "outil open source gratuit")

5. Interactivité des éléments

C’est sur ce sujet que j’ai été très déçu par Pencil. L’export des pages se faisant en PNG, il n’est pas possible de faire des hyperliens entre les pages. On ne peut donc pas naviguer entre les pages, que ce soit à l’intérieur du logiciel ou en export. Un bouton qui sert apparemment à créer des liens, permet en fait de les simuler (il va colorer le texte en bleu et le souligner, mais aucun lien HTML n’est fait) Vos formulaires seront sont magnifiques mais, vous l’aurez compris, ils resteront non cliquables / non utilisables. Dommage...

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

Pixels, DPI... il y a quelque chose que je ne trouve pas très logique : quand on crée une page dans Pencil, l’application propose des tailles en pixels (là, c’est donc adapté çà l’écran). Par contre, il n’est pas possible de faire des liens entre les wireframes (là, ce n’est pas adapté à l’écran, c’est plus dans une logique print) mais je ne peux pas imprimer directement... L’application semble donc avoir été pensée à mi-chemin entre le print et l’écran, ce qui rend son utilisation parfois déroutante.

7. Coût

Pencil Project est totalement gratuit (et ne pèse que 400 Ko !) Qui dit mieux ?

CONCLUSION

La volonté de Pencil Project est de "construire un outil open source gratuit pour la création de diagrammes et de prototypage que tout le monde peut utiliser." En ce sens, la mission est réussie : l’application ne demande que très peu d’apprentissage, elle est gratuite et le format d’export PNG étant également lisible quasiment de partout, l’application est accessible au plus grand nombre.

Cependant, je reste sur ma faim concernant notamment les liens : le rendu des maquettes est très soigné et même s’il ne propose pas de fonctionnalités poussées, j’aurai aimé pouvoir créer des liens entre les pages. Du coup, Pencil équivaut à mes yeux à Microsoft Powerpoint (les liens en moins et les éléments HTML en plus) Et c’est vraiment dommage car Pencil avait les moyens d’être aussi simple que Powerpoint mais plus puissant.

Sixième Prochain billet de la série : "Les outils online de conception de wireframes : JustInMind."

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

Avant de reprendre ma série inachevée de billets sur les outils online de conception de wireframes, je souhaitais vous exposer une reflexion d'Anders Ramsay dans laquelle il expose les 3 raisons qui font qu'il n'utilise pas d'outils de prototypage :

1. Les outils de prototypage ne sont pas adaptés aux nouveautés ou aux tendances en matière d'expérience utilisateur, ils courent après les évolutions. ("Prototyping tools are in a continual state of playing catch-up with the rapidly evolving state of the art of user experience paradigms")
2. La techno utilisée pour implémenter une application aura un impact significatif sur l'expérience utilisateur
3. Les outils de prototypage peuvent induire le client en erreur ou créer de mauvaises illusions, dans le sens où la techno sélectionnée pour le projet (Flash par exemple) n'est pas forcément la même que celle qui est utilisée pour réaliser le prototype (Powerpoint ou Visio par exemple)

Que pensez-vous de sa reflexion ? Etes-vous d'accord avec lui sur l'ensemble de ces 3 points ?

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, le 3ème d’une série consacrée aux outils online de conception de wireframes, concerne Balsamiq Mockups.

PRÉSENTATION

Balsamiq est une entreprise fondée en Mars 2008 par Giacomo Guilizzoni, un ancien ingénieur senior de chez Adobe. Balsamiq est une Micro-ISV (l’équivalent d’une micro-entreprise en France) et vend des applications online de bureau et c’est Giacomo Guilizzoni lui seul qui a crée, développé et lancé Balsamiq Mockup (chapeau bas Monsieur !), qui permet de réaliser des wireframes avec un style "dessiné à la main".

Balsamiq Mockup existe plusieurs versions :

• web (version de démo),
• desktop,
• web office, avec des versions intégrées à Confluence, JIRA et XWiki.

Dans un 1er temps, mon test a été effectué sur la version web réalisée en Flash. Puis, dans un 2nd temps, j’ai importé mon wireframe sur la version Desktop dont l’interface a été réalisée avec Adobe Air.

Voici un rapide aperçu en vidéo de l’application :

PRÉSENTATION DE L’INTERFACE

L’interface, très simple, est découpée en 3 zones :

• en haut se trouvent les menus classiques (fichier, édition, affichage et aide) avec reprise de certaines fonctionnalités sous forme d’icônes sur la droite,
• juste en-dessous se trouvent les éléments HTML disponibles,
• enfin il y a la feuille de papier sur laquelle on va composer notre wireframe. On dessine donc sur un carnet de croquis avec un style "fait main" au trait irrégulier et tremblotant.

Comme vous le voyez, l’interface est simple, sans fioriture mais assez efficace car elle permet de se concentrer sur le plus important : la mise en scène d’éléments pour nos wireframes.

LES CRITÈRES D’ÉVALUATION

1. Prise en main et Utilisation

La prise en main est très facile : drag’n’drop pour positionner les éléments, double clic pour éditer les textes des éléments, et le clic sur un élément fait apparaître en surimpression une palette de propriétés. Cette dernière propose des réglages contextuels divers : formatage du texte (taille, couleur, alignement...), état des éléments (in focus, selected, disabled...) bordure, transparence, gestion des plans...

Les éléments HTML dont on dispose pour créer les wireframes sont très nombreux (63 si j’ai bien compté) et certains d’entre eux sont très utiles : player vidéo, accordéon, breadcrumb, tableau, calendrier, nuage de tags… Balsamiq Mockups est d’ailleurs la 1ère application que je teste qui propose autant d’éléments ! Vu le nombre, ils sont divisés en plusieurs groupes : boutons, containers, layout, texte… D’ailleurs, ce n’est pas très évident parfois de savoir dans quel groupe on peut trouver tel ou tel élément, mais il suffit de cliquer sur le bouton « All » pour voir tous les éléments, ou de taper directement le nom de l’élément que l’on souhaite utiliser dans un champ de saisie, et l’élément en question est positionné automatiquement sur la page.

Les raccourcis clavier sont pris en compte (notamment le Ctrl +D pour Dupliquer, le Ctrl+A pour Sélectionner tout, le Ctrl+ Z est illimité et on peut faire des sélections multiples avec la touche Ctrl et la souris...) ce qui est très agréable à l’utilisation. Aussi, ce que j’ai appelé la "sélection rectangulaire à la souris" (qui manque à Gliffy) est pris en compte avec Balsamiq Mockups.

Des aides visuelles pour l’alignement s’affichent automatiquement quand on déplace des éléments et la taille de ces derniers apparaît en surimpression quand on les agrandit / réduit.

Enfin, on peut avoir plusieurs documents ouverts en même temps et on passe de l’un à l’autre en changeant d’onglet.

Quelques points négatifs cependant :

• on ne peut pas (encore) uploader d'images, on peut utiliser uniquement les placeholders,
• pas (encore) la possibilité de choisir une autre typo : c’est du Comic sans MS, un point c’est tout ;-)
• de part son style graphique, l’interface est moins soignée que celle de Gliffy et fait "moins professionnelle" alors que l’outil est fiable et sérieux,
• le clic droit de la souris pourrait être utilisé pour du formatage de texte ou autre, sachant que Flash et Air permettent de le personnaliser.

Malgré ces quelques points négatifs dont certains vont être corrigés, le temps nécessaire à l’apprentissage est quasi nul et l’application est très agréable et très pratique à utiliser.

Ci-dessous, voici le wireframe que j’ai réalisé rapidement et simplement avec Balsamiq Mockups (vous pouvez également télécharger le fichier XML correspondant à ce wireframe).

Cliquez sur l'image pour l'agrandir.

2. Prototypage rapide

Balsamiq Mockups est parfaitement adapté pour cela : j’ai réalisé cette page en quelques clics et ce, sans aucune difficulté, ce qui prouve bien que l'utilisation des éléments et leur paramétrage sont aisés.

3. Partage des fichiers / Travail collaboratif

Il n’est pas possible de partager un fichier ou de travailler à plusieurs de façon collaborative. Mais en fait, c’est tout à fait logique car Balsamiq Mockups n’est pas une application online, c’est une application de bureau ! Le fait qu’il y ait une version online m’a induit en erreur : je pensais que c’était la version de travail alors que ce n’est qu’une version de démonstration...

4. Options d’export

Balsamiq Mockups permet l’export de ses wireframes en 2 formats : XML et PNG. Ainsi, en XML, les données sont portables et décrites dans un format ouvert. Mais on peut choisir l’export en PNG pour utiliser ses images dans Powerpoint et y ajouter des commentaires ou des annotations par exemple.

5. Interactivité des éléments

Impossible (pour le moment) de faire des liens HTML. Pour ma part, c'est LE problème de l'application : on peut placer un élément de type "lien" sur notre wireframe mais il est géré comme un texte normal et n’est donc pas interactif. Aucune interaction n’est possible pour le moment mais cela fait partie des améliorations majeures qui sont prévues par Giacomo Guilizzoni.

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

Comme il n’y a pas encore la possibilité de créer de liens entre les pages, les wireframes réalisés sous Balsamiq Mockup sont prévus pour être exportés puis imprimés. La gestion native de l’impression est également une des améliorations à venir.

Le fait que le style graphique ressemble à du "fait main" et que l’on conçoive ses wireframes sur un carnet de croquis n’est pas anodin... Balsamiq Mockup est plutôt adapté à un usage print et peut être couplé avec un autre logiciel.

7. Coût

Balsamiq Mockups existe en plusieurs versions :

• la version web, mais ce n’est pas une version de travail, c’est simplement une version de démo car on ne peut pas enregistrer son wireframe,
• la version Desktop est, elle, totalement complète. La licence coûte $ 79 mais comme il est très généreux, Giacomo Guilizzoni peut vous envoyer un n° de licence si vous êtes blogueur ;-)
• et Balsamiq Mockups a été pensé pour pouvoir fonctionner avec Confluence, JIRA et XWiki.
• Plugin pour Confluence, de $ 300 à $ 4 000
• Plugin pour JIRA, de $ 149 à $ 799
• Plugin pour XWiki, de $ 450 à $ 6 000

Je n’ai pas testé les différents plugins mais le prix de la licence Desktop est vraiment dérisoire vu les qualités de l’application. Pour vous faire une idée, vous pouvez donc tester la version web et vous verrez que l’investissement vaut la peine.

LES AMÉLIORATIONS A VENIR

J’ai pû échanger quelques emails avec Giacomo Guilizzoni, le responsable de Balsamiq. Il m’a précisé les améliorations qui sont prévues dans sa roadmap, voici les plus importantes :

• l’upload d’images (la demande la plus importante)
• possibilité de faire des liens entre les wireframes,
• améliorer l’éditeur de texte actuel et possibilité d’utiliser d’autres typos,
• gestion native de l’impression,
• développement de l’application vers d‘autres wikis,
• éléments HTML spécifiques mobile / iPhone,
• et enfin, faire des versions localisées.

CONCLUSION

Balsamiq Mockup est une application souple, efficace, qui permet de réaliser des wireframes rapidement. La quantité importante des éléments HTML disponible est un gain de temps appréciable pour les concepteurs, et les nombreux raccourcis claviers sont un gros plus au niveau du confort d’utilisation.

Seul gros inconvénient pour ma part, l’impossibilité de faire des liens entre les pages. Mais c’est un inconvénient qui sera bientôt réglé (cf. « les améliorations à venir ») et qui n’est pas en contradiction avec une utilisation Print.

Je vous conseille d’essayer Balsamiq Mockup rien qu’une seule fois et vous verrez, vous devriez être conquis par sa facilité d’utilisation et son potentiel. Le prix d’une licence est minime, quand on s’aperçoit des qualités de cette application. Et quand on se dit que c’est une seule et même personne qui a pensé et développé tout ça, on est encore plus admiratif !

Prochain billet de la série : "Les outils online de conception de wireframes (4/5) : Protoshare."

Ce billet est le 2nd d’une série consacrée aux outils online de conception de wireframes. La seconde application online que je présente s’appelle Jumpchart.

PRÉSENTATION

Jumpchart est une application online qui a été crée en 2007 par Paste Interactive et donc la version bêta s’est achevée en octobre 2007.

Le site, qui propose plusieurs vidéos de présentation, met en avant une promesse produit alléchante :

• Helps keep website content organized
• Clarifies content approval
• Export clean CSS / XHTML
• Easy collaboration
• Simple site-wide edits
• Site map view
• Quickly mockup forms and HTML

Nous allons donc voir si Jumpchart tient toutes ses promesses. L’application existe en 4 versions : Free, Simple, Super, Deluxe. Je ne parlerai ici que de la version Free.

PRÉSENTATION DE L’INTERFACE

L’interface est très épurée et la prise en main semble très simple : 2 onglets sur la zone supérieure permettent d’ajouter des pages et des sous-pages, puis la zone est divisée en 3 parties. La zone de gauche liste les pages, celle du centre présente la page en cours, et la zone de droite convient des liens contextuels.

Au survol de la zone centrale, un bouton flottant portant le label EDIT apparaît sur la gauche et suit la souris, et après avoir cliqué sur ce bouton, le menu de droite disparaît et laisse place aux éléments HTML représentés par des hyperliens (non non, pas d’icônes mais bien des liens hypertexte ;-) et on voit du code dans la zone centrale (oui oui, du code ;-)

LES CRITÈRES D’ÉVALUATION

1. Prise en main et Utilisation

Dès l’arrivée sur le site, les quelques pages d’exemples contiennent les explications sur les possibilités de l’application, des tips & tricks… Et là, on voit que Jumpchart propose quelques bonnes fonctionnalités : prise en compte des raccourcis clavier, les éléments HTML clairement reconnaissables (les boutons ressemblent à des boutons…), on peut uploader des images ou d’autres types de fichiers… Mais malheureusement, ça se gâte très rapidement.

L’ajout et la suppression de pages est très simple, effectivement, mais la modification du contenu d’une page est une autre histoire… Ici, pas d’éléments HTML sous forme d’icones et pas de drag’n’drop : si vous voulez modifier une page, tout se fait en mode texte ! Il faut éditer la page, le code source apparaît alors, et vous devez donc taper les lignes de codes pour faire la mise en page de vos wireframes !

Et ceux qui ne connaissent pas le HTML me direz-vous ? Jumpchart a "pensé à eux" (vous allez comprendre pourquoi j’ai utilisé les guillemets ;-) et utilise une version customisée du langage "Textile Markup" (souvent utilisé pour les wikis) Jumpchart a donc remplacé un langage par un autre langage qui est censé être plus simple... C’est vrai que c’est plus simple quand la mise en page est basique et que tous les éléments se suivent les uns en-dessous des autres, à la verticale. Sauf que ce type de mise en page est plutôt rare !

Mais si comme dans 99.9% des cas, votre mise en page est un tout petit peu plus complexe (type 2 ou 3 colonnes comme cet exemple simplissime), je vous souhaite beaucoup de courage ! Insérer les éléments, les aligner, leur appliquer un style... Tout cela devient vite ingérable, car tout se fait en code. C’est une vraie usine à gaz où en plus du courage, il vous faudra apprendre ce foutu langage ! Autant faire sa maquette directement en HTML où en utilisant Google Docs (je suis sûr que la mise en page sera plus facile à réaliser)

Les contraintes liées à l’apprentissage du langage et à la complexité de la mise en page sont telles, que c’est la prise de tête assurée et que cette application devient très vite totalement inutilisable. Je ne vous parle donc même pas de créer des pages avec une résolution définie ou au pixel près...

2. Prototypage rapide

Encore une fois, pour créer des pages très basiques sans colonnes ni mise en page particulière, Jumpchart est bien adapté : on peut réaliser très rapidement ces pages sans aucune connaissance "technique". Mais le niveau de mise en page équivaut à une page faite sous Word 4...

3. Partage des fichiers / Travail collaboratif

Jumpchart propose 2 modes : le mode "lecture seule" (un utilisateur peut voir les pages et lire les commentaires mais il ne peut rien modifier) et le mode "droits d'écriture" (l’utilisateur peut accéder au projet, modifier les pages et faire des commentaires). Dans les 2 cas, l’utilisateur autorisé reçoit un email avec ses identifiants et peut lire ou modifier les wireframes.

4. Options d’export

Sur le principe, c’est intéressant car Jumpchart permet d’exporter en XHTML / CSS, et pour une page seulement ou pour l’intégralité des pages. C’est d’autant plus fort que les pages HTML sont propres, les CSS sont valides et le répertoire d’export est bien rangé (les feuilles de style et les fichiers importés sont dans des répertoires séparés)

Egalement, une URL publique permet d’accéder à la dernière version du wireframe et de naviguer au sein des pages.

5. Interactivité des éléments

Il est facile de créer des liens entre les pages et les éléments (boutons, menus déroulants...) sont de vrais éléments HTML. On peut interagir avec les éléments de formulaire, cliquer sur les checkboxes, sélectionner un item d’un menu déroulant… mais la gestion des cases n’est pas prise en compte.

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

Jumpchart est pensé pour l’écran et pas du tout pour le print. Aucune possibilité d’impression n’est possible (sauf imprimer les pages exportées directement depuis le navigateur...) Malheureusement, les dimensions des pages ne sont pas éditables et on ne peut donc pas faire de wireframes au pixel.

7. Coût

Les 4 versions de Jumpchart proposent les mêmes fonctionnalités. La différence entre les versions : plus d’espace disque, plus de pages et de projets, et plus d‘utilisateurs. Le coût, de 5 à 50 $ US par mois, est donc peu élevé mais cela ne suffit pas car je trouve le rapport qualité / prix assez mauvais car l’application souffre de très gros défauts.

CONCLUSION

Je suis très déçu par cette application d’autant plus qu’elle semblait très prometteuse. Les bons échos que j’avais lus sur certains sites me font penser que ces derniers se sont contentés de regarder la démo vidéo ou de lire le communiqué de presse, mais ils n’ont certainement pas utilisé l’application !

Jumpchart propose d’inviter ses clients à se connecter au site et à l’utiliser : "If you’re not directly inviting clients to participate in your Jumpcharts you’re missing out on the best part of the process" Franchement, je ne trouve pas cela très sérieux d’utiliser cette application au niveau professionnel, et encore moins d’inviter des clients à la découvrir.

Prochain billet de la série : "Les outils online de conception de wireframes (3/5) : utiliser Balsamiq Mockups"

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"

Juste pour le plaisir et avant d’attaquer la série de billets consacrés aux outils online de création de wireframes, voici quelques photos de prototypes papier réalisés pour Vimeo.

J’admire profondément ce travail : on visualise bien les écrans, c’est compréhensible, c’est beau et c’est vivant grâce au style de l'auteur et au trait du feutre... Bref, c’est du très beau travail, à la frontière entre architecture de l’information et graphisme.

Ici, on voit bien le passage du papier à l’écran.

Plus de photos sur Flickr

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"