- Les 10 coûts proposés vont varier du simple au double et peut-être même plus. Ces différences ne seront pas dues à des variations de taux horaire mais plutôt à des interprétations différentes de vos besoins et de vos attentes.
- Peu importe qui sera choisi, ça va coûter plus cher que prévu. En effet, le comité va réaliser, en cours de développement, que certains éléments importants n’étaient pas suffisamment explicites dans leur cahier des charges. Ils vont donc devoir payer des suppléments pour les fameuses demandes de changement.
- Les membres du comité avaient chacun une idée différente de ce que serait le site, même s’ils ont écrit conjointement le rapport des besoins.
- Le site qui sera mis en place ne correspondra pas à ce que les membres du comité avaient imaginé.
Comment mettre les chances de son côté
Au printemps 2009, Paulina Podgorska a décelé une opportunité d’affaires. Suite à ses propres difficultés à trouver une gardienne pour son enfant, elle a décidé de créer un nouveau site web qui faciliterait la rencontre entre gardiennes d’enfant et familles. Ce site s’appellerait http://www.sosgarde.ca/.
Je ne sais pas si elle a lu l’article de Seth Godin mais elle prépara un document de six pages contenant l’essence de son futur site. Ayant déjà travaillé chez Nurun et BBDO, Paulina connaissait bien le web. Cependant, son expérience lui disait qu’elle ne pouvait pas donner ce document tel quel à des développeurs.
Elle parla de son projet à Martin Lessard (Zero Seconde) qui, trop affairé, lui suggéra mon nom. Je lui ai alors proposé de préparer un prototype en fil de fer (wireframe) qui servirait de support à nos discussions sur la conception de son site. C’est ce que nous avons fait et l’expression de ses besoins est passée de 6 pages de textes à un prototype fonctionnel de plus de 70 pages qu’elle pouvait donner aux infographistes et programmeurs à titre de spécifications.
Un prototype en fil de fer est la représentation visuelle minimaliste d’une solution potentielle aux besoins d’un site web en termes de contenu, de navigation et de fonctionnalités. Le qualificatif “fil de fer” est dû à l’absence d’éléments graphiques. C’est dans sa nature d’être laid. Ceci permet de se concentrer sur ce qui fera partie du site, sur ce qui sera mis en évidence et sur ce qui sera exclus.
Voici un exemple fictif de prototype en fil de fer:
Le prototype en fil de fer: outil de communication
Un prototype est d’abord et avant tout un outil de communication entre le propriétaire du site et l’architecte concepteur du site. Il permet:
Il n’est pas facile d’imaginer ce que sera un site web à partir du rapport des besoins. Le prototype permet à tous les membres de l’organisation de visualiser le futur site et de l’expérimenter. Mieux encore, comme il est évolutif de par sa nature, le prototype s’améliore des fruits de la réflexion. Typiquement, je vais enrichir un prototype plusieurs fois par jour:
Pour éviter les incertitudes de résultats et de coûts, comme dans le cas du comité dans la première section de ce billet, un prototype fonctionnel en fil de fer est un outil formidable. De plus, si vous désirez ensuite aller en appel d’offres, la plus grande clarté dans ce qui est demandé va vous permettre de comparer plus facilement les propositions reçues.
Pour en savoir plus sur les prototypes en fil de fer, lire le billet “Using Wireframes to Bring Your Site Together” de DesignReviver. Pour un schéma très clair sur la place de l’analyse et du visuel dans la démarche de création d’un site web, voir ce document PDF d’une seule page de Jesse James Garrett intitulé “The Elements of User Experience” . Merci à Sandrine Prom Tep pour m’avoir fait découvrir ce bijou de synthèse.
Mise à jour du 10 décembre 2009: Un article du UX Magazine "Where Wireframes Are Concerned" est d'avis qu'il vaut mieux éviter les prototypes dans certaines circonstances. Je ne partage pas totalement le point de vue de l'auteur, qui me semble être un graphiste, mais ça fait réfléchir. Bien entendu, les prototypes en fil de fer ne sont pas une panacée.
Qu’est ce qu’un prototype en fil de fer (wireframe)?
Un prototype en fil de fer est la représentation visuelle minimaliste d’une solution potentielle aux besoins d’un site web en termes de contenu, de navigation et de fonctionnalités. Le qualificatif “fil de fer” est dû à l’absence d’éléments graphiques. C’est dans sa nature d’être laid. Ceci permet de se concentrer sur ce qui fera partie du site, sur ce qui sera mis en évidence et sur ce qui sera exclus.
Voici un exemple fictif de prototype en fil de fer:
Il faut distinguer les prototypes des maquettes. Une maquette sert à présenter les éléments visuels qui habillent le site. C’est un livrable très important qui se fait une fois que le prototype en fil de fer est complété et approuvé. N.B. Mon point de vue sur les maquettes est élaboré dans mon billet ” Les maquettes Photoshop dans les propositions de site web“ .
Un prototype est d’abord et avant tout un outil de communication entre le propriétaire du site et l’architecte concepteur du site. Il permet:
- de valider la compréhension des besoins;
- de présenter des solutions potentielles aux besoins du site web (contenu, navigation et fonctionnalités);
- d’expérimenter la navigation du site;
- de documenter, partager et approuver les spécifications du site.
Il n’est pas facile d’imaginer ce que sera un site web à partir du rapport des besoins. Le prototype permet à tous les membres de l’organisation de visualiser le futur site et de l’expérimenter. Mieux encore, comme il est évolutif de par sa nature, le prototype s’améliore des fruits de la réflexion. Typiquement, je vais enrichir un prototype plusieurs fois par jour:
- pour incorporer le feedback de mon client;
- pour introduire une amélioration suite à ma propre réflexion;
- pour expérimenter un concept;
- pour développer une nouvelle section.
Pour la phase de conception de la solution, les avantages sont:
- L’accès facile à la conception permet à tous ceux impliqués dans le projet de partager la même vision de la solution;
- Des tests utilisateurs peuvent être faits pour valider la solution;
- On peut expérimenter à faibles coûts diverses solutions et ne retenir que celles qui sont les plus rentables;
- Comme le processus itératif du prototype facilite la réflexion et la validation, la solution éventuellement mise en place rencontrera mieux les besoins exprimés initialement.
- Pour des raisons de budget ou d’échéancier, on pourrait vouloir découper la réalisation du site en plusieurs phases. Le prototype facilitera le découpage car on connaîtra d’avance l’ensemble de la solution.
Pour éviter les incertitudes de résultats et de coûts, comme dans le cas du comité dans la première section de ce billet, un prototype fonctionnel en fil de fer est un outil formidable. De plus, si vous désirez ensuite aller en appel d’offres, la plus grande clarté dans ce qui est demandé va vous permettre de comparer plus facilement les propositions reçues.
Pour en savoir plus sur les prototypes en fil de fer, lire le billet “Using Wireframes to Bring Your Site Together” de DesignReviver. Pour un schéma très clair sur la place de l’analyse et du visuel dans la démarche de création d’un site web, voir ce document PDF d’une seule page de Jesse James Garrett intitulé “The Elements of User Experience” . Merci à Sandrine Prom Tep pour m’avoir fait découvrir ce bijou de synthèse.
Mise à jour du 10 décembre 2009: Un article du UX Magazine "Where Wireframes Are Concerned" est d'avis qu'il vaut mieux éviter les prototypes dans certaines circonstances. Je ne partage pas totalement le point de vue de l'auteur, qui me semble être un graphiste, mais ça fait réfléchir. Bien entendu, les prototypes en fil de fer ne sont pas une panacée.
10 commentaires:
Très intéressant comme processus. Toutefois, ça me semble un peu lourd pour un non-initié...passer de 6 pages à 70 pages???
De plus, comment procèderais-tu pour juxtaposer ou superposer une cartographie graphique des contenus avec la séquence textuelle?
Bonjour !
J'ai récemment testé un navigateur en mode texte, qui n'affiche que du texte à vrai dire (une réminiscence adapté à linux d'un lointain ancêtre de navigateur qui devait tourner sur des ordinateurs capables de n'afficher que des lettres, enfin ce n'est qu'une supposition, bref)
Tout ça pour dire que c'est une expérience qui permets de se rapprocher, un peu comme tes "prototypes en fil de fer", du contenu, du comportement, du site web.
Peut être une solution pour tester grandeur nature tes prototypes ?
Merci Luc pour tes points pertinents.
Point#1: Lourdeur pour un non-initié.
Tout d'abord il faut préciser que, dans le cas de sosgarde, le point de départ était un document textuel de 6 pages et que la version finale du prototype avait 70 pages WEB, et non pas 70 pages de texte. Ces 70 pages représentent chacune des pages que l'on retrouvera dans le site sosgarde.ca.
À savoir si ces 70 pages sont lourdes pour un non-initié, je ne crois pas car le client verra son site prendre forme graduellement. En pratique, il aura à donner son avis tout le long du développement du prototype. C'est pourquoi le prototype est un outil de réflexion et de communication. On n'amènera pas le client directement au résultat final mais on fera le chemin avec lui. En bonus, ce sera une opportunité de coaching pour le client.
Point#2: cartographie graphique des contenus.
La conception visuelle vient après l'approbation du prototype. Le prototype n'est habituellement pas habillé par les graphistes qui vont s'affairer à établir les normes graphiques et à bâtir les gabarits.
Alexandre, tu parles peut-être de Lynx. Il n'est pas nécessaire d'utiliser un tel fureteur car le prototype est déjà navigable.
J'ai beaucoup apprécié cet article et je suis d'accord avec l'idée du "fil de fer".
Pour avoir géré plusieurs types de projets depuis les 7 dernières années, il est clair qu'avoir un cadre visuel est important pour clarifier les attentes de chacun. Il y a plusieurs outils qu'on adapte souvent au projet et à ses clients. Celui-là me paraît três pertinent pour la conception de sites web.
En l'occurence il s'agit de "Elinks", pareil que Lynx mais en noir et blanc, encore plus basique !
Excellent article avec lequel je suis parfaitement d'accord. Les prototypes en fil de fer sont une évolution des maquette en fil de faire statique traditionelles (wireframes) utilisées depuis longtemps par les architectes d'information et les designer interactifs (UXD & IxD).
Pour moi ils sont en train de devenir un must pour les raisons que tu mentionnes soit de clarifier les besoins de business (business requirements) et les besoins des utilisateurs. Comme ils sont de basse fidélité visuelle il est effectivement très rapide et beaucoup moins couteux d'en faire l'itération qu'à l'étape des maquettes graphiques ou pire, à l'étape du développement.
Le logiciel que j'utilise pour faire la création de ce genre de prototypes (Axure RP) permet aussi d'en faire l'annotation détaillée et d'exporter le tout en un site fonctionel bien sur, mais aussi en un document de spécifications en format Word.
En général, je n'ai pas besoin d'utiliser ce dernier car le prototype se tient comme seule documentation. J'y ajoute généralement une page ou 2 de spécifications générales et un diagramme du site. On peut aussi y ajouter des organigrammes de taches (task flows ou user flows) mais seulement pour des projets plus complexes où les développeurs aiment avoir ce genre de documentation.
Pour faire l'itération du concepot avec le client et s'entendre sur les vrais détails du site à bâtir, le prototype en fil de fer est idéal et fait beaucoup mieux le travail que de longs documents de spécifications texte.
@Antony et Pixelized,
Merci pour votre support. Maintenant que tout le monde est d'accord pour faire des prototypes en fil de fer, pourquoi est-ce si peu utilisé?
Si peu utilisé par qui? Je crois que ça dépends à qui tu parles. Il est vrai que c'est peu utilisé par des travailleur autonomes comme moi qui font tout le travail ou presque sur un site, de la recherche initiale à la conception graphique au développement. La phase de prototypage peut sembler une perte de temps pour beaucoup.
Mais, mis à part pour les projets les plus simples, il est à mon avis primordial de passer par un prototype ou wireframe fonctionel à basse fidélité visuelle. Ils ont été bien reçus par mes clients dans les projets où je les ai utilisés mais il faut leur expliquer clairement le but et l'utilité de ces prototypes car ils n'ont la plupart du temps pas l'habitude de réviser ce type de document.
Avec un peu de délai mais on s'en était parlé de vive voix lors de la JMU09, je viens te remercier Marc pour la citation de source pour le document de JJGarrett.
Cela me fait toujours plaisir de partager les bons outils. L'ergonomie c'est comme la santé, quand on la perçoit c'est contagieux et on ne peut plus s'en passer!
Publier un commentaire