SlideShare une entreprise Scribd logo
1  sur  74
Télécharger pour lire hors ligne
Design d’intéraction
     Cours #2




Tuesday, September 20, 2011
Avez-vous
      fait vos
      devoirs?


Tuesday, September 20, 2011
Devoir

                                Évaluer 3 designs
                              (Choisir au moins un design d’interface)

                                     Quels sont les objectif(s)

                              Comment auriez-vous innové ce design?




Tuesday, September 20, 2011
Processus de
      design d’un produit



Tuesday, September 20, 2011
Waterfall               (classique)




Tuesday, September 20, 2011
Waterfall




                              http://en.wikipedia.org/wiki/Waterfall_model
Tuesday, September 20, 2011
Waterfall




Tuesday, September 20, 2011
Livrables

                              Requirements
                              ★ Brief (Collecte d'informations)

                              ★ Collecte et analyse des metrics (Données du site)

                              ★ Audit du site (Étude d'utilisabilité des éléments existants)

                              ★ Ethnographie ou entrevues (Définir le profil utilisateurs)

                              ★ Benchmarking (Marché/Concurrence)

                              ★ Card sorting (Le tri par cartes)

Tuesday, September 20, 2011
Livrables

                              UX Design
                              ★ Persona: (Utilisateurs-types)

                              ★ Plans du site et inventaire des contenus / arborescence

                              ★ UseCase (Scénarios d'utilisation)

                              ★ Wireframes (Croquis d'écrans)

                              ★ PDD

                              ★ Test utilisateurs

Tuesday, September 20, 2011
Personas




Tuesday, September 20, 2011
Wireframes




Tuesday, September 20, 2011
PDD                     aka Project Design Document




Tuesday, September 20, 2011
Livrables

                              V Design
                              ★ Brainstorm (collecte d'idées inspirantes)

                              ★ Maquettes graphiques (visualisation précise du résultat final)

                              ★ Itérations

                              ★ Prototypage



Tuesday, September 20, 2011
Livrables

                              Implémentation (Production)
                              ★ Documentation des exigences d’affaires

                              ★ Déclinaisons infographiques

                              ★ Découpage

                              ★ Intégration CSS/HTML

                              ★ Programmation (Back end)


Tuesday, September 20, 2011
Livrables

                              Test / Analyse
                              ★ Environement de test

                              ★ Test utilisateurs

                              ★ Modifications design (ux et v)

                              ★ Déploiement

                              ★ Modifications et tests

                              ★ Mise en ligne

Tuesday, September 20, 2011
Agile




Tuesday, September 20, 2011
UX Agile




                     http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.html


Tuesday, September 20, 2011
UX Agile




                     http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.html


Tuesday, September 20, 2011
Agile




                     http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.html

      http://www.slideshare.net/mgiudice/humancentered-design-meets-agile-development-presentation-625465
Tuesday, September 20, 2011
Glossaire.

Tuesday, September 20, 2011
UX
     [User Experience Design]

     Aspect du design qui répond à comment l’utilisateur va
     utiliser, apprendre, et pecevoir un produit.
     Ce domaine a les rascines dans l’ergonomie et l’aspect
     humain (human factor). L’objectif principal est de créer
     des systèmes entre l’homme et la machine de façon à
     créer une expérience intuitive et productive pour les
     deux. Ce domaine emprunte les lois et principes du
     Human Centered Design.


Tuesday, September 20, 2011
UX Design
     Le design UX est un champ du design d'expérience. Il
     concerne la création des modèles architecturaux et
     interactifs qui affectent l'expérience-utilisateur dans un
     appareil ou un système.

     Étant donné son caractère subjectif, l'expérience-utilisateur ne peut être designée.
     On doit plutôt designer en fonction de l'expérience-utilisateur, en essayant d'activer
     certains types d'expérience. La portée de cette pratique couvre « tous les aspects
     de l'interaction des utilisateurs avec le produit, incluant la façon dont il sera perçu,
     maîtrisé et utilisé. »




Tuesday, September 20, 2011
Ergonomie
     On nomme ergonomie « l'étude scientifique de la relation
     entre l'homme et ses moyens, méthodes et milieux de
     travail » et l'application de ses connaissances à la
     conception de systèmes « qui puissent être utilisés avec le
     maximum de confort, de sécurité et d'efficacité par le plus
     grand nombre. »




Tuesday, September 20, 2011
Tuesday, September 20, 2011
Gabarits
     Le modèle (ou gabarit) permet de construire les pages
     d'un site web selon une trame (un squelette) de page
     identique constituée d'éléments modifiables




Tuesday, September 20, 2011
Patterns
     Les patrons sont des solutions aux problèmes
     communs.




Tuesday, September 20, 2011
Patterns
     Chaque patron a 4 composantes:
           1. un titre
           2. un problème
           3. un contexte
           4. une solution




Tuesday, September 20, 2011
Les patterns
      peuvent être
      combinés
      ensemble

Tuesday, September 20, 2011
Jeu.

Tuesday, September 20, 2011
Dessinez-moi un
                                  Wizywig
Tuesday, September 20, 2011
WYSIWYG
     Problème:

     “Je veux pouvoir écrire du texte et ajouter
     des images, mais je ne sais pas écrire du
     HTML pour le faire.”




Tuesday, September 20, 2011
WYSIWYG
     What You See Is What You Get




Tuesday, September 20, 2011
WYSIWYG
     Solutions apportées:

        • Donner à l’utilisateur une idée du
              résultat final de son intéraction

        • Facilite l’édition du contenu en ligne ainsi
              que sa manipulation




Tuesday, September 20, 2011
Dessinez-moi un
                              Password Strength
                                    Meter
Tuesday, September 20, 2011
Password
      Strength Meter
     Problème:

     “Je veux pouvoir indiquer à mon utilisateur
     que son mot de passe est safe.”




Tuesday, September 20, 2011
Password
      Strength Meter




Tuesday, September 20, 2011
Password
      Strength Meter
     Solutions apportées:

        • Indique clairement à l’utilisateur si le mot
              de passe est assez sécuritaire

        • Informe et sécurise l’utilisateur


Tuesday, September 20, 2011
Dessinez-moi un
                                 caroussel
Tuesday, September 20, 2011
Caroussel
     Problème:

     “Je veux avoir une idée du contenu qu’offre
     ce site.”




Tuesday, September 20, 2011
Caroussel
     Problème:

     “Je veux avoir une idée du contenu qu’offre
     ce site.”

         Attention!
         Personne ne s’exprime comme ça!!!

Tuesday, September 20, 2011
Caroussel




Tuesday, September 20, 2011
Caroussel
     Solutions apportées:

        • Permet d’économiser l’espace sur une
              page et d’offrir une série de contenu
              navigable

        • Facilite la promotion de contenu qui
              autrement n’aurait pas été visible à
              l’utilisateur

Tuesday, September 20, 2011
Dessinez-moi un fil
                                   d’ariane
Tuesday, September 20, 2011
Fil d’ariane            a.k.a Breadcrumb




     Problème:

     “Je veux savoir où je suis dans ce site.”




Tuesday, September 20, 2011
Fil d’ariane            a.k.a Breadcrumb




Tuesday, September 20, 2011
Fil d’ariane              a.k.a Breadcrumb



     Solutions apportées:

        • Permet à l’utilisateur de retrouver son
              chemin

        • Si l’utilisateur arrive sur la page par une
              recherche, il peut naviguer vers des
              sections principales

Tuesday, September 20, 2011
Dessinez-moi un
                                 accordéon
Tuesday, September 20, 2011
Accordéon
     Problème:

     “Je veux pouvoir survoler l’information
     principale d’abord.”

         Attention!
         Personne ne s’exprime comme ça!!!

Tuesday, September 20, 2011
Accordéon




Tuesday, September 20, 2011
Accordéon




Tuesday, September 20, 2011
Accordéon
     Solutions apportées:

        • Permet la navigation rapide et
              thématique

        • Permet d’afficher des options de
              navigation tout en ayant une interface
              épurée

Tuesday, September 20, 2011
Sprint




Tuesday, September 20, 2011
Dessinez-moi un
                              menu déroulant
Tuesday, September 20, 2011
Menu déroulant
      aka dropdown menu (Select)



     Problème:

     “Je veux naviguer ce site facilement.”




Tuesday, September 20, 2011
Menu déroulant
      aka dropdown menu (Select)




Tuesday, September 20, 2011
Dessinez-moi un
                              menu déroulant de
                                 navigation
Tuesday, September 20, 2011
Menu déroulant (nav)
      aka navigational dropdown menu



     Problème:

     “Je veux naviguer ce site facilement.”




Tuesday, September 20, 2011
Menu déroulant (nav)
      aka navigational dropdown menu




Tuesday, September 20, 2011
Dessinez-moi
                               un .toggle()
Tuesday, September 20, 2011
Toggle Check Box        vrs.




Tuesday, September 20, 2011
Toggle Check Box        vrs.

     l’un ou l’autre                 peut être l’un et l’autre




Tuesday, September 20, 2011
Arbo.

Tuesday, September 20, 2011
Arbo.                                                                                  Web	
  site	
  :	
  Accueil                                 Recherche




            Groupe	
  d’informa7on	
  A                          Groupe	
  d’informa7on	
  B                                 Groupe	
  d’informa7on	
  C                                 Groupe	
  d’informa7on	
  D




                                                                        Sec7on	
  B1                                                Sec7on	
  C1
                                                                                               Thèmes	
  communs


  Sous-­‐groupe	
  A1                     Sous-­‐groupe	
  A2                                                                                                          Sous-­‐groupe	
  D1           Sous-­‐groupe	
  D2
                                                                                                     Thèmes	
  1

                                                                        Sec7on	
  B2                                                Sec7on	
  C2

                                                                                                     Thèmes	
  2
                                             Sec7on	
  A2                                                                                                                 Sec7on	
  D1


                                                                                                     Thèmes	
  3
                                                                                                                                    Sec7on	
  C3

                                                                                                                                                                         Sec7on	
  D1’
                                                                                                     Thèmes	
  4




                                               Forum	
  de	
  
             Communauté                                          UGC
                                              conversa7on



Tuesday, September 20, 2011
Navigation principale
       L’objectif de cet exercice :

       ★         Organiser le contenu principal

       ★         S’addresser au 80% des utilisateurs

       ★         Avoir un objectif principale



                                                                    Web	
  site	
  :	
  Accueil                                 Recherche




        Groupe	
  d’informa7on	
  A   Groupe	
  d’informa7on	
  B                                 Groupe	
  d’informa7on	
  C               Groupe	
  d’informa7on	
  D




Tuesday, September 20, 2011
Navigation secondaire




Tuesday, September 20, 2011
Navigation secondaire
                 L’objectif de cet exercice :

                 ★      Trouver	
  l’informa7on	
  clé	
  à	
  travers	
  tout	
  le	
  site

                 ★      Contenir	
  des	
  sec7ons	
  cachées	
  (les	
  meLre	
  de	
  l’avant)

                 ★      Créer	
  des	
  liens	
  vers	
  les	
  sites	
  partenaires	
  (ou	
  des	
  sites	
  externes)




Tuesday, September 20, 2011
Audit du
      contenu



Tuesday, September 20, 2011
Audit de contenu
                              L’objectif de cet exercice :

                              ★   Connaître le contenu

                              ★   Créer des liens entre différentes sections

                              ★   Comprendre la dynamique du site

                              ★   Comprendre comment ce site ce construit

                              ★   Regroupement des grands contenus

                              ★   “Card sorting”




Tuesday, September 20, 2011
Audit de contenu
   ★      Arborescence principale : Accueil, Société,
          musique, ...

   ★      Arborescence secondaire correspondant

   ★      Détail du contenu (type, mise à jour)

   ★      Détail des éléments répétitifs ou
          confondants




Tuesday, September 20, 2011
Tri de carte




Tuesday, September 20, 2011
Tri de carte
                              L’objectif de cet exercice :

                              ★   Regrouper le contenu sous de grande
                                  catégorie

                              ★   Permettre de classer les éléments de
                                  navigation

                              ★   Créer ou découvrir de nouvelles catégorie
                                  lors de la réorganisation de l’arborescence
                                  d’un site




Tuesday, September 20, 2011
Tri de carte
                                                 Deux méthodes possibles:

                                                 ★   Première: Inviter un groupe à classer par
                                                     catégorie non définit les différentes parties
                                                     de contenu d’un site

                                                 ★   Deuxième: Inviter un groupe à classer selon
                                                     des catégories définies les différentes
                                                     parties de contenu d’un site




                              http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide


Tuesday, September 20, 2011
À vous de
      jouer!



Tuesday, September 20, 2011
Atelier

                      Design et organisation 1
                                   http://www.maisoncorbeil.com

                                 Faire un audit de contenu détaillé

                              Préparer les éléments pour un tri de carte en groupe la
                                               semaine prochaine




Tuesday, September 20, 2011

Contenu connexe

Similaire à Cour2 Design d'interaction

Dessin de pages web 536
Dessin de pages web 536Dessin de pages web 536
Dessin de pages web 536quickredfox
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Olivier Dommange
 
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2bduverneuil
 
Storyboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and ToolsStoryboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and ToolsEric DI POL
 
Les nouveautés de Visual Studio 11
Les nouveautés de Visual Studio 11Les nouveautés de Visual Studio 11
Les nouveautés de Visual Studio 11Microsoft
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...SOAT
 
Fake it ('till you make it)
Fake it ('till you make it)Fake it ('till you make it)
Fake it ('till you make it)Rémi Delhaye
 
OBJIS Congo présente 10 reperes cle du developpeur java
OBJIS Congo présente 10 reperes cle du developpeur javaOBJIS Congo présente 10 reperes cle du developpeur java
OBJIS Congo présente 10 reperes cle du developpeur javaDouglas MBIANDOU
 
Agile Tour Nantes 2011 - Jean philippe gouigoux - architecture et agilité, ré...
Agile Tour Nantes 2011 - Jean philippe gouigoux - architecture et agilité, ré...Agile Tour Nantes 2011 - Jean philippe gouigoux - architecture et agilité, ré...
Agile Tour Nantes 2011 - Jean philippe gouigoux - architecture et agilité, ré...Association Agile Nantes
 
Propulsez votre architecture grâce au TDD et aux mocks (Agile Québec 2013)
Propulsez votre architecture grâce au TDD et aux mocks (Agile Québec 2013)Propulsez votre architecture grâce au TDD et aux mocks (Agile Québec 2013)
Propulsez votre architecture grâce au TDD et aux mocks (Agile Québec 2013)Elapse Technologies
 
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019Oeil de Coach
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsOlivier Dommange
 
JUS 2001 - Maillage d'un béton avec Microgen
JUS 2001 - Maillage d'un béton avec MicrogenJUS 2001 - Maillage d'un béton avec Microgen
JUS 2001 - Maillage d'un béton avec MicrogenOpenCascade
 
Ergonomie : performance et satisfaction de nos clients
Ergonomie : performance et satisfaction de nos clientsErgonomie : performance et satisfaction de nos clients
Ergonomie : performance et satisfaction de nos clientsLaurence Vagner
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09Claude Coulombe
 
ppt_site_web_streaming.pptx
ppt_site_web_streaming.pptxppt_site_web_streaming.pptx
ppt_site_web_streaming.pptxnesrine haloui
 
Mappingobjetrelationnel[1]
Mappingobjetrelationnel[1]Mappingobjetrelationnel[1]
Mappingobjetrelationnel[1]linasafaa
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projetlaureno
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projetlaureno
 

Similaire à Cour2 Design d'interaction (20)

Dessin de pages web 536
Dessin de pages web 536Dessin de pages web 536
Dessin de pages web 536
 
Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015Webdesign sites web et mobiles-tendances 2015
Webdesign sites web et mobiles-tendances 2015
 
Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2Webdesign Passe Present et Present Part2
Webdesign Passe Present et Present Part2
 
test
testtest
test
 
Storyboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and ToolsStoryboarding for the web : Methodology and Tools
Storyboarding for the web : Methodology and Tools
 
Les nouveautés de Visual Studio 11
Les nouveautés de Visual Studio 11Les nouveautés de Visual Studio 11
Les nouveautés de Visual Studio 11
 
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
L'impact du Responsive Web Design sur vos équipes projet - Mathieu Parisot - ...
 
Fake it ('till you make it)
Fake it ('till you make it)Fake it ('till you make it)
Fake it ('till you make it)
 
OBJIS Congo présente 10 reperes cle du developpeur java
OBJIS Congo présente 10 reperes cle du developpeur javaOBJIS Congo présente 10 reperes cle du developpeur java
OBJIS Congo présente 10 reperes cle du developpeur java
 
Agile Tour Nantes 2011 - Jean philippe gouigoux - architecture et agilité, ré...
Agile Tour Nantes 2011 - Jean philippe gouigoux - architecture et agilité, ré...Agile Tour Nantes 2011 - Jean philippe gouigoux - architecture et agilité, ré...
Agile Tour Nantes 2011 - Jean philippe gouigoux - architecture et agilité, ré...
 
Propulsez votre architecture grâce au TDD et aux mocks (Agile Québec 2013)
Propulsez votre architecture grâce au TDD et aux mocks (Agile Québec 2013)Propulsez votre architecture grâce au TDD et aux mocks (Agile Québec 2013)
Propulsez votre architecture grâce au TDD et aux mocks (Agile Québec 2013)
 
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
Mieux rediger-les-user-stories-bonnes-pratiques-oeildecoach 2019
 
Webdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outilsWebdesign sites web et mobiles-methodes-realisation-outils
Webdesign sites web et mobiles-methodes-realisation-outils
 
JUS 2001 - Maillage d'un béton avec Microgen
JUS 2001 - Maillage d'un béton avec MicrogenJUS 2001 - Maillage d'un béton avec Microgen
JUS 2001 - Maillage d'un béton avec Microgen
 
Ergonomie : performance et satisfaction de nos clients
Ergonomie : performance et satisfaction de nos clientsErgonomie : performance et satisfaction de nos clients
Ergonomie : performance et satisfaction de nos clients
 
jQuery GTI780 & MTI780 ETS A09
jQuery   GTI780 & MTI780   ETS   A09jQuery   GTI780 & MTI780   ETS   A09
jQuery GTI780 & MTI780 ETS A09
 
ppt_site_web_streaming.pptx
ppt_site_web_streaming.pptxppt_site_web_streaming.pptx
ppt_site_web_streaming.pptx
 
Mappingobjetrelationnel[1]
Mappingobjetrelationnel[1]Mappingobjetrelationnel[1]
Mappingobjetrelationnel[1]
 
introduction à la gestion de projet
introduction à la gestion de projetintroduction à la gestion de projet
introduction à la gestion de projet
 
Introduction à la gestion de projet
Introduction à la gestion de projetIntroduction à la gestion de projet
Introduction à la gestion de projet
 

Cour2 Design d'interaction

  • 1. Design d’intéraction Cours #2 Tuesday, September 20, 2011
  • 2. Avez-vous fait vos devoirs? Tuesday, September 20, 2011
  • 3. Devoir Évaluer 3 designs (Choisir au moins un design d’interface) Quels sont les objectif(s) Comment auriez-vous innové ce design? Tuesday, September 20, 2011
  • 4. Processus de design d’un produit Tuesday, September 20, 2011
  • 5. Waterfall (classique) Tuesday, September 20, 2011
  • 6. Waterfall http://en.wikipedia.org/wiki/Waterfall_model Tuesday, September 20, 2011
  • 8. Livrables Requirements ★ Brief (Collecte d'informations) ★ Collecte et analyse des metrics (Données du site) ★ Audit du site (Étude d'utilisabilité des éléments existants) ★ Ethnographie ou entrevues (Définir le profil utilisateurs) ★ Benchmarking (Marché/Concurrence) ★ Card sorting (Le tri par cartes) Tuesday, September 20, 2011
  • 9. Livrables UX Design ★ Persona: (Utilisateurs-types) ★ Plans du site et inventaire des contenus / arborescence ★ UseCase (Scénarios d'utilisation) ★ Wireframes (Croquis d'écrans) ★ PDD ★ Test utilisateurs Tuesday, September 20, 2011
  • 12. PDD aka Project Design Document Tuesday, September 20, 2011
  • 13. Livrables V Design ★ Brainstorm (collecte d'idées inspirantes) ★ Maquettes graphiques (visualisation précise du résultat final) ★ Itérations ★ Prototypage Tuesday, September 20, 2011
  • 14. Livrables Implémentation (Production) ★ Documentation des exigences d’affaires ★ Déclinaisons infographiques ★ Découpage ★ Intégration CSS/HTML ★ Programmation (Back end) Tuesday, September 20, 2011
  • 15. Livrables Test / Analyse ★ Environement de test ★ Test utilisateurs ★ Modifications design (ux et v) ★ Déploiement ★ Modifications et tests ★ Mise en ligne Tuesday, September 20, 2011
  • 17. UX Agile http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.html Tuesday, September 20, 2011
  • 18. UX Agile http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.html Tuesday, September 20, 2011
  • 19. Agile http://www.agileproductdesign.com/blog/emerging_best_agile_ux_practice.html http://www.slideshare.net/mgiudice/humancentered-design-meets-agile-development-presentation-625465 Tuesday, September 20, 2011
  • 21. UX [User Experience Design] Aspect du design qui répond à comment l’utilisateur va utiliser, apprendre, et pecevoir un produit. Ce domaine a les rascines dans l’ergonomie et l’aspect humain (human factor). L’objectif principal est de créer des systèmes entre l’homme et la machine de façon à créer une expérience intuitive et productive pour les deux. Ce domaine emprunte les lois et principes du Human Centered Design. Tuesday, September 20, 2011
  • 22. UX Design Le design UX est un champ du design d'expérience. Il concerne la création des modèles architecturaux et interactifs qui affectent l'expérience-utilisateur dans un appareil ou un système. Étant donné son caractère subjectif, l'expérience-utilisateur ne peut être designée. On doit plutôt designer en fonction de l'expérience-utilisateur, en essayant d'activer certains types d'expérience. La portée de cette pratique couvre « tous les aspects de l'interaction des utilisateurs avec le produit, incluant la façon dont il sera perçu, maîtrisé et utilisé. » Tuesday, September 20, 2011
  • 23. Ergonomie On nomme ergonomie « l'étude scientifique de la relation entre l'homme et ses moyens, méthodes et milieux de travail » et l'application de ses connaissances à la conception de systèmes « qui puissent être utilisés avec le maximum de confort, de sécurité et d'efficacité par le plus grand nombre. » Tuesday, September 20, 2011
  • 25. Gabarits Le modèle (ou gabarit) permet de construire les pages d'un site web selon une trame (un squelette) de page identique constituée d'éléments modifiables Tuesday, September 20, 2011
  • 26. Patterns Les patrons sont des solutions aux problèmes communs. Tuesday, September 20, 2011
  • 27. Patterns Chaque patron a 4 composantes: 1. un titre 2. un problème 3. un contexte 4. une solution Tuesday, September 20, 2011
  • 28. Les patterns peuvent être combinés ensemble Tuesday, September 20, 2011
  • 30. Dessinez-moi un Wizywig Tuesday, September 20, 2011
  • 31. WYSIWYG Problème: “Je veux pouvoir écrire du texte et ajouter des images, mais je ne sais pas écrire du HTML pour le faire.” Tuesday, September 20, 2011
  • 32. WYSIWYG What You See Is What You Get Tuesday, September 20, 2011
  • 33. WYSIWYG Solutions apportées: • Donner à l’utilisateur une idée du résultat final de son intéraction • Facilite l’édition du contenu en ligne ainsi que sa manipulation Tuesday, September 20, 2011
  • 34. Dessinez-moi un Password Strength Meter Tuesday, September 20, 2011
  • 35. Password Strength Meter Problème: “Je veux pouvoir indiquer à mon utilisateur que son mot de passe est safe.” Tuesday, September 20, 2011
  • 36. Password Strength Meter Tuesday, September 20, 2011
  • 37. Password Strength Meter Solutions apportées: • Indique clairement à l’utilisateur si le mot de passe est assez sécuritaire • Informe et sécurise l’utilisateur Tuesday, September 20, 2011
  • 38. Dessinez-moi un caroussel Tuesday, September 20, 2011
  • 39. Caroussel Problème: “Je veux avoir une idée du contenu qu’offre ce site.” Tuesday, September 20, 2011
  • 40. Caroussel Problème: “Je veux avoir une idée du contenu qu’offre ce site.” Attention! Personne ne s’exprime comme ça!!! Tuesday, September 20, 2011
  • 42. Caroussel Solutions apportées: • Permet d’économiser l’espace sur une page et d’offrir une série de contenu navigable • Facilite la promotion de contenu qui autrement n’aurait pas été visible à l’utilisateur Tuesday, September 20, 2011
  • 43. Dessinez-moi un fil d’ariane Tuesday, September 20, 2011
  • 44. Fil d’ariane a.k.a Breadcrumb Problème: “Je veux savoir où je suis dans ce site.” Tuesday, September 20, 2011
  • 45. Fil d’ariane a.k.a Breadcrumb Tuesday, September 20, 2011
  • 46. Fil d’ariane a.k.a Breadcrumb Solutions apportées: • Permet à l’utilisateur de retrouver son chemin • Si l’utilisateur arrive sur la page par une recherche, il peut naviguer vers des sections principales Tuesday, September 20, 2011
  • 47. Dessinez-moi un accordéon Tuesday, September 20, 2011
  • 48. Accordéon Problème: “Je veux pouvoir survoler l’information principale d’abord.” Attention! Personne ne s’exprime comme ça!!! Tuesday, September 20, 2011
  • 51. Accordéon Solutions apportées: • Permet la navigation rapide et thématique • Permet d’afficher des options de navigation tout en ayant une interface épurée Tuesday, September 20, 2011
  • 53. Dessinez-moi un menu déroulant Tuesday, September 20, 2011
  • 54. Menu déroulant aka dropdown menu (Select) Problème: “Je veux naviguer ce site facilement.” Tuesday, September 20, 2011
  • 55. Menu déroulant aka dropdown menu (Select) Tuesday, September 20, 2011
  • 56. Dessinez-moi un menu déroulant de navigation Tuesday, September 20, 2011
  • 57. Menu déroulant (nav) aka navigational dropdown menu Problème: “Je veux naviguer ce site facilement.” Tuesday, September 20, 2011
  • 58. Menu déroulant (nav) aka navigational dropdown menu Tuesday, September 20, 2011
  • 59. Dessinez-moi un .toggle() Tuesday, September 20, 2011
  • 60. Toggle Check Box vrs. Tuesday, September 20, 2011
  • 61. Toggle Check Box vrs. l’un ou l’autre peut être l’un et l’autre Tuesday, September 20, 2011
  • 63. Arbo. Web  site  :  Accueil Recherche Groupe  d’informa7on  A Groupe  d’informa7on  B Groupe  d’informa7on  C Groupe  d’informa7on  D Sec7on  B1 Sec7on  C1 Thèmes  communs Sous-­‐groupe  A1 Sous-­‐groupe  A2 Sous-­‐groupe  D1 Sous-­‐groupe  D2 Thèmes  1 Sec7on  B2 Sec7on  C2 Thèmes  2 Sec7on  A2 Sec7on  D1 Thèmes  3 Sec7on  C3 Sec7on  D1’ Thèmes  4 Forum  de   Communauté UGC conversa7on Tuesday, September 20, 2011
  • 64. Navigation principale L’objectif de cet exercice : ★ Organiser le contenu principal ★ S’addresser au 80% des utilisateurs ★ Avoir un objectif principale Web  site  :  Accueil Recherche Groupe  d’informa7on  A Groupe  d’informa7on  B Groupe  d’informa7on  C Groupe  d’informa7on  D Tuesday, September 20, 2011
  • 66. Navigation secondaire L’objectif de cet exercice : ★ Trouver  l’informa7on  clé  à  travers  tout  le  site ★ Contenir  des  sec7ons  cachées  (les  meLre  de  l’avant) ★ Créer  des  liens  vers  les  sites  partenaires  (ou  des  sites  externes) Tuesday, September 20, 2011
  • 67. Audit du contenu Tuesday, September 20, 2011
  • 68. Audit de contenu L’objectif de cet exercice : ★ Connaître le contenu ★ Créer des liens entre différentes sections ★ Comprendre la dynamique du site ★ Comprendre comment ce site ce construit ★ Regroupement des grands contenus ★ “Card sorting” Tuesday, September 20, 2011
  • 69. Audit de contenu ★ Arborescence principale : Accueil, Société, musique, ... ★ Arborescence secondaire correspondant ★ Détail du contenu (type, mise à jour) ★ Détail des éléments répétitifs ou confondants Tuesday, September 20, 2011
  • 70. Tri de carte Tuesday, September 20, 2011
  • 71. Tri de carte L’objectif de cet exercice : ★ Regrouper le contenu sous de grande catégorie ★ Permettre de classer les éléments de navigation ★ Créer ou découvrir de nouvelles catégorie lors de la réorganisation de l’arborescence d’un site Tuesday, September 20, 2011
  • 72. Tri de carte Deux méthodes possibles: ★ Première: Inviter un groupe à classer par catégorie non définit les différentes parties de contenu d’un site ★ Deuxième: Inviter un groupe à classer selon des catégories définies les différentes parties de contenu d’un site http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide Tuesday, September 20, 2011
  • 73. À vous de jouer! Tuesday, September 20, 2011
  • 74. Atelier Design et organisation 1 http://www.maisoncorbeil.com Faire un audit de contenu détaillé Préparer les éléments pour un tri de carte en groupe la semaine prochaine Tuesday, September 20, 2011