Cette présentation, donnée par Salim Gomri et Guillaume Gronier, membres de l'association France-Luxembourg Usability Professionals' Association (FLUPA) a pour objectif de décrire les principales étapes d'une conception centrée sur l'utilisateur dans le cadre du développement d'un site Web. En 5 méthodes et 45 minutes, découvrez comment mettre en oeuvre un site web facilement utilisable !

1. Pour un Web
facilement utilisable
Salim Gomri Guillaume Gronier
www.flupa.eu 1

2. Un mot sur FLUPA...
www.flupa.eu 2

3. FLUPA : France & Luxembourg
(60 membres)
Luxembourg
Paris
Grenoble
www.flupa.eu 3

4. Les objectifs de FLUPA
• Promouvoir l’Ergonomie des
Interfaces Homme-Machine
(utilité et utilisabilité) et
l’Expérience Utilisateur
• Sensibiliser à la démarche
ergonomique - conception
centrée sur l’utilisateur
• Animer un réseau de
professionnels
www.flupa.eu 4

5. Les activités de FLUPA
• Organisation de Petits Déj’ :
• Maquettage
• Interfaces Tactiles
• Persuasive design
• Eye tracking
•…
• Organisation d’Ateliers
• Définir ses utilisateurs
• Réaliser un tri de cartes
• World Usability Day
• Barbecue
www.flupa.eu 5

6. Nous contacter...
• Site Web
www.flupa.eu
• Forum
forum.flupa.eu/phpbb/
• Twitter
twitter.com/assoFlupa
• Newsletter
• Devenir membre :
www.flupa.eu/contenu/adhesion
www.flupa.eu 6

7. Introduction
Utilisabilité
et conception centrée utilisateur
www.flupa.eu 7

8. Pourquoi concevoir pour l’utilisateur ?
• Améliorer la satisfaction
www.flupa.eu 8

9. Pourquoi concevoir pour l’utilisateur ?
• Améliorer la satisfaction
• Renforcer l’efficacité
www.flupa.eu 9

10. Pourquoi concevoir pour l’utilisateur ?
• Améliorer la satisfaction
• Renforcer l’efficacité
• Renforcer la sécurité
www.flupa.eu 10

11. Pourquoi concevoir pour l’utilisateur ?
• Améliorer la satisfaction
• Renforcer l’efficacité
• Renforcer la sécurité
• Garantir sa compétitivité
(ROI)
www.flupa.eu 11

12. Qu’est-ce que l’utilisabilité ?
(ISO 9241-11)
• « un système est utilisable
lorsqu'il permet à l'utilisateur
de réaliser sa tâche avec
efficacité, efficience et
satisfaction dans un contexte
d'utilisation spécifié »
www.flupa.eu 12

13. Conception Centrée Utilisateur (CCU) :
une démarche itérative (ISO 13407)
Planifier le processus de
conception centrée utilisateur
FIN
1
Comprendre et spécifier le
contexte d’utilisation
les exigences
sont atteintes les exigences
ne sont pas atteintes
4 2
Evaluer les solutions au Comprendre et spécifier
regard des exigences les exigences utilisateurs
prédéfinies et organisationnelles
3
Produire des solutions de
conception
www.flupa.eu 13

14. Les 5 méthodes
incontournables !
en 30 minutes montre en main
www.flupa.eu 14

15. Choisir sa cible
Organiser
l’information
Concevoir
l’interface
Evaluer a priori
Evaluer a
posteriori
www.flupa.eu 15

16. Choisir sa cible
Organiser
l’information
Concevoir
l’interface
Evaluer a priori
Evaluer a
posteriori
www.flupa.eu 16

17. Bien choisir sa cible
définir le profil
de ses (futurs)utilisateurs
www.flupa.eu 17

18. Bien choisir sa cible
• Qui sont les utilisateurs ?
• Motivations
• Expériences : Connaissances
des tâches à réaliser
• Compétences
• Préférences
www.flupa.eu 18

19. Bien choisir sa cible
• Ses goûts, ses préférences
• Proposer des choix d’interfaces différents
• Ex: pour le web, laissez le choix d’un thème, css...
openweb
www.flupa.eu 19

20. Bien choisir sa cible
• Contraintes matérielles
• Ecran
• Tactile? Web?
www.flupa.eu 20

21. Bien choisir sa cible
• Résolution d’écran
> 1024 1024 800 640
Date Autres...
* 768 * 768 * 600 * 480
Janvier
85,1 % 13,8 % 0,6 % 0,0 % 0,5 %
2011
source : w3school
www.flupa.eu 21

22. Bien choisir sa cible : comment faire ?
• Méthode des Personas
• Fiche d’identité d’une catégorie
d’utilisateurs
• Entretien ou questionnaire
www.flupa.eu 22

23. Choisir sa cible
Organiser
l’information
Concevoir
l’interface
Evaluer a priori
Evaluer a
posteriori
www.flupa.eu 23

24. Organiser l’information
Le tri de cartes
www.flupa.eu 24

25. Le tri de cartes
• Cette méthode permet de
comprendre comment
l’individu organisent
mentalement les
informations
• Idéal pour définir la structure
d’un site !
www.flupa.eu 25

26. Le tri de cartes
• Il consiste à donner un
ensemble de cartes
comportant des morceaux de
contenu à un participant
• Celui-ci va avoir pour tâche
de regrouper par piles les
cartes dont les contenus lui
semblent proches
• Une fois les piles établies, il
peut-être demandé de les
nommer
www.flupa.eu 26

27. Le tri de cartes
• Chaque élément de la liste est reporté sur une carte
• Une description textuelle ou imagée peut être ajoutée
• Noter un numéro ou une lettre au dos ou dans un coin
de chaque carte pour faciliter l’analyse des données
• Faire passer le tri de carte à au moins 5 participants
www.flupa.eu 27

28. Tri de cartes : créer
• De façon simple, papier/crayon
Panier Archive Chercher
Payer News
Mail
Contact
Adresse
Accueil
www.flupa.eu 28

29. Tri de cartes : participer
• De façon simple, papier/crayon
Panier Contact Accueil Archive
Payer Mail Chercher
Adresse News
www.flupa.eu 29

30. Tri de cartes : catégoriser
• De façon simple, papier/crayon
Achat Contact Home Archive
Panier Contact Accueil Archive
Payer Mail Chercher
Adresse News
www.flupa.eu 30

31. Tri de cartes : analyser
www.flupa.eu 31

32. Tri de cartes
• Via un outil en ligne
• Exemple: websort.net
• Créer
• Participer
• Analyser
www.flupa.eu 32

33. Choisir sa cible
Organiser
l’information
Concevoir
l’interface
Evaluer a priori
Evaluer a
posteriori
www.flupa.eu 33

34. Concevoir l’interface
Le maquettage
www.flupa.eu 34

35. Concevoir l’interface
Ergonomie de conception Ergonomie de correction
Degré d’intervention
Analyse ergonomique
Conception et développement
Déroulement du projet
www.flupa.eu 35

36. Concevoir l’interface
• Maquette basse fidélité
• papier crayon
www.flupa.eu 36

37. Concevoir l’interface
• Maquette basse fidélité
• Ex.: Balsamiq Mockup
www.flupa.eu 37

38. Concevoir l’interface
• Maquette haute fidélité
• Ex.: Axure
www.flupa.eu 38

39. Concevoir l’interface
• Maquette haute fidélité
• Ex.: Photoshop
www.flupa.eu 39

40. Choisir sa cible
Organiser
l’information
Concevoir
l’interface
Evaluer a priori
Evaluer a
posteriori
www.flupa.eu 40

41. Evaluer l’interface a priori
L’application
de critères ergonomiques
www.flupa.eu 41

42. Les 10 recommandations de Nielsen
1. La visibilité de l’état du
système
2. Lien entre le système et le
monde réel
3. Contrôle et liberté de
l’utilisateur
4. Homogénéité et standards
5. Prévenir l’erreur
www.flupa.eu 42

43. Les 10 recommandations de Nielsen
6. Reconnaître plutôt que se
rappeler
7. Flexibilité et efficacité
d’utilisation
8. Esthétique et design
minimal
9. Aider l’utilisateur à
reconnaître, diagnostiquer
et comprendre ses erreurs
10. Aide et documentation
www.flupa.eu 43

44. Les critères ergonomiques
de Bastien & Scapin
Guidage Gestion des erreurs
Charge de travail Homogénéité et cohérence
Contrôle explicite Signifiance des codes et dénomination
Adaptabilité Compatibilité
http://www.ergoweb.ca/criteres.html
icones : http://salimgomri.free.fr
www.flupa.eu 44

45. Les critères ergonomiques
• Appel à un ami expert
Menu à la
verticale pas
très lisible
www.flupa.eu 45

46. Les critères ergonomiques
Comment
couper le son
et laissez jouer
l’introduction?
www.flupa.eu 46

47. Les critères ergonomiques
www.flupa.eu 47

48. Choisir sa cible
Organiser
l’information
Concevoir
l’interface
Evaluer a priori
Evaluer a
posteriori
www.flupa.eu 48

49. Evaluer l’interface à
posteriori
Les tests utilisateurs
www.flupa.eu 49

50. Le prototype
• Confronter les choix de conception à la réalité du
terrain
• Ne pas mettre l’utilisateur devant le fait accompli
• Sensibiliser le concepteur à la logique de l’utilisateur
• Détecter précocement les problèmes
• Mettre en évidence des besoins en matière d’aides
logicielles
www.flupa.eu 50

51. Le prototype
Utilisation Enregistrement Analyse et Aménagement
d’un prototype des données interprétation de l’interface
• population • performances • difficultés • solutions possibles
• tâche • opinions • défauts • solutions choisies
www.flupa.eu 51

52. Le test utilisateur : définition
• Il est une mise en situation,
qui vise à étudier les
comportements des
utilisateurs face à l’interface
• Il est la base même de
l’intervention ergonomique !
• Il va permettre de mesurer la
performance de l’utilisateur
face à l’interface
www.flupa.eu 52

53. Le test utilisateur : définition
• Il est souvent compléter par :
• un entretien semi-directif
(debriefing)
• un questionnaire de satisfaction
(SUS, QUIS, WAMI, CSUQ)
www.flupa.eu 53

54. Le SUS : System Usability Scale
www.flupa.eu 54

55. Les tests utilisateurs
• Ce qu’il vous faut au moins :
• papier/crayon
www.flupa.eu 55

56. Les tests utilisateurs
• Ce qu’il vous faut au moins :
• papier/crayon
• Amateur aguerri :
• camera
• ordinateur
www.flupa.eu 56

57. Les tests utilisateurs
• Ce qu’il vous faut au moins :
• papier/crayon
• Amateur aguerri :
• camera
• ordinateur
• Devenir un pro autonome :
• Screenflow
www.flupa.eu 57

58. Les tests utilisateurs
• Ce qu’il vous faut au moins :
• papier/crayon
• Amateur aguerri :
• camera
• ordinateur
• Devenir un pro autonome :
• Screenflow
• Devenir un pro :
• le laboratoire d’utilisabilité
www.flupa.eu 58

59. Conclusion
Quelques ouvrages
et ce que vous avez retenu !
www.flupa.eu 59

60. Mesure de l’utilisabilité des interfaces
Thierry Baccino
Catherine Bellino
Teresa Colombi
70 €
www.flupa.eu 60

61. Concevoir un produit facile à utiliser
Eric Brangier
Javier Barcenilla
32 €
www.flupa.eu 61

62. Ergonomie du logiciel et design web
Jean-François Nogier
+- 40 €
www.flupa.eu 62

63. QUIZ ! Question 1
• Prendre en compte les utilisateurs dans la conception
de son site web...
A. je le fais si j’ai le temps
B. ça ne sert à rien !
C. utile, mais pas indispensable
D. indispensable si je veux que mon site soit utilisé par
quelqu’un d’autre que moi !
www.flupa.eu 63

64. QUIZ ! Question 1
• Prendre en compte les utilisateurs dans la conception
de son site web...
A. je le fais si j’ai le temps
B. ça ne sert à rien !
C. utile, mais pas indispensable
D. indispensable si je veux que mon site soit utilisé par
quelqu’un d’autre que moi !
www.flupa.eu 64

65. QUIZ ! Question 2
• Le tri de cartes sert à...
A. jouer à la belote
B. organiser les informations de mon site web
C. s’amuser si j’ai du temps
D. rien
www.flupa.eu 65

66. QUIZ ! Question 2
• Le tri de cartes sert à...
A. jouer à la belote
B. organiser les informations de mon site web
C. s’amuser si j’ai du temps
D. rien
www.flupa.eu 66

67. QUIZ ! Question 3
• Le maquettage peut servir...
A. à créer de jolis bateaux
B. à créer de beaux avions
C. à réaliser une première ébauche d’un site web
D. réponse D
www.flupa.eu 67

68. QUIZ ! Question 3
• Le maquettage peut servir...
A. à créer de jolis bateaux
B. à créer de beaux avions
C. à réaliser une première ébauche d’un site web
D. réponse D
www.flupa.eu 68

69. QUIZ ! Question 4
• On peut évaluer l’ergonomie d’un site à partir...
A. du bon sens
B. de la direction du vent
C. des recommandations du manager
D. de critères ergonomiques
www.flupa.eu 69

70. QUIZ ! Question 4
• On peut évaluer l’ergonomie d’un site à partir...
A. du bon sens
B. de la direction du vent
C. des recommandations du manager
D. de critères ergonomiques
www.flupa.eu 70

71. QUIZ ! Question 5
• Les tests utilisateurs servent à...
A. tester l’ergonomie d’un site web
B. à regarder les autres travailler
C. plein de choses, et plus encore !
D. évaluer les connaissances des utilisateurs
www.flupa.eu 71

72. QUIZ ! Question 5
• Les tests utilisateurs servent à...
A. tester l’ergonomie d’un site web
B. à regarder les autres travailler
C. plein de choses, et plus encore !
D. évaluer les connaissances des utilisateurs
www.flupa.eu 72

73. Merci de votre attention !
www.flupa.eu 73