Fais-moi un wireframe : quelques astuces

Si j’ai quelques fois skippé cette étape dans le passé, je peux vous assurer que je ne referais pas la même erreur aujourd’hui. Les wireframes devraient former l’assise de tout projet web et mobile. Vous devez résister à la tentation de sauter directement dans le code. Car oui, ça peut être plaisant. Jusqu’à ce qu’on se rende compte qu’on a codé dans le vide. Là, c’est moins cool disons.

Alors, quel bon vent m’amène pour vous jaser de wireframing aujourd’hui ? En fait, étant en plein processus de création d’une application mobile sur iPhone/Android, mes talents de maquettiste ont été rudement mis à l’épreuve ces dernières semaines.

Voici donc les grandes lignes de ce que je peux vous partager de mon expérience jusqu’à présent :

1 – Trouvez votre méthode

Le but ici est d’être le plus efficace possible. Vous êtes en début de projet. Peut-être avez-vous une idée de produit et cherchez à mettre des mots sur ce dernier ? Oubliez les mots. Concentrez-vous à faire quelques dessins de la manière qui vous apparaîtra la plus appropriée :

• Tableau blanc : Si vous possédez un tableau blanc, pourquoi ne pas l’utiliser ? Tracez les grandes lignes du projet. Dessinez quelques écrans de base qui vous serviront de points de repère pour la suite des choses. Puis, vous pouvez toujours prendre quelques captures d’écran, plutôt de tableau blanc que dis-je, avec votre appareil numérique. Vous pourrez ainsi conserver un historique de vos ébauches.
• Papier et crayon : Ma méthode favorite. C’est simple, rapide et flexible. Tout le monde est à l’aise à utiliser cette méthode, y compris votre client, qui pourra lui-même modifier le prototype lors de votre présentation live. En effet, l’absence de barrières technologiques rend cette méthode accessible, ce qui a pour effet de mettre tout le monde sur un même pied d’égalité.

  Pour ma part, j’aime bien conserver mes sketchs et pouvoir y accéder quand bon me semble, sans avoir à allumer l’ordi. J’aime bien étaler les feuilles sur mon bureau et voir le progrès réalisé depuis le début du projet. Ça me donne un boost d’inspiration !

• Napkin et crayon : Dérivé de la méthode précédente. Devenez habile et impressionnez votre interlocuteur lors de votre prochain dîner au resto.
• Logiciel : Il existe plusieurs logiciels pouvant vous aider dans la création de wireframes. L’important est de trouver un outil flexible qui ne met pas trop l’accent sur le design et vous permet d’exprimer librement vos idées. Idéalement, le « rendu » est rough et nous rappelle des traits de crayon.

2 – Concentrez-vous sur l’essentiel

Inutile à cette étape de penser au graphisme et à la couleur de tel ou tel bouton. Ne perdez pas votre temps. Vous êtes encore à faire des wireframes et à consolider vos idées pour la suite des choses. Ici, on travaille sur du rough. Let’s keep it simple!

Vous analysez présentement les besoins de votre client et voulez lui en mettre plein la vue avec une belle maquette ? Vous ne visez pas un wireframe, mais plutôt – en anglais – un high-fidelity prototype ? Vous n’êtes pas seul à penser ainsi. Le problème est que cette méthode limite le feedback. Tout semble coulé dans le béton alors que nous en sommes à conceptualiser et à proposer des solutions.

À cette étape, tout est appelé à changer. Pourquoi ne pas montrer vos wireframes à votre client ? Cela vous permettra d’expliquer certaines décisions et discuter de points ambigus, sans aucune distraction.

3 – Collaboration

Puisque je dois collaborer avec d’autres personnes sur certains projets, une illustration s’avère souvent plus simple à comprendre que des mots. Un wireframe supporté de quelques explications est amplement suffisant pour expliquer un concept à quiconque. Vous pouvez également utiliser une solution web telle que Google Drawings pour faciliter la collaboration en ligne sur un même design.

4 – Outillez-vous

Si la méthode « papier-crayon » suffira au départ, un bon logiciel s’avèrera nécessaire tôt ou tard. Et je ne parle pas encore de faire la maquette finale du projet, mais plutôt d’offrir un minimum d’interactivité. À ce stade-ci, vous voulez voir comment votre concept tient la route, tout en obtenant le plus de feedback possible.

• Pour un projet web : J’aime bien utiliser Balsamiq Mockups. L’outil est simple et suffisamment flexible pour ne pas gêner votre créativité. En effet, un tel logiciel n’agit qu’à titre de support et ne devrait en aucun cas limiter votre imagination.

  Au besoin, je peux également créer une version HTML ultra simplifiée de la maquette. Seulement quelques liens permettant de naviguer dans l’interface suffisent.

  Il existe beaucoup d’autres produits comparables à Balsamiq Mockups et je vous suggère de faire votre propre recherche.

• Pour une application mobile : J’utilise présentement Omnigraffle sur Mac couplé à quelques stencils pour interfacer sur Android et iPhone. J’obtiens rapidement ce que je veux et je peux facilement mettre quelques touches visuelles sans tomber trop dans les détails. J’ai vu également des gens utiliser Keynote (le PowerPoint du Mac) avec succès ; notez que des templates sont disponibles si vous êtes intéressés par cette avenue.

5 – Devenez forgeron

En regardant un peu ce que les autres font en matière de wireframing, aucun standard ne semble faire l’unanimité actuellement. Il en est de même pour les logiciels utilisés. Inutile donc de chercher le meilleur outil. Chacun doit adopter la méthode qui lui convient le mieux et peaufiner son art.

« C’est en forgeant qu’on devient forgeron », n’est-ce pas ?

J’espère vous avoir un peu inspirés sur ma façon de procéder! Et vous, quelle est votre arme de prédilection, ô forgerons ?