Pour un web facilement utilisable

www.flupa.eu

Pour un Webfacilement utilisable

1

Salim Gomri Guillaume Gronier

www.flupa.eu

Un mot sur FLUPA...

2

www.flupa.eu

LuxembourgParis

Grenoble

FLUPA : France & Luxembourg(60 membres)

3

www.flupa.eu

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

4

www.flupa.eu

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

5

www.flupa.eu

Nous contacter...

• Site Webwww.flupa.eu

• Forumforum.flupa.eu/phpbb/

• Twittertwitter.com/assoFlupa

• Newsletter

• Devenir membre :www.flupa.eu/contenu/adhesion

6

www.flupa.eu

Introduction

Utilisabilitéet conception centrée utilisateur

7

www.flupa.eu

Pourquoi concevoir pour l’utilisateur ?

• Améliorer la satisfaction

8

www.flupa.eu

Pourquoi concevoir pour l’utilisateur ?

• Améliorer la satisfaction

• Renforcer l’efficacité

9

www.flupa.eu

Pourquoi concevoir pour l’utilisateur ?

• Améliorer la satisfaction

• Renforcer l’efficacité

• Renforcer la sécurité

10

www.flupa.eu

Pourquoi concevoir pour l’utilisateur ?

• Améliorer la satisfaction

• Renforcer l’efficacité

• Renforcer la sécurité

• Garantir sa compétitivité (ROI)

11

www.flupa.eu

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é »

12

www.flupa.eu

Conception Centrée Utilisateur (CCU) :une démarche itérative (ISO 13407)

13

les exigencesne sont pas atteintes

Comprendre et spécifier les exigences utilisateurs

et organisationnelles

Produire des solutions de conception

Evaluer les solutions au regard des exigences

prédéfinies

FIN

les exigencessont atteintes

Comprendre et spécifier le contexte d’utilisation

Planifier le processus deconception centrée utilisateur

1

2

3

4

www.flupa.eu

Les 5 méthodes incontournables !

en 30 minutes montre en main

14

www.flupa.eu

Evaluer a posteriori

Evaluer a priori

Concevoir l’interface

Organiser l’information

15

Choisir sa cible

www.flupa.eu

Evaluer a posteriori

Evaluer a priori

Concevoir l’interface

Organiser l’information

16

Choisir sa cible

www.flupa.eu

Bien choisir sa cible

définir le profilde ses (futurs)utilisateurs

17

www.flupa.eu

Bien choisir sa cible

• Qui sont les utilisateurs ?• Motivations• Expériences : Connaissances

des tâches à réaliser• Compétences• Préférences

18

www.flupa.eu

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

19

www.flupa.eu

Bien choisir sa cible

• Contraintes matérielles• Ecran• Tactile? Web?

20

www.flupa.eu

Bien choisir sa cible

• Résolution d’écran

21

Date > 1024 * 768

1024 * 768

800 * 600

640 * 480

Autres...

Janvier 2011

85,1 % 13,8 % 0,6 % 0,0 % 0,5 %

source : w3school

www.flupa.eu

Bien choisir sa cible : comment faire ?

• Méthode des Personas• Fiche d’identité d’une catégorie

d’utilisateurs

• Entretien ou questionnaire

22

www.flupa.eu

Organiser l’information

Choisir sa cible

Evaluer a posteriori

Evaluer a priori

Concevoir l’interface

23

www.flupa.eu

Organiser l’information

Le tri de cartes

24

www.flupa.eu

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 !

25

www.flupa.eu

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

26

www.flupa.eu

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

27

www.flupa.eu

Tri de cartes : créer

• De façon simple, papier/crayon

28

Panier

ContactMail

Archive

Adresse

Chercher

Payer News

Accueil

www.flupa.eu

Tri de cartes : participer

• De façon simple, papier/crayon

29

Panier Contact

Mail

Archive

Adresse

Payer

Accueil

Chercher

News

www.flupa.eu

Tri de cartes : catégoriser

• De façon simple, papier/crayon

30

Panier Contact

Mail

Archive

Adresse

Payer

Accueil

Chercher

News

Achat Contact Home Archive

www.flupa.eu

Tri de cartes : analyser

31

www.flupa.eu

Tri de cartes

• Via un outil en ligne

• Exemple: websort.net • Créer• Participer• Analyser

32

www.flupa.eu

Organiser l’information

Concevoir l’interface

Choisir sa cible

Evaluer a posteriori

Evaluer a priori

33

www.flupa.eu

Concevoir l’interface

Le maquettage

34

www.flupa.eu

Concevoir l’interface

35

Analyse ergonomique

Conception et développement

Déroulement du projet

Deg

ré d

’inte

rven

tion

Ergonomie de conception Ergonomie de correction

www.flupa.eu

Concevoir l’interface

• Maquette basse fidélité • papier crayon

36

www.flupa.eu

Concevoir l’interface

• Maquette basse fidélité • Ex.: Balsamiq Mockup

37

www.flupa.eu

Concevoir l’interface

• Maquette haute fidélité • Ex.: Axure

38

www.flupa.eu

Concevoir l’interface

• Maquette haute fidélité• Ex.: Photoshop

39

www.flupa.eu

Concevoir l’interface

Organiser l’information

Evaluer a priori

Choisir sa cible

Evaluer a posteriori

40

www.flupa.eu

Evaluer l’interface a priori

L’applicationde critères ergonomiques

41

www.flupa.eu

Les 10 recommandations de Nielsen

42

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

Les 10 recommandations de Nielsen

43

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

Les critères ergonomiquesde Bastien & Scapin

44

Guidage Gestion des erreurs

Charge de travail

Contrôle explicite

Adaptabilité Compatibilité

Signifiance des codes et dénomination

Homogénéité et cohérence

http://www.ergoweb.ca/criteres.htmlicones : http://salimgomri.free.fr

www.flupa.eu

Les critères ergonomiques

• Appel à un ami expert

45

Menu à la verticale pas très lisible

www.flupa.eu

Les critères ergonomiques

46

Comment couper le son et laissez jouer l’introduction?

www.flupa.eu

Les critères ergonomiques

47

www.flupa.eu

Evaluer a posteriori

Evaluer a priori

Concevoir l’interface

Organiser l’information

Choisir sa cible

48

www.flupa.eu

Evaluer l’interface à posteriori

Les tests utilisateurs

49

www.flupa.eu

Le prototype

50

• 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

Le prototype

51

Utilisationd’un prototype

Enregistrementdes données

Analyse etinterprétation

Aménagementde l’interface

• population• tâche

• performances• opinions

• difficultés• défauts

• solutions possibles• solutions choisies

www.flupa.eu

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

52

www.flupa.eu

Le test utilisateur : définition

• Il est souvent compléter par :

• un entretien semi-directif (debriefing)

• un questionnaire de satisfaction (SUS, QUIS, WAMI, CSUQ)

53

www.flupa.eu

Le SUS : System Usability Scale

54

www.flupa.eu

Les tests utilisateurs

•Ce qu’il vous faut au moins :•papier/crayon

55

www.flupa.eu

Les tests utilisateurs

•Ce qu’il vous faut au moins :•papier/crayon

•Amateur aguerri :•camera•ordinateur

56

www.flupa.eu

Les tests utilisateurs

•Ce qu’il vous faut au moins :•papier/crayon

•Amateur aguerri :•camera•ordinateur

•Devenir un pro autonome :•Screenflow

57

www.flupa.eu

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é

58

www.flupa.eu

Conclusion

Quelques ouvrageset ce que vous avez retenu !

59

www.flupa.eu

Mesure de l’utilisabilité des interfaces

Thierry BaccinoCatherine BellinoTeresa Colombi

70 €

60

www.flupa.eu

Concevoir un produit facile à utiliser

Eric BrangierJavier Barcenilla

32 €

61

www.flupa.eu

Ergonomie du logiciel et design web

Jean-François Nogier

+- 40 €

62

www.flupa.eu

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 !

63

www.flupa.eu

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 !

64

www.flupa.eu

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

65

www.flupa.eu

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

66

www.flupa.eu

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

67

www.flupa.eu

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

68

www.flupa.eu

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

69

www.flupa.eu

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

70

www.flupa.eu

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

71

www.flupa.eu

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

72

www.flupa.eu

Merci de votre attention !

73