PIA Blog / Productivity by Design

  Adobe Flash Catalyst est un nouvel outil destiné à la conception d’interfaces. Il se démarque clairement de ses concurrents par son orientation : faire le lien entre les logiciels de conception d’interfaces (comme Photoshop ou Illustrator) et les logiciels de développement de ces interfaces (Flash Builder).
Malgré une date de sortie lointaine, premier semestre 2010, Adobe propose une version bêta de son logiciel ; probablement pour ne pas se laisser déborber par Microsoft et la sortie de SketchFlow.

Jusqu’alors, nous utilisions chez PIA principalement Omnigraffle pour la réalisation de nos prototypes lo-fi et le tandem Photoshop / Illustrator pour la création des prototypes hi-fi.
Nous suivons donc depuis plusieurs mois avec beaucoup d’intérêt Flash Catalyst qui promet de rendre plus industrielle la production de prototypes.

Ce premier article sur la conception d’interfaces avec Flash Catalyst est suivi d’un second billet consacré à l’utilisation de Catalyst pour faciliter le processus de collaboration entre designer et développeur.
Pour parvenir à un bilan des capacités de Catalyst, nous l’avons testé les différents aspects de l’élaboration d’un prototype :

1. Création d’un projet Catalyst
2. Conception d’interface
3. Ajout d’intéractivité
4. Amélioration du look & feel avec Illustrator

1. Création d’un projet Catalyst

L’interface de Catalyst est assez proche de celle d’Illustrator : une zone de travail, une gestion par calques, des outils de dessin, des symboles à glisser-déposer. La prise en main est donc simple (voir la présentation vidéo de Thibault Imbert), quoique moins intuitive que celle de Balsamiq.

L’interface de Flash Catalyst

Pour démarrer la conception d’une interface, Catalyst peut importer un fichier Photoshop ou Illustrator (un storyboard par exemple) tout en conservant la structure en calques de ce dernier. Cependant, démarrer avec un projet vierge semble la solution la plus efficace. En effet, Catalyst dispose d’outils simples et polyvalents qui permettent de se concentrer sur l’interface.
En outre, l’apparence pourra être modifiée en détail ultérieurement, via Illustrator.

Le panneau des calques

2. Conception d’interface

Ainsi, l’interface peut être dessinée ou bien créée à partir des composants de base de Catalyst. Mais contrairement à ses concurrents comme Omnigraffle, Catalyst dispose de peu de composants. Heureusement il a été annoncé que la version finale offrira un plus large panel de composants.
De plus, vous trouverez beaucoup de composants supplémentaires dans ce billet

Les outils de dessin et les composants de base

Autre regret, il n’est pas possible de donner une dimension relative (en pourcentage comme dans la vue « design » de Flash Builder). Par exemple, le prototype ne peut pas s’ajuster à la taille du navigateur. Là encore, vous trouverez ici un billet pour y remédier.

Exemple: les propriétés d’un rectangle

Par contre, Catalyst permet de créer ses propres composants d’interface, qui seront accessibles depuis la librairie du projet. De même que les images importées (les principaux formats vectoriels et bitmap étant supportés).
Cette librairie peut être exportée et utilisée dans un autre projet Catalyst, et donc permettre un travail collaboratif (mais loin du niveau de ProtoShare).

La librairie des composants et ressources

Mais la plus-value de Catalyst se trouve dans sa capacité à donner vie à de simples dessins : par exemple rendre fonctionnel un ascenseur. Là encore, le choix des comportements est pour l’instant très restreint (bouton, liste, champ de texte ou ascenseur).

Création d’une visionneuse « from scratch »


Enfin, Catalyst repose sur le principe des états : l’application et les composant comportent plusieurs états, où chaque élément peut être placé et affiché différemment. Un état représente généralement un écran de l’application ou bien une apparence particulière (quand un bouton est enfoncé par exemple).
Dommage qu’il n’y ait aucun organigramme pour représenter les liens entre ces états et aider à détecter d’éventuelles incohérences dans la navigation, comme le fait si bien Adode Encore DVD.

Les 3 états/écrans de mon application : authentification / rôle DRH / rôle évaluateur

3. Ajout d’interactivité

Pour devenir interactif, le prototype utilisera ces mêmes états. En effet, chaque composant peut interagir suite à un évènement (clic, survol, changement de valeur ou utilisation du clavier) en changeant son propre état ou celui d’un de ses composants (impossible d’accéder à un composant parent, ce qui est assez problématique). Il est même possible d’ajouter une condition sur l’état du composant. Cependant, il manque certains événements comme le glisser-déposer ou le double-clic.

Un exemple d’interaction avec une condition

Il existe d’autres types interactions : désactivation d’un composant, changement de la transparence ou du texte, déplacement, redimensionnement, rotation et ajout d’un tooltip.
Mais au final, les possibilités se révèlent limitées en comparaison d’Axure ou FlairBuilder : par exemple, dans une liste, il n’est pas possible d’appliquer une interaction différente selon la ligne cliquée.

Modification de la transparence au survol

A tout changement d’état définit une transition qui peut être animée via le panneau Timelines en jouant avec les rotations, redimensionnements, mouvements et fondus. Catalyst est même pourvu d’un bouton « smooth transition », qui créera automatiquement une animation entre deux états.

Un exemple de transition avec beaucoup d’animation !

4. Amélioration du look & feel avec Illustrator

Tout élément graphique peut être édité avec Illustrator. Alterner entre Catalyst et Illustrator peut paraître fastidieux aux premiers abords, mais cela permet de faire évoluer progressivement un prototype lo-fi en un prototype hi-fi.

Edition de la visionneuse avec Illustrator

Voici deux versions successives d’un prototype créé avec Catalyst. Ce dernier n’est exportable qu’au format Flash (SWF) : il est regretable qu’il n’y ait ni un export PDF pour l’impression, ni la possibilité de laisser des commentaires sur l’interface comme avec JustInMind.

 Première version du prototype

 Seconde version du prototype

Bilan & liens

Malgré son statut de « bêta », Catalyst offre déjà des fonctionnalités originales et de belles perspectives : rendu très proche de l’interface finale, composants « sur-mesure »,  modification de l’apparence très poussée avec Illustrator.

Cependant, comme Catalyst s’insère dans la suite des produits Adobe, il est très dépendant de son grand frère Illustrator. Ce qui le rend moins accessible que la plupart que ses concurrents « tout-intégrés ». De plus, il reste des défauts majeurs à corriger, comme le manque cruel de composants d’interfaces ainsi que des interactions plus sophistiquées.

Mais c’est exactement l’utilité d’une version « bêta » : recueillir nos attentes. Et les employés d’Adobe sont très réactifs sur le forum dédié. Ce qui incite à penser que la prochaine « bêta » de Catalyst devrait être un grand pas dans la bonne direction.

Lire la seconde partie de l’article, qui porte sur la collaboration designer/développeur.

Liens

• Catalyst
• le forum de Catalyst
• Flash Builder
• Tutoriaux en français
• Tutoriaux en anglais
• Blog / SuperFiction
• Blog / Wireframe Magazine