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"