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.
Protoshare : l'interface 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."