PIA Blog / Productivity by Design

  SketchFlow est le nouvel outil de Microsoft, qui permet de concevoir des prototypes d’interface graphique. Il est intégré au logiciel Expression Blend 3 et se place comme un concurrent direct de Flash Catalyst, bien qu’il soit exclusivement réservé aux utilisateurs de Windows. Ainsi, les prototypes interactifs produits avec SketchFlow seront réutilisables dans un projet de développement.
Pour tester SketchFlow, nous avons réalisé un prototype de carnet d’adresses (recherche d’une personne, liste de personnes, détails d’une personne).

La prise en main

Pour utiliser SketchFlow, il faut installer Expression Blend 3, et si besoin est, le framework .NET (qu’il faudra chercher sur le web). De plus, dans un premier temps, nous avons installé SketchFlow sur une machine virtuelle (Parallels Desktop), mais la lenteur du logiciel nous a obligé à l’installer sur un PC.
SketchFlow est intégré à Expression Blend 3 : le principal avantage est de bénéficier des capacités de ce dernier, un des inconvénients est que l’interface est chargée et la prise en main est donc peu intuitive. A ce sujet, voici un très bon article qui indique comment adapter l’espace de travail au prototypage.

Créer les écrans du prototype

La conception d’interface avec SketchFlow commence par la création d’un diagramme représentant les futurs écrans. Cette vision macroscopique permet de se concentrer sur la navigation et les fonctionnalités importantes de l’application, avant de se plonger dans une représentation graphique de celle-ci. C’est également très pratique pour du prototypage rapide.
Dans notre cas, nous avons cinq écrans : le démarrage, la recherche, les résultats et le détail d’un résultat (femme ou homme).

Création de l’interface

Une fois les écrans définis, il convient de créer l’interface. SketchFlow permet d’importer des fichiers Illustrator ou Photoshop en conservant leur organisation en calques de ces derniers. Nous avons donc importé un fichier Illustrator comprenant les différentes parties de notre futur prototype. L’importation n’est pas tout à fait fidèle (calques vides, problème de redimensionnement, ordre des calques inverse qui doit être modifié via une option) mais elle reste utilisable dans l’ensemble. Il est aussi possible de créer l’interface à partir d’une panoplie d’outils de dessin ou des nombreux composants (bouton, liste, champ de texte, …).
Bien sûr, il est également possible de mutualiser un élément sur plusieurs écrans, en le transformant en composant.
Chaque élément possède des propriétés dont certaines s’avèrent très utiles (le curseur au survol par exemple), mais il y en a tellement qu’il est très facile de s’y perdre.

Ajouter de l’interactivité

Les interactions sous SketchFlow n’ont pas toutes le même niveau de simplicité.
Par exemple, il est très facile d’ajouter sur un bouton, une interaction qui permet de changer d’écran (simplement depuis le menu contextuel). Par contre, s’il s’agit d’une liste, la manipulation s’avère bien moins évidente, puisqu’il faudra utiliser trois panneaux différents.



La gestion des interactions est donc peu homogène : elle est très poussée mais bien trop exhaustive de façon générale. Malheureusement, il y a peu de tutoriels sur le web pour en comprendre les subtilités (voir les tutoriels vidéo de Microsoft ou encore Electricbeach).

Exporter le prototype

Selon le type de projet SketchFlow choisi au démarrage, le prototype sera exporté à destination du web (page Silverlight) ou bien de Windows (application WPF). Même si ces deux types ne sont pas au même format, le résultat sera par contre identique.
En effet, le prototype est embarqué dans un lecteur. Ce dernier affiche une barre de navigation ainsi que le diagramme des écrans. Autre fonctionnalité très appréciée, la possibilité d’ajouter des commentaires (textes et dessins) puis de les exporter dans SketchFlow.

Notre prototype final

Bilan

En dépit d’une prise en main peu aisée, SketchFlow est un outil très complet. Trop complet ? Cette première version aurait pu être plus simple, et mieux pensée pour un public de designers.
Cependant elle a tout de même des fonctionnalités très pratiques comme la représentation des écrans en diagramme et un lecteur pour le prototype, dont ses concurrents auraient tort de ne pas s’inspirer.

Liens

• SketchFlow
• Les tutoriels vidéo de Microsoft
• Un mini-tutorial plus concis
• Electricbeach