Ergonomie du Web Formation Unissons nos Talents TALENTED

Ergonomie du Web Formation Unissons nos Talents TALENTED TOGETHER Ergonomie du web v 1. 0 1

Votre animatrice Samia CHOUIT Caroline BARON Chef de Projet 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 schouit@sopragroup. com gzegre@sopragroup. com (c) 2013 – Ergonomie du web v 1. 0 2

Objectifs généraux de la formation n Appréhender et comprendre les enjeux n n n Connaître les critères principaux n n n 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 ? Bastien & Scapin Amélie Boucher Voir plus large… l’ergonomie au cœur de la Qualité Web ! (c) 2013 – Ergonomie du web v 1. 0 3

Sommaire 1 Qu’est ce que l’ergonomie ? 2 Processus et méthodes 3 Les critères

Mise en situation… • une assise • 4 pieds • un dossier Cahier des

Dans la tête de l’ergonome… (c) 2013 – Ergonomie du Web v 1. 0

Dans la tête du designer… (c) 2013 – Ergonomie du Web v 1. 0

Dans la tête de l’ergonome… adaptée aux enfants Cahier des charges Une chaise d’école

Dans la tête du designer… Cahier des charges Une chaise d’école pour une classe

Ergonomie VS Design Ergonomie Concevoir un objet utile et utilisable pour un utilisateur donné dans un contexte particulier. VS 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. (c) 2013 – Ergonomie du Web v 1. 0 10

Ergonomie VS Design Ergonomie Efficacité Concevoir un objet utile et utilisable pour un utilisateur donné dans un contexte particulier. Efficience Satisfaction VS 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. (c) 2013 – Ergonomie du Web v 1. 0 11

S’adapter au contexte © Sebastian DUDA - flickr

S’adapter au contexte Contexte utilisateur Contexte client • Prise en compte des besoins et attentes de l’utilisateur • Type de site • Culture, habitudes, personalité • Contraintes budgetaires • Expérience du web • Planning • Niveau d’expertise • Choix politique • Etat d’esprit • Choix marketing • Situation : travail, loisir… • Goûts du décideur • Support : Ordinateur / Tablette / Mobile (c) 2013 – Ergonomie du Web v 1. 0 13

Processus & méthodes n L’ergonomie n’est pas une discipline ponctuelle mais une préoccupation générale qui doit être présente tout au long du projet. n Une seule méthode est insuffisante. L’ergonomie nécessite des évaluations composites : n n n Inspection (grilles de critères) Evaluation experte Méthode des personas Tests utilisateurs (interviews, eye-tracking) Tests A/B Tri des cartes (c) 2013 – Ergonomie du web v 1. 0 15

Méthode des personas « 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) (c) 2013 – Ergonomie du Web v 1. 0 16

Eye tracking / Heatmap « 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. » (we. Xperience) (source : Amélie Boucher – Ergonomie web illustrée) (c) 2013 – Ergonomie du Web v 1. 0 17

Tests A/B « 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) 12% de conversion 25% de conversion (c) 2013 – Ergonomie du Web v 1. 0 18

Tri des cartes « 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. (c) 2013 – Ergonomie du Web v 1. 0 19

Les critères ergonomiques de Bastien & Scapin n Christian Bastien et Dominique Scapin sont deux chercheurs français de l’INRIA. n Ils ont publié en 1993 une liste de 18 critères répartis en 8 dimensions: n n n n Guidage Charge de Travail Contrôle Explicite Adaptabilité Gestion des Erreurs Homogénéité / Cohérence Signifiance des Codes et Dénominations Compatibilité Sources : Bastien, J. M. C. , Scapin, D. (1993) Ergonomic Criteria for the Evaluation of Human-Computer interfaces et www. ergolab. net (c) 2013 – Ergonomie du web v 1. 0 21

Bastien & Scapin – 1/Guidage Conseiller, orienter, informer et conduire l’utilisateur tout au long de son parcours. n Incitation dans les actions à effectuer n n Groupement/Distinction entre Items n n Rassurer l’utilisateur. Lisibilité n n Favoriser une meilleure reconnaissance des éléments. Feedback immédiat n n Accompagner l’utilisateur dans sa tâche. Favoriser la compréhension. Localisation n Permettre à l’utilisateur de se repérer dans le site. (c) 2013 – Ergonomie du web v 1. 0 22

Bastien & Scapin – 1/Guidage n Incitation dans les actions à effectuer n Accompagner l’utilisateur dans sa tâche. Affordance L’affordance est la capacité d'un système ou d'un produit à suggérer sa propre utilisation. (c) 2013 – Ergonomie du web v 1. 0 23

Bastien & Scapin – 1/Guidage (c) 2013 – Ergonomie du Web v 1. 0

Bastien & Scapin – 1/Guidage n Groupement/Distinction entre Items n Favoriser une meilleure reconnaissance des éléments. 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). (c) 2013 – Ergonomie du web v 1. 0 26

Bastien & Scapin – 1/Guidage n Feedback immédiat n Rassurer l’utilisateur. (c) 2013 –

Bastien & Scapin – 1/Guidage n Lisibilité n Favoriser la compréhension. (c) 2013 –

Bastien & Scapin – 1/Guidage n Localisation n Permettre à l’utilisateur de se repérer

Bastien & Scapin – 2/Charge de travail Optimiser le nombre d’actions demandées a l’utilisateur. n Brièveté (Concision & Actions Minimales) n n Garantir la simplicité de l’interface. Densité de l’information n Afficher uniquement les informations nécessaires. (c) 2013 – Ergonomie du web v 1. 0 32

Bastien & Scapin – 2/Charge de travail (c) 2013 – Ergonomie du Web v

Bastien & Scapin – 3/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. n Actions explicites n n Rendre explicite la relation entre le fonctionnement de l’interface et les actions des utilisateurs. Contrôle utilisateur n n 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). (c) 2013 – Ergonomie du web v 1. 0 35

Bastien & Scapin – 4/Adaptabilité Laisser l’utilisateur personnaliser et contrôler une interface en fonction de ses besoins (notifications, tableaux de bords, couleurs …). n Flexibilité n n 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 n Fournir une aide aux novices et des raccourcis aux experts. (c) 2013 – Ergonomie du web v 1. 0 36

Bastien & Scapin – 4/Adaptabilité (c) 2013 – Ergonomie du Web v 1. 0

Bastien & Scapin – 5/Gestion des erreurs Eviter, réduire et corriger les erreurs lorsqu’elles surviennent. n Protection contre les erreurs n n Qualité des messages d’erreurs n n n Détecter et prévenir les erreurs ou actions impossibles. Afficher un message d’erreur explicite. Indiquer la cause de l’erreur. Fournir une aide à la correction. (c) 2013 – Ergonomie du web v 1. 0 38

Bastien & Scapin – 5/Gestion des erreurs (c) 2013 – Ergonomie du Web v

Bastien & Scapin – 6/Homogénéité-Cohérence Homogénéité / Cohérence Conserver les choix de conception et codes graphiques pour des éléments et actions similaires pour favoriser l’apprentissage. n Capitaliser sur l’apprentissage interne n n n 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 n n Respecter les standards et les conventions du web. Concevoir des applications professionnelles homogènes. (c) 2013 – Ergonomie du web v 1. 0 40

Bastien & Scapin – 7/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. n Utiliser un langage et des icônes compréhensibles. n Eviter les termes techniques. n Capitaliser sur les connaissances des utilisateurs (professionnelles ou personnelles). (c) 2013 – Ergonomie du web v 1. 0 41

Bastien & Scapin – 8/Compatibilité Le système doit s’adapter au mieux aux caractéristiques de l’utilisateur. n Caractéristiques intrasèques (âge, capacité…) : le site est accessible. n Caractéristiques liées à la tâche de l’utilisateur. n Le système doit être compatible avec les différentes technologies. (c) 2013 – Ergonomie du web v 1. 0 42

Qu’est-ce qu’un site Web de qualité ? VISIBILITE è Les utilisateurs trouvent le site PERCEPTION Processus support èLa navigation est simple et intuitive TECHNIQUE èLe site/l’application fonctionne CONTENU èLes contenus sont pertinents Processus clef SERVICES èLe site/l’application propose des services (source : Temesis) Toolbox Sopra Group - July 2010

http: //w 3 qualite. net/outils/qualite-web-les-bonnes-pratiques-pour-ameliorer-vos-sites-une-premiere-impression Toolbox Sopra Group - July 2010

Amelie Boucher - Ergonomie du Web 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 (c) 2013 – Ergonomie du Web v 1. 0 47

Les conférences de Paris Web & Sud Web 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 ) (c) 2013 – Ergonomie du Web v 1. 0 48

Sopra Group organise la première édition du "Student Programming Battle" le mardi 21 janvier 2014 à partir de 18 h 00. 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 1 h 30. 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 ! (c) 2013 – Ergonomie du Web v 1. 0 49