CONFÉRENCE UX                        INITIATION ET TOUR D’HORIZON                         Par Timothée ROUSSILHE - Synerg’...
QUI SUIS-JE?                       Étudiant en H4 à HETIC                       Responsable projets à Synerg’hetic        ...
POURQUOI CETTE                        CONFÉRENCE ?lundi 19 novembre 12
C’EST QUOI L’EXPÉRIENCE                             UTILISATEUR?lundi 19 novembre 12
L’UX C’EST QUOI ?                                     POURQUOI                         QUOI                       QUAND   ...
MAIS AUSSI :                                        POURQUOI                           QUOI                               ...
DÉFINITION :                       UX : Tout ce qui affecte linteraction                       d’un utilisateur avec le pr...
DÉFINITION :                        BESOIN            BESOIN                       BUSINESS   UX         DE               ...
WHIT GREAT UX DESIGN COMES GREAT RESPONSIBILITY !lundi 19 novembre 12
POURQUOI L’UX C’EST                          IMPORTANT?lundi 19 novembre 12
L’UX VA NOUS PERMETTRE DE RÉPONDRE AU BESOIN DE L’UTILISATEUR                       LE WEB CHANGE ET SE COMPLEXIFIE, LE NO...
L’UX est devenu un élément différenciant qui peut faire le succès d’un service ou d’un site.  Exemples :lundi 19 novembre 12
5 RAISONS DE SE METTRE À                                L’UX !lundi 19 novembre 12
VOUS ÊTES DÉJÀ EN TRAIN D’EN FAIRE                       C’EST UN PROCESS                       C’EST PAS DIFFICILE       ...
5 COMPÉTENCES QUI FONT UN                        BON UX DESIGNER.lundi 19 novembre 12
CROQUIS                       STORYTELLING                       LA CRITIQUE                       PRÉSENTER              ...
C’EST QUOICONCRETEMENTL’UX ?lundi 19 novembre 12
lundi 19 novembre 12
FAUXlundi 19 novembre 12
EN                       PARTIElundi 19 novembre 12                        FAUX
ÉLÉMENTS DE L’UX                                              SURFACE                                            Design vi...
STRATÉGIE                       DEUX QUESTIONS À SE POSER :                       Quels sont les objectifs du produit.    ...
OBJECTIFS DU PRODUIT    Objectifs de l’entreprise    Identité de la marque    Mesurer lefficacitélundi 19 novembre 12
ATTENTES DES UTILISATEURS    Segmentation des utilisateurs    Utilisabilité et recherche   Personas & customer journeylund...
FOCUS : PERSONA       DÉFINITION       AVANTAGES       Définir des hypothèses       Concentrer son attention sur l’utilisat...
lundi 19 novembre 12
lundi 19 novembre 12
SCOPE                       DÉFINIR LE CONTENU ET FONCTIONNALITÉS.lundi 19 novembre 12
STRUCTURE                       Design d’interaction & Architecture de l’information                               FONCTIO...
DESIGN D’INTERACTION       1980       Émergence du numérique auprès du grand public       Nécessité de simplifier les inter...
ARCHITECTURE DE L’INFORMATION       DÉFINITION       4 COMPOSANTES DE L’AI :       L’organisation des contenus       Défini...
ARCHITECTURE DE L’INFORMATION :  CAS CONCRET                       LE CAS DE LA CARTE D’EMBARQUEMENT                      ...
ARCHITECTURE DE L’INFORMATION :  CAS CONCRET                                    http://passfail.squarespace.com/lundi 19 n...
ARCHITECTURE DE L’INFORMATION :  CAS CONCRET                                    http://passfail.squarespace.com/lundi 19 n...
ARCHITECTURE DE L’INFORMATION :  CAS CONCRET                                    http://passfail.squarespace.com/lundi 19 n...
ARCHITECTURE DE L’INFORMATION :  CAS CONCRET                                    http://passfail.squarespace.com/lundi 19 n...
ARCHITECTURE DE L’INFORMATION :  CAS CONCRET                                    http://passfail.squarespace.com/lundi 19 n...
ARCHITECTURE DE L’INFORMATION :  CAS CONCRET                                    http://passfail.squarespace.com/lundi 19 n...
OSSATURE                         Design d’interface                       + Design de navigation                       + D...
OSSATURE : ZONNING & WIREFRAME                                                                                    Meilleur...
OSSATURE : ZONNING & WIREFRAMElundi 19 novembre 12
OSSATURE : SCÉNARIOlundi 19 novembre 12
OSATURE : SCÉNARIOlundi 19 novembre 12
OSSATURE : PROTOTYPE                       LE RÔLE D’UN UX DESIGNER ET DE CONCEVOIR PUIS DE TESTER                        ...
TEST UTILISATEUR   DEUX TYPES DE TEST UTILISATEURS :                                       QUALITATIF              QUANTIT...
LES OUTILS   BALSAMIQ MOCKUP          ILLUSTRATOR             OMNIGRAFFLE                  MOCKINGBIRD  Simplicité        ...
LES OUTILS : Prototype                AXURE    HTML ( Twitter Bootstrap)       Proto.io            Codiqua  Outil complexe...
RÉSUMÉ ET LIVRABLES                       PRÉSENTATION                                                                    ...
RESSOURCES BLOG GÉNÉRALISTES :      http://uxdesign.smashingmagazine.com/      http://www.uxmag.com/      http://www.uxboo...
RESSOURCES  LIVRESlundi 19 novembre 12
MERCI DE VOTRE                         ATTENTIONlundi 19 novembre 12
Upcoming SlideShare
Loading in...5
×

Formation UX Design, introduction et tour d'horizon

5,665

Published on

Formation UX Design (User eXperience Design) du 19 novembre 2012 organisée par Synerg'hetic et animée par Timothée Roussilhe, étudiant en 4e année à HETIC.

Published in: Design
0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,665
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
238
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

Formation UX Design, introduction et tour d'horizon

  1. 1. CONFÉRENCE UX INITIATION ET TOUR D’HORIZON Par Timothée ROUSSILHE - Synerg’heticlundi 19 novembre 12
  2. 2. QUI SUIS-JE? Étudiant en H4 à HETIC Responsable projets à Synerg’hetic Stage chez DDB en stratégie. Intérêt pour l’ UX, la technique et le processus créatif. @timroussilhe timothee-roussilhe.comlundi 19 novembre 12
  3. 3. POURQUOI CETTE CONFÉRENCE ?lundi 19 novembre 12
  4. 4. C’EST QUOI L’EXPÉRIENCE UTILISATEUR?lundi 19 novembre 12
  5. 5. L’UX C’EST QUOI ? POURQUOI QUOI QUAND COMMENT OU UTILISE-T’ON NOTRE PRODUIT?lundi 19 novembre 12
  6. 6. MAIS AUSSI : POURQUOI QUOI QUI QUAND COMMENT OUlundi 19 novembre 12 UTILISE NOTRE PRODUIT?
  7. 7. DÉFINITION : UX : Tout ce qui affecte linteraction d’un utilisateur avec le produit. USER CENTRIC DESIGNlundi 19 novembre 12
  8. 8. DÉFINITION : BESOIN BESOIN BUSINESS UX DE L’UTILISATEURlundi 19 novembre 12
  9. 9. WHIT GREAT UX DESIGN COMES GREAT RESPONSIBILITY !lundi 19 novembre 12
  10. 10. POURQUOI L’UX C’EST IMPORTANT?lundi 19 novembre 12
  11. 11. L’UX VA NOUS PERMETTRE DE RÉPONDRE AU BESOIN DE L’UTILISATEUR LE WEB CHANGE ET SE COMPLEXIFIE, LE NOMBRE DE DEVICES SE MULTIPLIE CELA VA PERMETTRE D’AMELIORER NOTRE PRODUIT : Taux de conversion Taux d’enregistrement Le nombre d’abandon Augmenter le taux d’utilisation du produit Sauver du temps Réduire les erreurslundi 19 novembre 12
  12. 12. L’UX est devenu un élément différenciant qui peut faire le succès d’un service ou d’un site. Exemples :lundi 19 novembre 12
  13. 13. 5 RAISONS DE SE METTRE À L’UX !lundi 19 novembre 12
  14. 14. VOUS ÊTES DÉJÀ EN TRAIN D’EN FAIRE C’EST UN PROCESS C’EST PAS DIFFICILE C’EST FUN HETIC EST UNE BONNE PLACE POUR DEVENIR UX DESIGNERlundi 19 novembre 12
  15. 15. 5 COMPÉTENCES QUI FONT UN BON UX DESIGNER.lundi 19 novembre 12
  16. 16. CROQUIS STORYTELLING LA CRITIQUE PRÉSENTER FACILITER Le  meilleur  ami   de  l’UX  designerlundi 19 novembre 12
  17. 17. C’EST QUOICONCRETEMENTL’UX ?lundi 19 novembre 12
  18. 18. lundi 19 novembre 12
  19. 19. FAUXlundi 19 novembre 12
  20. 20. EN PARTIElundi 19 novembre 12 FAUX
  21. 21. ÉLÉMENTS DE L’UX SURFACE Design visuel OSSATURE Design d’interface Design de navigation Design de l’information STRUCTURE Design d’interaction Architecture de l’information SCOPE Spécifications fonctionnelles Contenu STRATÉGIE Stratégie Objectifs du produits Études et attentes des utilisateurslundi 19 novembre 12
  22. 22. STRATÉGIE DEUX QUESTIONS À SE POSER : Quels sont les objectifs du produit. Quels sont les attentes de l’utilisateur.lundi 19 novembre 12
  23. 23. OBJECTIFS DU PRODUIT Objectifs de l’entreprise Identité de la marque Mesurer lefficacitélundi 19 novembre 12
  24. 24. ATTENTES DES UTILISATEURS Segmentation des utilisateurs Utilisabilité et recherche Personas & customer journeylundi 19 novembre 12
  25. 25. FOCUS : PERSONA DÉFINITION AVANTAGES Définir des hypothèses Concentrer son attention sur l’utilisateur Définir une version commune de «Pour qui» on conçoit le produit. Prendre des décisions «plus humaines» et moins abstraite Définir les besoins avant de rentrer dans les détails du produit. INCONVÉNIENTS N’aide pas à concevoir le produit. Ne valide pas les hypothèses. Ça ne remplace pas les recherches et les tests.lundi 19 novembre 12
  26. 26. lundi 19 novembre 12
  27. 27. lundi 19 novembre 12
  28. 28. SCOPE DÉFINIR LE CONTENU ET FONCTIONNALITÉS.lundi 19 novembre 12
  29. 29. STRUCTURE Design d’interaction & Architecture de l’information FONCTIONNALITÉS & CONTENUlundi 19 novembre 12
  30. 30. DESIGN D’INTERACTION 1980 Émergence du numérique auprès du grand public Nécessité de simplifier les interactions homme-machine Bill Moggridge Co-fondateur de l’agence IDEO DÉFINITION Deux niveaux d’interactions : soit entre un utilisateur et un système, soit entre des utilisateurs, “interaction sociale”lundi 19 novembre 12
  31. 31. ARCHITECTURE DE L’INFORMATION DÉFINITION 4 COMPOSANTES DE L’AI : L’organisation des contenus Définition des systèmes de navigation Terminologie et labels Systèmes de recherchelundi 19 novembre 12
  32. 32. ARCHITECTURE DE L’INFORMATION : CAS CONCRET LE CAS DE LA CARTE D’EMBARQUEMENT http://passfail.squarespace.com/lundi 19 novembre 12
  33. 33. ARCHITECTURE DE L’INFORMATION : CAS CONCRET http://passfail.squarespace.com/lundi 19 novembre 12
  34. 34. ARCHITECTURE DE L’INFORMATION : CAS CONCRET http://passfail.squarespace.com/lundi 19 novembre 12
  35. 35. ARCHITECTURE DE L’INFORMATION : CAS CONCRET http://passfail.squarespace.com/lundi 19 novembre 12
  36. 36. ARCHITECTURE DE L’INFORMATION : CAS CONCRET http://passfail.squarespace.com/lundi 19 novembre 12
  37. 37. ARCHITECTURE DE L’INFORMATION : CAS CONCRET http://passfail.squarespace.com/lundi 19 novembre 12
  38. 38. ARCHITECTURE DE L’INFORMATION : CAS CONCRET http://passfail.squarespace.com/lundi 19 novembre 12
  39. 39. OSSATURE Design d’interface + Design de navigation + Design de l’informationlundi 19 novembre 12
  40. 40. OSSATURE : ZONNING & WIREFRAME Meilleurs outils d’un UX Designer : http://www.smashingmagazine.com/2010/03/29/free-printable-sketching-wireframing-and-note-taking-pdf-templates/lundi 19 novembre 12
  41. 41. OSSATURE : ZONNING & WIREFRAMElundi 19 novembre 12
  42. 42. OSSATURE : SCÉNARIOlundi 19 novembre 12
  43. 43. OSATURE : SCÉNARIOlundi 19 novembre 12
  44. 44. OSSATURE : PROTOTYPE LE RÔLE D’UN UX DESIGNER ET DE CONCEVOIR PUIS DE TESTER DO DON’T Travailler de façon collaborative Ne pas prototyper de fonctionnalités qui ne peuvent être implémenter. Eviter le piège du «prototype» Ne pas prendre en compte chaque Mettre en place des délais de requêtes qui résultent des tests. réponses Ne pas trop cadrer les tests. Réutiliser ses ressources ( templates, modèles, patterns...) Ne pas être perfectionniste. Lors des test bien se rappeler et Ne pas tout prototyper. informer les utilisateurs sur le but d’un prototypelundi 19 novembre 12
  45. 45. TEST UTILISATEUR DEUX TYPES DE TEST UTILISATEURS : QUALITATIF QUANTITATIF Tri par carte Sondages Tests individuels Analytics Groupes participatifs A/B Testing Test oculaires Test in situlundi 19 novembre 12
  46. 46. LES OUTILS BALSAMIQ MOCKUP ILLUSTRATOR OMNIGRAFFLE MOCKINGBIRD Simplicité Personnalisation et Outil complet : navigation, Interface optimisée Rapidité configuration diagramme, wireframe... Version en ligne Effet Sketch Nombreuses Nombreuses bibliothèque de gratuite bibliothèque de modèle modèle et possibilité de Prototype : création créer/importer les siens. de lien entre les pageslundi 19 novembre 12
  47. 47. LES OUTILS : Prototype AXURE HTML ( Twitter Bootstrap) Proto.io Codiqua Outil complexe. Rapide à configurer et à Interface intuitive Jquery Mobile Possibilité de faire mettre en place. Transformer ses Rapidité des prototypes et Framework assez maquettes en Possibilité des animations complet : grille, prototype dhéberger en ligne poussées. responsive... Export htmllundi 19 novembre 12
  48. 48. RÉSUMÉ ET LIVRABLES PRÉSENTATION ANALYTICS A/B TESTING STRATÉGIE SCOPE STRUCTURE OSSATURE SURFACE PERSONAS INVENTAIRE PARCOURS WIREFRAME PROTOTYPE ÉTUDES NAVIGATION UTILISATEUR UTILISATEUR DES CONTENUS CARTE DES TESTS ÉTUDES SCÉNARIO SPÉCIFICATIONS UTILISATEUR MARCHÉ & CONCEPTS UTILISATEUR FONCTIONNELLES ANALYTICSlundi 19 novembre 12
  49. 49. RESSOURCES BLOG GÉNÉRALISTES : http://uxdesign.smashingmagazine.com/ http://www.uxmag.com/ http://www.uxbooth.com/ http://uxmastery.com/ http://www.usabilitypost.com/ http://www.90percentofeverything.com/ BLOG SPÉCIALISÉ : www.lukew.com http://www.useit.com/ http://www.ixda.org/ http://informationarchitects.net/blog/ PRÉSENTATION : http://fr.slideshare.net/nickf/user-experience-best-practices http://prezi.com/aafmvya6bk7t/understanding-information-architecture/ http://fr.slideshare.net/Kristen_hardy/what-is-ux-designlundi 19 novembre 12
  50. 50. RESSOURCES LIVRESlundi 19 novembre 12
  51. 51. MERCI DE VOTRE ATTENTIONlundi 19 novembre 12
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×