Wireframe : pourquoi et comment faire ?

Dessiner ses wireframes à la plume

Tout projet informatique doit être accompagné de quelques documents de cadrage, notamment des schémas représentant les écrans ou pages du projet. Selon leur niveau de détail, on parlera de zoning, wireframes, mockup…  parfois le projet ne comporte qu’un niveau détails, parfois toutes les étapes sont présentes. Aujourd’hui nous allons nous attacher aux wireframes

Dessiner ses wireframes à la plume

Pourquoi faire un wireframe ?

Comme je l’ai brièvement indiqué ci-dessus, un wireframe participe au cadrage du projet : il sert à définir et à valider son périmètre fonctionnel, c’est à dire à savoir ce que l’on pourra faire et avec quelle interface (par exemple un écran de connexion permet de se connecter au moyen d’un login et d’un mot de passe, mais il offre aussi un lien vers le formulaire d’inscription et un lien vers une page de récupération du mot de passe). Créer un chemin de fer (c’est le terme français) pour chaque écran de votre futur site internet permet de s’assurer que vous serez protégé en tant que client (votre prestataire ne pourra pas dire que ça n’était pas prévu) ou en tant que prestataire (si votre livrable est conforme aux wireframes le maître d’ouvrage ne pourra pas changer d’avis au dernier moment en disant que vous n’avez rien compris).

Mais le plus gros avantage à mon avis, c’est que les chemins de fer permettent d’imaginer toutes les étapes d’un process : de la page d’accueil à la dernière étape de votre « chemin », vous pouvez voir ce qui coince, ce qui est confus… et imaginer toutes les possibilités d’entrée et de sortie. Prenons deux exemples concrêts : dans un tunnel de conversion vous souhaitez guider vos visiteurs du début à la fin et il peut être utile d’identifier toutes les possibilités de sortir du tunnel que vous pourriez offrir involontairement pour optimiser les conversions, alors que dans une page décrivant un produit vous allez chercher à trouver la meilleure façon de vendre le produit ou d’en vendre d’autres.

Définitions : qu’est-ce qu’un wireframe

Vous avez vu que selon l’importance du projet vous serez confronté(e) au choix à un zoning, un chemin de fer, une maquette… à plusieurs d’entre ces outils, voire à tous les uns après les autres. Pourquoi ? Tout simplement parce qu’ils sont les différentes étapes d’une seule réflexion. Même si vous êtes un petit freelance qui fait de l’intégration sur son canapé entre deux épisodes de Joséphine, il y a de grandes chances que vous suiviez au moins en partie ce cheminement (« bon, qu’est ce que je lui met dans son ### footer à lui ? »). Si vous vous reconnaissez, nous n’allons pas nous étendre sur tout le bien que je pense de vous, sinon je vous propose de voir à quoi correspondent exactement tous ces termes que personne dans votre entourage n’a jamais entendus

  • Zoning : C’est la première étape du raisonnement, la page est découpée en grandes zones, selon leur contenu (en-tête, pied de page, zone de contenu, colonne de droite…). Au final un zoning ressemble à 5 ou 6 rectangles imbriqués dans un plus grand;
  • Wireframe : nous allons préciser tous les éléments fonctionnels du zoning, page par page et zone par zone afin de visualiser leur disposition sur l’écran. Ici il n’est pas question d’intégrer d’éléments graphique personnalisés (même pas le logo du site) et on peut rencontrer de la même façon des chemins de fer à l’aspect dessiné, comme s’ils avaient été tracés à main levée, ou avec de jolis traits bien droits, voire reprenant les composants standard d’un système d’exploitation (par exemple dans le cadre d’une application mobile), nous y reviendrons un peu plus tard;
  • Mockup : ni plus ni moins qu’une version navigable du wireframe, permettant de valider l’ergonomie du projet de façon interactive
  • Maquette : elle intègre tous les éléments graphiques du projet, du logo au plus petit ombrage sous les boutons;
  • Prototype : pas tout à fait le produit fini (certains aspects graphiques notamment ne seront pas finalisés), le prototype est totalement utilisable. Il permet de valider tous les process, y compris les traitements automatisés.

A titre de comparaison, imaginez une maquette de voiture : elle peut être de taille réelle ou non, en plastique ou non … l’important étant d’être le plus ressemblant possible avec le modèle original. Tandis qu’un prototype ne ressemble pas souvent au véhicule de série qui sera produit par la suite, mais il roule.

Un dernier terme pour la route : lorsqu’un wireframe a l’air d’avoir été dessiné à la main, il est dit « sketchy« .

Reflexion projet

La réflexion à propos d’un projet se fait étape par étape

 

Comment faire un wireframe ?

Avant toute chose, sachez que c’est comme dans un jeu de rôle : le chemin parcouru compte plus que la quête elle même. C’est pourquoi il n’y a pas de bonne ou de mauvaise façon de concevoir un wireframe à partir du moment où vous aboutissez à un livrable de qualité. Ce que je vais décrire est donc ma façon de procéder.

  1. Définir le contenu du site : je commence par une simple liste à puces qui décrit son arborescence. Comme sur mes articles je mets en gras le nom de la page et j’ajoute en police standard une description de la page;
  2. Faire le zoning de chaque page ou de chaque groupe de page : typiquement sur un site WordPress on ne va pas faire 1500 zonings pour les 1500 articles que doit contenir le site mais un pour les articles, un pour les pages statiques et un pour la page d’accueil. L’arborescence définie plus tôt permet d’identifier facilement les types de page à décrire;
  3. Détailler chaque zone en éléments : on passe du zoning au chemin de fer en ajoutant dans chaque zone les emplacements pour tous les éléments qu’elle va contenir : image, bloc de texte, bouton d’action, champ de saisie… Cela semble simple mais il y a tellement de possibilités de faire des erreurs que je vous offre quelques petites astuces
    1. Annoter chaque bouton d’action : expliquez le plus précisément possible ce qui va se passer si l’internaute clique dessus. Cela vous permettra de valider votre idée et de pouvoir transmettre votre document à quelqu’un d’autre efficacement;
    2. Ne pas multiplier les couleurs : du noir, du blanc et du gris, ça suffit. Je répète qu’on n’intègre pas du tout d’éléments graphiques personnalisés dans un wireframe. Le gris sert à matérialiser les éléments importants, par exemple un bouton sur fond blanc aura moins d’importance qu’un bouton sur fond gris. On voit souvent du bleu dans les moqups, tout simplement parce que c’est un standard pour les liens hypertextes;
    3. Je vous ai déjà conseillé de ne pas introduire les éléments graphique du client ? Ceci afin d’éviter que le client ne se focalise sur la forme (pour la petite histoire il m’est arrivé de mettre une version noir & blanc d’un logo en haut d’une série de wireframes et tout ce qu’a retenu le client c’est « mon logo est vert »);
    4. Rendu normal  ou dessiné ? Le wireframe sketchy a ses détracteurs (http://www.silverspider.com/2010/sketchy-wireframes-the-comic-sans-of-ux/) mais je considère qu’il aident les non-initiés à faire la différence entre un document de travail destiné à la réflexion et une maquette;
    5. Surveiller l’horloge : un wireframe doit être vite dessiné et encore plus vite modifié, le choix de l’outil est donc primordial;
    6. Vérifier son travail en visualisant toutes les étapes de chaque process : inscription au site, commande d’un produit… la conception d’un chemin de fer est un cycle itératif qui ne prend fin que quand plus aucune itération n’est possible.

separateur

Vous voilà maintenant prêt(e) à concevoir vos propres wireframes, si vous ne l’avez pas déjà fait, je vous invite à essayer : même pour un petit projet vous trouverez rapidement ça indispensable !

Comme vous avez pu le lire, le choix de l’outil est important, je vous invite donc à parcourir ma présentation de 10 outils gratuits qui vous permettront de dessiner vos chemins de fer, vous y trouverez certainement un qui correspondra à vos attentes.

Enfin, si vous avez des astuces à partager pour améliorer la productivité des lecteurs, n’hésitez pas à les partager. Tous les autres types de commentaires sont évidemment les bienvenus.



Source : Source clipart

Une réponse

  1. […] Tout projet informatique s'appuie sur des wireframes mais savez-vous ce que signifie ce terme ? Responsive Mind vous explique tout sur les chemins de fer  […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *