1. Wireframes et prototypes
Pourquoi, quand et comment les créer
et les utiliser
Jean-François Petit
François
Directeur Ai et UX
Idéactif Conseil

2. Jean-François Petit
Architecte de l’information (Ai) + homme à tout faire UX
• 1990: Premier compte email
• 1994: Premier site web conçu
• 1995-96: Premiers gros sites web au
96:
Québec (Molson, Bell, Cirque du
soleil, Gouv. du Québec, etc.)
,
• 1996-98: Cossette Interactif
98:
• 1998-99: International
99:
• 2000: Idéactif, première agence UX
au Québec
• 2010: Premier cours au HEC
twitter: jfpetit http://www.ideactif.com/blogue/author/jfpetit/

3. Suis-je le meilleur « wireframer » sur la
planète?

4. Suis-je le meilleur « wireframer » sur la
planète?
J'aimerais croire que oui, mais je sais bien que non...
Résultats sur le mot
mot-clé « wireframe »
4,5 millions sur Google
3000+ sur Slideshare
10 tweets à l'heure sur Twitter
191 mentions sur boxesandarrows

5. http://www.youtube.com/watch?v=QSxF-pISj1w
http://www.youtube.com/watch?v=QSxF

6. Un wireframe, c'est...
• Une page web dessinée?
• Un plan?
• Un prototype?
• Un outil de communication et
de consensus?
• Une idée qu'il faut tester et
évaluer?
• Un outil de documentation?
• Un irritant pour l'équipe de
design?

7. Un wireframe, c'est...
Allons-y pour la définition classique
y
« Un vue simplifiée du contenu qui doit apparaître sur chacun des
écrans du produit final, habituellement monochrome, et dénué
de style typographique et d’images. »
• Au Québec, il n’y a pas vraiment de terme traduit en français
d’acceptation courante dans le milieu. On dit Ouailleurefrême.
On entend quelques fois le terme « schéma de page ».
• Le GDT le traduit par « vue en fil de fer » ou « schéma filaire ».
Pas besoin de vous dire que personne n’utilise ces terme
couramment…

9. Composantes d’un wireframe « conceptuel »
Haut de page
Composantes
de navigation
Zones de
contenu
Description
des contenus
Pied de page

10. Composantes d’un wireframe « haute-fidélité »
Dimensions
(en pixels)
Annotations de
justification
Zones de
contenu
Grille Annotations
graphique au fonctionnelles
pixel près
Contenus réels
Éléments graphiques
réalistes (si disponibles)
Identification
des éléments
cliquables
Identificateur unique
pour retrouver dans
Identification l’arborescence
et versions

11. À considérer avant de créer un wireframe
• Le wireframe est un outil qui sert à communiquer des idées
initiales concernant le design de l’information des « pages » d’un
produit
• La portée du wireframe se limite habituellement au contenu et à
la structure. Peut s’étendre à la mise en écran et à certains
.
éléments de design graphique selon les besoins et type de projet.
• L’équipe de projet est le public cible du wireframe. Il peut être
risqué de faire circuler ce document sans une mise en contexte
et en absence d’autres documents connexes.
• Les wireframes font partie d’un ensemble de livrables d’un
projet.

12. Quelle place occupe les wireframes parmi
les livrables?
Avant Wireframe Après
• Analyse des requis • Prototypes (lo-fi, hi-fi)
• Analyse des objectifs affaires • Design graphique/maquettes
• Analyse de la compétition • Tests UX
• Inventaire des contenus • Guide de style/règles CSS
• Personas/scénarios • Guide de style rédactionnel
• Modèle conceptuel • Listes de libellés
• Arborescence de site (site • Code (HTML/XHTML/AJAX)
map)
• Arborescence de
cheminement (workflows)
• Tests UX
Wireframe = phase critique d’un projet Web durant laquelle on passe
des données abstraites à la première mise en forme concrète, i.e. qui
peut générer des émotions (+/-) chez le client et dans l’équipe.
)

13. You can use an eraser on the
drafting table or a
sledgehammer on the
construction site.
-Frank Lloyd Wright

20. Première esquisse de Twitter
Esquisse de Jack Dorsey,
co-fondateur de Twitter,
circa 2000.
Toute l’histoire est ici.
Source:
http://www.flickr.com/photos/jackdorsey/182613360/

25. Première maquette de Twitter

27. Qualités d'un bon wireframe
• Facile à modifier par son auteur
• Itératif (avec contrôle des versions si possible)
• Réaliste (encore là, dépend du type de projet)
• Descriptif
• Autonome (i.e. peut être interprété en l'absence de son auteur)
• Durable (peut-être compris même plusieurs mois plus tard...)
• Universel (pas de format de fichier “ésotérique”)
• Facilement communicable (courriel web)
courriel,
• Facilement identifiable (numérotation
numérotation)
• Imprimable
• Protégeable si distribué (PDF)

28. Créer des wireframes
Les 3 niveaux d’information
• Niveau 1 : se limiter à l’essentiel
• Niveau 2 : ajouter du contexte, des variantes et du détail
• Niveau 3 : s’approcher de la réalité

29. Créer des wireframes – 3 niveaux d’info
• Niveau 1 : se limiter à l’essentiel
– Les zones de contenu
– Description du contenu
– Ordre de priorité des zones et du
contenu
– Méta-information : identifier,
nommer, numéroter
– Info administrative : nom du
projet, client, date auteur, version,
etc.

30. Créer des wireframes – 3 niveaux d’info
Niveau 2 : ajouter du contexte,
des variantes et du détail
– Scénarios, par ex. comment
arrive-t-on à cette page
– Explication du contexte qui
justifie cette page ou des
variantes de pages
– Inclusion d’éléments
fonctionnels : liens, champs,
boutons, etc.
– Annotations (peuvent être
séparées ou combinées)
• Fonctionnelles : comment ça
marche?
• De contenu
• Justificatives
– Objectifs qu’on veut atteindre
– Justification. i.e. pourquoi ce
design en particulier?

31. Créer des wireframes – 3 niveaux d’info
Niveau 2 : ajouter du contexte,
des variantes et du détail
– Explication du contexte qui
justifie cette page ou des
variantes de pages
– Inclusion d’éléments
fonctionnels : liens, champs,
boutons, etc.
– Annotations (peuvent être
séparées ou combinées)
• Fonctionnelles : comment ça
marche?
• De contenu
• Justificatives
– Objectifs qu’on veut atteindre
– Justification. i.e. pourquoi ce
design en particulier?
– Scénarios, par ex. comment
arrive-t-on à cette page

32. Créer des wireframes – 3 niveaux d’info
Niveau 3 : s’approcher de la
réalité
– Mise en page et design
graphique
• Positionnement/échelle
• Taille des éléments textuels
• Taille des éléments graphiques
– Échantillons de contenu
• Vrai contenu (ou approximation) vs
faux (latin lorem ipsum)
• Densité informationnelle (nombre
de liens, nombre de mots, nombre
de caractères, etc.)
• Aide à déterminer des choix
graphiques (ex. : longueur des
libellés en FR vs EN)
• Mise en garde : placer du vrai
contenu va distraire certains
membres de l’équipe et la
discussion va divaguer…

33. Quelques mythes
Un wireframe, ça sert à…
• Documenter tous les aspects d’un site web
• Présenter le concept initial du design de chacun des modèles de
page
• Tester auprès des utilisateurs
• Expérimenter avec plusieurs modèles de navigation et
d’interaction (prototype)
• Extraire et valider une liste de requis pour notre produit
• Établir la priorité de tous nos contenus
• Permettre la révision de nos contenus (textes) dans le contexte
final
• Etc.

34. Mais pourquoi devrais prendre le temps
devrais-je
de créer des wireframes dans le cadre de
mon projet?

35. Objections courantes des clients
• Pas besoin, notre agence de pub/marketing a mis un designer là
là-
dessus. On devrait avoir des maquettes d’ici vendredi.
• Non merci, on n’a pas le temps de faire ça
• Non merci, on n’a pas le budget pour faire ça
• Merci, mais on ne comprend pas ce que vous dites
• Notre équipe interne a développé une « méthodologie » qui a
éliminé cette fâcheuse étape de « planification »
• Pas besoin, notre
designer/rédacteur/programmeur/codeur/intégrateur a déjà
commencé à créer des pages dans notre CMS Whizbang Machin
Web 3.0
• Ça va brimer notre créativité

36. Quelques arguments pour convaincre…
• Processus itératif accessible à tous avec des outils simples (on fait
circuler des PDF, proto Powerpoint ou papier)
• Wireframe = zone de consensus pour l’organisation avec niveau de
risque ($$$) très bas (ratio coût/bénéfice très avantageux)
• Passage au prototype et aux tests d’utilisabilité facile (pas néc. le
cas avec des maquettes; encore moins avec du code)
• « Passage au suivant » optimal : designer, CSS, HTML, backend, sont
plus heureux et donc plus efficaces
• Bonne planification = temps de production réduit
• Coûts de production et entretien subséquents sont réduits
• Wireframe = une fondation sur laquelle s’appuyer et sur laquelle on
peut revenir et itérer
• Wireframes biens faits deviennent un point de référence, un
langage commun pour toute l’équipe (documentation,
identification)

37. Des outils pour créer des wireframes
• Papier et crayon
• Logiciel de dessin vectoriel (Illustrator, SmartDraw, etc.)
• Logiciel graphique (Photoshop)
• Logiciel de dessin technique (Visio Omnigraffle, etc.)
Visio,
• Logiciel spécialisé "on-disk" (Axure Balsamiq, etc.)
Axure,
• Logiciel spécialisé "in-cloud" (MyBalsamiq etc.)
MyBalsamiq,

38. Des outils pour créer des wireframes
• Papier et crayon, tablette
graphique
+ Rapide et itératif
+ Parfait pour développer des
concepts initiaux ou séances de
brainstorm
+ Peu intimidant (ludique)
- Difficile si pas habitude du dessin
- Difficile à transmettre aux autres
membres (à moins de créer avec
tablette graphique ou numériser)
- Peu adapté à la documentation
- Limité au dessin (pas de
prototype)

39. Des outils pour créer des wireframes
• Logiciels de dessin vectoriel
(ex.: Adobe Illustrator)
+ Outil très puissant, fait partie
d’une suite logicielle
+ Intéressant si concepteur est
habitué à cet outil
+ Librairies de modèles UI en
pleine évolution
+ Sert également à produire les
éléments graphiques finaux d’un
site web
- Limité au dessin (pas de fonction
de prototype intégré)
- Difficile à maîtriser si le seul
usage est de faire des wireframes

40. Des outils pour créer des wireframes
• Logiciels de traitement d’image
(ex.: Photoshop)
+ Outil très puissant, fait partie
d’une suite logicielle
+ Intéressant si concepteur est
habitué à cet outil
- Pas du tout adapté aux besoins
vectoriels d’un wireframe
- Réservé aux maquettes
graphiques et éléments
graphiques d’un site web (en
production)

41. Des outils pour créer des wireframes
• Logiciel de dessin technique
(Visio, Omnigraffle, etc.)
+ Des “classiques” dans le domaine
+ Grande variété de modèles UI
(templates) disponibles souvent
gratuitement
+ Fonctions les mieux adaptées aux
besoins
+ Bons pour les workflows
+ Facile de créer des éléments
répétitifs (fonds, nav,
identification, etc.)
- Outil un peu austère et difficile à
maîtriser
- Peu utile pour autres tâches
- Dispendieux

42. Des outils pour créer des wireframes
• Logiciel spécialisé “local"
(Axure, Balsamiq, etc.)
+ Outil complètement dédié à la
tâche
+ Bonne intégration workflows –
wireframes - prototype
+ Fonctions de documentation
+ De plus en plus requis en
entreprise
- Courbe d’apprentissage abrupte
dans certains cas
- Certains produits ont une faible
base d’utilisateurs
- Dispendieux

43. Des outils pour créer des wireframes
• Logiciel spécialisé “nuage"
(MyBalsamiq, etc.)
+ Outil complètement dédié à la
tâche
+ Accessible partout avec
connexion
+ Orienté “esquisse” plutôt que
“haute fidélité”
+ Multi-utilisateur
+ Pas cher
- Certains produits ont une faible
base d’utilisateurs
- Requiert une bonne analyse pour
déterminer si c’est le meilleur
outil (voir mon blogue)

44. Wireframes en HTML ou papier?
HTML (interactifs) Papier (imprimables)
Facilité à créer Logiciels comme Axure permettent la création avec Dépend surtout du niveau de réalisme à atteindre.
un peu d’efforts. Sinon, on doit être très habile avec Très facile d’esquisser sur papier ou même dans un
un logiciel comme Dreamweaver. petit partagiciel de dessin
Mise à jour Changements intra-page sont faciles, mais eut
page Très facile si on utilise un logiciel de dessin; plus de
rapidement devenir complexe si ça touche la travail avec esquisses papier-crayon
navigation ou la structure
Gestion des Facile de conserver des versions antérieures mais
antérieures, Plus facile de démontrer l’évolution d’un concept en
versions difficile de démontrer l’évolution à l’intérieur d’un plaçant versions côte-à-côte. Visio est avantageux à
prototype cet égard avec son système d’onglets.
Gain en temps et Il y a un mythe qui perdure: si on conçoit en HTML, Évidemment aucun avantage pour la production. Par
réutilisation en on sauvera du temps plus tard en production. À peu contre, on peut utiliser les wireframes papier pour
production près jamais vrai, surtout pour sites le moindrement tester, mais rarement sinon jamais le cas.
complexes.
Documentation du Très difficile, voire impossible, d’annoter Les wireframes imprimables sont les champions toute
concept et des correctement les wireframes sans utiliser des catégorie de la l’annotation et documentation.
fonctionnalités subterfuges
Démontrer le Essentiel en 2010 de pouvoir rapidement De moins en moins possible d’utiliser des wireframes
fonctionnement prototyper pour des fonctions de type statiques pour les fonctions avancées.
transactionnelles, web 2.0, ajax, etc. HTML est
,
quasi-essentiel à cet égard.

45. Au fait, qui devrait être responsable de
créer des wireframes?
Architecte de l'information (Ai)?
Spécialiste de l'expérience utilisateur (UX)?
Designer graphique
graphique?
Codeur/intégrateur
intégrateur?
Analyste d'entreprise (biz analyst)?
CEO?
CEO
Dépend essentiellement de la complexité du projet
Mais j'aime à croire que la priorité va à l’Ai ☺

46. Processus différent selon le type de projet
Redesign d'un site informationnel
• Très axé navigation et guidage
• Rédaction informationnelle
• Taxonomie
• SEO
• Moteur recherche interne
• Analytique web (orienté UX, satisfaction, tâche)
Design d'un processus e-commerce
commerce
• Très axé sur procédure
• conversion, funnel
• linéarité
• rédaction marketing
• Analytique web (performance, KPIs, $)

47. Ressources en ligne
Un aperçu très partiel:
http://www.delicious.com/jfpetit/wireframes
twitter: jfpetit
http://www.ideactif.com/blogue/author/jfpetit/
://www.ideactif.com/blogue/author/jfpetit/