Ce billet est le second d’une série de 3 dont l’objet est la création de wireframes. Après vous avoir présenté mon point de vue sur Microsoft Powerpoint, je vous propose aujourd’hui de parler de Microsoft Visio.

Avant de commencer

Tout d’abord, il est important de noter que les outils pour le web qui sont disponibles par défaut dans Visio ne sont pas complets : on peut faire des process, une arbo... mais pas de wireframe. Je vous propose donc d’installer 2 fichiers :

1/ Le "Web Prototyping Tool" (ZIP) proposé par GUUI (l'installation est expliquée ici)

Le Web Prototyping Tool de GUUI

2/ Le "Wireframe Stencil 2003" (ZIP - 1.3 Mo) (dont je ne trouve plus la source, si quelqu’un la connaît...)

Wireframe Stencil 2003

Chaque composant a ses avantages et ses inconvénients (voir ce rapide comparatif), mais avec ça, vous avez tout ce qu’il faut pour faire des wireframes. On peut donc commencer ;-)

Les avantages de Visio

Sa simplicité d'utilisation : après avoir chargé les composants installés, il suffit de prendre les éléments HTML maintenant disponibles et de les faire glisser sur la scène pour composer sa page.

Tout (ou presque) est présent et paramétrable : bouton, image, liens HTML, faux texte, boutons radio, scrollbars, champs de saisie... Un double clic permet de les éditer (pour modifier l’intitulé d’un bouton, le contenu d’un menu déroulant...) Plus besoin de "bidouiller" pour modifier la taille d’un menu déroulant ou un élément de formulaire, c’est donc ultra simple et beaucoup plus souple!

En plus de faire des liens HTML, on peut aussi mettre en place différents "use cases" pour simuler différents cas de figure. Exemple avec la validation d'un formulaire :

  • cas n°1 : un champ n'est pas renseigné (on affiche une alerte JS)
  • cas n°2 : tout est bien renseigné (on affiche donc la page de validation du formulaire)
  • cas n°3 : il y a une erreur dans la BDD (on affiche donc une page d’erreur)

Une petite tooltip apparait lorsqu'on clique sur le bouton "ok" et on peut ainsi tester toutes les possibilités (on peut mettre le nombre de scénarios que l'on souhaite.)

On peut définir le placement et les options d’éléments répétitifs grâce aux arrière-plans (très utile pour mettre en place la navigation persistante par exemple) On peut ainsi mettre en place son menu de navigation avec 10 liens et l’appliquer à toutes les pages de son site. Si un lien change, il suffit de le changer uniquement sur l’élément d’arrière plan, et la modification sera impactée sur toutes les autres pages contenant le menu.

On peut exporter ses maquettes sous forme de page HTML, ce qui permet de pouvoir les lire et les tester partout (on peut aussi naviguer directement dans le fichier Visio sans être obligé de faire un export). Par défaut, on a l’arborescence du site sur la gauche, ce qui permet de naviguer même si l’on a oublié certains liens dans les pages. On peut également choisir la taille de la fenêtre de sortie et faire ses wireframes à l’échelle 1 pour avoir un wireframe plus fidèle. Enfin, les boutons "Suivant / Précédent" du navigateur fonctionnent.

Les inconvénients de Visio

Malheureusement, Visio n’est pas parfait et souffre de petits inconvénients. Tout d‘abord, on ne peut pas scroller dans les exports HTML. Pour faire comprendre qu’il y a du contenu en bas de page, il faut utiliser l’élément "Page split", placer des scrollbars et mettre un lien sur ces scrollbars...

On ne peut pas interagir avec les éléments de formulaire : on ne peut pas cocher les cases ni les boutons radio, et on ne peut pas voir le contenu d’un menu déroulant par exemple.

Il n'y a pas de fonction "coller en place". Ca à l’air d’être un détail, mais quand on doit créer des pages presque identiques, il faut recaler tous les éléments à la main et c’est très très pénible...

Enfin, la pagination à l’intérieur de Visio est un enfer : on ne peut pas scroller et passer de page en page (comme dans avec Powerpoint), on doit cliquer sur des onglets. Et comme la place est limitée, on ne peut pas en afficher beaucoup à la fois...

Et ça ressemble à quoi un wireframe réalisé avec Visio ?

Voici un wireframe de test réalisé avec Visio dont les points intéressants sont :

  • l’inscription à la newsletter sur la "Home page" et la page "About", avec 2 cas possibles à chaque fois (fonctionne seulement sur IE)
  • la page "Articles" avec une simulation de scroll

Et voici le fichier source pour ceux que ça intéresse.

Conclusion

Visio permet de réaliser des documents qui sont utilisables dans beaucoup d’autres métiers que ceux du web (le bâtiment, le génie logiciel, la mécanique...) Ses possibilités sont donc immenses, mais avec les 2 composants cités en début d’article, je pense que vous avez tout ce qu’il faut pour faire des wireframes impeccables. Leur réalisation est selon moi beaucoup plus simple et souple qu’avec Powerpoint et elle offre des possibilités supérieures.

Prochain billet : "Création de wireframes (article 3/3) : utiliser Axure".

UPDATE 26/03 :
j'avais trouvé le ZIP du "Wireframe Stencil 2003" sur le blog de Garret Dimon.