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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Ergonomie des applications web

2,656
views

Published on

Published in: Technology, Design

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,656
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
86
Comments
0
Likes
3
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 ;)