analyse ergonomique - markito sanches
Post on 16-Jun-2022
28 Views
Preview:
TRANSCRIPT
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
1. Analyse ergonomique d’un site web
� 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
1. Analyse ergonomique d’un site web
� 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
1. Analyse ergonomique d’un site web
� Créer un site web qui tiens compte de la diversité des profils des visiteurs.
7
1.3 Principaux défis à relever (1/2)
1. Analyse ergonomique d’un site web
� 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
1. Analyse ergonomique d’un site web
� 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
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
15
2.1 GUIDAGE - Incitation
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
17
2.1 GUIDAGE - Groupement/Distinction
On distingue bien les types de liens(commerciaux Top vs Colonne vs Référencement Naturel)
Distinction par localisation et format
2. Grille d’analyse ergonomique
� 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
2.1 GUIDAGE - Groupement/Distinction
2017-02-06
10
2. Grille d’analyse ergonomique
19
2.1 GUIDAGE - Groupement/Distinction
La différence de format (couleur) entre les rubriques news, games, Asmoplay et Supportpermet de signifier que la rubrique news est la rubrique active
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
21
2.1 GUIDAGE - Feedback
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
23
2.1 GUIDAGE - Lisibilité
Pouvons-nous bien lire avec ce fond ?
2. Grille d’analyse ergonomique
24
2.1 GUIDAGE - Lisibilité
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
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
27
2.2 CHARGE DE TRAVAIL - Brièveté
2. Grille d’analyse ergonomique
28
2.2 CHARGE DE TRAVAIL - Brièveté
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
2. Grille d’analyse ergonomique
� 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
2.2 CHARGE DE TRAVAIL - Brièveté
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
31
2.2 CHARGE DE TRAVAIL - Densité Informationnelle
Page web lourdement chargé d’information:
2. Grille d’analyse ergonomique
� Représente le contrôle qu'ont les
utilisateurs sur le traitement de leurs
actions dans le site web.
� Dans cette classe, nous avons deux catégories:
� 1- Actions explicites� 2- Contrôle utilisateur
32
2.3 CONTRÔLE EXPLICITE
2017-02-06
17
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
34
2.3 CONTRÔLE EXPLICITE - Actions explicites
2017-02-06
18
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
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
2. Grille d’analyse ergonomique
� Capacité du site web à réagir selon les
besoins et les préférences des usagers
� Dans cette classe, nous avons deux catégories:
� 1- Flexibilité� 2- Prise en Compte de l'Expérience de
l'Utilisateur
37
2.4 ADAPTABILITÉ
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
39
2.4 ADAPTABILITÉ - Flexibilité
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
43
2.5 GESTION DES ERREURS - Protection contre les erreurs
2. Grille d’analyse ergonomique
� 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
2.5 GESTION DES ERREURS - Protection contre les erreurs
Ici, on nous énonce exactement les causes possibles de l’erreur
2017-02-06
23
2. Grille d’analyse ergonomique
45
2.5 GESTION DES ERREURS - Qualité des messages d‘erreurs
Ici, on nous énonce exactement les causes possibles de l’erreur
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
47
2.5 GESTION DES ERREURS - Correction des erreurs
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
49
2.6 HOMOGÉNÉITÉ/COHÉRENCE
2. Grille d’analyse ergonomique
� 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
2. Grille d’analyse ergonomique
� 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É
2. Grille d’analyse ergonomique
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
top related