Note de la rédaction Le blog personnel de Pierre-Emmanuel Muller (PeM)

Wireframe : I’m Gonna Live Forever

(le titre est un hommage à Pierre Fontaine, auteur de "Frame : I'm Gonna Live Forever".)

N'ayons pas honte de nos mauvais jeux de mots

Quand on crée des sites web et qu'on essaie de bien les créer, on parle avec ses clients. Ce qui n'est pas très compliqué. Ce qui est plus compliqué c'est de se comprendre. Surtout quand on en vient à parler de la récurrence des événements dans un agenda ou de la mise en place d'un réseau social. Reste aussi à savoir de quoi de quoi il faut parler. Quel est le besoin de discuter du fonctionnement de modules backend quand ce qui importe le plus souvent reste le comportement frontend. Le périmètre fonctionnel d'un module de gestion des actualités reste, généralement, le même.

De l'intérêt des outils de wireframing (désolé amis français, même le très savant Signet n'a pas de traduction). Le wireframing consiste à réaliser un schéma définissant les zones d'un site Web, ou d'une page Web (merci Wikipedia). Dans mon cas, je l'utilise surtout pour deux choses : les pages d'accueil et les pages d'applications (détail d'une actualité, page de résultat d'un moteur de recherche, etc). Le wireframing comporte de nombreux avantages :

• Il peut être compris ou réalisé par un non technicien,

• Il est plus facile à manipuler ou corriger qu'une maquette graphique,

• Il permet de se concentrer sur le fonctionnement, sur la place donnée à chaque élément avant de discuter de l'aspect graphique,

Et quelques désavantages :

• On travaille souvent avec des librairies, modules ou gabarits qui reproduisent des formes existantes.

• Considérer qu'il suffit de voir un module pour que son fonctionnement coule de source.

Wireframing d'une page Facebook

Plus largement, dans le processus de création d'un site web, le wireframing ne représente qu'une étape et ne répondra pas à toutes les questions qui se posent en matière d'ergonomie ou de développement. On ne décrit pas l'interaction entre un annuaire web, un organigramme dynamique en Flash, un SIRH et un PABX en wireframes. Le format d'un fichier CSV d'import ne sera pas non plus décrit dans un fichier

Lorsque nous avons recherché, pour In Cité Solution, un outil de wireframing nous souhaitions qu'il réponde aux besoins suivants :

• Clairement faire comprendre que le dessin présenté ne représente pas l'aspect définitif de l'application, y compris à des novices.

• Facilité et rapidité de prise en main.

• Etre limité en modèles, modules et interactions pour ne pas en faire un Dreamweaver bis.

Nous utilisions Visio ou MS PowerPoint pour nos zonings mais ils n'étaient pas satisfaisants. Après avoir testé plusieurs logiciels (grâce aux tests très intéressants présentés sur Superfiction), nous nous sommes arrêtés sur Balsamiq Mockups et ce pour différentes raisons.

• Il fonctionne sur plusieurs plates-formes (développé avec Adobe Air).

• Son aspect crayonné ne peut laisser croire qu'il s'agit d'un travail graphique tout en facilitant l'implication des publics les plus éloignés du sujet. On présente clairement un dessin, une ébauche.

• Il dispose de modèles et gabarits, mais pas trop. Du coup nous sommes obligés de "créer" les interfaces. Disposer de modèles de pages ou de systèmes de navigation risquait de nous entraîner sur la pente glissante de la répétition (on ne reproduirait que des interfaces existantes). Le site Mockups To Go reste une bonne base de travail.

• On peut y faire des liens entre mockups, cela permet de présenter facilement l'enchainement entre les pages.

• On peut activer des boutons mais il ne va pas jusqu'à permettre le déclenchement d'actions à l'aide de menus déroulants. Il nous oblige donc à garder une spécification "papier" pour décrire plus finement certains comportements.

• Il n'est pas très cher, 79 $.

• L'équipe de développement est sympathique et à l'écoute de ses utilisateurs (les releases notes avec, pour certaines fonctionnalités, la référence à l'utilisateur qui l'a demandée, cela témoigne d'une bonne écoute). A voir sur le blog de l'entreprise. Le logiciel évolue vite et profite vraiment du retour des utilisateurs. Le rythme pourra changer mais de nouvelles fonctionnalités sont ajoutées toutes les deux semaines en ce moment.

• Le logiciel existe en version client lourd mais également en tant que plugin pour Jira, Confluence, XWiki, etc. Si jamais nous venions à passer de Redmine à une autre solution de gestion et suivi de projet, nous serions alors très certainement en mesure d'y intégrer directement Balsamiq Mockups.

Il nous reste aujourd'hui quelques points à travailler. Qui impliquer dans la création d'un zoning ? L'équipe créa ? Uniquement les chefs de projet ? Une fois un zoning validé, comment laisser de la liberté à l'équipe créa ?

Et pendant ce temps, au MIT : une application qui sait reconnaître le schéma d'une molécule. Exemple avec le paracétamol.