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"