Après avoir vu en détails quels étaient les objectifs du wireframing, et ses différentes définitions, voici une sélection d’outils de wireframing HTML à découvrir, et à tester (sans attendre).

Place à la création.

Etape 1 : Préparer le terrain

Les wireframes HTML ne nous dispensent pas de faire quelques recherches avant toute conception UX. Quels sont les objectifs économiques et sociaux, les besoins utilisateurs et les contraintes techniques du projet. Etape primordiale pour savoir dans quoi vous vous lancez.

L’approche peut en revanche être différente lorsque nous passons à la phase de conception.

Un concept m’a fortement séduit ces derniers temps, à la lecture de cet article. Bon, je vous laisse le loisir de la traduction (la conception du manchot ?). Ici, Harry Brignull nous confie son secret pour concevoir rapidement des propositions concernant l’utilisabilité et l’expérience utilisateur au global. (de ses projets, en l’occurrence).

Attention secret qui tient en deux mots : post-it et crayon (préférez celui d’un menuisier, c’est important).

L’idée ?

Ces deux outils vous permettent de vous concentrer uniquement sur les éléments les plus importants de la structure du projet, de sa hiérarchie et de ses interrelations. En gros : en quelques minutes, vous obtenez les éléments principaux qui vous permettront d’engager les échanges avec l’équipe projet.

Une fois ces croquis basse-déf établis, place à la phase de construction des wireframes codés.

Présentation d’outils identifiés, et testés !

Les frameworks testés

Foundation

Un framework front-end responsive développé par la société Zurb.
Son plus : il permet de développer très facilement des prototypes wireframes d’applications Web multi-supports. Via une bibliothèque de styles et d’éléments tels que des barres de navigation, des slideshows, des formulaires…

Foundation autorise la conception de wireframes fonctionnels entièrement customisables. A insérer directement en phase de production.
En le couplant par exemple à un environnement WordPress, cet outil basé sur un code solide et propre (de nombreux navigateurs sont compatibles) peut représenter un important gain de temps (non négligeable) entre la phase de conception et celle de développement.

Preuve en images. Les deux exemples ci-dessous ont été développés via Foundation:

unu.edu

flite.com

Un autre framework testé ces jours-ci : Wirefy

Il reprend le même concept que Foundation. Un framework front-end responsive créé par Chris Da Sie, capable de vous accompagner dans tous les cycles d’un projet Web.

Le framework à tester pour de la basse-déf

Gridster

Un framework basé sur un concept (plutôt intéressant) de drag-and-drop. Vous voulez jouer avec ? Alors, rendez-vous sur la page de démo.

Un framework… en cours de réalisation

The bricks, ce dernier exemple n’est pour l’instant disponible qu’au format .psd. Il sera très prochainement disponible aux développeurs.

Les générateurs de contenus pour vos wireframes HTML

Maintenant, votre choix de framework pour vos prochains wireframes est sûrement fait. La structure de vos pages est établie. Manque une seule chose : le contenu. Voici donc une sélection de générateurs de contenus, allant de la simple image par défaut à des contenus plus complexes, tels qu’une carte Google Maps.

Les générateurs d’images

Le premier : Place Hold It. Pour l’utiliser, insérez simplement les dimensions désirées de l’image dans l’url : http://placehold.it/300×150.

Il y en a d’autres qui reprennent ce même concept, avec différents niveaux de customisation : image en couleurs, noir et blanc, blocs grisés, ajout de textes à l’image… place à la créativité.

Dans les versions multi-fonctions, il y a xoc.de.

Et pour finir, oubliez les frameworks de grille compliqués à utiliser. Pour vos prochains wireframes, je vous conseille Griddle.

Les générateurs de textes et de graphes

• Lorem ipsum inséré dans des balises HTML. Résultat : HTML Ipsum.
• Et pour générer des graphes, basés sur le format de font OpenType : on a TKType.

Et un générateur d’images Google Maps

Vous avez l’âme d’un géographe ? Mais vous ne souhaitez pas surcharger vos wireframes de javascript… Sachez que l’API Google est votre ami.

• code.google.com/apis/maps

Simuler différents niveaux de hiérarchies d’utilisateurs

Un script sympa afin de simuler des états de connexion dans vos pages  via l’insertion d’une class spécifique :

• Démo
• Et pour télécharger le script : github.com/andykent/polypage

Pourquoi opter pour un wireframing codé ?

Plusieurs avantages,

• Oubliez les PDFs interactifs, faites place aux rondes des slideshows et à la musicalité des accordéons. Premier avantage : l’interactivité.
• Ne commentez que l’essentiel. Nul besoin de dizaines de paragraphes décrivant ce qui se cache derrière tel ou tel lien.
• Un projet d’application Web responsive ? Vos storyboards sont relégués au musée du wireframing.
• Avantage non négligeable : client et équipe, tout le monde comprend les spécificités du projet.
  Il est parfois difficile d’exprimer son ressenti, ses remarques lorsqu’il nous est impossible de tester, toucher l’objet d’étude en question, même face à la plus brillante idée d’interaction. Des malentendus concernant tel ou tel aspect de l’expérience utilisateur peuvent naître facilement. Imaginez le temps gagné avec les wireframes HTML, même lorsque l’équipe est internationale ! La communication est fortement facilitée.
• Navigateurs, devices, etc. : le wireframing codé est une représentation in situ des environnements et des contextes de navigation.
• Vous pouvez tester rapidement vos idées d’interactions, ou celles de vos clients, auprès de vos collaborateurs et autres groupes de testeurs. Plus de débat s’éternissant pour savoir ce qui fonctionne ou non !
• Avec une procédure claire quant à la phase de wireframing HTML, l’ensemble des templates crées pourra être facilement repris lors de la phase d’intégration des maquettes graphiques. Ou même réutilisé pour d’autres projets, par exemple.
• Les docs sont facilement maniables et modifiables (encore une fois, gain de temps). Si votre projet évolue fréquemment, plus de prise de tête pour modifier tous vos docs. La communication sur le projet est fluide, les remaniements des wireframes sont diminués.

C’est la fin

Il n’y a pas d’approche ni d’outil parfait lors du développement d’une interface utilisateur.

Votre unique préoccupation, ce sont les besoins et les contraintes du projet. Savoir si la typologie de wireframe adoptée est capable de répondre en des temps records, savoir si les coûts sont raisonnables face aux objectifs fixés par le client, apporter l’expérience utilisateur souhaitée : tout ça, c’est votre unique ligne directrice. La seule que vous devez suivre pour bien choisir votre méthodologie de conception UX.

Cela dit, les wireframes HTML sont selon moi le canal idéal pour transmettre l’essence de votre projet à tous les intervenants. Croyez-moi, une fois que vous y aurez goûté, vous ne pourrez plus revenir en arrière !

Et pour les « retardataires », ne loupez pas les premières parties du dossier : Wireframes codés, l’HTML au service de l’expérience utilisateur et Prototype d’un wireframe codé, pléonasme ?