analyse ergonomique - markito sanches

2017-02-06

1

Analyse ergonomique

Marcos Sanches

Commerce Électronique

2

Le web analytique

«l’analyse de données quantitatives et qualitatives issues de votre site web et de vos concurrents, pour induire une optimisation continue de l’interaction en ligne dont bénéficient vos clients existants et potentiels, et qui se traduit en résultats attendus».

–Avinash Kaushik (page 7)

Web analytique 2.0

2017-02-06

2

1. Analyse ergonomique d’un site web

� L’ergonomie d'un site web peut être définie par sa capacité à répondre

efficacement aux attentes des

utilisateurs et à leur fournir un confort

de navigation.

� Pourquoi s’intéresser à cet aspect?

3

1.1 Définition et but


� Depuis ces quelques années le nombre de site web à explosé sur internet.

� Avec tout cette variété de choix, l’usager est très peu tolérant des sites web compliqués

4

1.2 Importance de l’ergonomie (1/2)

2017-02-06

3

Le nombre de site web

5Roxanne Bauer (2014); Media

(R)evolutions: Internet Live Stat; http://blogs.worldbank.org/publicsphere/media-revolutions-internet-live-stats


� Un site web qui ne performe pas au niveau de l’ergonomie est assuré de perdre de la rentabilité au niveau de son modèle d’affaire.

� ‘’There are plenty of other web sites available; leaving is the first line of defense when users encounter a difficulty.’’ -John Britsios

6

1.2 Importance de l’ergonomie (2/2)

2017-02-06

4


� Créer un site web qui tiens compte de la diversité des profils des visiteurs.

7

1.3 Principaux défis à relever (1/2)


� Tenir compte de l’évolution de la technologie

qui est en mutation constante.

� Le milieu web change constamment surtout au niveau technologique

� (par exemple, l’apparition des téléphones intelligents et des tablettes)

8

1.3 Principaux défis à relever (2/2)

2017-02-06

5


� L’analyse ergonomique est devenu plus

importante que jamais.

� Objectif: Optimiser l’utilisabilité et l’efficacité des pages d’un site

� Quoi: pages de site

� Qui: Expert/Analyste

� Comment: Grille d’analyse9

1.4 Sommaire

2. Grille d’analyse ergonomique

� Représentent un ensemble de règles qui permettent de voir, comprendre et expliquer des problèmes ergonomiques d’un site web.

10

Présentation de la grille Scapin et Bastien

2017-02-06

6


� 1- Permettent de faire des analyses rapides et moins dispendieuses que les autres tests;

� 2- Peuvent être utilisés par n’importe quel type de personne (des non-spécialistes) comparativement aux autres tests.

� 3- Sont assez explicites pour permettre des mesures précises, et donne des résultats reproductibles

� Note: cadre permettant de comprendre le cheminement de l’analyste

11

Avantages de la grille de Scapin et Bastien


� Nous ne faisons pas de test avec des utilisateurs (usagers) pour ce type d’analyse.

� On ne peut pas recueillir des données utilisateurs qui sont parfois très pertinentes.

12

Inconvénient de la grille de Scapin et Bastien

2017-02-06

7


� Représente l’ensemble des méthodes utilisées pour conseiller, orienter et diriger l’usagerlors de ses interactions avec le site web.

� Dans cette classe, nous avons quatre catégories:

� 1- Incitation� 2- Groupement/Distinction entre items� 3- Feedback immédiat� 4- Lisibilité

13

2.1 GUIDAGE


� Pousser l’usager à exécuter des actions spécifiques en lui fournissant des indices.

� Exemple:

� Aider l’usager lors des entrées de données en indiquant le format des valeurs voulues:

� Date (jj/mm/aaaa) _ _ / _ _ / _ _

14

2.1 GUIDAGE - Incitation

2017-02-06

8


15

2.1 GUIDAGE - Incitation


� Rassembler les différents éléments visuels de façon homogène et ordonnée.

� Groupement/Distinction par la Localisation

� Positionner les items les uns par rapport aux autres afin d'indiquer leur appartenance, ou non, à une classe donnée d'objets.

� Exemple: Grouper les options de menus en � fonction des objets sur lesquels elles� s'appliquent.

16

2.1 GUIDAGE - Groupement/Distinction

2017-02-06

9


17


On distingue bien les types de liens(commerciaux Top vs Colonne vs Référencement Naturel)

Distinction par localisation et format


� Groupement/Distinction par le Format

� Donner aux éléments des caractéristiques graphiques particulières afin d'indiquer leur appartenance, ou non, à une classe donnée d'objets.

� Exemple: � Utiliser un symbole et la couleur rouge pour

les boîtes de dialogue d'alerte ou d'erreur.

18


2017-02-06

10


19


La différence de format (couleur) entre les rubriques news, games, Asmoplay et Supportpermet de signifier que la rubrique news est la rubrique active


� Dans tous les cas, le site web doit répondre à l'utilisateur en fonction des actions et des requêtes de ce dernier.

� Tenir l’utilisateur, en temps réel, informé de ce qui se passe

� Exemple: � Dans les cas où les traitements sont longs,

une information indiquant à l'utilisateur que les traitements sont en cours devrait lui être fournie.

20

2.1 GUIDAGE - Feedback

2017-02-06

11


21

2.1 GUIDAGE - Feedback


� Les caractéristiques lexicales de présentation des informations sur l'écran doivent faciliter la lecture de ces informations.

� Exemple: � Il est préférable de présenter un texte

avec quelques lignes longues plutôt que de nombreuses lignes courtes.

22

2.1 GUIDAGE - Lisibilité

2017-02-06

12


23


Pouvons-nous bien lire avec ce fond ?


24


Jean Claude GROSJEAN; Design d’interface et critère ergonomique 2 : Lisibilité; http://www.qualitystreet.fr/2010/08/04/design-dinterface-et-critere-ergonomique-2-lisibilite/

2017-02-06

13


� L'ensemble des éléments de l'interface web qui a un rôle dans la réduction de la charge perceptive des usagers, de même que dans l'augmentation de l'efficacité du dialogue.

� Dans cette classe, nous avons deux catégories:

� 1- Brièveté (Concision, Actions Minimales)� 2- Densité informationnelle

25

2.2 CHARGE DE TRAVAIL


� Limiter le travail de lecture, d'entrée et les étapes par lesquelles doivent passer les usagers.

� Concision� Diminuer l’effort de travail au niveau

perceptif pour ce qui est des éléments individuels d'entrée ou de sortie.

� Exemple: � Lorsqu'une unité de mesure est associée à un

champ de données, celle-ci doit faire partie du label du champ plutôt qu'être saisie par l'utilisateur.

26

2.2 CHARGE DE TRAVAIL - Brièveté

2017-02-06

14


27



28


Garanti la simplicité de l’interface et la pertinence des fonctionnalités.

Concision et simplicité sont intimement liées

« LESS IS MORE !»

2017-02-06

15


� Actions Minimales

� Diminuer les étapes par lesquelles doivent passer les usagers pour accomplir leur tâches dans votre site web.

� Exemple:� Il ne faudrait pas demande aux usagers de

donner des informations qui peuvent être déduites par le système.(Demander l’âge, alors que nous

� savons sa date de naissance)

29



� Diminuer l’effort de travail pour l’usager au niveau perceptif du site web, pour des ensembles d'éléments.

� Exemple: � Il faudrait seulement afficher les

informations nécessaires dans chacune des pages web du site.

30

2.2 CHARGE DE TRAVAIL Densité Informationnelle

2017-02-06

16


31

2.2 CHARGE DE TRAVAIL - Densité Informationnelle

Page web lourdement chargé d’information:


� Représente le contrôle qu'ont les

utilisateurs sur le traitement de leurs

actions dans le site web.


� 1- Actions explicites� 2- Contrôle utilisateur

32

2.3 CONTRÔLE EXPLICITE

2017-02-06

17


� Lorsqu'un usager est amené à interagir avec un site web, il s'attend implicitement à ce que le système lui obéisse. Il faut, donc éviter des actions de la part du site lorsque l'utilisateur n'a rien demandé.

� Exemple:

� L’entrée de commandes doit se terminer par une indication de fin (« Enter » , « OK ») à laquelle des possibilités d'édition doivent être préalables.

33

2.3 CONTRÔLE EXPLICITE - Actions explicites


34

2.3 CONTRÔLE EXPLICITE - Actions explicites

2017-02-06

18


� L’usager doit être convaincu qu'il a le contrôle sur le site web.

� Exemple:

� Ce dernier doit pouvoir annuler un traitement qu'il aurait demandé ou revenir à une étape antérieure du processus.

35

2.3 CONTRÔLE EXPLICITE - Contrôle Utilisateur


36

2.3 CONTRÔLE EXPLICITE - Contrôle UtilisateurPas de bouton pour annuler ma conversion. Je n’ai pas de contrôle.

Est-ce que je recommanderais ce site à mes amis?

2017-02-06

19


� Capacité du site web à réagir selon les

besoins et les préférences des usagers


� 1- Flexibilité� 2- Prise en Compte de l'Expérience de

l'Utilisateur

37

2.4 ADAPTABILITÉ


� Représente la capacité d’un site web à être adapté en fonction des besoins de l’usager.

� Ce dernier doit avoir l’option "personnaliser" l'interface selon son mode de travaille.

� Ex.: GMAIL

38

2.4 ADAPTABILITÉ - Flexibilité

2017-02-06

20


39

2.4 ADAPTABILITÉ - Flexibilité


� Le site web doit tenir compte du niveau d’expérience de l’usager. Un site doit fournir la possibilité d’aider un usager novice et des raccourcis aux experts.

40

2.4 ADAPTABILITÉ - Prise en Compte de l'Expérience de l'Utilisateur

2017-02-06

21


� Capacité du site web d'éviter ou de réduire les erreurs et de les corrigerlorsqu'elles surviennent.

� Dans cette classe, nous avons trois catégories:

� 1- Protection contre les erreurs� 2- Qualité des messages d‘erreurs� 3- Correction des erreurs

41

2.5 GESTION DES ERREURS


� Représente les moyens mise en place pour détecter et prévenir les erreurs.

� Exemple:

� La saisie d'une lettre dans un champ de numéro de téléphone ou plus importantes, la suppression d'un document.

42

2.5 GESTION DES ERREURS - Protection contre les erreurs

2017-02-06

22


43



� S'assurer que l'information fournies aux usagers sur la nature des erreurs commises et la façon de la réglée soit pertinente, facile à lire et exacte.

44


Ici, on nous énonce exactement les causes possibles de l’erreur

2017-02-06

23


45

2.5 GESTION DES ERREURS - Qualité des messages d‘erreurs

Ici, on nous énonce exactement les causes possibles de l’erreur


� Mettre à la disposition des usagers des moyens pour corriger leurs erreurs. Nous devons donc guider ce dernier sur les étapes à suivre afin de

rectifier l'erreur.

� Exemple:� Si le site a clairement identifié l'erreur, il devrait

pouvoir la mettre en valeur et proposer de modifier précisément ce qui est erroné.

46

2.5 GESTION DES ERREURS - Correction des erreurs

2017-02-06

24


47

2.5 GESTION DES ERREURS - Correction des erreurs


� Les choix de conception d'interface doivent être conservés pour des contextes identiques, et doivent être différents pour des contextes différents.

� Exemple:

� Toujours afficher au même endroit les boites pour la saisie des données.

48

2.6 HOMOGÉNÉITÉ/COHÉRENCE

2017-02-06

25


49

2.6 HOMOGÉNÉITÉ/COHÉRENCE


� Les informations dans un site web sont transmises de plusieurs façons. On ne peut plus juste se contenter de tous transmettre sans que ces informations soient claires et utiles pour l’usager.

� Tous les éléments que l’usager aperçoit dans le site doivent être explicites. Ce dernier doit être capable de savoir ce qui peut se produire en cliquant sur un bouton, une icône, le titre d'un rubrique ou l'intitulé d'un lien.

50

2.7 SIGNIFIANCE DES CODES ET DÉNOMINATIONS

2017-02-06

26


� Englobe toutes les interactions usagers/ site web. Ces interactions doivent être conçues pour que le site s'adapte le plus possible aux caractéristiques de l'utilisateur.

� Exemple: � Il se peut que l’usager ne dispose pas du

même environnement technologique que le concepteur. Nous devons donc vérifier que le site soit compatible avec tous les navigateurs et leurs différentes versions etc...

51

2.8 COMPATIBILITÉ


52

2.8 COMPATIBILITÉ

Lors de la conception d’un site web nous devons éviter d’avoir besoin de plug-in spécifiques.

Clairement un problème de compatibilité

2017-02-06

27

Exercice en classe

� Analyse d’une page du site de la compagnie Gazon à rabais à l’aide de la grille de Bastien & Scapin

� Page web: http://gazonarabais.com/

� Consignes

� Analyse ergonomique du site web d’une compagnie

� Compléter la grille de Bastien & Scapin

� Partage au groupe des résultats de l’analyse effectuée à la fin du cours

53

54

GuidageConseiller, orienter l'usager dans son interaction avec le système.

IncitationCritère élémentaire (barre d'état, mesure, espace, format, indice, titre, aide...tout élément facilitant la navigation.

Groupement/distinctionOrganisation visuelle de l'information pour illustrer une relation de classe de type appartenance/distinction par:− la localisation− le format

Feedback immédiatRétroaction du système:− qualité− rapidité

LisibilitéCritère élémentaire: caractéristiques lexicales de présentation des informations à l'écran (luminance, contraste, caractères, dimension, espacement, longueur des lignes, etc.)

Charge de travailRéduction de la charge perceptive ou mnésique.

Brièveté*Concision: éléments individuels d'entrée ou de sortie.*Actions minimales = séquences d'entrée (suites

d'actions pour atteindre un but).

Densité informationnelleCharge perceptive ou mnésique pour des ensembles d'éléments et non des items individuels

Contrôle explicite

Actions explicitesTransparence du système

Contrôle utilisateurRéversibilité: possibilité de revenir sur ses pas, d'annuler ses actions.

Grille pour référence

2017-02-06

28

55

Adaptabilité Flexibilité Alternatives (procédures, options, commandes) pour un même objectif.Prise en compte de l'expérience de l'utilisateurDébutant, intermédiaire, avancé.

Gestion des erreurs

Protection/prévention contre les erreursDétecter et prévenir les erreurs lors de la saisie vs validation.

Qualité des messages d'erreurPertinence, exactitude, facilité de lecture de la nature et des raisons des erreurs et solutions.

Correction des erreursMoyens mis à la disposition de l'usager pour faciliter la correction des erreurs.

Homogénéité/Cohérence

Cohérence interneCohérence générale des différents éléments du système entre eux.* Métaphore: cohérence des référents du système.* Mapping: cohérence de l'ensemble des signifiants.* Évidence (affordance): évidence physique pragmatique des éléments.

Signifiance des codes et dénominations

Relation sémantique forteRelation entre objet ou information affichée et référent.

Compatibilité (critère élémentaire)

Cohérence externeSimilitude entre divers éléments, environnements et applications.

Grille pour référence

analyse ergonomique - markito sanches

Documents