Wireframes et prototypes - Pourquoi, quand et comment les utiliser

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

Jean-François PetitArchitecte 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 HECtwitter: jfpetit http://www.ideactif.com/blogue/author/jfpetit/

Suis-je le meilleur « wireframer » sur laplanète?

Suis-je le meilleur « wireframer » sur laplanète? Jaimerais 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 à lheure sur Twitter 191 mentions sur boxesandarrows

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

Un wireframe, cest...• Une page web dessinée?• Un plan?• Un prototype?• Un outil de communication et de consensus?• Une idée quil faut tester et évaluer?• Un outil de documentation?• Un irritant pour léquipe de design?

Un wireframe, cest... 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…

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

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

À 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.

Quelle place occupe les wireframes parmiles 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 UXWireframe = phase critique d’un projet Web durant laquelle on passedes données abstraites à la première mise en forme concrète, i.e. quipeut générer des émotions (+/-) chez le client et dans l’équipe. )

You can use an eraser on thedrafting table or asledgehammer on theconstruction site. -Frank Lloyd Wright

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

Première maquette de Twitter

Qualités dun 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 labsence 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)

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é

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.

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?

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

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…

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.

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

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é

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)

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,

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 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

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)

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

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

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)

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 dessinMise à 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 structureGestion des Facile de conserver des versions antérieures mais antérieures, Plus facile de démontrer l’évolution d’un concept enversions 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. Parréutilisation en on sauvera du temps plus tard en production. À peu contre, on peut utiliser les wireframes papier pourproduction 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 touteconcept et des correctement les wireframes sans utiliser des catégorie de la l’annotation et documentation.fonctionnalités subterfugesDémontrer le Essentiel en 2010 de pouvoir rapidement De moins en moins possible d’utiliser des wireframesfonctionnement prototyper pour des fonctions de type statiques pour les fonctions avancées. transactionnelles, web 2.0, ajax, etc. HTML est , quasi-essentiel à cet égard.

Au fait, qui devrait être responsable decréer des wireframes? Architecte de linformation (Ai)? Spécialiste de lexpérience utilisateur (UX)? Designer graphique graphique? Codeur/intégrateur intégrateur? Analyste dentreprise (biz analyst)? CEO? CEO Dépend essentiellement de la complexité du projet Mais jaime à croire que la priorité va à l’Ai ☺

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

Ressources en ligneUn aperçu très partiel:http://www.delicious.com/jfpetit/wireframestwitter: jfpetithttp://www.ideactif.com/blogue/author/jfpetit/ ://www.ideactif.com/blogue/author/jfpetit/

Wireframes et prototypes - Pourquoi, quand et comment les utiliser

by nathalieberger on Apr 04, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 380

Statistics

Wireframes et prototypes - Pourquoi, quand et comment les utiliser — Presentation Transcript

http://www.ideactif.com	379
http://www.slideshare.net	1