Certaines personnes collectionnent des timbres, d'autres des trains; Je suis devenu obsédé par les logiciels de fil de fer.

J'ai essayé et tombé amoureux d'innombrables applications, de Balsamiq à Oiseau moqueur à FlairBuilder . Bien que chacun ait ressenti le véritable amour, au fil du temps, mon regard s'est égaré et je me retrouve en train de flirter avec un autre outil.

Ils ont tous l'air si séduisant, mais au fil du temps, je vois leurs lacunes. Je suis peut-être trop difficile. Peut-être mes besoins sont-ils trop inhabituels. Ce que je veux vraiment, c'est un outil qui corresponde à la façon dont je fais les choses, plutôt que de devoir adapter l'outil.

Avez-vous un outil de wireframing préféré de votre choix? Voyez-vous même le besoin d'un? Si oui, allez-vous pour toutes les cloches et sifflets ou juste une solution rapide et sale?

FlairBuilder
Applications comme FlairBuilder sont de plus en plus puissants, mais parfois trop complexes.

Pourquoi collaborer sur le wireframing avec les clients?

Pour moi, le wireframing est une expérience collaborative. Ce n'est pas quelque chose que je fais seul dans une pièce sombre. Je partage plutôt le processus avec mes clients.

Je crois en assis autour d'une table avec le client et en écrasant les pages clés en format filaire. Cela a quatre avantages:

  1. Engage le client
    En filonnant avec le client, ils ressentent une partie du processus, ce qui contribue à établir une relation de travail solide.
  2. Assure l'élan
    En câblant ensemble, vous évitez les révisions sans fin. L'établissement d'une direction solide pour les pages clés se fait en quelques heures.
  3. Engage le client
    Si le client participe à la création des wireframes, il ressent un sentiment d'appartenance à leur égard et au site Web. La solution devient autant leur idée que la vôtre. Par conséquent, ils sont moins susceptibles de rejeter la conception ultérieurement.
  4. Sert de référence commune
    La création de wireframes permet de s'assurer que tout le monde les comprend. Les wireframes servent de référentiel commun pour tout le monde tout au long du projet.
wireframing avec le client
Le câblage filaire avec le client présente de nombreux avantages.

Cependant, le processus n'est pas sans défis.

Vous recherchez une solution rapide et sale

À bien des égards, le fil de fer est beaucoup plus facile. Vous avez le temps de réfléchir, de peaufiner et d'affiner. C'est difficile à faire avec un client dans la pièce. Le fil de fer collaboratif consiste à se moquer rapidement des idées et à en discuter. Donc, vous avez besoin d'un outil qui facilite cet objectif.

Votre outil de wireframing doit être:

  • Rapide à utiliser
    Rien n'est pire qu'un client assis autour de vous en train de combattre désespérément un outil de fil de fer pour démontrer une idée.
  • Facile à réviser
    Dans un processus de collaboration, la discussion vous amènera à tester des approches différentes et subtiles. Vous devrez pouvoir modifier le fil de fer rapidement.
  • Facile à comprendre
    Les wireframes doivent être clairs et descriptifs. Les clients ne bénéficient pas de notre expérience de travail avec des wireframes et peuvent donc être facilement confondus.
  • Professionnel
    Une idée peut être minimisée par la présentation. Il est utile que l'outil puisse produire une structure filaire qui ressemble à une solution bien pensée et de haute qualité.
Exemple de fil de fer principal
L'outil wireframing doit avoir un aspect professionnel et être suffisamment flexible pour permettre une itération rapide.

Traditionnellement, les sessions de wireframing collaboratives ont été réalisées avec un stylo et du papier, mais ce n'est pas toujours la meilleure solution.

Pourquoi ne pas stylo et papier?

Ne vous méprenez pas. Le stylo et le papier offrent un certain nombre d’avantages pour le wireframing collaboratif, et ils auront toujours leur place. En fait, j'irais même jusqu'à dire que la plupart des sessions de wireframing collaboratives devraient commencer par un stylo et du papier.

Ce qui est génial avec le stylo et le papier, c’est qu’il est inclusif et rapide. Tout le monde peut prendre un stylo et commencer à gribouiller; il ne nécessite aucune compétence particulière. Et toute la pièce peut commencer à dessiner en même temps; il n'y a pas une seule personne avec la main sur la souris.

Le stylo et le papier se sentent également jetables. Visser un morceau de papier et le jeter dans la poubelle est facile et ne comporte aucun sentiment de perte. Ceci est crucial dans les premières étapes du processus de fil de fer.

Cependant, le fil de fer sur le stylo et le papier présente certains inconvénients:

  • Pas facile à réviser
    Lorsque des idées volent et que vous griffonnez un élément après l'autre, les wireframes au stylo et au papier peuvent devenir rapidement désordonnés. Vous êtes souvent obligé de redessiner une page à partir de zéro, ce qui ralentit le processus.
  • Pas toujours clair
    Avec autant de révisions et de gribouillis, les wireframes deviennent souvent source de confusion. Ils ont également tendance à manquer du détail des images filaires générées par logiciel, laissant beaucoup de questions sans réponse.
  • N'a pas l'air professionnel
    Sauf si vous êtes un grand artiste, la plupart de vos wireframes ressembleront aux délires d'un psychopathe dérangé (ou est-ce juste moi?). Cela peut réduire la valeur des idées sous-jacentes.
Stylo et papier filaire
Les wireframes de stylo et de papier peuvent sembler désordonnés et déroutants pour le client non averti.

Dans mon expérience, une bonne session de wireframing collaborative contient un mélange de wireframes papier et logicielle.

Ainsi, avec de nombreuses solutions logicielles trop lentes et le papier défaillant à d'autres égards, quelle est la solution?

Keynote à la rescousse

Après beaucoup d'expérimentation, j'ai choisi Keynote comme outil préféré. Je soupçonne que PowerPoint est tout aussi bon, mais en tant qu'utilisateur Mac, mon choix est Keynote.

Keynote est facile à utiliser et de nombreuses personnes le connaissent déjà. Mieux encore, la grande majorité d’entre nous en est déjà propriétaire, ce qui économise de l’argent.

Je l'aime parce que cela permet de jeter ensemble des wireframes et de les réviser rapidement en fonction de l'évolution de la pensée.

Mieux encore, les wireframes Keynote peuvent sembler très professionnels et apporter une grande clarté.

Pour ce faire, vous avez besoin d'un grand modèle maître, contenant tous les éléments qui apparaissent normalement sur un site Web (texte, images, zone de recherche, etc.). Il suffit ensuite de les copier et de les coller sur vos pages.

Certains de superbes vidéos vous montrer comment créer vos propres éléments personnalisés. Si vous êtes paresseux comme moi, un certain nombre de personnes ont travaillé dur pour vous. Pour un prix minime, vous pouvez acheter des modèles Keynote et PowerPoint contenant tous les éléments Web que vous êtes susceptible d'inclure dans une structure filaire.

Keynotopie
keynotopie

Keynote UX
Keynote UX

Keynote Kung-Fu
Keynote Kung-Fu

Mais les avantages ne s'arrêtent pas là.

Un bonus

La façon dont vous présentez les wireframes est cruciale. Même si vous travaillez en collaboration, il est probable que tous les intervenants ne seront pas présents.

De nombreuses applications de wireframing nécessitent que les utilisateurs téléchargent un programme ou installent un plug-in avant de pouvoir afficher le fichier. Ce n'est pas le cas avec Keynote.

Keynote est déjà une application courante, mais elle offre également d’excellentes options d’exportation. Vous pouvez enregistrer des images filaires en HTML et en PDF. Les deux options conservent les liens entre les pages, de sorte que l'utilisateur peut cliquer sur le "site Web".

Encore mieux, Keynote vous permet d'enregistrer une voix off et d'enregistrer le fil de fer sous forme de vidéo QuickTime. Cela vous permet de parler avec les parties prenantes à travers le fil de fer et d'expliquer votre approche, en veillant à ce qu'elles comprennent la pensée qui a été utilisée pour le fil de fer final.

Options d'exportation Keynote
Keynote vous permet d'exporter le fil de fer en PDF et HTML et même en tant que film avec narration vocale.

Bien sûr, aucune solution n'est parfaite. Keynote n'est pas la solution miracle du wireframing.

Limites

Selon mon expérience, Keynote souffre de deux problèmes d’outil de fil de fer.

Le premier est le format de la page. Alors que d'autres outils de schéma de câblage vous permettent de changer la taille de la page à la volée, Keynote ne le fait pas (du moins pas sans déformer les éléments). De plus, les dimensions doivent être identiques sur toutes les pages. Cela peut être frustrant si vous ne prévoyez pas d'avance. Je contourner ce problème en rendant toutes les pages énormes; mais cette solution est loin d'être parfaite et crée des problèmes lors de l'exportation.

Le deuxième problème est que Keynote ne permet pas une interaction complexe, malgré le lien entre les pages. Il ne peut pas afficher les fonctionnalités JavaScript, si courantes sur les sites Web d'aujourd'hui. Bien sûr, le stylo et le papier non plus. Et dans une session collaborative de wireframing, vous n’auriez normalement pas besoin de démontrer ce niveau de détail interactif. Si vous le faites, alors vous seriez probablement mieux avec un outil de prototypage plus complexe.