Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Ergonomie des applications web

5 921 vues

Publié le

Publié dans : Technologie, Design
  • Soyez le premier à commenter

Ergonomie des applications web

  1. 1. * Ergonomie desApplications Web CESI • 4 janvier 2011
  2. 2. *Mais c’est qui, celui-là ?1. contact@madsgraphics.com2. @madsgraphics3. flickr.com/madsgraphics
  3. 3. *Qu’est-ce qu’il nousraconte ?1. Ergo, Késako ? 6. A fond les ballons2. Bien connaître l’ennemi 1. Les prototypes3. /** Pause **/ 2. Les trucs de pros4. La base, les règles, 3. Le web pour tous voire + 7. /** Pause **/5. /** Déjeuner **/ 8. Flameware
  4. 4. *Générateur de NewsletterOnline (aka ‘‘le fil rouge’’)1. Utilise un système de 7. Destiné à être utilisé templates par des personnes sans compétence2. Souple avec l’utilisation informatique de sub-layouts particulière3. Autorise l’import de médias (images)4. Facilite la saisie textuelle sans code5. Multi-utilisateurs6. Multi-sessions
  5. 5. Pas de panique,tout va bien se passer ;)
  6. 6. *Back to the future : Histoire de l’ergonomie Web
  7. 7. ”L’ensemble des connaissances scientifiques relative à l’Homme nécessaires pour concevoir des outils, des machines et des dispositifs qui puissent être utilisés avec le maximum deconfort, de sécurité, et defficacité” Alain Wisner
  8. 8. Ergonomie Générale Interfaces Homme-Machine (IHM)Ergonomie des applications informatiques Ergonomie Web
  9. 9. Utilit Utilisabilité é Capter EfficacitéEfficienceatisfaction Sl’utilisateur
  10. 10. * Non mais quel intérêt, franchement, je vous demande ?!
  11. 11. *Méthodes expertes vs Méthodes participatives
  12. 12. Soyez bon, soyez beau,mangez un ergonome au petit dejeuner
  13. 13. C’est qui, mon internaute ? *
  14. 14. *Vos utilisateurs :méthode des personas1. Personas primaire / 4. informations secondaire indispensables :2. Conception des 1. Photo personas en groupe de travail 2. Devise3. Définition des 3. Orientation sur le personas par projet granularité progressive
  15. 15. *Bien concevoir vospersonas1. Priorisez les 5. Titre / nom / fonctionnalités devise / photo sont les éléments2. Abordez les indispensables problématiques complexes 6. Restez réalistes3. Orientez les tâches sur léquipe4. Favorisez lempathie et les échanges au sein de léquipe
  16. 16. N’assassinez jamais vos Personas ! *
  17. 17. Oui, mais c’est sûr ? *
  18. 18. *Méthode du Card-Sorting1. Préparer votre matériel2. Cibler vos utilisateurs3. 2. 1. ... Triez !4. Anlayser les résultats5. Limites de la méthode
  19. 19. *Tests utilisateurs1. Recruter vos testeurs2. Quand tester quoi ?3. Analyser les résultats
  20. 20. *Bonus : la méthode LeanIA Prototyper Analyser Tester Livrer
  21. 21. /** Pause **/
  22. 22. *Allez, on s’y colle pour de bon !
  23. 23. C’est quoi, un site ergonomique ? *
  24. 24. *Principes de la Gestalt1. Principe de proximité
  25. 25. *Principes de la Gestalt1. Principe de proximité2. Principe de similarité
  26. 26. *Loi de Fitts1. Augmenter la taille des éléments cliquables2. Augmenter la surface de clic3. Rapprocher les éléments cliquables
  27. 27. *Principe d’affordance1. Soyez explicite dans les interactions2. Encouragez visuellement le contact3. Ré-utilisez les apparences quotidiennes
  28. 28. *Méfiez-vous des idées reçues1. Les 3 clics 4. On le fera en Web2.0, Ajax,2. Les internautes sont #WhatEverYouWant tous des nazes 5. Les internautes ne3. Ergonomie et scrollent pas Design, ennemis jurés ? 6. L’ergo, on verra ça à la fin
  29. 29. * Mains dans lecambouis : c’est parti, je fais de l’ergo !
  30. 30. *Règle #1 :Architecture & Organisation1. Regroupements logiques2. Mise en avant des contenus clés3. Menus intuitifs4. Contenus directifs5. Hiérarchie optimisée
  31. 31. *Règle #2 :Cohérence & Conventions1. Localisations intelligentes2. Appellations fiables3. Formats de référence4. Utilisation des chartes
  32. 32. *Règle #3 :Information de1. Le site informe et prévient2. Le site répond aux actions de l’utilisateur
  33. 33. *Règle #4 :Aide & Gestion des erreurs1. Dirigez les actions de l’utilisateur2. Assistez votre utilisateur3. Fournissez de l’aide4. Ne laissez pas la place à l’imprévu5. Aidez l’utilisateur à comprendre ses erreurs
  34. 34. *Règle #5 :Rapidité d’accès a l’outil1. Optimisez les actions2. Multipliez les points d’entrée3. Facilitez les interactions4. DRY : Ne vous répétez pas !
  35. 35. *Règle #6 :L’internaute aux1. Respectez les contrôles conventionnels2. Laissez le choix à l’utilisateur3. N’allez jamais à l’encontre des habitudes de votre visiteur
  36. 36. * Ca va ?Pas trop mal aux cheveux ?
  37. 37. Si on essayait, maintenant ? *
  38. 38. /** Pause **/
  39. 39. Ne tirez pas sur le Graphiste ... *
  40. 40. *Concepts & enjeux1. Respect de l’identité de l’entreprise2. Respect des contraintes ergonomiques du prototype3. Respect de la sémantique du code
  41. 41. *Un plan, c’est bien, une maison, c’est mieux !
  42. 42. *Objectifs1. Concrétiser les éléments ergonomiques2. Rendre l’outil agréable à utiliser3. Fidéliser / Monétiser le flux
  43. 43. * Mes trucs à moi parce qu’en vrai, je suisvachement sympa comme mec
  44. 44. *Concevez des Wireframes
  45. 45. Alla Gouraud • Artagence : Wireframe
  46. 46. Alla Gouraud • Artagence : Rendu final
  47. 47. *Architecture des mock-ups1. Respectez la charte graphique imposée2. Utilisez des grilles de mise en forme (960gs, blueprint ...)3. Choisissez correctement votre typo
  48. 48. *Les PMR*, sur le webcomme dans la vie !
  49. 49. *Accessibilité, un enjeumajeur1. Faciliter l’accès au plus grand nombre2. Maintenir un code de qualité pour les évolutions futures3. Améliorer l’utilisabilité de l’ensemble pour tous les visiteurs
  50. 50. Une seule norme pour les gouverner tous : WCAG*
  51. 51. /** Pause **/
  52. 52. *Lâchez-vous : Flameware
  53. 53. *La boîte à Outils
  54. 54. *Card-Sorting1. xSort (Mac)2. WebSort3. Optimal Workshop4. Du papier, des crayons, un polaroïd :)
  55. 55. *Wireframes1. Visio (PC) 7. Outils en ligne2. Omnigraffle (Mac)3. Keynote (Mac)4. Illustrator (Mac & PC)5. Photoshop (Mac & PC)6. Pencil (*)
  56. 56. *Mock-Ups1. Photoshop (Mac & PC)2. Illustrator (Mac & PC)3. GIMP (*)4. Fireworks (Mac & PC)
  57. 57. *Architecture1. Frameworks Grid System (960.gs / Blueprint / YUI)2. Frameworks CSS (YUI, jQuery-UI)3. Guides typographiques4. Web Frameworks (SproutCore, Cappuccino)
  58. 58. *Add-ons1. Kuler2. VMware / Virtualbox3. Editeur CSS
  59. 59. * Ressources1. Ergonomie Web • Amélie 5. iPhone Human Interface Boucher • Ed. Eyrolles Guidelines • Apple Developper portal2. Interaction home-machine pour les SI • Christophe Kolski 6. Le Typographe • • Ed. Eyrolles typographe.com3. Ergonomie Web Illustrée • 7. Ergolab • ergolab.net Amélie Boucher • Ed. Eyrolles 8. Projet OPQUAST •4. Mémento Sites Web : les opquast.com • opquast.org bonnes pratiques • Elie Sloïm • Ed. Eyrolles 9. Smashing Magazine • smashingmagazine.com
  60. 60. slideshare.net/ madsgraphics/ergonomie-des- Merci ;)

×