SlideShare une entreprise Scribd logo
1  sur  47
Télécharger pour lire hors ligne
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
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/
Suis-je le meilleur « wireframer » sur la
planète?
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
http://www.youtube.com/watch?v=QSxF-pISj1w
http://www.youtube.com/watch?v=QSxF
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?
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…
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 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.
                               )
You can use an eraser on the
drafting table or a
sledgehammer on the
construction site.
 -Frank Lloyd Wright
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/
Première maquette de Twitter
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)
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-je
de 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 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.
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 ☺
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, $)
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/

Contenu connexe

Tendances

Conception et Mise en place d'une Application Web SPA pour les établissements...
Conception et Mise en place d'une Application Web SPA pour les établissements...Conception et Mise en place d'une Application Web SPA pour les établissements...
Conception et Mise en place d'une Application Web SPA pour les établissements...
Ben Ahmed Zohra
 
Analyse des statistiques d'une page facebook
Analyse des statistiques d'une page facebookAnalyse des statistiques d'une page facebook
Analyse des statistiques d'une page facebook
LACT
 

Tendances (20)

Chp1- Introduction aux eServices
Chp1- Introduction aux eServicesChp1- Introduction aux eServices
Chp1- Introduction aux eServices
 
Exercices uml-corrige
Exercices uml-corrigeExercices uml-corrige
Exercices uml-corrige
 
De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)De 0 à Angular en 1h30! (french)
De 0 à Angular en 1h30! (french)
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHT
 
Conception et Mise en place d'une Application Web SPA pour les établissements...
Conception et Mise en place d'une Application Web SPA pour les établissements...Conception et Mise en place d'une Application Web SPA pour les établissements...
Conception et Mise en place d'une Application Web SPA pour les établissements...
 
Analyse des statistiques d'une page facebook
Analyse des statistiques d'une page facebookAnalyse des statistiques d'une page facebook
Analyse des statistiques d'une page facebook
 
Introduction aux Facebook Ads & Instagram Ads
Introduction aux Facebook Ads & Instagram AdsIntroduction aux Facebook Ads & Instagram Ads
Introduction aux Facebook Ads & Instagram Ads
 
Atelier Créer et animer sa page Facebook
Atelier Créer et animer sa page FacebookAtelier Créer et animer sa page Facebook
Atelier Créer et animer sa page Facebook
 
Stratégie éditoriale sur Internet
Stratégie éditoriale sur InternetStratégie éditoriale sur Internet
Stratégie éditoriale sur Internet
 
Web 2.0 : une introduction
Web 2.0 : une introductionWeb 2.0 : une introduction
Web 2.0 : une introduction
 
formation word 2010 partie 1.ppt
formation word 2010 partie 1.pptformation word 2010 partie 1.ppt
formation word 2010 partie 1.ppt
 
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxresume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
 
Etude de cas : nouvelle stratégie digitale pour "Ma Compagnie"
Etude de cas : nouvelle stratégie digitale pour "Ma Compagnie"Etude de cas : nouvelle stratégie digitale pour "Ma Compagnie"
Etude de cas : nouvelle stratégie digitale pour "Ma Compagnie"
 
Cycle de développement du logiciel
Cycle de développement du logicielCycle de développement du logiciel
Cycle de développement du logiciel
 
Cours JavaScript.ppt
Cours JavaScript.pptCours JavaScript.ppt
Cours JavaScript.ppt
 
Creer un site internet sous WordPress
Creer un site internet sous WordPress Creer un site internet sous WordPress
Creer un site internet sous WordPress
 
Le langage sql
Le langage sqlLe langage sql
Le langage sql
 
Chp1 - Introduction au Développement Mobile
Chp1 - Introduction au Développement MobileChp1 - Introduction au Développement Mobile
Chp1 - Introduction au Développement Mobile
 
Cours JavaScript
Cours JavaScriptCours JavaScript
Cours JavaScript
 

En vedette

Protype and test
Protype and testProtype and test
Protype and test
roystonf
 
Prototyping and Testing solutions for Kev!
Prototyping and Testing solutions for Kev!Prototyping and Testing solutions for Kev!
Prototyping and Testing solutions for Kev!
Martín Hoare
 

En vedette (20)

CocoaHeads Toulouse - so!use - Faites vos propres tests utilisateurs
CocoaHeads Toulouse - so!use - Faites vos propres tests utilisateursCocoaHeads Toulouse - so!use - Faites vos propres tests utilisateurs
CocoaHeads Toulouse - so!use - Faites vos propres tests utilisateurs
 
User centered problem solving
User centered problem solvingUser centered problem solving
User centered problem solving
 
Protype and test
Protype and testProtype and test
Protype and test
 
20080429 Epaper Update Lite
20080429 Epaper Update Lite20080429 Epaper Update Lite
20080429 Epaper Update Lite
 
Prix et stock - Optimizze - ERP - V16
Prix et stock - Optimizze - ERP - V16Prix et stock - Optimizze - ERP - V16
Prix et stock - Optimizze - ERP - V16
 
TWS 2014 – Testing paper prototypes
TWS 2014 – Testing paper prototypesTWS 2014 – Testing paper prototypes
TWS 2014 – Testing paper prototypes
 
Tounes Sourcing Consulting 2014
Tounes Sourcing Consulting 2014Tounes Sourcing Consulting 2014
Tounes Sourcing Consulting 2014
 
Why Prototypes Matter: From User Experience to Design Thinking
Why Prototypes Matter: From User Experience to Design ThinkingWhy Prototypes Matter: From User Experience to Design Thinking
Why Prototypes Matter: From User Experience to Design Thinking
 
Prototypes & test
Prototypes & testPrototypes & test
Prototypes & test
 
50 ideas for Kev
50 ideas for Kev 50 ideas for Kev
50 ideas for Kev
 
Protype and test
Protype and testProtype and test
Protype and test
 
Stocks - Biloba
Stocks - BilobaStocks - Biloba
Stocks - Biloba
 
Prototyping and Testing solutions for Kev!
Prototyping and Testing solutions for Kev!Prototyping and Testing solutions for Kev!
Prototyping and Testing solutions for Kev!
 
Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014Maquettes IHM - Présentation USE AGE - 20-02-2014
Maquettes IHM - Présentation USE AGE - 20-02-2014
 
Maquettes & Prototypes
Maquettes & PrototypesMaquettes & Prototypes
Maquettes & Prototypes
 
Première étude sur le testing en France
Première étude sur le testing en FrancePremière étude sur le testing en France
Première étude sur le testing en France
 
Multi-Device Prototypes
Multi-Device PrototypesMulti-Device Prototypes
Multi-Device Prototypes
 
Tests Dinterface SWT
Tests Dinterface SWTTests Dinterface SWT
Tests Dinterface SWT
 
Lessons learned from testing prototypes in real life
Lessons learned from testing prototypes in real lifeLessons learned from testing prototypes in real life
Lessons learned from testing prototypes in real life
 
Prototyping in SL by Cooper Macbeth
Prototyping in SL by Cooper MacbethPrototyping in SL by Cooper Macbeth
Prototyping in SL by Cooper Macbeth
 

Similaire à Wireframes et prototypes - Pourquoi, quand et comment les utiliser

introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projet
laureno
 
La caisse à outils de la visualisation d'informations
La caisse à outils de la visualisation d'informationsLa caisse à outils de la visualisation d'informations
La caisse à outils de la visualisation d'informations
ChristopheTricot
 

Similaire à Wireframes et prototypes - Pourquoi, quand et comment les utiliser (20)

Sem info system_2012
Sem info system_2012Sem info system_2012
Sem info system_2012
 
Proposition de progression
Proposition de progressionProposition de progression
Proposition de progression
 
Introduction Gestion Projet web
Introduction Gestion Projet webIntroduction Gestion Projet web
Introduction Gestion Projet web
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projet
 
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
Comment évaluer la qualité d'un site web selon les techniques d'intégration w...
 
Rubedo premiers pas et concepts
Rubedo premiers pas et conceptsRubedo premiers pas et concepts
Rubedo premiers pas et concepts
 
Semantic Information Systems
Semantic Information SystemsSemantic Information Systems
Semantic Information Systems
 
Créer un moteur de recherche avec des logiciels libres
Créer un moteur de recherche avec des logiciels libresCréer un moteur de recherche avec des logiciels libres
Créer un moteur de recherche avec des logiciels libres
 
Dessin de pages web 536
Dessin de pages web 536Dessin de pages web 536
Dessin de pages web 536
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
 
Développer ses noms de domaine
Développer ses noms de domaineDévelopper ses noms de domaine
Développer ses noms de domaine
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
 
Sharepoint 2010 pour les administrateurs
Sharepoint 2010 pour les administrateursSharepoint 2010 pour les administrateurs
Sharepoint 2010 pour les administrateurs
 
Introduction à l'exploration du Web
Introduction à l'exploration du WebIntroduction à l'exploration du Web
Introduction à l'exploration du Web
 
Descriptif du travail - Fil de fer TIC-Coach
Descriptif du travail - Fil de fer TIC-CoachDescriptif du travail - Fil de fer TIC-Coach
Descriptif du travail - Fil de fer TIC-Coach
 
La caisse à outils de la visualisation d'informations
La caisse à outils de la visualisation d'informationsLa caisse à outils de la visualisation d'informations
La caisse à outils de la visualisation d'informations
 
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
Expresso Rennes Atalante - Html5 / Css3D - 17 sept. 2013
 
Semio web
Semio webSemio web
Semio web
 

Wireframes et prototypes - Pourquoi, quand et comment les utiliser

  • 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
  • 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…
  • 8.
  • 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
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 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/
  • 21.
  • 22.
  • 23.
  • 24.
  • 26.
  • 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/