En termes d’ergonomie, notamment pour une application ou un site web, il est bon de correctement formaliser :
- son arborescence : dans ce cadre, le mindmapping est assez pratique.
- ses fonctionnalités : quelles informations sont affichées, quels services sont proposés.
Les wireframes permettent ainsi de répondre au second point. Pour comprendre à quoi cela correspond, essayez Wirify.
Un wireframe est un croquis (sketch) permettant de répondre à la question : qu’est-ce qui doit s’afficher sur l’écran (que doit voir l’internaute). Ceci doit donc être réalisé avant l’infographie (charte graphique).
L’objectif est donc de bien définir les éléments constitutifs d’un écran (zoning) mais aussi la navigation entre écrans (zooming) en simulant celle d’un internaute ayant un but précis (la méthode des personas est alors souvent utilisée en ergonomie).
Ce formalisme permet un gain de temps assez conséquent lors de la réalisation de la charte graphique sous Photoshop (jusqu’à 40% en moins !).
Parmi les outils couramment utilisés :
- Balsamiq Mockup : cette solution payante permet de réalisée des pages statiques et de simuler des parcours de navigation. Elle existe en mode web et bureau.
- Prototyper (société Justinmind) : cette solution a une version Community pour un usage non-commerciale. La force de cette solution est qu’il est possible de simuler des comportements dynamique (menu déroulant par exemple).