Ergonomie du Web Formation

(1)

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

Unissons nos Talents

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

(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

(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

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…

v1.0 5

Cahier des charges Cahier des charges

Une chaise Une chaise

• une assise

• 4 pieds

• un dossier

• une assise

• 4 pieds

• un dossier

(6)

Dans la tête de l’ergonome…

(7)

Dans la tête du designer…

v1.0 7

(8)

Dans la tête de l’ergonome…

v1.0 8

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…

v1.0 9

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)

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.

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

VSVS

(11)

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.

Ergonomie Ergonomie

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

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

contexte

VSVS

Efficacité Efficience Satisfaction

(12)

S’adapt er au contexte

© Sebastian DUDA - flickr

(13)

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

(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

(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)

Méthode des personas Méthode des personas

v1.0 16

(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

(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)

Tests A/B Tests A/B

v1.0 18

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

(20)

v1.0 20

Sommaire Sommaire

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

(21)

21

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

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

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

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)

Bastien & Scapin – 1/Guidage

(25)

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

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)

Bastien & Scapin – 1/Guidage

(28)

28

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

 Feedback immédiat

 Rassurer l’utilisateur.

v1.0

(29)

29

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

 Lisibilité

 Favoriser la compréhension.

v1.0

(30)

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

(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

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)

Bastien & Scapin – 2/Charge de travail

(34)

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

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

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)

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

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)

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

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

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

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

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

(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

(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

(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

(49)

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)

Unissons nos Talents

50

Fin

Merci de votre attention …

v1.0