Ergonomie Web - introduction

Introduction to web usability for junior web designers.

Ergonomie web = relation entre l'humain et la technologie
Qu'est-ce que l'humain? Qu'est-ce que la technologie?
Quelles sont les contraintes physiologiques, émotionnelles, cognitives?
Quelles sont les contraintes logicielles et matérielles?

Transcript

1. chapitre en cours ERGONOMIE WEB 1ère souris informatique, par Douglas Engelbart , 1964 vendredi 23 septembre 11
2. 2 felt mouse (joey Roth, 2011) http://joeyroth.com/feltmouse/ vendredi 23 septembre 11
3. felt mouse (joey Roth, 2011) http://joeyroth.com/feltmouse/ vendredi 23 septembre 11
4. DE QUOI AVEZ-VOUS BESOIN De quoi prendre des notes (sur papier) participer activement au cours considérer votre professeur comme votre client. sauf exception: pas besoin d’ordinateur. 4 vendredi 23 septembre 11
5. objectifs du cours d’ergonomie OBJECTIFS DE CE COURS D’ERGONOMIE WEB Placer l’utilisateur final au centre du processus de création Pouvoir réfléchir en terme d’expérience utilisateur , de public cible et de conversion Acquérir un regard critique sur toute interface, savoir analyser Pouvoir concevoir des sites faciles à utiliser Devenir le maître du monde vendredi 23 septembre 11
6. ERGONOMIE ? vendredi 23 septembre 11
7. 7 ERGONOMIE ? vendredi 23 septembre 11
8. ERGONOMIE = Etude des relations entre l’Humain et la Technologie Problématique de l’utilisabilité d’un outil, son interfaçage à l’homme. Démarche de l’ergonomie = démarche centrée sur l’utilisateur final « For a list of all the ways technology has failed to improve the quality of life, please dial three. » ~ Alice Kahn «Une technologie n'est pas un objet indépendant et étranger, elle fait intégralement partie de notre appareil sensoriel (…) » ~ LAb[au] vendredi 23 septembre 11
9. L’ HUMAIN Ergonomie = Etude des relations entre L’humain et la technologie 9 vendredi 23 septembre 11
10. Ergonomie = Etude des relations entre L’humain et la technologie HUMAIN = perception cognition émotion + + vendredi 23 septembre 11
11. HUMAIN Notre humanité émerge de l’interaction entre nos 3 sous-systèmes cognitif + sensoriel + émotionnel Chaque système impose ses contraintes et limites au web design Cognitif: déficit d’attention, ... Émotif: sensation d’être perdu > on quitte le site, colère > impatience... sensoriel: daltonisme, cécité,… Ergonomie = Etude des relations entre L’humain et la technologie vendredi 23 septembre 11
12. SYSTÈME SENSORIEL > PERCEPTION 12 vendredi 23 septembre 11
13. PERCEPTION EXEMPLE _ DALTONISME Concerne 10% hommes, 0.5% femmes En anglais: Color Blindness Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel vendredi 23 septembre 11
14. DALTONISME & WEB BON OU MAUVAIS? Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel vendredi 23 septembre 11
15. DALTONISME & WEB MAUVAIS! Astuce: Tester en désaturant l’image, si la fonctionnalité est préservée. Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel vendredi 23 septembre 11
16. chapitre en cours SYSTÈME SENSORIEL _ EXEMPLE DE CONTRAINTE 16 Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel Qu’est-ce qui pose un problème d’utilisabilité ici? vendredi 23 septembre 11
17. SYSTÈME COGNITIF > COGNITION 17 vendredi 23 septembre 11
18. LA COGNITION 18 Tous les mécanismes de traitement de l’information. mécanismes de bas niveau (ex: la vue, la peur) mécanismes de haut niveau (ex: la pensée consciente) création de l’expérience de la réalité. «j’existe» ( alleluyah ). siège: le cerveau importance pour nous: cruciale Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système cognitif vendredi 23 septembre 11
19. David McCandless - «low Resolution» visualise la quantité d’information sensorielle traitée par le cerveau par seconde selon le mode sensoriel: vue, touché, ouïe + odorat, goûter. Le petit point blanc en bas à droite est la partie perçue consciemment. source: Information is Beautiful, p.104 19 vendredi 23 septembre 11
20. Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel vendredi 23 septembre 11
21. QUELQUES CONSÉQUENCES SUR LE WEB DESIGN banner blindness “cécité aux bannières” : à l’usage, on apprend à éviter les pubs tunnel vision «vision de tunnel» : la part de vision qui n’est pas périphérique 21 Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel vendredi 23 septembre 11
22. 22 BANNER BLINDNESS Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel vendredi 23 septembre 11
23. 23 BANNER BLINDNESS Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel vendredi 23 septembre 11
24. 24 TUNNEL VISION Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel vendredi 23 septembre 11
25. 25 Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel vendredi 23 septembre 11
26. 26 http://www.procreo.jp/labo/labo26.html Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel vendredi 23 septembre 11
27. chapitre en cours 27 vendredi 23 septembre 11
28. 28 vendredi 23 septembre 11
29. SYSTÈME ÉMOTIONNEL > ÉMOTIONS 29 vendredi 23 septembre 11
30. SYSTÈME ÉMOTIONNEL 30 l’individu «évalue» l’événement / la situation rapporté par son système sensoriel > production d’une émotion. (appraisal theory) Question intéressante: représenter l’émotion _ emotionallyvague.com Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système émotionnel vendredi 23 septembre 11
31. SYSTÈME ÉMOTIONNEL Futur du web: s’intéresser à l’aspect psychologique et émotionnel de ce que vous concevez Objectif: créer des utilisateurs passionnés, des «évangélistes» ! Emotions de base: Joie, Tristesse, Dégoût, Peur , Colère , Surprise Comparez votre relation à un toaster % relation à votre iPod, à Facebook / twitter % au site de la maison blanche Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système émotionnel vendredi 23 septembre 11
32. ENGAGEMENT DE L’UTILISATEUR 32 Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système émotionnel La hiérarchie des besoins de l’utilisateur Bonheur de l’utilisateur vs. nombre de fonctionnalités de l’interface source: http://headrush.typepad.com/ vendredi 23 septembre 11
33. LA TECHNOLOGIE Ergonomie = Etude des relations entre L’humain et la technologie 33 vendredi 23 septembre 11
34. TECHNOLOGIE: LE WEB Hardware: PC, Mac, PDA, gsm, iphones, frigo ? Ecrans (résolutions différentes) Software: OS navigateurs Ergonomie = Etude des relations entre L’humain et la technologie vendredi 23 septembre 11
35. ENJEU DU COURS Pourquoi est-ce important ? 35 vendredi 23 septembre 11
36. Enjeux de l’ergonomie 3 ACTEURS, 3 ENJEUX Commanditaire du Site web Moi (créateur du site) Utilisateurs du site «Taux de conversion» «Expérience utilisateur» «gagner ma vie» vendredi 23 septembre 11
37. 3 enjeux : gagner sa vie <> taux de conversion <> expérience utilisateur ENJEU 1: TU GAGNERAS TA VIE Ergonomie = point fondamental du succès ou de l’échec d’un site internet. site joli mais inutilisable = inutilisé. Succès = client content = d’autres missions = plus d’argent 37 vendredi 23 septembre 11
38. chapitre en cours Le taux de conversion est la proportion de visiteurs du site qui vont réaliser l’acte de conversion, càd, la ou les opérations constituant la raison d’être du site Exemple: Si le site espère que vous allez vous inscrire à la mailinglist, une conversion est lorsqu’un visiteur remplit le formulaire d’inscription et l’envoie. Si le site vend des vélos et que le visiteur en achète un, c’ est une conversion. L’ergonomie est une démarche qui veille à ce que l’utilisateur n’aie pas de problèmes pour trouver le bouton « acheter » lorsqu’il doit le voir, et que tout ce qui apparaitra suite à son click l’aidera plutôt que l’empêchera de réaliser l’acte de conversion. 38 vendredi 23 septembre 11
39. ENJEU 2: TAUX DE CONVERSION 3 enjeux : gagner sa vie <> taux de conversion <> expérience utilisateur Le taux de conversion est la proportion de visiteurs du site qui vont réaliser l’acte de conversion, c-à-d, la ou les opérations constituant la raison d’être du site. Exemple: Si le site espère que vous allez vous inscrire à la mailinglist, une conversion est lorsqu’un visiteur remplit le formulaire d’inscription et l’envoie. Si le site vend des vélos et que le visiteur en achète un sur le site, c’est une conversion. Si ce jour-là il y a eu 1253 visiteurs uniques et qu’il y a eu 35 ventes, quel sera le taux de conversion ce jour là ? Plus le taux de conversion est élevé, plus le ROI (Return On Investment) du commanditaire du site est élevé. Si votre site est inutilisable par les visiteurs, la conversion sera faible. L’ergonomie représente donc un enjeu «business» très important. 2,53% vendredi 23 septembre 11
40. 40 3 enjeux : gagner sa vie <> taux de conversion <> expérience utilisateur vendredi 23 septembre 11
41. TUNNEL DE CONVERSION les étapes qui conduisent à l’action voulue (achat, inscription, formulaire, … ) ex: Page d’accueil > Page catégorie > Page produit > Panier 41 3 enjeux : gagner sa vie <> taux de conversion <> expérience utilisateur vendredi 23 septembre 11
42. 42 3 enjeux : gagner sa vie <> taux de conversion <> expérience utilisateur vendredi 23 septembre 11
43. 43 3 enjeux : gagner sa vie <> taux de conversion <> expérience utilisateur vendredi 23 septembre 11
44. EXERCICE: TROUVEZ LE OU LES ACTES DE CONVERSION DES SITES SUIVANTS http://www.jvweb.fr/ http://www.opera.com http://www.euro-effie.com/ http://wordpress.org http://fr.pixum.be http://www.quatuor.be http://www.alistapart.com http://www.google.com http://www.meteo.be http://www.abconcerts.be/fr 3 enjeux : gagner sa vie <> taux de conversion <> expérience utilisateur vendredi 23 septembre 11
45. ENJEU 3: EXPÉRIENCE UTILISATEUR Le « voyage » ou laps de temps, ou séquence d’actions se déroulant depuis le début de la séance de surf (moteur de recherche, homepage…) jusqu’au moment où l’utilisateur quitte le site. Besoins de l’utilisateur Performance (chargement rapide, affichage clair) Satisfaction (il trouve facilement ce qu’il cherche, pas de bug) sécurité (où suis-je? que puis-je faire sur ce site?) Qualité de service (ex: suivi de commandes, support technique, etc.) Mais encore: trouver ce qu’on cherche, simplement, rapidement réponse complète, gratuité, personnalisation, plaisir esthétique, pas devoir répéter des actions, pas de bugs, téléchargement rapide 3 enjeux : gagner sa vie <> taux de conversion <> expérience utilisateur vendredi 23 septembre 11
46. ENJEU 3: EXPÉRIENCE UTILISATEUR Le « voyage » ou laps de temps, ou séquence d’actions se déroulant depuis le début de la séance de surf (moteur de recherche, homepage…) jusqu’au moment où l’utilisateur quitte le site. Besoins de l’utilisateur Performance (chargement rapide, affichage clair) Satisfaction (il trouve facilement ce qu’il cherche, pas de bug) sécurité (où suis-je? que puis-je faire sur ce site?) Qualité de service (ex: suivi de commandes, support technique, etc.) Mais encore: trouver ce qu’on cherche, simplement, rapidement réponse complète, gratuité, personnalisation, plaisir esthétique, pas devoir répéter des actions, pas de bugs, téléchargement rapide 46 3 enjeux : gagner sa vie <> taux de conversion <> expérience utilisateur vendredi 23 septembre 11
47. RÉCAPITULATIF TERMINOLOGIQUE Ergonomie (usability) Utilisabilité Taux de conversion tunnel de conversion Expérience utilisateur Public-cible Cognition, émotion, perception 3 enjeux : gagner sa vie <> taux de conversion <> expérience utilisateur vendredi 23 septembre 11
48. les TP LES TP TP A RENDRE: ERGONOMIE WEB: TP1: 10 actes de conversion (pour le 2ème cours d'Ergonomie) TP2: Capture d’expérience-utilisateur TP3: Public cible - Persona TP4: Gestalt 48 vendredi 23 septembre 11
49. évaluation du cours ÉVALUATION DU COURS Travail journalier: 50% Examen écrit: 30% Application des principes vus au cours dans votre TFA: 20% 49 vendredi 23 septembre 11
50. TP1: CONVERSION Parcourir le web et trouver 10 actes de conversion différents (pas forcément sur le même site). Pour chacun: Faire une capture d’écran (utiliser par ex. Skitch ) indiquer d’une flèche la zone de l’écran correspondant à la conversion indiquer s’il s’agit d’un acte de conversion ou de l’entrée d’un tunnel de conversion explicatif de l’acte attendu et ce qu’il apporte comme valeur ajoutée. Critères d’évaluation: qualité de la recherche (variété des échantillons rapportés), pertinence des explications, ergonomie du document, orthographe, respect des consignes Mettre le tout dans un PDF de 11 pages: les 10 écrans + 1 page d’accueil avec le titre, votre classe, nom et prénom et la date ne pas attacher le fichier mais me communiquer l’url où le télécharger nom du fichier: <prenom.nom>.ergo.TP1.<classe>.pdf alexandre.plennevaux@prof.heaj.be Sujet de l’email : heaj.ergo.web TP1: conversion Echéance: mardi 27 septembre à minuit. vendredi 23 septembre 11
51. lire et voir LIRE Importance du design pour augmenter la conversion http://uxmag.com/design/better-first-impressions-through-design Tunnel de conversion 2.0 http://www.fredcavazza.net/2006/04/09/tunnel-de-conversion-20/ 51 VOIR L’effet McGurk: le même son perçu différemment selon le visuel associé. Etonnant. http://youtu.be/G-lN8vWm3m0 vendredi 23 septembre 11