Wireframes et prototypes
Pourquoi, quand et comment les et les utiliseret les utiliser
Jean-François PetitDirecteur
Idéactif Conseil
Wireframes et prototypes
et comment les créerutiliserutiliser
François PetitAi et UX
Conseil
Jean-François Petit
• 1990: Premier • 1994: Premier site web • 1995-96: Premiers
Québec (Molson, Bell, Cirque du soleil,
• 1996-98: Cossette
Architecte de l’information (Ai) + homme
• 1996-98: Cossette • 1998-99: International• 2000: Idéactif, première
au Québec• 2010: Premier
twitter: jfpetit http://www.ideactif.com/blogue/author/jfpetit/
1990: Premier compte email 1994: Premier site web conçu
96: Premiers gros sites web au Québec (Molson, Bell, Cirque du
, Gouv. du Québec, etc.)98: Cossette Interactif
homme à tout faire UX
98: Cossette Interactif99: International
2000: Idéactif, première agence UX Québec
2010: Premier cours au HEC
http://www.ideactif.com/blogue/author/jfpetit/
Suis-je le meilleur «planète?
wireframer » sur la
Suis-je le meilleur « wireframerplanète?
J'aimerais croire que oui, mais je sais bien que non...
Résultats sur le mot
4,5 millions sur Google
3000+ sur
10 tweets à l'heure sur Twitter
191 mentions sur
wireframer » sur la
J'aimerais croire que oui, mais je sais bien que non...
Résultats sur le mot-clé « wireframe »
4,5 millions sur Google
3000+ sur Slideshare
à l'heure sur Twitter
191 mentions sur boxesandarrows
http://www.youtube.com/watch?v=QSxFhttp://www.youtube.com/watch?v=QSxF-pISj1w
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?évaluer?• Un outil de documentation?• Un irritant pour l'équipe de
design?
Un wireframe, c'est...
Allons-y pour la définition classique
« 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 • Au Québec, il n’y a pas vraiment de terme traduit en français d’acceptation courante dans le milieu. On dit On entend quelques fois le terme «
• Le GDT le traduit par « vue en fil de ferPas besoin de vous dire que personne n’utilise ces terme couramment…
y pour la définition classique
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 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 ».
vue en fil de fer » ou « schéma filaire ». Pas besoin de vous dire que personne n’utilise ces terme
Composantes d’un wireframe «
Haut de page
Composantes de navigation
Zones de contenu
Pied de page
Composantes d’un wireframe « conceptuel »
Description des contenus
Composantes d’un wireframe «Dimensions (en pixels)
Zones de contenu
Grille graphique au
pixel près
Identification et versions
Contenus réels
Composantes d’un wireframe « haute-fidélité »
Annotations de justification
Annotations fonctionnelles
Identification des éléments
cliquables
Éléments graphiques réalistes (si disponibles)
Identificateur unique pour retrouver dans
l’arborescence
À considérer avant de créer un wireframe
• Le wireframe est un outil qui sert à initiales concernant le design de l’information des «produit
• La portée du wireframe se limite habituellement au la structure. Peut s’étendre à la mise en écran et à certains éléments de design graphique selon les besoins et type de projet.éléments de design graphique selon les besoins et type de projet.
• L’équipe de projet est le public cible 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 projet.
À 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
du wireframe se limite habituellement au contenu et à . Peut s’étendre à la mise en écran et à certains
éléments de design graphique selon les besoins et type de projet.é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.
d’un ensemble de livrables d’un
Quelle place occupe les wireframes parmi les livrables?
• Analyse des requis• Analyse des objectifs affaires• Analyse de la compétition• Inventaire des contenus• Personas/scénarios• Modèle conceptuel
Avant Wireframe
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.
• Modèle conceptuel• Arborescence de site (site
map)• Arborescence de
cheminement (workflows)• Tests UX
Quelle place occupe les wireframes parmi
• Prototypes (lo-fi, hi-fi)• Design graphique/maquettes• Tests UX• Guide de style/règles CSS• Guide de style rédactionnel• Listes de libellés
AprèsWireframe
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
) chez le client et dans l’équipe.
• Listes de libellés• Code (HTML/XHTML/AJAX)
You can use an eraser on the drafting table or a sledgehammer on the construction site. construction site. -Frank Lloyd Wright
You can use an eraser on the
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/
Toute l’histoire est ici.
Première esquisse de Twitter
Première maquette de TwitterPremière maquette de Twitter
Qualités d'un bon wireframe
• Facile à modifier par son auteur• Itératif (avec contrôle des versions • Réaliste (encore là, dépend du type de • Descriptif• Autonome (i.e. peut être interprété• Durable (peut-être compris même• Durable (peut-être compris même• Universel (pas de format de fichier• Facilement communicable (courriel• Facilement identifiable (numérotation• Imprimable• Protégeable si distribué (PDF)
d'un bon wireframe
versions si possible)du type de projet)
interprété en l'absence de son auteur)même plusieurs mois plus tard...)même plusieurs mois plus tard...)fichier “ésotérique”)
courriel, web)numérotation)
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é
Les 3 niveaux d’information
Niveau 2 : ajouter du contexte, des variantes et du détail
Niveau 3 : s’approcher de la réalité
Créer des wireframes 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 – Info administrative : nom du projet, client, date auteur, version, etc.
Créer des wireframes Créer des wireframes – 3 niveaux d’infoNiveau 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, 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?
Créer des wireframes Créer des wireframes – 3 niveaux d’infoNiveau 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 – 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
Créer des wireframes Créer des wireframes – 3 niveaux d’infoNiveau 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 • 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…
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)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.
Documenter tous les aspects d’un site web
Présenter le concept initial du design de chacun des modèles de
Expérimenter avec plusieurs modèles de navigation et
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
Mais pourquoi devraisde créer des wireframes dans le cadre de
mon projet?mon projet?
Mais pourquoi devrais-je prendre le temps de créer des wireframes dans le cadre de
mon projet?mon projet?
Objections courantes des clients
• Pas besoin, notre agence de pub/marketing a mis un designer 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 «éliminé cette fâcheuse étape de «éliminé cette fâcheuse étape de «
• Pas besoin, notre designer/rédacteur/programmeur/codeur/intégrateur a déjà commencé à créer des pages dans notre CMS Web 3.0
• Ça va brimer notre créativité
Objections courantes des clients
Pas besoin, notre agence de pub/marketing a mis un designer 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 »éliminé cette fâcheuse étape de « planification »
designer/rédacteur/programmeur/codeur/intégrateur a déjà commencé à créer des pages dans notre CMS Whizbang Machin
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 cas avec des maquettes; encore moins avec du code)
• « Passage au suivant » optimal : designer, CSS, HTML, • « Passage au suivant » optimal : designer, CSS, HTML, 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)
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)
» optimal : designer, CSS, HTML, backend, sont » 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
Wireframes biens faits deviennent un point de référence, un langage commun pour toute l’équipe (documentation,
Des outils pour créer des wireframes• Papier et crayon• Logiciel de dessin vectoriel (Illustrator, • Logiciel graphique (Photoshop)• Logiciel de dessin technique (Visio• Logiciel spécialisé "on-disk" (Axure• Logiciel spécialisé "in-cloud" (MyBalsamiq
des wireframes
(Illustrator, SmartDraw, etc.)
Visio, Omnigraffle, etc.)Axure, Balsamiq, etc.)MyBalsamiq, etc.)
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)
des wireframes
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 évolutionpleine évolution+ Sert également à produire les
éléments graphiques finaux d’un site web
- Limité au dessin (pas de fonctionde prototype intégré)
- Difficile à maîtriser si le seulusage est de faire des wireframes
des wireframes
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- Pas du tout adapté aux besoinsvectoriels d’un wireframe
- Réservé aux maquettesgraphiques et élémentsgraphiques d’un site web (en production)
des wireframes
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 souventgratuitement
+ Fonctions les mieux adaptées aux besoinsbesoins
+ 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
des wireframes
aux
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 + De plus en plus requis en
entreprise
- Courbe d’apprentissage abruptedans certains cas
- Certains produits ont une faiblebase d’utilisateurs
- Dispendieux
des wireframes
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锓haute fidélité”+ Multi-utilisateur+ Pas cher
- Certains produits ont une faiblebase d’utilisateurs
- Requiert une bonne analyse pour déterminer si c’est le meilleuroutil (voir mon blogue)
des wireframes
pour
Wireframes en HTML
HTML (interactifs)
Facilité à créer Logiciels comme Axure permettent la création avec un peu d’efforts. Sinon, on doit être très habile avec un logiciel comme Dreamweaver.
Mise à jour Changements intra-page sont faciles, mais eut rapidement devenir complexe si ça touche la navigation ou la structure
Gestion des Facile de conserver des versions antérieuresGestion des versions
Facile de conserver des versions antérieuresdifficile de démontrer l’évolution à l’intérieur d’un prototype
Gain en temps et réutilisation en production
Il y a un mythe qui perdure: si on conçoit en HTML, on sauvera du temps plus tard en production. À peu près jamais vrai, surtout pour sites le moindrement complexes.
Documentation du concept et desfonctionnalités
Très difficile, voire impossible, d’annoter correctement les wireframes sans utiliser des subterfuges
Démontrer le fonctionnement
Essentiel en 2010 de pouvoir rapidement prototyper pour des fonctions de type transactionnelles, web 2.0, ajax, etc. HTML est quasi-essentiel à cet égard.
Wireframes en HTML ou papier?
Papier (imprimables)
la création avec un peu d’efforts. Sinon, on doit être très habile avec
Dépend surtout du niveau de réalisme à atteindre. Très facile d’esquisser sur papier ou même dans un petit partagiciel de dessin
page sont faciles, mais eut rapidement devenir complexe si ça touche la
Très facile si on utilise un logiciel de dessin; plus de travail avec esquisses papier-crayon
antérieures, mais Plus facile de démontrer l’évolution d’un concept en antérieures, mais de démontrer l’évolution à l’intérieur d’un
Plus facile de démontrer l’évolution d’un concept en plaçant versions côte-à-côte. Visio est avantageux à cet égard avec son système d’onglets.
Il y a un mythe qui perdure: si on conçoit en HTML, on sauvera du temps plus tard en production. À peu près jamais vrai, surtout pour sites le moindrement
Évidemment aucun avantage pour la production. Par contre, on peut utiliser les wireframes papier pour tester, mais rarement sinon jamais le cas.
utiliser des Les wireframes imprimables sont les champions toute catégorie de la l’annotation et documentation.
, etc. HTML est
De moins en moins possible d’utiliser des wireframes statiques pour les fonctions avancées.
Au fait, qui devrait êtrecréer des wireframes?
Architecte de l'information
Spécialiste de l'expérience
Designer graphique
Codeur/intégrateurCodeur/intégrateurAnalyste d'entreprise
CEO
Dépend essentiellement de la
Mais j'aime à croire que
être responsable de des wireframes?
l'information (Ai)?
l'expérience utilisateur (UX)?
graphique?
intégrateur?intégrateur?d'entreprise (biz analyst)?
CEO?
de la complexité du projet
que la priorité va à l’Ai ☺
Processus différent selon
Redesign d'un site informationnel• Très axé navigation et guidage• Rédaction informationnelle• Taxonomie• SEO• Moteur recherche interne• Analytique web (orienté UX, satisfaction, • Analytique web (orienté UX, satisfaction,
Design d'un processus e-commerce• Très axé sur procédure• conversion, funnel• linéarité• rédaction marketing• Analytique web (performance, KPIs, $)
selon le type de projet
UX, satisfaction, tâche)UX, satisfaction, tâche)
commerce
web (performance, KPIs, $)
Ressources en ligne
Un aperçu très partiel:
http://www.delicious.com/jfpetit/wireframestwitter: jfpetithttp://www.ideactif.com/blogue/author/jfpetit/
ligne
http://www.delicious.com/jfpetit/wireframes
://www.ideactif.com/blogue/author/jfpetit/