Issuu on Google+

chapitre en cours

ERGONOMIE WEB

1ère souris informatique, par Douglas Engelbart , 1964 vendredi 23 septembre 11


felt mouse (joey Roth, 2011) http://joeyroth.com/feltmouse/ 2 vendredi 23 septembre 11


felt mouse (joey Roth, 2011) http://joeyroth.com/feltmouse/ vendredi 23 septembre 11


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


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


ERGONOMIE ?

vendredi 23 septembre 11


ERGONOMIE ?

7 vendredi 23 septembre 11


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


L’ HUMAIN Ergonomie = Etude des relations entre L’humain et la technologie

9 vendredi 23 septembre 11


Ergonomie = Etude des relations entre L’humain et la technologie

HUMAIN =

perception vendredi 23 septembre 11

+

cognition

+

ĂŠmotion


Ergonomie = Etude des relations entre L’humain et la technologie

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é,…

vendredi 23 septembre 11


SYSTÈME SENSORIEL > PERCEPTION

12 vendredi 23 septembre 11


Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel

PERCEPTION EXEMPLE _ DALTONISME Concerne 10% hommes, 0.5% femmes

En anglais: Color Blindness vendredi 23 septembre 11


Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel

DALTONISME & WEB

BON OU MAUVAIS? vendredi 23 septembre 11


Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel

DALTONISME & WEB MAUVAIS!

Astuce:

Tester en désaturant l’image, si la fonctionnalité est préservée. vendredi 23 septembre 11


Ergonomie = Etude des relations entre L’humain et la technologie / contraintes chapitre du système en cours sensoriel

SYSTÈME SENSORIEL _ EXEMPLE DE CONTRAINTE

Qu’est-ce qui pose un problème d’utilisabilité ici? 16 vendredi 23 septembre 11


SYSTÈME COGNITIF > COGNITION

17 vendredi 23 septembre 11


Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système cognitif

LA COGNITION 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 18 vendredi 23 septembre 11


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


Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel

vendredi 23 septembre 11


Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel

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 vendredi 23 septembre 11


Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel

BANNER BLINDNESS

22 vendredi 23 septembre 11


Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel

BANNER BLINDNESS

23 vendredi 23 septembre 11


Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel

TUNNEL VISION

24 vendredi 23 septembre 11


Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel

25 vendredi 23 septembre 11


Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système sensoriel

http://www.procreo.jp/labo/labo26.html 26 vendredi 23 septembre 11


chapitre en cours

27 vendredi 23 septembre 11


28 vendredi 23 septembre 11


SYSTÈME ÉMOTIONNEL > ÉMOTIONS

29 vendredi 23 septembre 11


Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système émotionnel

SYSTÈME ÉMOTIONNEL 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

30 vendredi 23 septembre 11


Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système émotionnel

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

vendredi 23 septembre 11


Ergonomie = Etude des relations entre L’humain et la technologie / contraintes du système émotionnel

ENGAGEMENT DE L’UTILISATEUR

Bonheur de l’utilisateur vs. nombre de fonctionnalités de l’interface La hiérarchie des besoins de l’utilisateur

source: http://headrush.typepad.com/ vendredi 23 septembre 11

32


LA TECHNOLOGIE Ergonomie = Etude des relations entre L’humain et la technologie

33 vendredi 23 septembre 11


Ergonomie = Etude des relations entre L’humain et la technologie

TECHNOLOGIE: LE WEB Hardware: PC, Mac, PDA, gsm, iphones, frigo ? Ecrans (résolutions différentes) Software: OS navigateurs

vendredi 23 septembre 11


ENJEU DU COURS Pourquoi est-ce important ?

35 vendredi 23 septembre 11


Enjeux de l’ergonomie

3 ACTEURS, 3 ENJEUX Commanditaire du Site web

Moi (créateur du site)

Utilisateurs du site

«gagner ma vie» «Taux de conversion»

vendredi 23 septembre 11

«Expérience utilisateur»


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


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


3 enjeux : gagner sa vie <> taux de conversion <> expérience utilisateur

ENJEU 2: TAUX DE CONVERSION 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à ?

2,53%

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.

vendredi 23 septembre 11


3 enjeux : gagner sa vie <> taux de conversion <> expĂŠrience utilisateur

40 vendredi 23 septembre 11


3 enjeux : gagner sa vie <> taux de conversion <> expérience utilisateur

TUNNEL DE CONVERSION les étapes qui conduisent à l’action voulue (achat, inscription, formulaire, … )

ex: Page d’accueil > Page catégorie > Page produit > Panier

41 vendredi 23 septembre 11


3 enjeux : gagner sa vie <> taux de conversion <> expĂŠrience utilisateur

42 vendredi 23 septembre 11


3 enjeux : gagner sa vie <> taux de conversion <> expĂŠrience utilisateur

43 vendredi 23 septembre 11


3 enjeux : gagner sa vie <> taux de conversion <> expĂŠrience utilisateur

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 vendredi 23 septembre 11


3 enjeux : gagner sa vie <> taux de conversion <> expérience utilisateur

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 vendredi 23 septembre 11


3 enjeux : gagner sa vie <> taux de conversion <> expérience utilisateur

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 vendredi 23 septembre 11


3 enjeux : gagner sa vie <> taux de conversion <> expérience utilisateur

RÉCAPITULATIF TERMINOLOGIQUE Ergonomie (usability) Utilisabilité Taux de conversion tunnel de conversion Expérience utilisateur Public-cible Cognition, émotion, perception

vendredi 23 septembre 11


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


é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


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


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/

VOIR L’effet McGurk: le même son perçu différemment selon le visuel associé. Etonnant. http://youtu.be/G-lN8vWm3m0

51 vendredi 23 septembre 11


ergonomie-web_cours-1_introduction