Ergonomie des applications web

5 841 vues

Publié le

Publié dans : Technologie, Design
0 commentaire
4 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
5 841
Sur SlideShare
0
Issues des intégrations
0
Intégrations
39
Actions
Partages
0
Téléchargements
128
Commentaires
0
J’aime
4
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • \n
  • \n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - Utilité : offrir au visiteur ce qu’il attend\n- Efficacité : l’utilisateur doit réussir à faire ce qu’il veut faire\n- Efficience : l’utilisateur doit pouvoir agir rapidement, sans se tromper\n- Satisfaction : l’utilisateur doit prendre plaisir à venir sur le site\n
  • - Augmenter le trafic / taux de conversion\n- Faciliter l’accès à l’information\n- Améliorer l’image de marque\n
  • - Méthode expertes : ergonome expert seul\n- Méthode participative : inclusion de panel d’utilisateur / développement en groupe de travail\n
  • L’ergonomie est le souci de chacun, tout au long de la durée de vie d’un projet\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • - Observer pour déceler les grandes tendances\n- Utiliser l’analyse de clusters\n\n+ Rapide, peu coûteuse, retour d’expérience presque immédiat\n- attention bottom-up (données -> mental) vs top-down (mental -> données), très abstrait, base de travail non-générale\n
  • - tester prototypes (même papier), maquettes, interfaces fonctionnelles, moteur de recherche\n- établir des scenariis => jeu de rôle, objectifs d’utilisabilité\n- Analyser en masse pour déduire une tendance générique\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • «Une cible est d’autant plus rapide à atteindre qu’elle est proche et grande»\n\n
  • \n
  • Affordance : possibilités d’actions suggérées par les caractéristiques de l’objet\n
  • \n
  • - champ de recherche peu affordant\n
  • - champ de recherche peu affordant\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Deuteranopia\n
  • \n
  • Web Content Accessibility Guidelines\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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 ;)

    ×