Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Ergonomie Web - introduction

pixeline
September 28, 2011

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?

pixeline

September 28, 2011
Tweet

More Decks by pixeline

Other Decks in Design

Transcript

  1. 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
  2. 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
  3. 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
  4. L’ HUMAIN Ergonomie = Etude des relations entre L’humain et

    la technologie 9 vendredi 23 septembre 11
  5. Ergonomie = Etude des relations entre L’humain et la technologie

    HUMAIN = perception cognition émotion + + vendredi 23 septembre 11
  6. 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
  7. 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
  8. DALTONISME & WEB BON OU MAUVAIS? Ergonomie = Etude des

    relations entre L’humain et la technologie / contraintes du système sensoriel vendredi 23 septembre 11
  9. 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
  10. 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
  11. 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
  12. 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
  13. Ergonomie = Etude des relations entre L’humain et la technologie

    / contraintes du système sensoriel vendredi 23 septembre 11
  14. 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
  15. 22 BANNER BLINDNESS Ergonomie = Etude des relations entre L’humain

    et la technologie / contraintes du système sensoriel vendredi 23 septembre 11
  16. 23 BANNER BLINDNESS Ergonomie = Etude des relations entre L’humain

    et la technologie / contraintes du système sensoriel vendredi 23 septembre 11
  17. 24 TUNNEL VISION Ergonomie = Etude des relations entre L’humain

    et la technologie / contraintes du système sensoriel vendredi 23 septembre 11
  18. 25 Ergonomie = Etude des relations entre L’humain et la

    technologie / contraintes du système sensoriel vendredi 23 septembre 11
  19. 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
  20. 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
  21. 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
  22. 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
  23. LA TECHNOLOGIE Ergonomie = Etude des relations entre L’humain et

    la technologie 33 vendredi 23 septembre 11
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 40 3 enjeux : gagner sa vie <> taux de

    conversion <> expérience utilisateur vendredi 23 septembre 11
  30. 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
  31. 42 3 enjeux : gagner sa vie <> taux de

    conversion <> expérience utilisateur vendredi 23 septembre 11
  32. 43 3 enjeux : gagner sa vie <> taux de

    conversion <> expérience utilisateur vendredi 23 septembre 11
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. é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
  39. 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 [email protected] Sujet de l’email : heaj.ergo.web TP1: conversion Echéance: mardi 27 septembre à minuit. vendredi 23 septembre 11
  40. 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