Ce billet est le troisième de la série dont l’objet est la création de wireframes. Pour ceux qui ont raté les épisodes précédents, j’avais parlé des avantages / inconvénients de PowerPoint et Visio à travers 2 billets :

Aujourd’hui, je vais vous présenter Axure RP Pro, qui permet de créer des wireframes, des diagrammes de flux, des prototypes... et qui facilite énormément la rédaction des spécifications (oui oui, vous avez bien lu… ;-)

L’interface n’est pas très complexe et sa prise en main est très facile si on connaît un peu Visio.

BEAUCOUP DE PETITS PLUS...

Axure possède nativement les bibliothèques d’éléments HTML (bouton, éléments de formulaire, tableaux, image...) Ces éléments sont évidemment éditables et paramétrables. Là encore, plus de bidouille : on drag’n’drop, on édite, on met en place des liens ou des comportements.

On peut utiliser des "masters" pour tous les éléments persistants (navigation, boutons récurrents…) Les propriétés attribuées aux masters sont répercutés sur toutes les pages sur lesquelles le master est placé. Là encore, on gagne un temps précieux quand il faut rajouter une sous-rubrique ou déplacer un menu qui est repris sur 15 pages...

La conception de wireframes est avant tout conçue pour une utilisation sur écran :

  • le document n’a pas de taille prédéfinie : ainsi, lorsqu’on doit faire la home d’un gros portail (donc avec beaucoup de contenu), on n’est pas limité par la taille du document. Si on a besoin de 1200 pixels de hauteur, la page va s’adapter au contenu que l’on place et le scroll se fera automatiquement lors de l’export de la page en HTML
  • et l’unité de mesure est le pixel, pas le centimètre, ce qui permet de créer ses éléments à l’échelle 1 et de les positionner au pixel près.

Lors des exports, ce sont de "vrais" éléments HTML qui sont utilisés : des menus déroulants, des boutons, des cases à cocher... Cela facilite encore plus la compréhension et la lisibilité de la page, car les éléments sont reconnaissables de suite.

Lorsqu’on crée des pages, elles s’ajoutent automatiquement au site map : on peut les positionner les unes par rapport aux autres et créer ainsi des groupes de pages et des niveaux de profondeur pour avoir son arborescence qui est générée en parallèle.

ET DEUX GROS AVANTAGES !

1- La gestion des interactions

Axure est très souple avec les interactions et permet de faire pas mal de choses :

  • On peut réellement utiliser les éléments de formulaire (cocher les cases, afficher le contenu des menus déroulants...) ce qui permet de se rapprocher énormément de l’utilisation finale des pages.
  • Il gère aussi les différents cas de figure (ex : cas n°1, je fais telle action, cas n°2, je fais telle autre action…)
  • Axure possède un gestionnaire d’évènements pour la souris : on peut ainsi attribuer des actions sur le clic, le roll over, le roll out…
  • L’affichage des popup est entièrement paramétrable : taille, position, attributs... (Axure affiche une vraie popup, pas l’image d’une popup)

Et tout ça, sans aucune ligne de code s’il vous plait !

2- La rédaction (d'une bonne partie) des specs

Cette fenêtre (cf. screenshot ci-dessous) permet de renseigner toutes les informations qui sont nécessaires à la rédaction (laborieuse) des spécifications. Et quand on clique sur le bouton "Générate Specification", tout est édité sous la forme d’un document Word qui contient :

  • l’arborescence du site
  • un screenshot de chaque page avec les annotations correspondantes
  • les différents états de chaque élément (les roll overs...)
  • tous les détails concernant ces éléments (nom, type, actions, paramètres, commentaires...) sont renseignés dans un tableau
  • et si l’on a crée des workflow, il les exporte aussi évidemment ;-)

Enfin, on peut même modifier les informations qui sont proposées par défaut et mettre en place les informations dont on a réellement besoin pour ses propres specs (si je n’ai pas besoin de l’information "Risk", je la supprime et la remplace par l’information "Size" par exemple). Voici un exemple des specs générés par Axure (format word)

COTÉ INCONVÉNIENTS...?

Franchement, je dois me forcer pour en trouver. Je pourrais dire qu’il n’est pas très connu comparativement à Powerpoint ou Visio (mais est-ce un inconvénient après tout ?)

Le seul réel inconvénient que je vois pour le moment, c’est lorsque l’on exporte les maquettes en HTML : pour chaque page, Axure génère 1 page HTML + 1 répertoire correspondant. Ce qui fait qu’on se retrouve rapidement avec beaucoup de fichiers pour seulement une dizaine de page.

ET CA RESSEMBLE A QUOI UN WIREFRAME RÉALISÉ AVEC AXURE ?

Voici un wireframe de test dont les points intéressants sont :

  • les roll over sur le menu
  • les 2 cas placés sur le bouton submit de la home page (inscription à la newsletter)
  • le menu déroulant de la page "Articles"

Voici un fichier ZIP qui comprend : le fichier source d’Axure, les exports HTMl et les specs au format Word.

CONCLUSION

Axure est relativement récent (2002) et ne fait pas encore le poids face à des géants comme Powerpoint ou Visio. Cependant, je trouve qu'il est beaucoup plus puissant concernant les wireframes. La rédaction des specs et la bonne gestion des interactions sont deux gros avantages qui font que ce logiciel est, selon moi, un "incontournable".