Il y a plusieurs outils de prototypage qui permettent de faire ceci (Balsamiq, WireframeSketcher, Axure, …). Parmis les outils existants, ma préférence se porte sur Axure RP Pro.

Axure est un outil payant qui permet de faire des maquettes interactives.

Ses points positifs:

• La prise en main est très facile. Son interface est conviviale: Voici un aperçu de l’environnement de travail:

Il y a plusieurs éléments disponibles comme des text area, des combo box, des boutons etc… Il suffit de faire un drag and drop et de changer les couleurs, la taille comme on veut.

• Les maquettes créées sont interactives, il est donc possible de cliquer sur les boutons, d’ouvrir des combobox et demander des actions associées à ces éléments (comme dire que quand on clique sur le bouton on va à telle page etc)
• Il est possible d’ajouter des notes, des commentaires aux pages qui seront disponibles dans le navigateur
• Il est possible et facile de créer ses propres widgets et les réutiliser dans différentes maquettes
• On peut créer des pages « master » réutilisables pour toutes les pages qu’on crée pour l’application (comme un master « theme » qui contient le header, footer et le menu de l’application)
• Il existe également une version admin (ax-admin), qui permet de travailler en interactif avec le client. Il peut faire ses commentaires et voir les changements en temps réel.

Voici un exemple de prototypage interactif pour une page d’identification:

Pour l’identification nous avons un formulaire avec un champ e-mail et un champ mot de passe:

Le résultat de cette identification peut être « réussi », dans quel cas on passerait à la page suivante, ou bien « échoué » qui nous afficherait un message d’erreur.

Dans le prototype utilisé, quand on clique sur le bouton « S’identifier », on nous demande si nous voulons simuler le cas d’une identification réussie ou le cas inverse. Si l’identification réussit, on passera à la page suivante et si on choisit « Identification échouée » nous aurons l’écran suivant:

Il est donc possible, de cette façon, de simuler les fonctionnalités attendues de l’application finale.

Ses points négatifs:

• Les maquettes créées sont « trop » belles et réalistes. Donc le client, en voyant ses maquettes, peut avoir l’impression que l’application est déjà codée et qu’il ne reste plus grand chose à faire. Ce serait bien d’avoir un theme « pencil » qui nous permettrait de faire les mêmes choses mais avec un look « dessiné sur papier ».