Ergonomie du Web Formation

50  Download (0)

Full text

(1)

T O G E T H E R T A L E N T E D

Unissons nos Talents

T O G E T H E R T A L E N T E D

v1.0 1

Ergonomie du web

Ergonomie du Web

Formation

(2)

2

Votre animatrice Votre animatrice

Samia CHOUIT Chef de Projet

Division Sud Est Agence de Montpellier 1231, Avenue du Mondial 98 FR 34945 Montpellier Cedex 2 Tél : +33 (0) 4 67 13 53 53 Fax : +33 (0) 4 67 13 53 54

schouit@sopragroup.com Caroline BARON

Ingénieur d’études – Référent Qualité Web Division Sud Est Agence de Montpellier 1231, Avenue du Mondial 98 FR 34945 Montpellier Cedex 2 Tél : +33 (0) 4 67 13 53 53 Fax : +33 (0) 4 67 13 53 54 gzegre@sopragroup.com

v1.0

(c) 2013 – Ergonomie du web

(3)

3

Objectifs généraux de la formation Objectifs généraux de la formation

Appréhender et comprendre les enjeux

Qu’est ce que l’ergonomie ?

Pourquoi un site doit-il être ergonomique ?

A quel moment intervient l’ergonome ?

Quels sont les outils et les méthodes ?

Connaître les critères principaux

Bastien & Scapin

Amélie Boucher

Voir plus large… l’ergonomie au cœur de la Qualité Web Qualité Web !

v1.0

(c) 2013 – Ergonomie du web

(4)

v1.0 4

Sommaire Sommaire

22 Processus et méthodesProcessus et méthodes

11 Qu’est ce que l’ergonomie ?Qu’est ce que l’ergonomie ?

33 Les critères de Bastien et ScapinLes critères de Bastien et Scapin

(c) 2013 – Ergonomie du web

44 Et la qualité web dans tout ça !Et la qualité web dans tout ça ! 55 Pour aller plus loin…Pour aller plus loin…

(5)

Mise en situation…

Mise en situation…

v1.0 5

(c) 2013 – Ergonomie du Web

Cahier des charges Cahier des charges

Une chaise Une chaise

• une assise

• 4 pieds

• un dossier

• une assise

• 4 pieds

• un dossier

(6)

v1.0 6 (c) 2013 – Ergonomie du Web

Dans la tête de l’ergonome…

Dans la tête de l’ergonome…

(7)

Dans la tête du designer…

Dans la tête du designer…

v1.0 7

(c) 2013 – Ergonomie du Web

(8)

Dans la tête de l’ergonome…

Dans la tête de l’ergonome…

v1.0 8

(c) 2013 – Ergonomie du Web

Cahier des charges Cahier des charges Une chaise d’école pour une classe de

maternelle Une chaise d’école pour une classe de

maternelle adaptée

aux enfants adaptée

aux enfants

(9)

Dans la tête du designer…

Dans la tête du designer…

v1.0 9

(c) 2013 – Ergonomie du Web

Cahier des charges Cahier des charges Une chaise d’école pour une classe de

maternelle Une chaise d’école pour une classe de

maternelle

(10)

v1.0 10 (c) 2013 – Ergonomie du Web

Ergonomie VS Design Ergonomie VS Design

Design Design

Approche esthétique d'un objet, tant esthétique au niveau des matériaux qui le composent que de sa forme, que de sa taille et de ses couleurs.

Approche esthétique d'un objet, tant esthétique au niveau des matériaux qui le composent que de sa forme, que de sa taille et de ses couleurs.

Ergonomie Ergonomie

Concevoir un objet utileutile et utilisable utilisable pour un utilisateur donné dans un contexte

contexte particulier.

Concevoir un objet utile et utilisableutile utilisable pour un utilisateur donné dans un

contexte

contexte particulier.

VSVS

(11)

v1.0 11 (c) 2013 – Ergonomie du Web

Ergonomie VS Design Ergonomie VS Design

Design Design

Approche esthétique d'un objet, tant esthétique au niveau des matériaux qui le composent que de sa forme, que de sa taille et de ses couleurs.

Approche esthétique d'un objet, tant esthétique au niveau des matériaux qui le composent que de sa forme, que de sa taille et de ses couleurs.

Ergonomie Ergonomie

Concevoir un objet utileutile et utilisable utilisable pour un utilisateur donné dans un contexte

contexte particulier.

Concevoir un objet utile et utilisableutile utilisable pour un utilisateur donné dans un

contexte

contexte particulier.

VSVS

Efficacité Efficience Satisfaction

(12)

S’adapt er au contexte

© Sebastian DUDA - flickr

(13)

v1.0 13 (c) 2013 – Ergonomie du Web

S’adapter au contexte S’adapter au contexte

Contexte utilisateur Contexte utilisateur

• Prise en compte des besoins et attentes de l’utilisateur

• Culture, habitudes, personalité

• Expérience du web

• Niveau d’expertise

• Etat d’esprit

• Situation : travail, loisir…

• Support : Ordinateur / Tablette / Mobile

• Prise en compte des besoins et attentes de l’utilisateur

• Culture, habitudes, personalité

• Expérience du web

• Niveau d’expertise

• Etat d’esprit

• Situation : travail, loisir…

• Support : Ordinateur / Tablette / Mobile

Contexte client Contexte client

• Type de site

• Contraintes budgetaires

• Planning

• Choix politique

• Choix marketing

• Goûts du décideur

• Type de site

• Contraintes budgetaires

• Planning

• Choix politique

• Choix marketing

• Goûts du décideur

(14)

v1.0 14

Sommaire Sommaire

22 Processus et méthodesProcessus et méthodes

11 Qu’est ce que l’ergonomie ?Qu’est ce que l’ergonomie ?

33 Les critères de Bastien et ScapinLes critères de Bastien et Scapin

(c) 2013 – Ergonomie du web

44 Et la qualité web dans tout ça !Et la qualité web dans tout ça ! 55 Pour aller plus loin…Pour aller plus loin…

(15)

15

Processus & méthodes Processus & méthodes

L’ergonomie n’est pas une discipline ponctuelle mais une préoccupation générale qui doit être présente tout au long tout au long

du projet.

Une seule méthode est insuffisante. L’ergonomie nécessite des évaluations composites évaluations composites :

Inspection (grilles de critères)

Evaluation experte

Méthode des personas

Tests utilisateurs (interviews, eye-tracking)

Tests A/B

Tri des cartes

v1.0

(c) 2013 – Ergonomie du web

(16)

« La méthode des personas consiste à créer des fiches d’identité des utilisateurs afin de répondre à leurs besoins spécifiques sur les sites web. Ces fiches détaillent les caractéristiques des participants de façon théâtrale et permettent de faciliter les pratiques de conception des sites web » (extrait de la conférence FLUPA)

« La méthode des personas consiste à créer des fiches d’identité des utilisateurs afin de répondre à leurs besoins spécifiques sur les sites web. Ces fiches détaillent les caractéristiques des participants de façon théâtrale et permettent de faciliter les pratiques de conception des sites web » (extrait de la conférence FLUPA)

Méthode des personas Méthode des personas

v1.0 16

(c) 2013 – Ergonomie du Web

(17)

« L’eye-tracking permet de collecter tout un ensemble de données (nombre de clics, temps de réalisation des tâches, temps à la première fixation de zones précises…) qui peuvent apporter énormément à l’analyse d’un site internet.

Les cartes de chaleur permettent de voir quelles sont les zones qui ont été les plus regardées par vos internautes. » (weXperience)

« L’eye-tracking permet de collecter tout un ensemble de données (nombre de clics, temps de réalisation des tâches, temps à la première fixation de zones précises…) qui peuvent apporter énormément à l’analyse d’un site internet.

Les cartes de chaleur permettent de voir quelles sont les zones qui ont été les plus regardées par vos internautes. » (weXperience)

Eye tracking / Heatmap Eye tracking / Heatmap

v1.0 17

(c) 2013 – Ergonomie du Web

(source : Amélie Boucher – Ergonomie web illustrée)

(18)

« Le test A/B est une technique de marketing qui consiste à proposer plusieurs variantes d'un même objet qui diffèrent selon un seul critère (par exemple, la couleur d'un emballage) afin de déterminer la version qui donne les meilleurs résultats auprès des consommateurs. » (Wikipédia)

« Le test A/B est une technique de marketing qui consiste à proposer plusieurs variantes d'un même objet qui diffèrent selon un seul critère (par exemple, la couleur d'un emballage) afin de déterminer la version qui donne les meilleurs résultats auprès des consommateurs. » (Wikipédia)

Tests A/B Tests A/B

v1.0 18

(c) 2013 – Ergonomie du Web

12% de conversion

25% de conversion

(19)

« Le tri de cartes est une méthode d'organisation des contenus. »

(Ergolab)

Cet atelier est organisé avec un groupe d’utilisateurs représentatifs de la cible finale.

« Le tri de cartes est une méthode d'organisation des contenus. »

(Ergolab)

Cet atelier est organisé avec un groupe d’utilisateurs représentatifs de la cible finale.

Tri des cartes Tri des cartes

v1.0 19

(c) 2013 – Ergonomie du Web

(20)

v1.0 20

Sommaire Sommaire

22 Processus et méthodesProcessus et méthodes

11 Qu’est ce que l’ergonomie ?Qu’est ce que l’ergonomie ?

33 Les critères de Bastien & ScapinLes critères de Bastien & Scapin

(c) 2013 – Ergonomie du web

44 Et la qualité web dans tout ça !Et la qualité web dans tout ça ! 55 Pour aller plus loin…Pour aller plus loin…

(21)

21

Les critères ergonomiques de Bastien &

Les critères ergonomiques de Bastien &

Scapin Scapin

Christian Bastien et Dominique Scapin sont deux chercheurs français de

l’INRIA.

Ils ont publié en 1993 une liste de 18 critères répartis en 8 dimensions:

Guidage 

Charge de Travail

Contrôle Explicite

Adaptabilité 

Gestion des Erreurs 

Homogénéité / Cohérence

Signifiance des Codes et Dénominations

Compatibilité 

v1.0

(c) 2013 – Ergonomie du web

Sources : Bastien, J.M.C., Scapin, D. (1993) Ergonomic Criteria for the Evaluation of Human-Computer interfaces et www.ergolab.net

Sources : Bastien, J.M.C., Scapin, D. (1993) Ergonomic Criteria for the Evaluation of Human-Computer interfaces et www.ergolab.net

(22)

22

Bastien & Scapin – 1/Guidage Bastien & Scapin – 1/Guidage

Incitation dans les actions à effectuer

Accompagner l’utilisateur dans sa tâche.

Groupement/Distinction entre Items

Favoriser une meilleure reconnaissance des éléments.

Feedback immédiat

Rassurer l’utilisateur.

Lisibilité

Favoriser la compréhension.

Localisation

Permettre à l’utilisateur de se repérer dans le site.

v1.0

(c) 2013 – Ergonomie du web

Guidage

Conseiller, orienter, informer et conduire l’utilisateur tout au long de son parcours.

Guidage

Conseiller, orienter, informer et conduire l’utilisateur tout au long de son parcours.

(23)

23

Bastien & Scapin – 1/Guidage Bastien & Scapin – 1/Guidage

Incitation dans les actions à effectuer

Accompagner l’utilisateur dans sa tâche.

v1.0

(c) 2013 – Ergonomie du web

Affordance

L’affordance est la capacité d'un système ou d'un produit à suggérer sa propre utilisation.

Affordance

L’affordance est la capacité d'un système ou d'un produit à suggérer sa propre utilisation.

(24)

v1.0 24 (c) 2013 – Ergonomie du Web

Bastien & Scapin – 1/Guidage

Bastien & Scapin – 1/Guidage

(25)

v1.0 25 (c) 2013 – Ergonomie du Web

Bastien & Scapin – 1/Guidage

Bastien & Scapin – 1/Guidage

(26)

26

Bastien & Scapin – 1/Guidage Bastien & Scapin – 1/Guidage

Groupement/Distinction entre Items

Favoriser une meilleure reconnaissance des éléments.

v1.0

(c) 2013 – Ergonomie du web

Loi de proximité de la Gestalt

 deux éléments proches ont des points communs

 deux éléments éloignés ont peu de lien Loi de proximité de la Gestalt

 deux éléments proches ont des points communs

 deux éléments éloignés ont peu de lien

Loi de similarité de la Gestalt

 L’utilisateur regroupe les choses qui se

ressemblent (taille, forme, couleur, contenu et comportement).

Loi de similarité de la Gestalt

 L’utilisateur regroupe les choses qui se

ressemblent (taille, forme, couleur, contenu et comportement).

(27)

v1.0 27 (c) 2013 – Ergonomie du Web

Bastien & Scapin – 1/Guidage

Bastien & Scapin – 1/Guidage

(28)

28

Bastien & Scapin – 1/Guidage Bastien & Scapin – 1/Guidage

Feedback immédiat

Rassurer l’utilisateur.

v1.0

(c) 2013 – Ergonomie du web

(29)

29

Bastien & Scapin – 1/Guidage Bastien & Scapin – 1/Guidage

Lisibilité

Favoriser la compréhension.

v1.0

(c) 2013 – Ergonomie du web

(30)

v1.0 30 (c) 2013 – Ergonomie du Web

Bastien & Scapin – 1/Guidage

Bastien & Scapin – 1/Guidage

(31)

31

Bastien & Scapin – 1/Guidage Bastien & Scapin – 1/Guidage

Localisation

Permettre à l’utilisateur de se repérer dans le site.

v1.0

(c) 2013 – Ergonomie du web

(32)

32

Bastien & Scapin – 2/Charge de travail Bastien & Scapin – 2/Charge de travail

Brièveté (Concision & Actions Minimales)

Garantir la simplicité de l’interface.

Densité de l’information

Afficher uniquement les informations nécessaires.

v1.0

(c) 2013 – Ergonomie du web

Charge de travail

Optimiser le nombre d’actions demandées a l’utilisateur.

Charge de travail

Optimiser le nombre d’actions demandées a l’utilisateur.

(33)

v1.0 33 (c) 2013 – Ergonomie du Web

Bastien & Scapin – 2/Charge de travail

Bastien & Scapin – 2/Charge de travail

(34)

v1.0 34 (c) 2013 – Ergonomie du Web

Bastien & Scapin – 2/Charge de travail

Bastien & Scapin – 2/Charge de travail

(35)

35

Bastien & Scapin – 3/Contrôle explicite Bastien & Scapin – 3/Contrôle explicite

Actions explicites

Rendre explicite la relation entre le fonctionnement de l’interface et les actions des utilisateurs.

Contrôle utilisateur

Permettre à l’utilisateur d’interrompre à tout moment une tâche en cours.

Avertir l’utilisateur sur les actions du système (ex: nouvelle fenêtre).

v1.0

(c) 2013 – Ergonomie du web

Contrôle explicite

Laisser l’utilisateur contrôler le déroulement (interruption, reprise) de ses actions et l’en avertir si ce n’est pas le cas.

Contrôle explicite

Laisser l’utilisateur contrôler le déroulement (interruption, reprise) de ses actions et l’en avertir si ce n’est pas le cas.

(36)

36

Bastien & Scapin – 4/Adaptabilité Bastien & Scapin – 4/Adaptabilité

Flexibilité

Mettre à disposition des éléments de personnalisation de l’interface pour les actions fréquemment utilisées.

Prise en compte de l’expérience utilisateur

Fournir une aide aux novices et des raccourcis aux experts.

v1.0

(c) 2013 – Ergonomie du web

Adaptabilité

Laisser l’utilisateur personnaliser et contrôler une interface en fonction de ses besoins (notifications, tableaux de bords, couleurs …).

Adaptabilité

Laisser l’utilisateur personnaliser et contrôler une interface en fonction de ses besoins (notifications, tableaux de bords,

couleurs …).

(37)

v1.0 37 (c) 2013 – Ergonomie du Web

Bastien & Scapin – 4/Adaptabilité

Bastien & Scapin – 4/Adaptabilité

(38)

38

Bastien & Scapin – 5/Gestion des Bastien & Scapin – 5/Gestion des

erreurs erreurs

Protection contre les erreurs

Détecter et prévenir les erreurs ou actions impossibles.

Qualité des messages d’erreurs

Afficher un message d’erreur explicite.

Indiquer la cause de l’erreur.

Fournir une aide à la correction.

v1.0

(c) 2013 – Ergonomie du web

Gestion des erreurs

Eviter, réduire et corriger les erreurs lorsqu’elles surviennent.

Gestion des erreurs

Eviter, réduire et corriger les erreurs lorsqu’elles surviennent.

(39)

v1.0 39 (c) 2013 – Ergonomie du Web

Bastien & Scapin – 5/Gestion des Bastien & Scapin – 5/Gestion des

erreurs

erreurs

(40)

40

Bastien & Scapin – 6/

Bastien & Scapin – 6/ Homogénéité- Homogénéité- Cohérence

Cohérence

Capitaliser sur l’apprentissage interne

La charte graphique est homogène sur tout le site.

La nomenclature des actions est identique sur toutes les pages du site.

Capitaliser sur l’apprentissage externe

Respecter les standards et les conventions du web.

Concevoir des applications professionnelles homogènes.

v1.0

(c) 2013 – Ergonomie du web

Homogénéité / Cohérence

Conserver les choix de conception et codes graphiques pour des éléments et actions similaires pour favoriser

l’apprentissage.

Homogénéité / Cohérence

Conserver les choix de conception et codes graphiques pour des éléments et actions similaires pour favoriser

l’apprentissage.

(41)

41

Bastien & Scapin – 7/

Bastien & Scapin – 7/ Signifiance des Signifiance des codes

codes

Utiliser un langage et des icônes compréhensibles.

Eviter les termes techniques.

Capitaliser sur les connaissances des utilisateurs (professionnelles ou personnelles).

v1.0

(c) 2013 – Ergonomie du web

Signifiance des codes et dénominations

Choisir de manière appropriée les mots et les symboles utilisés sur un site ou une application.

Signifiance des codes et dénominations

Choisir de manière appropriée les mots et les symboles utilisés sur un site ou une application.

(42)

42

Bastien & Scapin – 8/

Bastien & Scapin – 8/ Compatibilité Compatibilité

Caractéristiques intrasèques (âge, capacité…) : le site est accessible.

Caractéristiques liées à la tâche de l’utilisateur.

Le système doit être compatible avec les différentes technologies.

v1.0

(c) 2013 – Ergonomie du web

Compatibilité

Le système doit s’adapter au mieux aux caractéristiques de l’utilisateur.

Compatibilité

Le système doit s’adapter au mieux aux caractéristiques de l’utilisateur.

(43)

v1.0 43

Sommaire Sommaire

22 Processus et méthodesProcessus et méthodes

11 Qu’est ce que l’ergonomie ?Qu’est ce que l’ergonomie ?

33 Les critères de Bastien et ScapinLes critères de Bastien et Scapin

(c) 2013 – Ergonomie du web

44 Et la qualité web dans tout ça !Et la qualité web dans tout ça ! 55 Pour aller plus loin…Pour aller plus loin…

(44)

Toolbox Sopra Group - July 2010

VISIBILITE

 Les utilisateurs trouvent le site

PERCEPTION

La navigation est simple et intuitive

TECHNIQUE

Le site/l’application fonctionne

CONTENU

Les contenus sont pertinents

SERVICES

Le site/l’application propose des services VISIBILITE

Les utilisateurs trouvent le site

PERCEPTION

La navigation est simple et intuitive

TECHNIQUE

Le site/l’application fonctionne

CONTENU

Les contenus sont pertinents

SERVICES

Le site/l’application propose des services

Qu’est-ce qu’un site Web de qualité ? Qu’est-ce qu’un site Web de qualité ?

Processus support

Processus clef

(source :Temesis)

(45)

Toolbox Sopra Group - July 2010

http://w3qualite.net/outils/qualite-web-les-bonnes-pratiques-pour-ameliorer-vos-sites-une-premiere-impression

(46)

v1.0 46

Sommaire Sommaire

22 Processus et méthodesProcessus et méthodes

11 Qu’est ce que l’ergonomie ?Qu’est ce que l’ergonomie ?

33 Les critères de Bastien et ScapinLes critères de Bastien et Scapin

(c) 2013 – Ergonomie du web

44 Et la qualité web dans tout ça !Et la qualité web dans tout ça ! 55 Pour aller plus loin…Pour aller plus loin…

(47)

Amélie Boucher est consultante en

Ergonomie & Architecture de l'information.

Ses missions sont consacrées à

l'expérience utilisateur web et mobile, aussi bien dans des contextes de

conception que d'évaluation

Productrice du site www.ergolab.net Amélie Boucher est

consultante en

Ergonomie & Architecture de l'information.

Ses missions sont consacrées à

l'expérience utilisateur web et mobile, aussi bien dans des contextes de

conception que d'évaluation

Productrice du site www.ergolab.net

Amelie Boucher - Ergonomie du Web Amelie Boucher - Ergonomie du Web

v1.0 47

(c) 2013 – Ergonomie du Web

(48)

Conférences autour du design, de la qualité et de l’accessibilité.

La Philosophie : Promouvoir, directement ou indirectement, le développement d’un web de qualité via des manifestations, forums ou conférences. (www.paris-web.fr - www.sudweb.fr )

Conférences autour du design, de la qualité et de l’accessibilité.

La Philosophie : Promouvoir, directement ou indirectement, le développement d’un web de qualité via des manifestations, forums ou conférences. (www.paris-web.fr - www.sudweb.fr )

Les conférences de Paris Web & Sud Web Les conférences de Paris Web & Sud Web

v1.0 48

(c) 2013 – Ergonomie du Web

(49)

v1.0 49 (c) 2013 – Ergonomie du Web

Sopra Group organise la première édition du "Student Programming Battle" le mardi 21 janvier 2014 à partir de 18h00.

Le Student Programming Battle est un concours de code en équipe entre les écoles et universités de la région sud-est (de Nice à Montpellier) et qui se déroule en parallèle et en visio sur les 4 sites Sopra Group sud-est.

Principe

Résoudre en équipe des exercices sur des problèmes d'algorithme

(backtracking, tri, théorie des graphes, etc.) avec le langage de votre choix (java, C, C++, .net, Excel, ASM, etc.).

Le but est de terminer le plus d'exercices possibles en 1h30.

Venez défendre vos couleurs ! Lieu

La battle se déroulera sur le site Sopra Group de Montpellier situé à l'adresse suivante : 1231 Avenue du Mondial 98 34000 Montpellier

Informations et inscription sur http://www.battle.sopragroup.com Le nombre de places étant limité, formez vos équipes de 3 personnes

et venez vite vous inscrire !

(50)

T O G E T H E R T A L E N T E D

Unissons nos Talents

T O G E T H E R T A L E N T E D

50

Fin

Merci de votre attention …

v1.0

(c) 2013 – Ergonomie du web

Figure

Updating...

References

Related subjects :