ergonomie-web_cours-1_introduction

chapitre en cours

ERGONOMIE WEB

1ère souris informatique, par Douglas Engelbart , 1964

vendredi 23 septembre 11

2

felt mouse (joey Roth, 2011) http://joeyroth.com/feltmouse/


http://joeyroth.com/feltmouse/


felt mouse (joey Roth, 2011) http://joeyroth.com/feltmouse/




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


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


ERGONOMIE ?


7

ERGONOMIE ?


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]


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

9


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

HUMAIN =

perception cognition émotion+ +


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



SYSTÈME SENSORIEL > PERCEPTION

12


PERCEPTION EXEMPLE _ DALTONISMEConcerne 10% hommes, 0.5% femmes

En anglais: Color Blindness

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


DALTONISME & WEB

BON OU MAUVAIS?



DALTONISME & WEBMAUVAIS!

Astuce: Tester en désaturant l’image, si la fonctionnalité est préservée.



chapitre en cours

SYSTÈME SENSORIEL _ EXEMPLE DE CONTRAINTE

16


Qu’est-ce qui pose un problème d’utilisabilité ici?


SYSTÈME COGNITIF > COGNITION

17


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


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




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



22

BANNER BLINDNESS



23

BANNER BLINDNESS



24

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


25



26

http://www.procreo.jp/labo/labo26.html





chapitre en cours

27


28


SYSTÈME ÉMOTIONNEL > ÉMOTIONS

29


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


http://www.emotionallyvague.com

http://www.emotionallyvague.com

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



ENGAGEMENT DE L’UTILISATEUR

32


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/


http://headrush.typepad.com

http://headrush.typepad.com

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

33


TECHNOLOGIE: LE WEB

Hardware:

PC, Mac, PDA, gsm, iphones, frigo ?

Ecrans (résolutions différentes)

Software:

OS

navigateurs



ENJEU DU COURSPourquoi est-ce important ?

35


Enjeux de l’ergonomie

3 ACTEURS, 3 ENJEUX

Commanditaire du

Site web

Moi(créateur du site)

Utilisateursdu site

«Taux de conversion» «Expérience utilisateur»

«gagner ma vie»


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


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


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à ?

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%


40



TUNNEL DE CONVERSION

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

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

41



42



43



http://www.creativeclub.be/main.php?f=0





















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





http://www.opera.com/

http://www.opera.com/



http://wordpress.org/

http://wordpress.org/

http://fr.pixum.be/

http://fr.pixum.be/

http://www.quatuor.be/

http://www.quatuor.be/

http://www.alistapart.com/

http://www.alistapart.com/

http://www.google.com/

http://www.google.com/

http://www.meteo.be/

http://www.meteo.be/



ENJEU 3: EXPÉRIENCE UTILISATEURLe « 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



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



RÉCAPITULATIF TERMINOLOGIQUE

Ergonomie (usability)

Utilisabilité

Taux de conversion

tunnel de conversion

Expérience utilisateur

Public-cible

Cognition, émotion, perception



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


évaluation du cours

ÉVALUATION DU COURS

Travail journalier: 50%

Examen écrit: 30%

Application des principes vus au cours dans votre TFA: 20%

49


TP1: CONVERSIONParcourir 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

mailto:[email protected]

mailto:[email protected]

lire et voir

LIREImportance du design pour augmenter la conversionhttp://uxmag.com/design/better-first-impressions-through-design

Tunnel de conversion 2.0http://www.fredcavazza.net/2006/04/09/tunnel-de-conversion-20/

51

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


http://uxmag.com/design/better-first-impressions-through-design

http://uxmag.com/design/better-first-impressions-through-design

http://www.fredcavazza.net/2006/04/09/tunnel-de-conversion-20/

http://www.fredcavazza.net/2006/04/09/tunnel-de-conversion-20/

http://youtu.be/G-lN8vWm3m0

http://youtu.be/G-lN8vWm3m0

Documents

ergonomie-web_cours-1_introduction