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/