Le document traite de l'ergonomie des applications web, en expliquant les principes de base tels que les méthodes de conception centrée sur l'utilisateur, la création de personas et l'importance de la hiérarchie et de la cohérence dans l'organisation des contenus. Il propose également des techniques pratiques comme le card-sorting et les tests utilisateurs pour améliorer l'expérience utilisateur. Enfin, il aborde l'accessibilité comme un enjeu majeur, soulignant l'importance de concevoir des interfaces utilisables par tous.

1. *
Ergonomie des
Applications Web
CESI • 4 janvier 2011

2. *
Mais c’est qui, celui-là ?
1. contact@madsgraphics.com
2. @madsgraphics
3. flickr.com/madsgraphics

3. *
Qu’est-ce qu’il nous raconte ?
1. Ergo, Késako ? 6. A fond les ballons
2. Bien connaître l’ennemi 1. Les prototypes
3. /** Pause **/ 2. Les trucs de pros
4. La base, les règles, voire + 3. Le web pour tous
5. /** Déjeuner **/ 7. /** Pause **/
8. Flameware

4. *
Générateur de Newsletter Online
(aka ‘‘le fil rouge’’)
1. Utilise un système de templates 5. Multi-utilisateurs
2. Souple avec l’utilisation de sub- 6. Multi-sessions
layouts
7. Destiné à être utilisé par des
3. Autorise l’import de médias personnes sans compétence
(images) informatique particulière
4. Facilite la saisie textuelle sans
code

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 de confort, de sécurité,
et d'efficacité”
Alain Wisner

8. Ergonomie Générale
Interfaces Homme-Machine (IHM)
Ergonomie des applications informatiques
Ergonomie Web

9. Utilité Utilisabilité
Capter l’utilisateur Efficacité Efficience Satisfaction

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 personas
1. Personas primaire /
secondaire
4. informations indispensables :
1. Photo
2. Conception des personas en
2. Devise
groupe de travail
3. Orientation sur le projet
3. Définition des personas par
granularité progressive

15. * Bien concevoir vos personas
1. Priorisez les fonctionnalités
2. Abordez les problématiques
complexes
4. Favorisez l'empathie et les
échanges au sein de l'équipe
5. Titre / nom / devise /
photo sont les éléments
3. Orientez les tâches sur
indispensables
l'équipe
6. Restez réalistes

17. N’assassinez jamais
vos Personas !
*

18. Oui, mais c’est sûr ?
*

19. *
Méthode du Card-Sorting
1. Préparer votre matériel
2. Cibler vos utilisateurs
3. 2. 1. ... Triez !
4. Analyser les résultats
5. Limites de la méthode

20. *
Tests utilisateurs
1. Recruter vos testeurs
2. Quand tester quoi ?
3. Analyser les résultats

21. *
Bonus : la méthode Lean IA
Prototyper
Analyser Tester
Livrer

22. /** Pause **/

23. *
Allez, on s’y colle pour
de bon !

24. C’est quoi, un site
ergonomique ?
*

32. *
Principes de la Gestalt
1. Principe de proximité

34. *
Principes de la Gestalt
1. Principe de proximité
2. Principe de similarité

36. *
Loi de Fitts
1. Augmenter la taille des éléments cliquables
2. Augmenter la surface de clic
3. Rapprocher les éléments cliquables

38. *
Principe d’affordance
1. Soyez explicite dans les interactions
2. Encouragez visuellement le contact
3. Ré-utilisez les apparences quotidiennes

42. *
Méfiez-vous des idées reçues
1. Les 3 clics 4. On le fera en Web2.0,
Ajax, #WhatEverYouWant
2. Les internautes sont tous des
nazes 5. Les internautes ne scrollent
pas
3. Ergonomie et Design, ennemis
jurés ? 6. L’ergo, on verra ça à la fin

43. *
Mains dans le
cambouis : c’est parti,
je fais de l’ergo !

44. Règle #1 :
*
Architecture & Organisation
1. Regroupements logiques
2. Mise en avant des contenus clés
3. Menus intuitifs
4. Contenus directifs
5. Hiérarchie optimisée

45. Règle #2 :
*
Cohérence & Conventions
1. Localisations intelligentes
2. Appellations fiables
3. Formats de référence
4. Utilisation des chartes

46. Règle #3 :
*
Information de l’utilisateur
1. Le site informe et prévient
2. Le site répond aux actions de l’utilisateur

47. Règle #4 :
*
Aide & Gestion des erreurs
1. Dirigez les actions de l’utilisateur
2. Assistez votre utilisateur
3. Fournissez de l’aide
4. Ne laissez pas la place à l’imprévu
5. Aidez l’utilisateur à comprendre ses erreurs

48. Règle #5 :
*
Rapidité d’accès a l’outil
1. Optimisez les actions
2. Multipliez les points d’entrée
3. Facilitez les interactions
4. DRY : Ne vous répétez pas !

49. Règle #6 :
*
L’internaute aux commandes
1. Respectez les contrôles conventionnels
2. Laissez le choix à l’utilisateur
3. N’allez jamais à l’encontre des habitudes de votre
visiteur

50. *
Ca va ?
Pas trop mal aux
cheveux ?

51. /** Pause **/

52. Si on essayait,
maintenant ?
*

53. Ne tirez pas sur le Graphiste ...
*

54. *
Concepts & enjeux
1. Respect de l’identité de l’entreprise
2. Respect des contraintes ergonomiques du prototype
3. Respect de la sémantique du code

55. *
Un plan, c’est bien,
une maison, c’est mieux !

56. *
Objectifs
1. Concrétiser les éléments ergonomiques
2. Rendre l’outil agréable à utiliser
3. Fidéliser / Monétiser le flux

57. *
Mes trucs à moi
parce qu’en vrai, je suis vachement
sympa comme mec

58. *
Concevez des
Wireframes

59. Alla Gouraud • Artagence : Wireframe

60. Alla Gouraud • Artagence : Rendu final

62. *
Architecture des mock-ups
1. Respectez la charte graphique imposée
2. Utilisez des grilles de mise en forme (960gs,
blueprint ...)
3. Choisissez correctement votre typo

63. *
Les PMR*, sur le web
comme dans la vie !

66. *
Accessibilité, un enjeu majeur
1. Faciliter l’accès au plus grand nombre
2. Maintenir un code de qualité pour les évolutions
futures
3. Améliorer l’utilisabilité de l’ensemble pour tous les
visiteurs

67. Une seule norme pour les
gouverner tous :
WCAG*

68. /** Pause **/

69. *
Lâchez-vous :
Flameware

70. *
La boîte à Outils

71. *
Card-Sorting
1. xSort (Mac)
2. WebSort
3. Optimal Workshop
4. Du papier, des crayons, un
polaroïd :)

72. *
Wireframes
1. Visio (PC)
2. Omnigraffle (Mac)
6. Pencil (*)
7. Outils en ligne
3. Keynote (Mac)
4. Illustrator (Mac & PC)
5. Photoshop (Mac & PC)

73. *
Mock-Ups
1. Photoshop (Mac & PC)
2. Illustrator (Mac & PC)
3. GIMP (*)
4. Fireworks (Mac & PC)

74. *
Architecture
1. Frameworks Grid System
(960.gs / Blueprint / YUI)
4. Web Frameworks (SproutCore,
Cappuccino)
2. Frameworks CSS (YUI,
jQuery-UI)
3. Guides typographiques

75. *
Inspiration
1. Inspiration Time
http://inspirationti.me
2. Trends Now
http://trendsnow.net/
5. Smashing Magazine
http://smashingmagazine.com
6. Wireframes Magazine
http://wireframes.linowski.ca/
3. Artskills
7. Wireframe Showcase
http://www.artskills.net/
http://wireframeshowcase.com
4. 365 PSD
http://365psd.com/ 8. Twitter
@deaxon / @glazou /@wdfr

76. *
Add-ons
1. Kuler
2. VMware / Virtualbox
3. Editeur CSS

77. * Ressources
1. Ergonomie Web • Amélie Boucher • Ed.
Eyrolles
2. Interaction home-machine pour les SI •
5. iPhone Human Interface Guidelines • Apple
Developper portal
6. TUTS+ Network • tutsplus.com
Christophe Kolski • Ed. Eyrolles
7. Le Typographe • typographe.com
3. Ergonomie Web Illustrée • Amélie Boucher
8. Ergolab • ergolab.net
• Ed. Eyrolles
9. Projet OPQUAST • opquast.com •
4. Mémento Sites Web : les bonnes pratiques
opquast.org
• Elie Sloïm • Ed. Eyrolles

78. slideshare.net/madsgraphics/
ergonomie-des-applications-web
Merci ;)