Webdesign, UX et UCD #2

1,269 views
1,189 views

Published on

Cours de webdesign, UX et UCD. Le but de ce cours n'est pas d'apprendre le métier de webdesigner dans sa globalité, mais d'être capable d'avoir un dialogue cohérent avec les acteurs du web. Cela leur permettra aussi de comprendre les codes et le langage du webdesign.

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

No Downloads
Views
Total views
1,269
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Webdesign, UX et UCD #2

  1. 1. UX / Webdesign/ visual designFévrier 2013a RITAteachingRelax In The Air2
  2. 2. introduction
  3. 3. Life is hard, it’s harder if you’re stupid.____________________John Wayne
  4. 4. userexperiencebeatscorporate design© Relax In The Air 2013
  5. 5. interactionVSvisuel© Relax In The Air 2013
  6. 6. engagementVSbroadcast© Relax In The Air 2013
  7. 7. René Magritte
  8. 8. © Johan de Beer Product Design Student — Pretoria, South Africa
  9. 9. © http://www.scform.com
  10. 10. mission
  11. 11. Relax In The AirmissionFévrier 2013Copyright© 2012 Relax In The AirOrganisateurs de contenu.Concepteurs d’interactions.Créateurs d’émotions.VOUS ÊTES
  12. 12. interactiondesignVisualdesigntechnologie* cool webdesign*© Relax In The Air 2013
  13. 13. interactiondesignVisualdesigntechnologie* objectifs businessstratégie d’entrepriseBesoins utilisateurAttentes utilisateur*© Relax In The Air 2013
  14. 14. les 5 w
  15. 15. are you talking to?whoUtilisateur
  16. 16. whyMotivationis people coming?
  17. 17. whatContenuare you gonna show?
  18. 18. wheREContextare you gonna show it?
  19. 19. whenArchitectureare you gonna show it?
  20. 20. howInteractionare you gonna show it?
  21. 21. ANALYSERExigencesPersonasGouvernanceBudget COLLECTERAcquérirVersionsMetadataMANAGERRéviserAnalyserCorrigerPUBLIERAgrégerTransformerExpliquerhiérarchisermission© Relax In The Air 2013
  22. 22. responsabilité du designerCommuniquer des idées à travers l’organisation de mots etd’images.Organiser le chaos pour des expériences encore plus folles.
  23. 23. UCD - UTILISATEUR
  24. 24. Le design centré utilisateur est une méthodedans laquelle les besoins, les envies et leslimitations de l’utilisateur sont au centre duprocessus de design.Le UCD ne force pas l’utilisateur à changerson comportement pour s’adapter à un outil.
  25. 25. Le UCD est une méthode itérative qui metl’utilisateur au centre de toutesles décisions de design.quoi?ucdutilisateurRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  26. 26. Le UCD est une philosophie de design renduepossible par une multitudes de disciplines etméthodes de design.quoi?ucdutilisateurRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  27. 27. Le but ultime du UCD est d’optimiserl’expérience utilisateur d’un système,d’un outil ou d’un processus.BUTucdutilisateurRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  28. 28. Le UCD cherche à atteindre ce buten considérant le point de vue de l’utilisateurdurant toutes les phases de développement.BUTucdutilisateurRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  29. 29. InteractionMoiAutresEnvironnementEnseignementExpérience
  30. 30. Besoins et enviespoint de vue de l’utilisateur
  31. 31. Buts et motivationspoint de vue de l’utilisateur
  32. 32. Obstacles et limitationspoint de vue de l’utilisateur
  33. 33. Tâches et activitéspoint de vue de l’utilisateur
  34. 34. Géographie et langagepoint de vue de l’utilisateur
  35. 35. Environnement et matérielpoint de vue de l’utilisateur
  36. 36. Travail, vie et expériencepoint de vue de l’utilisateur
  37. 37. Remember happiness is a way to travelnot a destination.____________________Roy Goodman
  38. 38. Nous sommesavant toutdes animauxavec des émotions
  39. 39. Ecouter les retours
  40. 40. • La Recherche• L’architecture de Information• le design d’interaction• Le Visual Design• L’UsabilitydisciplinesucdutilisateurRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  41. 41. • Interviews• Focus groups• Workshops• Brainstorm• Personas• Scénarios (task models)• Evaluation des concurrentsRelax In The Airméthodes de rechercheucdutilisateurFévrier 2013Copyright© 2012 Relax In The Air
  42. 42. • Storyboards• Croquis• Wireframe• Wireflow• Modélisation de navigation• Layout de pages• High/Low fidélité prototypes• Prototypes fonctionnelsRelax In The Airméthodes de conceptionucdutilisateurFévrier 2013Copyright© 2012 Relax In The Air
  43. 43. • Graphisme• Branding• IconographieRelax In The Airméthodes de designucdutilisateurFévrier 2013Copyright© 2012 Relax In The Air
  44. 44. • Usability evalution• Usability testing• Web analyticsRelax In The Airméthodes d’évaluationucdutilisateurFévrier 2013Copyright© 2012 Relax In The Air
  45. 45. • Augmenter les taux d’adoption• Améliorer la productivité utilisateur• Réduire les coûts de maintenanceRelax In The AiravantagesucdutilisateurFévrier 2013Copyright© 2012 Relax In The Air
  46. 46. résultatRetour sur investissement
  47. 47. le webdesigner
  48. 48. rôleUn project manager doit connaître le client.Un webdesigner doit le comprendre.____________________MC Casal
  49. 49. You can put the lipstick on the pigwhen I’m done____________________Some UX designer
  50. 50. Je suis jeune© Listoid.com
  51. 51. Résoudre des problèmesCréativitéEgo-lessUsabilityAccessibilitéSens de l’humourCross disciplinaritéRelax In The AircompétenceswebdesignerFévrier 2013Copyright© 2012 Relax In The Air
  52. 52. La créativité doit servir les projets de vos clients.Les projets ne doivent pas servir votre créativité.____________________MC Casal
  53. 53. • UX Designer• Web Architecte• User Interface Designer• Interactive / Digital Designer• DA Web• Visual DesignerRelax In The AirmétierswebdesignerFévrier 2013Copyright© 2012 Relax In The Air
  54. 54. Affectif RentabilitéVSUX designerRelax In The Airmétierswebdesigner____________________Don NormanQuand il était Vice President of theAdvanced Technology Group chez AppleFévrier 2013Copyright© 2012 Relax In The Air
  55. 55. Tout ce qui nécessite une interaction humaineComputer systems, voitures, avions, distributeurs de tickets, software design,user research, design industriel ou web design.StructureFeedbackSimplicitéToléranceVisibilitéRépétitionuser interface designerRelax In The AirmétierswebdesignerFévrier 2013Copyright© 2012 Relax In The Air
  56. 56. user interface designer
  57. 57. Créer les liens pertinentspour que l’organisation et les relationsentre les éléments d’un contenusoient compréhensiblesweb architecteRelax In The AirmétierswebdesignerFévrier 2013Copyright© 2012 Relax In The Air
  58. 58. web architecte
  59. 59. réaliser du design online et interactifinteractive / digital designerRelax In The AirmétierswebdesignerFévrier 2013Copyright© 2012 Relax In The Air
  60. 60. digital designer
  61. 61. Un peu styliste, un peu décorateur.Je suis un artiste, mais j’ai surtoutune excellente maîtrisedes fondamentaux du design,de la typographie etdes contraintes du web.visual designerRelax In The AirmétierswebdesignerFévrier 2013Copyright© 2012 Relax In The Air
  62. 62. visual designer
  63. 63. le couteau suisse du web designd.a. webRelax In The AirmétierswebdesignerFévrier 2013Copyright© 2012 Relax In The Air
  64. 64. d.a. web
  65. 65. UX & prototypage / / front dév.
  66. 66. webdesign
  67. 67. Le web design désigne la conception de linterface web :l’architecture interactionnelle, l’organisation despages, l’arborescence et la navigation dans le site web.Il s’agit d’une phase essentielle dans la conception d’untel site. La conception dun design web tient compte descontraintes spécifiques du support Internet, notammenten termes d’ergonomie, d’utilisabilité et d’accessibilité.
  68. 68. interactiondesignVisualdesign* cool webdesign*technologie© Relax In The Air 2013
  69. 69. Design is not justwhat it looks likeand feels like.Design is how itworks.____________________Steve Jobs
  70. 70. things used to be simple
  71. 71. but things got digital
  72. 72. Plus de libertéMeilleurs standardsplus de plateformesPlus mobileplus visuelet le futur?
  73. 73. introduction au designQUI?MC Casalobjectifsbusinessbesoinsutilisateursbrandguidelinescontraintes complexes
  74. 74. design is more strategic
  75. 75. and you’ll have to thinkand work more to make itmore and more simpleor be a genius like John lautner
  76. 76. webdesign• Philosophie• Allégorie de la maison• Objectifs
  77. 77. CollaborationDialogueIntégration de tous les acteursTravailler pour l’utilisateurConnaître les limitesphilosophiewebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  78. 78. graphismesurfacewebdesignmécanique
  79. 79. designdans la contrainteTechnologie / Utilisateur / Marque
  80. 80. pouvoir deidéeDoit correspondre aux objectifs du client.1
  81. 81. pouvoir devertueDoit être invisible, mais avec une identité.2
  82. 82. pouvoir deutilitéDoit être utile et utilisable.3
  83. 83. pouvoir demesureDoit être mesurable et quantifiable.4
  84. 84. pouvoir deambitionDoit être de qualité. Souci du détail.5
  85. 85. pouvoir delanguageDoit avoir un discours clair et de la personnalité.6
  86. 86. allégorie de la maisonwebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  87. 87. sexy happy website
  88. 88. crappy website
  89. 89. Délivrer une expérienceCall to actionCréer des contactsgénérer de l’engagementobjectifswebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  90. 90. Moins de temps pour les choixMoins d’effort mentalMoins de fréquence d’erreursutilisateurobjectifswebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  91. 91. • Considérez les couleurs des textes et backgrounds avec attention.• Soyez attentifs à la taille des éléments importants• N’utilisez pas de fonds flashy.• Utilisez des bons contrastes de couleurs.• Gardez à l’esprit que les typos avec serif sont plus lisibles.1) Rendre le site facile à lire3 règlesobjectifswebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  92. 92. 2) Rendre le site facile à naviguer3 règlesobjectifswebdesignRelax In The Air• Pensez à votre public cible• Les liens et call to action doivent être clairs et faciles à trouver.Février 2013Copyright© 2012 Relax In The Air
  93. 93. 3) Rendre le site cohérent3 règlesobjectifswebdesignRelax In The Air• Donnez une image professionnelle• Gardez une cohérence entre les typographies, images et couleurs.• Uniformité.Février 2013Copyright© 2012 Relax In The Air
  94. 94. Voilà ce que l’on croit... La réalitémythesobjectifswebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  95. 95. • Créez un centre d’intérêt qui attire l’attention.• Créez ordre et équilibre.• Etablissez des motifs pour guider l’utilisateur àtravers une composition.• Dans d’autres mots: RACONTEZ UNE HISTOIRE.hiérarchie visuelleobjectifswebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  96. 96. • Raconte l’histoire juste.• apporte la différence.• donne envie d’engager le dialogue.• donne de l’unité à votre site.Belle personnalitéobjectifswebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  97. 97. • Couleur (psychologie, chaud-froid, contraste...)• Typo (espace, style, tailles...)• images• formes• textures (sensations tactiles)Belle personnalitéobjectifswebdesignRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  98. 98. production
  99. 99. • Le client• Web design• Project management• intégration html / développement front• Développement back• Contrôle qualité• SEO / SEM• Stratégie digitale• ux / ui (expérience utilisateur / Interface utilisateur)du brief à la mise en ligneproductionRelax In The Air• RechercheFévrier 2013Copyright© 2012 Relax In The Air
  100. 100. Impliquez votre clientEt les décideurset ceux qui payentet les championset les sceptiquesClientdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  101. 101. • Livraison du site• Publication du site• Technologie de développement ou CMS• Langues• Aspect et comportement du layout• Degré d’accessibilité• Public cible• Statistiques actuelles• Audit• Stratégie interne• Buts du site• Sites de référence• Concurrence• Durée de vie du site/app• Budget• Contraintes spécifiquesClientdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  102. 102. www.theoatmeal.com/comics/design_hellClientdu brief à la mise en ligneproduction
  103. 103. le meilleur alliémais designer wannabeproject managementdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  104. 104. clientsfromhell.netproject managementdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  105. 105. Où sommes-nous?Pourquoi nous y sommes?Où aller?Comment y aller?stratégiedu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  106. 106. marchétendancesconcurrencestatistiquesstratégie business ou produitstratégiedu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  107. 107. Poser des hypothèsesqui doivent être vérifiées par la recherchestratégiedu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  108. 108. stratégiedu brief à la mise en ligneproductionRelax In The AirQuelle estvotre stratégiegénérale?Commentfaites-vous del’argent?Dans quellesactivités avez-vousinvesti?Dans lesquellesne pas investir?Quelle est votredifférencecompétitive?Votre marchégrandit-il, seréduit-il ou est-ilstable?Quelles activitésse lancer?POSITION VALEUR ACTIVITESINTERNEEXTERNEFévrier 2013Copyright© 2012 Relax In The Air
  109. 109. darmano.typepad.comstratégiedu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  110. 110. recherchedu brief à la mise en ligneproductionRelax In The Airinterviewsservice clientsS.A.V.Call centerobservationpersonasetudes existantesFévrier 2013Copyright© 2012 Relax In The Air
  111. 111. recherchedu brief à la mise en ligneproductionRelax In The AirObjectifsdu projetetObjectifsde larechercheIdentifier lesparticipantsetCréer uneméthodeCollecterles donnéesAnalyserles donnéesCommuniquerles résultatsFévrier 2013Copyright© 2012 Relax In The Air
  112. 112. ContenuArchitecturePrototypageExpérience utilisateurtests utilisateursUX / UIdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  113. 113. UX / UIdu brief à la mise en ligneproduction
  114. 114. couleurstypographiesesthétiqueprofondeurgrilleinteractionswebdesigndu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  115. 115. bestwebgallery.comwebdesigndu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  116. 116. meilleur allié du webdesigner.travail main dans la main.Deux métiers qui se mélangent.Innovation Intégration Optimisation Accessibilitéintégration html / développement frontdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  117. 117. www.smashingmagazine.comdu brief à la mise en ligneproductionRelax In The Airintégration html / développement frontFévrier 2013Copyright© 2012 Relax In The Air
  118. 118. Le prince des bases de données.Le roi du dynamisme côté client ou côté serveur.développement backdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  119. 119. PHPasp .netSharepointJavaRubyiOS... etcdéveloppement backdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  120. 120. « Mais c’est juste un pixel de décalage! »« Si moi je le vois, n’importe qui pourra le voir. »contrôle qualitédu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  121. 121. don’t be goodbe better !
  122. 122. Search Engin Optimisation / MarketingUn site qui n’est pas référencé estcomme un roman policierrangé dans la section Entomologied’une bibliothèque municipale.seo / semdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air
  123. 123. where the f* is my website?seo / semdu brief à la mise en ligneproductionRelax In The AirFévrier 2013Copyright© 2012 Relax In The Air

×