T O G E T H E RT A L E N T E D Unissons nos Talents T O G E T H E RT A L E N T E D v1.0 1 Ergonomie du web Ergonomie du Web Formation

2 Votre animatrice Samia CHOUIT Chef de Projet Division Sud Est Agence de Montpellier 1231, Avenue du Mondial 98 FR Montpellier Cedex 2 Tél : +33 (0) Fax : +33 (0) Caroline BARON Ingénieur d’études – Référent Qualité Web Division Sud Est Agence de Montpellier 1231, Avenue du Mondial 98 FR Montpellier Cedex 2 Tél : +33 (0) Fax : +33 (0) v1.0 (c) 2013 – Ergonomie du web

3 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 Qualité Web Voir plus large… l’ergonomie au cœur de la Qualité Web ! v1.0 (c) 2013 – Ergonomie du web

v1.0 4 Sommaire 2 2 Processus et méthodes 1 1 Qu’est ce que l’ergonomie ? 3 3 Les critères de Bastien et Scapin (c) 2013 – Ergonomie du web 4 4 Et la qualité web dans tout ça ! 5 5 Pour aller plus loin…

Mise en situation… v1.0 5 (c) 2013 – Ergonomie du Web Cahier des charges Une chaise une assise 4 pieds un dossier

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

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

Dans la tête de l’ergonome… v1.0 8 (c) 2013 – Ergonomie du Web 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

Dans la tête du designer… v1.0 9 (c) 2013 – Ergonomie du Web Cahier des charges Une chaise d’école pour une classe de maternelle Une chaise d’école pour une classe de maternelle

v (c) 2013 – Ergonomie du Web Ergonomie VS Design Design esthétique Approche esthétique d'un objet, tant au niveau des matériaux qui le composent que de sa forme, que de sa taille et de ses couleurs. Ergonomie utileutilisable contexte Concevoir un objet utile et utilisable pour un utilisateur donné dans un contexte particulier. VS

v (c) 2013 – Ergonomie du Web Ergonomie VS Design Design esthétique Approche esthétique d'un objet, tant au niveau des matériaux qui le composent que de sa forme, que de sa taille et de ses couleurs. Ergonomie utileutilisable contexte Concevoir un objet utile et utilisable pour un utilisateur donné dans un contexte particulier. VS Efficacité Efficience Satisfaction

S’adapter au contexte © Sebastian DUDA - flickr

v (c) 2013 – Ergonomie du Web S’adapter au contexte 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 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

v Sommaire 2 2 Processus et méthodes 1 1 Qu’est ce que l’ergonomie ? 3 3 Les critères de Bastien et Scapin (c) 2013 – Ergonomie du web 4 4 Et la qualité web dans tout ça ! 5 5 Pour aller plus loin…

15 Processus & méthodes tout au long 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. évaluations composites Une seule méthode est insuffisante. L’ergonomie nécessite des é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

« 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 v (c) 2013 – Ergonomie du Web

« 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 v (c) 2013 – Ergonomie du Web (source : Amélie Boucher – Ergonomie web illustrée)

« 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 v (c) 2013 – Ergonomie du Web 12% de conversion 25% de conversion

« 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 v (c) 2013 – Ergonomie du Web

v Sommaire 2 2 Processus et méthodes 1 1 Qu’est ce que l’ergonomie ? 3 3 Les critères de Bastien & Scapin (c) 2013 – Ergonomie du web 4 4 Et la qualité web dans tout ça ! 5 5 Pour aller plus loin…

21 Les critères ergonomiques de Bastien & 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

22 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 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.

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

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

26 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).

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

28 Bastien & Scapin – 1/Guidage Feedback immédiat Rassurer l’utilisateur. v1.0 (c) 2013 – Ergonomie du web

29 Bastien & Scapin – 1/Guidage Lisibilité Favoriser la compréhension. v1.0 (c) 2013 – Ergonomie du web

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

31 Bastien & Scapin – 1/Guidage Localisation Permettre à l’utilisateur de se repérer dans le site. v1.0 (c) 2013 – Ergonomie du web

32 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.

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

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

35 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 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 …).

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

38 Bastien & Scapin – 5/Gestion des 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.

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

40 Bastien & Scapin – 6/Homogénéité-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 Bastien & Scapin – 7/Signifiance des 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 Bastien & Scapin – 8/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.

v Sommaire 2 2 Processus et méthodes 1 1 Qu’est ce que l’ergonomie ? 3 3 Les critères de Bastien et Scapin (c) 2013 – Ergonomie du web 4 4 Et la qualité web dans tout ça ! 5 5 Pour aller plus loin…

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é ? Processus support Processus clef (source :Temesis)

Toolbox Sopra Group - July

v Sommaire 2 2 Processus et méthodes 1 1 Qu’est ce que l’ergonomie ? 3 3 Les critères de Bastien et Scapin (c) 2013 – Ergonomie du web 4 4 Et la qualité web dans tout ça ! 5 5 Pour aller plus loin…

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

v (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 Montpellier Informations et inscription sur Le nombre de places étant limité, formez vos équipes de 3 personnes et venez vite vous inscrire !

T O G E T H E RT A L E N T E D Unissons nos Talents T O G E T H E RT A L E N T E D 50 Fin Merci de votre attention … v1.0 (c) 2013 – Ergonomie du web