Dans ma 1ère série de billets concernant la création de wireframes, j’avais présenté différents outils : Powerpoint, Visio (et un article complémentaire), Axure RP Pro, Acrobat, la présentation du workshop que j'avais animé avec les *Designers Interactifs* ainsi que des stencils pour Omnigraffle.

Et Omnigraffle, justement, je n’avais pas pu le tester car je ne travaille pas sous Mac. Alexis AMET m’a contacté via mon blog et s’est proposé d’écrire un article sur Omnigraffle car il travaille, lui, sous Mac. Pour compléter la série (et parce que le feeling est bien passé ;-) j’ai accepté sa proposition.

Voici donc son billet.

Tout comme il existe des designers interactifs sous Mac, il existe des logiciels 100% Mac. Omnigraffle de l’éditeur américain OMNI Groupe est de ceux là. A y regarder de plus près, Omnigraffle occupe en fait une place laissée vacante (pour combien de temps ?), par Microsoft. Car oui, la firme de Richmond n’est pas omniprésente sur tous les ordinateurs !

Tout ça pour vous dire que Omnigraffle est au Mac ce qu’est Visio au PC. Un outil très complet permettant de faire pas mal de choses dont de jolis dessins qui feront toujours leur petit effet en réunion entre deux Powerpoint de 150 slides.

POUR ALLER A L’ESSENTIEL

Disons le tout de site, Omni (j’utilise le diminutif pour faire plus sympa) est nettement plus convivial que Visio.

Pour résumer et vous éviter la lecture intégrale de mon billet :

• Interface utilisateur très complète et (assez) facile à prendre en main,
• Possibilités étendues de dessin avec du vectoriel,
• Gestion de pages linéaire,
• Gestion de calques,
• Supporte l’interactivité (liens entre les pages, URL…)
• Communauté de passionnés mettant à disposition des Patrons (Formes sous Visio) parfois hyperréalistes,
• Capacité à importer et exporter en format Visio (version XML pour les versions antérieurs à 5.0),
• Prix de la licence très raisonnable (199,95 US $ pour la version Pro 5.1).

Par contre :

• Pas d’exportation en HTML structurée,
• Gestion un peu complexe du multi-format de page dans un document lors des impressions / exportations,
• Pas de version PC… vous allez devoir réclamer des Mac Intel !

DÉTAILLONS UN PEU L’EXPÉRIENCE OMNI

Avant toute chose, je dois confesser ici que je suis un néo-utilisateur de Mac. Et qu’en entreprise / agence, j’utilise des PC. Je risque donc de m’émerveiller de fonctionnalités qui semblent aller de soi à tout Macophile.

La version testée est une Ominigraffle Professionnal 4.2.3 sous Mac OS 10.4 ; la dernière version, la 5.1, nécessite Mac OS 10.5. Une fois ouvert, Omni, comme de nombreux logiciels de bureautique et de graphisme sous Mac, propose une interface avec des palettes d’outils flottantes.

L’interface Omnigraffle 4.2

Autant vous le dire tout de suite, travailler avec un Macbook 13" n’est pas très facile. On est vite débordé par les palettes et les "inspecteurs" sans parler des "patrons"... Je résous ce problème de surpopulation en utilisant un deuxième écran (en attendant de passer à un 15" pour le travail nomade). Mais on rencontre le même genre de problème avec la suite Office et Photoshop CS3 par exemple.

Les palettes flottantes sont pratiques car elles permettent d’avoir à sa disposition de nombreuses fonctionnalités qui sont souvent noyées dans les menus / barres sous Visio. Alors ne nous plaignons pas trop...

LES PATRONS, LES CANEVAS ET LES INSPECTEURS

Tout comme Visio, Omni offre la possibilité de créer des formes. Soit à partir de formes standards rectangle, ellipse, etc. ou par cliqué-déposé à partir de "patrons" (stencils en VO)

La création d’arborescence, "structures", est aussi possible et est même beaucoup plus aboutie. On y trouve la possibilité d’administrer les relations père-fils entre éléments. Et les liens magnétiques entre les éléments sont capables de gérer pas mal de manipulations. Il n’y pas par contre de relation possible dans un document entre une arborescence et des pages (à par des liens dynamiques que vous auriez insérés). C’est un outil généraliste, il est difficile de lui demander de tout savoir faire non ?

Bon, revenons à nos outils... Les patrons sont donc des formes prédéfinies. Vous pouvez en récupérer de nouvelles, souvent très sophistiquées, grâce à une communauté active. Le site plus complet est Graffletoppia. Vous y trouverez des gabarits d’écrans, pour Iphone, pour Facebook, pour des fiches de personas... Ces patrons regroupent alors des formes modifiables (en les dégroupant pour la plupart) ou de vraies copies d’éléments (comme pour le Iphone)

Exemple de patron récupéré sur Graffletopia

Le mieux étant souvent l’ennemi du bien, à vouloir être hyperréalistes, ces gabarits peuvent nous éloigner de l’essentiel du prototypage (wireframing). Heureusement, il existe des équivalents à l’excellent "GUUI Prototyping Tool" créé par Henrik OLSEN pour Visio. Ainsi on peut aller à l’essentiel avec des formes minimalistes. Il est bien entendu possible de créer son propre patron en agrégeant les formes qui ont votre préférence ou en créant les vôtres. Tout ceci doit être destiné à vous faire gagner du temps et pas l’inverse.

L’écran principal d’un document Omni propose une barre d’outil détachable en haut et une barre fixe regroupant des fonctionnalités liées au document.

Signalons dans la barre flottante la présence d’un tampon, permettant de copier des formes, et l’outil plume, pour réaliser des tracés vectoriels (courbes de Béziers possible dans la version 5.1)

L’icône "utilitaires" à gauche permet d’afficher les contenus du document. On y découvre alors les deux entités d’un document : la structure et le canevas.

Le premier sert à créer des arborescences, soit des éléments reliés entre eux. Comme un plan de site. Le deuxième permet de créer des pages. Chaque page est constitué d’un canevas (la feuille blanche). On peut ajouter plusieurs calques par canevas et appliquer un modèle, soit un calque générique qui sert d’arrière-plan.

En bas du panneau on dispose d’outils permettant d’administrer chaque élément. Par exemple de gérer les relations hiérarchiques entre éléments d’une arborescence ou les liens entre un canevas et un modèle. On applique un modèle à un canevas en réalisant un cliquer-déposer, tout simplement.

Utilitaires : modèles, canevas et structures

De l’autre côté de la barre fixe, on trouve l’appel aux patrons et aux inspecteurs.

Les inspecteurs sont tous les outils permettant de modifier une forme : couleurs, contours, textes, alignement, liens... On y trouve quelques fonctionnalités que je pense être spécifiques Omni. Par exemple, l’inspecteur de style, qui permet de voir tous les styles utilisés sur une page et permet de réaliser leur modification (qui s’appliquera à toutes les formes concernées) ou par cliquer-déposer l’application à une forme. C’est plus rapide que la brosse de style (qui existe aussi)

Il est possible de créer des liens dans le document, entre différents canevas ou vers des url ou applescript. De même, l’insertion de notes masquées est très facile (voir une démo vidéo pour la version 5.1)

PARTAGER LE DOCUMENT

Ca y est vous avez un bô document sexy qui fait envie ;-) Vous n’avez qu’une hâte, le faire savoir à la face du monde. A commencer par vos collègues ou votre maman. Hélas, trois fois hélas, ils ont le mauvais goût d’être sur PC...

Que faire ? Je vais vous le dire moi, je vais vous le dire : exporter votre document .graffle en PDF, JPEG, PNG, EPS, Visio XML ou image HTML... Excusez du peu...

La version 5.1 améliore la compatibilité avec Visio (plus besoin de passer par une version XML). Mais ne semble toujours pas proposer une exportation HTML complète comme Visio. Pour compenser il est proposé un mode "présentation".

CONCLUSION

Omnigraffle est un excellent outil de prototypage pour Mac. A vrai dire il n’a guère de concurrent sur cette plate-forme… Loin de se reposer sur son monopole, Omni Group améliore régulièrement son logiciel. Il est vrai que l’apparition des Mac Intel, permettant d’installer les deux OS, doit leur donner de bonnes raisons pour cela.

Quoiqu’il en soit, cet outil est très agréable à l’usage et performant. Il permet de réaliser des wireframes de manière plus efficace que sous Visio grâce aux patrons et aux inspecteurs qui permettent de travailler plus rapidement. Sans oublier les calques et les différents outils à disposition.

En terme de partage, je regrette l’absence d’une vraie exportation HTML avec arborescence de page comme Visio sait le faire. Car la réalisation de prototype "interactifs" est un vrai plus pour la présentation au client.

Mais en attendant une version Mac d’AXURE RP, Omnigraffle est l’outil qu’il me faut.

Merci à Alexis pour sa contribution sur SuperFiction.net ! Il est d'ailleurs disponible en ce moment, donc si vous recherchez un Architecte d'Information, n'hésitez pas à le contacter.

Et si les wireframes vous intéressent, je vous conseille de lire aussi :

• une série de billets sur les outils online de conception de wireframes,
• les articles qui se trouvent dans la rubrique Conception – Outils.