3 février 2009

Iplotz, nouvel outil de wireframe

Que le monde est petit ! Hier soir, après avoir trouvé le lien sur un billet de mozilla labs, j’ai commencé a tester rapidement le nouvel outil de wireframe iplotz en prenant des notes dans le but de rédiger cet article, ce matin en parcourant rapidement mes flux RSS j’ai vu que Pierre avait rédigé un article sur les wireframe et que son premier commentaire était justement rédigé par iplotz (qui faisait sa pub ;-) ). Je prend donc (humblement ;-) ) la suite de Pierre pour rédiger un petit billet sur mes premières impressions concernant Iplotz.

Parmi tous les outils de wireframe disponibles, certains proposent certes des possibilités de travail collaboratif, mais aucun ne propose véritablement de fonction permettant à vos clients de faire des retours. C’est vraiment regrettable de ne pas disposer d’un outil permettant aux clients d’annoter simplement différents points de l’interface en organisant par exemple une réunion de travail interne, plutôt que de nous dire par mail ou par téléphone « Le gros rectangle sous le logo ne devrait-il pas être à droite ? ». C’est, au premier abord ce qui a vraiment attiré mon attention sur iplotz. Il dispose en effet de 3 fonctions : “Manage” pour gérer un projet, “Wireframe” pour réaliser les zoning (seul ou a plusieurs)  et “Preview” qui permet d’accéder au wireframe en mode lecture uniquement et qui ouvre une fonction d’ajout de commentaires. Ainsi après avoir réalisé votre maquette, vous pouvez simplement inviter votre client à venir l’annoter de ses remarques.

Je vais passer très rapidement sur la fonction “Manage”.  Elle me paraît superflue, si parmi tous les outils du marché vous n’avez toujours pas adopté une solution de gestion des taches, celle-ci ne semble pas apporter de véritables nouveautés et n’étant pas interfaçable avec des applications externes, il faudrait ressaisir les informations dans vos agendas et vos outils de saisis des temps, ce qui en plus d’être chronophage est une source d’erreur en plus.

Voyons maintenant le cœur du système, la fonction Wireframe. Au premier abord l’interface est claire, on situe rapidement les différents outils, les éléments graphiques disponibles par défaut on un traité graphique « dessin à la main » dans le style de balsamiq (moins grossier même). L’interface (en flash, une version AIR est annoncée) se charge rapidement, sans effet graphique superflu.  En parcourant l’interface du regard, différents points très positifs ont attirés mon attention :

  • Il est multipage, vous pouvez donc dans un même projet réaliser plusieurs wireframe (et même les lier entre eux grâce à l’ajout de liens sur vos éléments).
  • Il propose une gestion des Masters, ce qui permet de placer vos éléments récurrents (la navigation par exemple) sur un modèle et de toujours utiliser ce modèle comme point de départ pour vos différentes pages. Si vous modifier votre master, toutes les pages seront mise à jour automatiquement.
  • Il dispose d’un mode plein écran confortable (celui de la version en ligne de balsamiq ne fonctionne pas sur mon Firefox mac)
  • Enfin on trouve une bibliothèque d’élément graphique qui semble complète.

Passons à l’utilisation… aie… pas aussi pratique qu’on aurait pu le penser. L’une des forces de Balsamiq c’est d’être très rapide à prendre en main. L’accès aux éléments de la bibliothèque est très intuitif grâce à une présentation horizontale qui permet de présenter des visuels assez grands de chaque élément, du coup on se focalise plus sur la forme que sur le libellé et on trouve très facilement ce qu’on recherche. Comme si ça ne suffisait pas, on peut aussi rechercher un élément par mot clés, ce qui facilite encore la recherche. Sur Iplotz, l’accès aux objets de la bibliothèque se fait dans un menu vertical et les picto sont trop petits (et pas très représentatif du résultat final), il faut donc se fier aux libellés (qui ne sont pas toujours très clair) on passe donc beaucoup de temps a monter et a descendre en espérant trouver son bonheur, et je me suis même retrouver a intégrer plusieurs fois par erreur le même composant dans la page avant de réaliser que c’était celui que je venais de supprimer.

Quand on réussi finalement a placer les différents éléments de l’interface dans la page, l’absence de guides complique sérieusement l’alignement. Il y’a bien une grille en fond de page qui permet d’aligner (approximativement) les composants, mais celle-ci était masquée par le fond blanc de la fenêtre du navigateur que j’avais placé en premier.

Enfin après avoir placé un tout un tas de composants sur ma page (pour tester les différents boutons) je me suis retrouvé bloqué avec l’impossibilité de supprimer ce que je venais de créer, j’arrivais bien a sélectionner mes composants, mais impossible de supprimer, à force de cliquer partout j’ai fini par réussir mais je ne saurais dire comment.

Bref, un outil plein d’idées intéressantes, mais de sérieuses lacunes en terme d’ergonomie, dont certaines aurait pu être corrigées par la simple présence d’une page d’aide… j’ai tenté d’utiliser la fonction « feedback » pour informer les concepteurs de certaines de mes remarques mais j’ai eu droit à un beau warning PHP… so far pour les retours utilisateurs ;-)

Inutile de préciser que cette petite expérience m’a refroidi et que je n’ai même pas pris la peine de tester la troisième fonction : La preview qui m’intéressait tant.  Conclusion, je me tiendrais sans doute informé des évolutions d’Iplotz, mais pour l’instant je m’en tiens à Balsamiq, Omnigraffe et Illutrator bien plus confortable à utiliser.

3 commentaires »

  • mark vernon | 4 février 2009 @ 9:10

    Some comments on your review - the Manage area will be more developed in future to manage time and costs associated with a project, for example when using designers and programmers.

    For components, we may have a mouseover that will show a bigger version of that component to help, although after using a little time, you know which tool to use.

    Guidelines seem to slow balsamiq down, indeed after leaving the application open for some time it slows to a crawl, so we are still investigating if guidelines are a problem with flex. We will add these if no problems are found.

    Shame you did not check the preview function - that is where you would navigate from page to page depending on where you placed your hotspots on the wireframe. Any object can link to another page or website, and any part of an image can be a hotspot as well.

    We had a couple of bugs regarding delete, copy and paste - we have fixed these so should be fine now.

    Finally, today we are adding a URL preview that be emailed to anyone so that users do not have to login, they can just navigate a project. We are also adding the internationalization module so that the application will be in French within a couple of days

    best regards
    mark vernon
    iplotz.com

  • Pierre Rigal | 4 février 2009 @ 10:49

    Effectivement le monde est petit :) C’est Morgan qui m’avait parlé de Iplotz mais impossible de m’en souvenir le jour de la rédaction de mon article.

    Dommage que Iplotz ne soit pas encore abouti, la fonction preview aurait pu être un élément différenciateur important face à Balsamiq. Côté retour utilisateur, Balsamiq utilise un service à la FeedBack2 : GetSatisfaction. Au moins ça fonctionne bien ! (http://getsatisfaction.com/balsamiq/products/balsamiq_balsamiq_mockups)

  • Wissal | 24 juin 2009 @ 11:48

    Je découvre iPlotz grace à ton article!
    J’ai pris le temps de regarder un petit peu et je suis plutôt d’accord avec ce que tu penses.
    A part le rendu que je trouve plus ou moins joli (et c’est surement dû à Flash/Flex/Air), il n’y a pas grand chose qui a attiré mon attention! J’avoue que j’ai été un peu déçue :s
    Je me permets cependant de te souffler le nom d’Axure, qui est un outil de wireframe/zoning que je trouve assez facile à utiliser et qui dispose d’une fonctionnalité d’export HTML assez pratique!

Flux RSS des commentaires de cet article. URL de rétrolien

Laisser un commentaire