Your SlideShare is downloading. ×
0
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Ergonomie des applications web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ergonomie des applications web

2,904

Published on

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

No Downloads
Views
Total Views
2,904
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
92
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \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
  • Transcript

    • 1. * Ergonomie desApplications Web CESI • 4 janvier 2011
    • 2. *Mais c’est qui, celui-là ?1. contact@madsgraphics.com2. @madsgraphics3. flickr.com/madsgraphics
    • 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. *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. Pas de panique,tout va bien se passer ;)
    • 6. *Back to the future : Histoire de l’ergonomie Web
    • 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. Ergonomie Générale Interfaces Homme-Machine (IHM)Ergonomie des applications informatiques Ergonomie Web
    • 9. Utilit Utilisabilité é Capter EfficacitéEfficienceatisfaction Sl’utilisateur
    • 10. * Non mais quel intérêt, franchement, je vous demande ?!
    • 11. *Méthodes expertes vs Méthodes participatives
    • 12. Soyez bon, soyez beau,mangez un ergonome au petit dejeuner
    • 13. C’est qui, mon internaute ? *
    • 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. *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. N’assassinez jamais vos Personas ! *
    • 17. Oui, mais c’est sûr ? *
    • 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. *Tests utilisateurs1. Recruter vos testeurs2. Quand tester quoi ?3. Analyser les résultats
    • 20. *Bonus : la méthode LeanIA Prototyper Analyser Tester Livrer
    • 21. /** Pause **/
    • 22. *Allez, on s’y colle pour de bon !
    • 23. C’est quoi, un site ergonomique ? *
    • 24. *Principes de la Gestalt1. Principe de proximité
    • 25. *Principes de la Gestalt1. Principe de proximité2. Principe de similarité
    • 26. *Loi de Fitts1. Augmenter la taille des éléments cliquables2. Augmenter la surface de clic3. Rapprocher les éléments cliquables
    • 27. *Principe d’affordance1. Soyez explicite dans les interactions2. Encouragez visuellement le contact3. Ré-utilisez les apparences quotidiennes
    • 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. * Mains dans lecambouis : c’est parti, je fais de l’ergo !
    • 30. *Règle #1 :Architecture & Organisation1. Regroupements logiques2. Mise en avant des contenus clés3. Menus intuitifs4. Contenus directifs5. Hiérarchie optimisée
    • 31. *Règle #2 :Cohérence & Conventions1. Localisations intelligentes2. Appellations fiables3. Formats de référence4. Utilisation des chartes
    • 32. *Règle #3 :Information de1. Le site informe et prévient2. Le site répond aux actions de l’utilisateur
    • 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. *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. *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. * Ca va ?Pas trop mal aux cheveux ?
    • 37. Si on essayait, maintenant ? *
    • 38. /** Pause **/
    • 39. Ne tirez pas sur le Graphiste ... *
    • 40. *Concepts & enjeux1. Respect de l’identité de l’entreprise2. Respect des contraintes ergonomiques du prototype3. Respect de la sémantique du code
    • 41. *Un plan, c’est bien, une maison, c’est mieux !
    • 42. *Objectifs1. Concrétiser les éléments ergonomiques2. Rendre l’outil agréable à utiliser3. Fidéliser / Monétiser le flux
    • 43. * Mes trucs à moi parce qu’en vrai, je suisvachement sympa comme mec
    • 44. *Concevez des Wireframes
    • 45. Alla Gouraud • Artagence : Wireframe
    • 46. Alla Gouraud • Artagence : Rendu final
    • 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. *Les PMR*, sur le webcomme dans la vie !
    • 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. Une seule norme pour les gouverner tous : WCAG*
    • 51. /** Pause **/
    • 52. *Lâchez-vous : Flameware
    • 53. *La boîte à Outils
    • 54. *Card-Sorting1. xSort (Mac)2. WebSort3. Optimal Workshop4. Du papier, des crayons, un polaroïd :)
    • 55. *Wireframes1. Visio (PC) 7. Outils en ligne2. Omnigraffle (Mac)3. Keynote (Mac)4. Illustrator (Mac & PC)5. Photoshop (Mac & PC)6. Pencil (*)
    • 56. *Mock-Ups1. Photoshop (Mac & PC)2. Illustrator (Mac & PC)3. GIMP (*)4. Fireworks (Mac & PC)
    • 57. *Architecture1. Frameworks Grid System (960.gs / Blueprint / YUI)2. Frameworks CSS (YUI, jQuery-UI)3. Guides typographiques4. Web Frameworks (SproutCore, Cappuccino)
    • 58. *Add-ons1. Kuler2. VMware / Virtualbox3. Editeur CSS
    • 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. slideshare.net/ madsgraphics/ergonomie-des- Merci ;)

    ×